/* ============================== */
/* Preloader Styles */
/* ============================== */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff8fc; /* Rehema's light feminine color */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
}
/* dark mode fixing */ /* Default (Light mode) */
/* .logo-loader.dark-logo,
.logo-footer.dark-logo {
  display: none;
} */

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .logo-loader.light-logo {
    display: none;
  }

  .logo-loader.dark-logo {
    display: inline;
  }

  #preloader {
    background-color: #1a1a1a; /* Dark background for iPhone Safari */
  }
}

/* Dark mode fixing end */
.logo-loader {
  width: 80px;
  animation: fadeInScale 1.6s ease-in-out infinite alternate;
}

/* Keyframes for scaling + fade effect */
@keyframes fadeInScale {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* When page is fully loaded, hide preloader */
body.loaded #preloader {
  opacity: 0;
  pointer-events: none;
}
/* *********************************** */
/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background-color: #fefbfc;
  /* background-image: linear-gradient(90deg, #461237, #581745); */

  /* Because we want the header to be sticky later */
  height: 9.6rem;
  padding: 0 4.8rem;
  position: relative;
}
.logo {
  height: 5.2rem;
  /* margin-left: 8.2rem; */
}
/* *********************************** */
/* NAVIGATION */
.main-nav {
  background-color: rgba(254, 251, 252, 0.127);
}
.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3.2rem;
  /* background-color: #fefbfc; */
}
.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
}
.main-nav-link:hover,
.main-nav-link:active {
  color: #581745;
}
.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 10px;
  background-color: #eeadcd;
  color: #581745;
}
.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
  background-color: #f0b5d2;
  color: #581745;
}
/* ROTATING BORDER LINE EFEECT */

