/* ==========================================
   FONT SETUP
========================================== */
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham.woff2") format("woff2"),
    url("fonts/Gotham.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
   GLOBAL & TYPOGRAPHY
========================================== */
html {
  scroll-behavior: smooth;
}
body,
p {
  line-height: 1.5;
  text-align: left;
  margin: 0;
  padding: 0;
}
.posts-container a {
  text-decoration: underline;
}
.posts-container .list-group a {
  text-decoration: none;
}

/* ==========================================
   SWIPER STYLES
========================================== */
.swiper {
  width: 320px;
  height: 450px;
  padding: 10px;
}
.swiper-slide {
  border-radius: 10px;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
}

/* background pictures */

.swiper-slide:nth-child(1n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/4.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(2n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/5.webp") no-repeat 50%
      0% / cover;
}

.swiper-slide:nth-child(3n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/3.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(4n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/2.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(5n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/1.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(6n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/6.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(7n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/7.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(8n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/8.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(9n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/9.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(10n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/10.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(11n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/11.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(12n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/12.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(12n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/13.webp") no-repeat 50%
      50% / cover;
}

.swiper-slide:nth-child(12n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://usls.edu.ph/uploads/geared-up/beu-cards/14.webp") no-repeat 50%
      50% / cover;
}

/* ==========================================
   QUICKLINKS & SERVICES for askbeu
========================================== */
.quickrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.quickrow h4 {
  text-align: center;
  padding-top: 10%;
  font-weight: 600;
  color: #60b258;
  position: relative;
}
.service {
  text-align: center;
  padding: 25px 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  max-height: 450px;
  transition: transform 0.5s, background 0.5s;
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
}
.service i {
  font-size: 45px;
  color: #60b258;
}
.service:hover {
  background: #60b258;
  color: #fff;
  transform: scale(1.05);
}
.service:hover i,
.service:hover h4 {
  color: #fff;
}

/* ==========================================
   RESPONSIVE TWEAKS
========================================== */
@media (max-width: 768px) {
  .swiper {
    width: 200px;
    height: 350px;
  }
  .live-your-passion-header h2 {
    font-size: 28px;
    padding-top: 32.5px;
  }
  .quickrow {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .card-title {
    text-align: center;
  }
}

.custom-accordion-wrapper .accordion-button {
  font-size: 1.25rem;
  font-weight: 600;
  background-color: transparent !important;
  color: #60b258;
  border: none;
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  color: inherit !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.custom-accordion-wrapper .accordion-button:hover,
.custom-accordion-wrapper .accordion-button:focus,
.custom-accordion-wrapper .accordion-button:active {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-decoration: none;
  outline: none;
  cursor: default;
}

.custom-accordion-wrapper .accordion-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/*ADMISSION AND ENROLLMENT STEPS ACCORDION*/
.accordion-steps .accordion-button {
  padding: 20px 20px 10px 0px;
}

.accordion-steps .accordion-body {
  padding-bottom: 10px;
}

.accordion-steps-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1rem 0.5rem 0;
  font-size: 1rem;
  color: #212529;
  background-color: white;
  text-align: left;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    border-radius 0.15s ease;
}

.accordion-steps-button:not(.collapsed) {
  color: #f5f5f5;
}

.accordion-steps-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.accordion-steps-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.accordion-steps-header {
  margin-bottom: 0;
}

.accordion-body {
  padding: 1rem 1.25rem;
}

.admission-steps ul.timeline {
  list-style-type: none;
  position: relative;
}

.admission-steps ul.timeline:before {
  content: " ";
  background: #d4d9df;
  display: inline-block;
  position: absolute;
  left: 29px;
  width: 2px;
  height: 100%;
  z-index: 400;
  margin-top: 10px;
}

.admission-steps ul.timeline > li {
  padding-left: 30px;
}

.admission-steps ul.timeline > li:before {
  content: " ";
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #60b258;
  left: 22.5px;
  width: 15px;
  height: 15px;
  z-index: 400;
  margin-top: 10px;
}

.accordion-body p,
li {
  font-size: medium;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.custom-accordion-wrapper .accordion,
.custom-accordion-wrapper .accordion:hover {
  background-color: transparent;
}

.accordion,
.accordion:hover {
  background-color: transparent;
}

.timeline li,
p {
  font-size: medium;
}

.btn-beu {
  background-color: #60b258;
  color: white;
}

.btn-beu:hover {
  background-color: #00994a;
  color: white;
}

.text-beu {
  color: #60b258;
}

.list-group-item.active {
  background-color: #60b258;
}