/* MOBILE */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}
.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}
.icon-mobile-nav[name="close-outline"] {
  display: none;
}
/* STICKY NAVIGATION */
.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(250, 249, 250, 0.96);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}
.sticky .section-hero {
  margin-top: 9.6rem;
}
/* *********************************** */
/* SECTION HERO */
.section-hero {
  background-image: linear-gradient(90deg, #461237, #581745);
}

.hero {
  /* This is a Grid Container */
  /* background-color: blue; */
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
}
/* .hero-img-box {
} */

.hero-description {
  /* font-family: roboto, sans-seif; */
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 4.8rem;
  color: #fbf6f7;
}

.hero-img {
  width: 100%;
  /* border-radius: 8px; */
}

.students-abroad {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 8rem;
}
.students-imgs {
  display: flex;
}
.students-imgs img {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  margin-right: -1.6rem;
  border: 3px solid #fbf6f7;
}
.students-imgs img:last-child {
  margin: 0;
}
.students-text {
  font-size: 1.8rem;
  font-weight: 600;
  color: #fbf6f7;
  line-height: 1.07;
}

.students-text span {
  color: #eeadcd;
  font-weight: 700;
  line-height: 1.2;
} /* Typing text animation with gradient color */
.typed-gradient {
  font-weight: 800;
  font-size: 5.2rem;
  display: inline-block;
  /* color: #d5b3d6; */
  background: linear-gradient(18deg, #00c9a4, #e0aaff, #692e58);
  /* background: linear-gradient(18deg, #165bff, #1cbff9, #dcb0ff);
  background: linear-gradient(90deg, #fff, #165bff, #1cbff9, #eeadcd);
  background: linear-gradient(90deg, #1cbff9, #eeadcd); */

  background-clip: text; /* Standard property */
  -webkit-background-clip: text; /* WebKit-specific */
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  /* animation: shine 3s linear infinite; */
}

.cursor {
  font-weight: 600;
  color: #d5b3d6;
  color: #fff;
  animation: blink 0.7s infinite;
  z-index: -999px;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* *********************************** */
/*PARTNERS SECTION */
.section-partners {
  padding: 4.8rem 0 3.2rem 0;
  background-color: #fdf7fa;
  scroll-snap-align: start;
}
.heading-trusted-partners {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2.4rem;
  color: #888;
  /* color: #fff; */
}
.logos {
  display: flex;
  justify-content: space-around;
}
.logos img {
  height: 4rem;
  filter: brightness(0);
  opacity: 50%;
}

/* *********************************** */
/* ABOUT SECTION */
.section-about {
  /* scroll-snap-align: start; */
  min-height: 100vh;
  padding: 9.6rem 0;
  background-color: #fefbfc;
}

.about {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
  overflow: hidden;
  transition: all 0.4s;
}
.about:hover {
  transform: translateY(-1.2rem);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}
.about-content {
  padding: 3.2rem 4.8rem 4.8rem 4.8rem;
  padding: 3.2rem 3.2rem 4.8rem 3.2rem;
}
.about-tags {
  margin-bottom: 1.2rem;
  display: flex;
  gap: 0.4rem;
}
.tag {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  background-color: #581745;
  color: #fff;
  border-radius: 100px;
  font-weight: 600;
}
.tag--watch {
  background-color: #581745;
}
.tag--here {
  background-color: #581745;
}
.tag--there {
  background-color: #581745;
}

/* for youtube rapper */
/* YouTube Embed Styling */
.youtube-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.youtube-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-button img {
  width: 80px;
  height: 80px;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.play-button img:hover {
  opacity: 1;
}

/* Watch Button */
.watch-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #cfa15d;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s;
}

.watch-btn:hover {
  background-color: #a98048;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #333;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
}

.close-btn:hover {
  background-color: #111;
}

/* End for youtube rapper */
/* Overlay Styles */
.youtube-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.youtube-overlay.hidden {
  display: none;
}

.youtube-player-container {
  position: relative;
  width: 90%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.youtube-player-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
}

.close-btn {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: #fff;
  color: #000;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.about-title {
  font-size: 2.4rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 3.2rem;
}
.about-descriptions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.about-description {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.about-icon {
  width: 2.4rem;
  height: 2rem;
  color: #581745;
}

.about-description,
.about-icon span {
  color: #444;
}
.about-img {
  width: 100%;
}
.all-links {
  text-align: center;
  font-size: 1.8rem;
}
.mission {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.mission-text {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  color: #444;
}
.mission-text span {
  word-break: break-word; /* break long words if any */
}
.mission-icon {
  /* width: 3rem;
  height: 3rem;
  color: #581745; */
  flex-shrink: 0; /* Prevent icon from shrinking */
  width: 1.8rem; /* fixed icon width */
  height: 1.8rem; /* fixed icon height */
  color: #581745;
  margin-top: 0.2rem; /* vertically align icon better */
}
/* *********************************** */
/* ACHIEVEMENT SECTION */
.section-achievement {
  padding: 9.6rem 0;
  background-color: #f9f9f9;
  background-color: #fefbfc;
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 6.4rem; /* space between each row */
}

.achievement-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4.8rem;
}

.achievement-img-box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}

.achievement-img-box::before,
.achievement-img-box::after {
  content: "";
  display: block;
  border-radius: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.achievement-img {
  display: block;
  width: 70%;
  max-width: 40rem;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  z-index: 1;

  transition: all 0.4s;
}
.achievement-img:hover {
  transform: scale(1.1);
}

.achievement-text-box {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.achievement-number {
  font-size: 5.6rem;
  font-weight: 700;
  color: #bbb;
  color: #aaa;
}

.achievement-description {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #444;
}

/* Responsive for mobile */
@media (max-width: 48em) {
  .achievement-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .achievement-img-box,
  .achievement-text-box {
    justify-content: center;
    align-items: center;
  }

  .achievement-img {
    display: block;
    width: 70%;
    transition: all 0.4s;
  }
  .achievement-img:hover {
    transform: scale(1.1);
  }
  .container {
    text-align: center;
  }
  .testimonial-container,
  .center-text {
    text-align: center;
  }
  #typed-text {
    min-width: 250px; /* or based on your longest word */
    display: inline-block;
  }
}

/* *********************************** */
/* TESTIMONIALS SECTION */
.section-testimonials {
  padding: 9.6rem 0;

  background-color: #fdf7fa;
  display: grid;
  /* grid-template-columns: 55fr, 45fr; */
  /* If it works don't touch it */
  align-items: center;
}
.testimonial-container {
  padding: 9.6rem;
}
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  row-gap: 4.8rem;
  column-gap: 8rem;
}
.testimonial-img {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
}
.testimonial-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  color: #555;
}
.testimonial-name {
  font-size: 1.6rem;
  color: #777;
  line-height: 1.6;
}

/* *********************************** */
/* Masonry Gallery Styling*/

.gallery {
  column-count: 4;
  column-gap: 1rem;
  padding: 4.6rem;
}

/* Each gallery item should be a block that won't break across columns */
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 8px;
}

/* Image styles */
.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.4s ease;
  object-fit: cover;
}

/* Hover effect for a little interactivity */
.gallery-img:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/********** Responsive Adjustments **********/

@media (max-width: 1200px) {
  .gallery {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  .gallery {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .gallery {
    column-count: 1;
  }
}

/* *********************************** */
/* SERVICES SECTION */
.section-services {
  padding: 9.6rem 0;
  background-image: linear-gradient(90deg, #461237, #581745);
}
.subheading-services {
  color: #fbf6f7 !important;
}
.heading-secondary--services {
  color: #fbf6f7 !important;
}
.heading-tertiary--services {
  color: #fbf6f7 !important ;
}
.service-list {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  color: #fbf6f7;
  margin-bottom: 4.8rem; /* Or larger */
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4.8rem;
}

.service-text-box {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.service-number {
  font-size: 6.2rem;
  font-weight: 600;
  color: #bbb;
  color: #fbf6f7;
}

.service-description {
  font-size: 1.8rem;
  line-height: 1.8;
}

.service-ideal {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #444;
  color: #fbf6f7;
}

.service-img-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.service-img-box::before,
.service-img-box::after {
  content: "";
  display: block;
  border-radius: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.service-img {
  width: 90%;
  max-width: 40rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  z-index: 1;
  border-radius: 8px;
  transition: all 0.4s;
}
.service-img:hover {
  transform: scale(1.1);
}
.link-service:link,
.link-service:visited {
  /* background-color: #3981e0; */
  color: #fbf6f7;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-bottom: 2px;
  transition: all 0.3s;
}
.link-service:hover,
.link-service:active {
  color: #f7f0f7;
  border-bottom: 1px solid transparent;
}
/* RESPONSIVE */
@media (max-width: 48em) {
  .service-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .service-img-box,
  .service-text-box {
    justify-content: center;
    align-items: center;
  }

  .service-img {
    width: 70%;
  }
}

/* *********************************** */
/* PRICING SECTION */
.section-pricing {
  padding: 9.6rem 0;
  background-color: #fdf7fa;
}

.pricing-plan {
  width: 100%;
  background-color: #fbf6f7;
  background-color: #fff;
  color: #090207;
  padding: 3.2rem;

  border-radius: 11px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
}

.plan-header {
  text-align: center;
  margin-bottom: 4.8rem;
}
.plan-name {
  color: #581745;
  /* color: #090207; */
  font-weight: 600;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.75;
  margin-bottom: 3.2rem;
}

.plan-price {
  font-size: 6.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.6rem;
}
.plan-price span {
  font-size: 3rem;
  font-weight: 500;
  margin-right: 0.8rem;
}
.plan-text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #555;
}
.list-icon--feature {
  width: 2rem;
  height: 2rem;
  color: #581745;
}
/* fixing breaking leteers */
.list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.list-item {
  display: flex;
  align-items: flex-start; /* Align icon top with first line of text */
  gap: 0.8rem; /* space between icon and text */
  margin-bottom: 1.2rem; /* spacing between items */
}

.list-icon--feature {
  flex-shrink: 0; /* Prevent icon from shrinking */
  width: 1.8rem; /* fixed icon width */
  height: 1.8rem; /* fixed icon height */
  color: #581745;
  margin-top: 0.2rem; /* vertically align icon better */
}

.list-item span {
  line-height: 1.4;
  font-size: 1.5rem;
  color: #090207;
  word-break: break-word; /* break long words if any */
}

/* Endffix breaking letters */
.plan-sign-up {
  text-align: center;
  margin-top: 4.8rem;
}
.payment-details {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  /* color: #fbf6f7; */
}
/* PRICING TABLE WITH LABEL */
.plan-label {
  width: 100%;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.4rem;
  padding: 0.8rem;
  color: white;
  border-radius: 8px 8px 0 0;
  margin-bottom: 2rem;
}

.plan-label--start {
  background-color: #090207;
}
.plan-label--ready {
  background-color: #090207;
}
.plan-label--best {
  background-color: #f43f5e;
}
.plan-label--popular {
  background-color: #090207;
}

.plan-label--elite {
  /* background: linear-gradient(90deg, #581745, #d8a6b1); */
  background-color: #090207;
}

.plan-sign-up {
  margin-top: 3rem;
  text-align: center;
}

.btn-pricing {
  display: inline-block;
  padding: 1.2rem 2.4rem;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  width: 100%;
}

.btn-full---pricing {
  background-color: #eeadcd !important;
  color: #581745;
}

.btn-full---pricing:hover {
  background-color: #f0b5d2 !important;
  color: #581745;
}

.btn--master {
  border: 2px solid #581745;
  color: #581745;
}
.btn--master:hover {
  /* background-color: #d5b3d6; */
  background-color: #d8a6b1 !important;
  color: #581745;
}
/* pop up message For payment*/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.payment-modal-content {
  background: #fff;
  padding: 3rem;
  max-width: 40rem;
  border-radius: 1rem;
  text-align: center;
  font-size: 1.4rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
  color: #333;
}

.btn-modal {
  margin-top: 2rem;
  padding: 1rem 2rem;
  background-color: #581745;
  color: #fff;
  border: none;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  cursor: pointer;
}

.btn-modal-close {
  margin-top: 1rem;
  padding: 0.8rem 1.6rem;
  background-color: transparent;
  border: 1px solid #ccc;
  color: #555;
  border-radius: 0.5rem;
  font-size: 1.3rem;
  cursor: pointer;
}

/* FEATURES SECTION */
.container-feature {
  /* background-color: #fbf6f7; */
  padding: 9.6rem 0;
}
.feature-icon {
  background-color: #581745;
  color: #fbf6f7;
  height: 3.2rem;
  width: 3.2rem;
  padding: 1.6rem;
  border-radius: 50%;
  margin-bottom: 3.2rem;
}
.feature-title {
  font-size: 2.4rem;
  color: #333;
  color: #23091c;
  /* color: #fbf6f7; */
  font-weight: 700;
  margin-bottom: 1.6rem;
}
.feature-text {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #2c0b23;
}
/* *********************************** */
/* FAQS SECTION */
/* FAQ Section */
.section-faq {
  padding: 9.6rem;
  background-color: #fefbfc;
}

.faq-container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
  text-align: center;
}

.subheading {
  color: #555;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.6rem;
}

.heading-secondary {
  font-size: 3.6rem;
  margin-bottom: 4.8rem;
  color: #333;
}

.faqs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 3.2rem;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}

.faq {
  background-color: #fff;
  border-radius: 12px;
  padding: 2.4rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  text-align: left;
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  font-size: 2rem;
  font-weight: 600;
  color: #090207;
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 2.2rem;
  transition: transform 0.3s ease;
}

.faq-question.active::after {
  content: "-";
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer p {
  margin-top: 1rem;
  font-size: 1.6rem;
  color: #555;
  line-height: 1.6;
}

/* *********************************** */
/* CTA SECTION */
.section-cta {
  /* top/right/bottom/left */
  padding: 9.6rem 0 12.8rem 0;
  /* top/horizontal/left */
  padding: 9.6rem 0 12.8rem;
  background-color: #fefbfc;
}
.cta {
  display: grid;
  /* 2/3 by 1/3 */
  grid-template-columns: 2fr 1fr;
  background-color: #581745;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
  border-radius: 11px;
  background-image: linear-gradient(90deg, #461237, #581745);

  overflow: hidden;
  /* temp */
  /* height: 60rem; */
}
.cta-text-box {
  padding: 4.8rem 6.4rem 6.4rem 6.4rem;
  color: #0d1d32;
  color: #fff;
}
.cta .heading-secondary {
  color: #0d1d32;
  color: #fff;
  margin-bottom: 3.2rem;
}
.cta-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}
.cta-img-box {
  background-image: linear-gradient(
      90deg,
      rgba(88, 23, 68, 0.122),
      rgba(216, 166, 177, 0.195)
    ),
    url(../images/about/about_1.jpg);

  background-size: cover;
}
.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}
.cta-form label {
  display: block;
  /* aligns the text and box in the same level */
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.cta-form input,
.cta-form select {
  width: 100%;
  padding: 1rem;
  font-size: 1.8rem;
  font-family: inherit;
  color: inherit;
  color: #581745;
  border: none;
  background-color: #fbf6f7;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.cta-form input::placeholder {
  color: #ded1da;
}
/* .cta-form select {
} */
/* .cta-form button {
} */
.cta *:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(251, 246, 247, 0.807);
}
/* ===== Modal Success ===== */
/* Spinner style */
.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #581745;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide elements with hidden class */
.hidden {
  display: none !important;
}

/* Error messages styling */
.error-message {
  color: #fff;
  font-size: 1.2rem;
  min-height: 1.4em; /* ensures consistent spacing */
  margin-top: 0.2rem;
  display: block;
}

/* Modal styles (same as before) */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 2rem;
}

.modal-content {
  background-color: #fff;
  color: #333;
  padding: 3rem 2rem;
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.modal-content p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

/* ============================== */
/* MASTERCLASS FORM SECTION */
/* ============================== */
.section-masterclass {
  padding: 9.6rem 2.4rem;

  background-color: #fceff5;
  text-align: center;
}

.section-masterclass .container {
  max-width: 100rem;
  margin: 0 auto;
}

.heading-secondary {
  font-size: 3.2rem;
  font-weight: 700;
  color: #461237;
  margin-bottom: 2.4rem;
}

.masterclass-description {
  font-size: 1.8rem;
  color: #333;
  max-width: 60rem;
  margin: 0 auto 4.8rem auto;
  line-height: 1.6;
}

.section-masterclass iframe {
  width: 100%;
  height: 900px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.05);
}

#btn-top {
  position: fixed;
  bottom: 3.2rem;
  right: 3.2rem;
  background-color: #581745;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 2.4rem;
  padding: 1rem;
  cursor: pointer;
  display: none;
  z-index: 1000;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

#btn-top:hover {
  background-color: #461237;
  transform: scale(1.1);
}

.form-note {
  margin-top: 2.4rem;
  background-color: #fff8fc;
  background-color: #f7f0f7;
  background-color: #fbf6f7;
  padding: 2.4rem;
  border-left: 4px solid #581745;
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #333;
}

/* Responsive Adjustments */

/* Up to 1344px (84em) */
@media (max-width: 84em) {
  .section-masterclass .container {
    max-width: 90rem;
  }
}

/* Up to 1200px (75em) */
@media (max-width: 75em) {
  .section-masterclass {
    padding: 8rem 2rem;
  }
  .section-masterclass .container {
    max-width: 80rem;
  }
  .heading-secondary {
    font-size: 2.8rem;
  }
  .masterclass-description {
    font-size: 1.6rem;
    max-width: 50rem;
    margin-bottom: 3.6rem;
  }
  .section-masterclass iframe {
    height: 700px;
  }
}

/* Up to 1008px (63em) */
@media (max-width: 63em) {
  .section-masterclass {
    padding: 6.4rem 1.6rem;
  }
  .section-masterclass .container {
    max-width: 70rem;
  }
  .heading-secondary {
    font-size: 2.4rem;
  }
  .masterclass-description {
    font-size: 1.5rem;
    max-width: 45rem;
    margin-bottom: 3.2rem;
  }
  .section-masterclass iframe {
    height: 600px;
  }
  .form-note {
    padding: 1.8rem;
    max-width: 60rem;
    font-size: 1.4rem;
  }
}

/* Up to 896px (56em) */
@media (max-width: 56em) {
  .section-masterclass {
    padding: 5.6rem 1.2rem;
  }
  .heading-secondary {
    font-size: 2.2rem;
  }
  .masterclass-description {
    font-size: 1.4rem;
    max-width: 40rem;
    margin-bottom: 3rem;
  }
  .section-masterclass iframe {
    height: 500px;
  }
  .form-note {
    font-size: 1.3rem;
    padding: 1.6rem;
    max-width: 55rem;
  }
}

/* Up to 672px (42em) */
@media (max-width: 42em) {
  .section-masterclass {
    padding: 4.8rem 1rem;
  }
  .heading-secondary {
    font-size: 1.8rem;
    margin-bottom: 1.8rem;
  }
  .masterclass-description {
    font-size: 1.2rem;
    max-width: 35rem;
    margin-bottom: 2.4rem;
  }
  .section-masterclass iframe {
    height: 400px;
  }
  .form-note {
    font-size: 1.1rem;
    padding: 1.2rem;
    max-width: 100%;
  }
}

/* Up to 384px (24em) */
@media (max-width: 24em) {
  .section-masterclass {
    padding: 3.2rem 0.8rem;
  }
  .heading-secondary {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }
  .masterclass-description {
    font-size: 1rem;
    max-width: 100%;
    margin-bottom: 2rem;
  }
  .section-masterclass iframe {
    height: 300px;
  }
  .form-note {
    font-size: 1rem;
    padding: 1rem;
    border-left-width: 3px;
  }
}
/* Payment Options Section */
.payment-section {
  margin-top: 3rem;
  text-align: center;
}

.payment-note {
  font-size: 1.7rem;
  color: #333;
  margin-bottom: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Modal Overlay */
.zenopay-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.4s ease forwards;
}

/* Modal Content */
.zenopay-modal-content {
  background-color: #fff;
  padding: 3rem;
  border-radius: 12px;
  max-width: 700px;
  width: 90%;
  position: relative;
  text-align: center;
  animation: scaleIn 0.4s ease forwards;
}

.mw-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  cursor: pointer;
}

/* Payment iframe */
#mwZenopayIframe {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 8px;
  margin-top: 1.6rem;
}

/* Buttons */
.btn-pay {
  background-color: #581745;
  color: #fff;
  font-size: 1.8rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 1.6rem;
  transition: all 0.3s;
}
.btn-pay:hover {
  transform: scale(1.05);
}

/* Thank You Section */
.thank-you-section {
  display: none;
  margin-top: 2rem;
}
.join-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btn-join {
  background-color: #581745;
  color: #fff;
  font-size: 1.6rem;
  padding: 2rem 4rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s;
}
.btn-join.whatsapp {
  background-color: #25d366;
}
.btn-join:hover {
  transform: scale(1.05);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 75em) {
  #mwZenopayIframe {
    height: 500px;
  }
  .btn-pay,
  .btn-join {
    font-size: 1.7rem;
    padding: 1.8rem 2.8rem;
  }
}
@media (max-width: 56em) {
  #mwZenopayIframe {
    height: 450px;
  }
  .btn-pay,
  .btn-join {
    font-size: 1.4rem;
    padding: 0.7rem 1.6rem;
  }
}
@media (max-width: 42em) {
  #mwZenopayIframe {
    height: 400px;
  }
  .btn-pay,
  .btn-join {
    font-size: 1.2rem;
    padding: 0.6rem 1.2rem;
  }
}
@media (max-width: 24em) {
  #mwZenopayIframe {
    height: 300px;
  }
  .btn-pay,
  .btn-join {
    font-size: 1.5rem;
    padding: 2.5rem 4rem;
  }
}
/* Responsive */ /* RESPONSIVE ADJUSTMENTS FOR PAYMENT SECTION */
@media (max-width: 75em) {
  .payment-note {
    font-size: 1.5rem;
  }
  .btn-pay {
    font-size: 2.4rem;
    padding: 2.7rem 5.7rem;
  }
}

@media (max-width: 63em) {
  .payment-note {
    font-size: 1.4rem;
  }
  .btn-pay {
    font-size: 2.2rem;
    padding: 2.5rem 5.5rem;
  }
}

@media (max-width: 56em) {
  .payment-note {
    font-size: 1.3rem;
  }
  .btn-pay {
    font-size: 2rem;
    padding: 2.3rem 5rem;
  }
}

@media (max-width: 42em) {
  .payment-note {
    font-size: 1.2rem;
  }
  .btn-pay {
    font-size: 1.8rem;
    padding: 2rem 3.8rem;
  }
}

@media (max-width: 24em) {
  .payment-note {
    font-size: 1.1rem;
  }
  .btn-pay {
    font-size: 1.5rem;
    padding: 1.5rem 1.5rem;
  }
}
/* *********************************** */
/* FOOTER */
.footer {
  padding: 9.6rem 2.4rem 4.8rem;
  background-color: #fefbfc;
  border-top: 1px solid #f7edef;
  font-family: inherit;
}

/* ===== GRID FOR LARGE SCREENS ===== */
.grid--footer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4.8rem;
}
.footer-block {
  flex: 1 1 22rem;
  min-width: 22rem;
  max-width: 30rem;
}

.footer-logo {
  display: block;
  margin-bottom: 2.4rem;
}

.logo-footer {
  height: 5.6rem;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #555;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #2b2123;
  transition: all 0.3s;
}
.footer-link:hover,
.footer-link:active {
  color: #461237;
}
.nav-col {
  background-color: #fefbfc;
}
.contacts {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.6;
}
.address {
  margin-bottom: 1.6rem;
  color: #2b2123;
}
.contact-links {
  font-size: 1.5rem;
}

.social-links {
  display: flex;
  list-style: none;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.social-icon {
  height: 2.4rem;
  width: 2.4rem;
  color: #581745;
}

.copyright {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #555;
}

/* PAYMENT ICONS */
.payment-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin: 4.8rem 0 2.4rem;
}
.payment-row img {
  height: 2.8rem;
}
.and-more {
  font-size: 1.4rem;
  color: #444;
  align-self: center;
}

/* BACK TO TOP */

/* ===================================== */
/* ===== RESPONSIVE BREAKPOINTS ======== */
/* ===================================== */

/* Below 75em (1200px) - Tablet Landscape */
@media (max-width: 75em) {
  .grid--footer {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Below 63em (1008px) - Tablet Portrait */
@media (max-width: 63em) {
  .grid--footer {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
  }

  .footer-block:nth-child(1) {
    grid-column: span 3;
    align-items: center;
    text-align: center;
  }
}

/* Below 56em (896px) - Small tablets */
@media (max-width: 56em) {
  .grid--footer {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
  }

  .footer-block:nth-child(1) {
    grid-column: span 2;
    align-items: center;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  .payment-row {
    justify-content: center;
  }
}

/* Below 42em (672px) - Phones */
@media (max-width: 42em) {
  .grid--footer {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }

  .footer-block {
    text-align: center;
    align-items: center;
  }

  .social-links {
    justify-content: center;
  }

  .payment-row {
    justify-content: center;
  }
}

/* Hide dark version of logos by default */
.dark-logo {
  display: none;
}

/* Show dark logo and hide light logo in dark mode */
@media (prefers-color-scheme: dark) {
  .light-logo {
    display: none;
  }

  .dark-logo {
    display: inline;
  }

  /* Optional: adjust backgrounds for better contrast */
  body,
  nav,
  footer,
  #preloader {
    background-color: #000;
    color: #fff;
  }
}

/* For dark Mode */