/* Member Enrolment Section Styles */
.member-enrolment {
  position: relative;
  overflow: hidden;
  padding-top: 3.625rem; /* 58px */
  padding-bottom: 3.625rem; /* 58px */
}

/* Header */
.enrolment-header {
  margin-bottom: 3.75rem; /* 60px */
  position: relative;
  padding-left: 4.6875rem;
}

.enrolment-eyebrow {
  font-family: "Lexend", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1rem; /* 16px */
  letter-spacing: 0.4375rem; /* 7px */
  text-transform: uppercase;
  background: var(--enaya-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  position: relative;
  margin: 0;
}
.enrolment-eyebrow:after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 0.5625rem); /* 9px */
  width: 6.375rem; /* 102px */
  height: 2px;
  background: var(--enaya-gradient);
}
.enrolment-title {
  font-family: "Lexend", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 4.375rem; /* 70px */
  line-height: 4.625rem; /* 74px */
  letter-spacing: -0.0625rem; /* -1px */
  color: #000000;
  margin: 0;
  margin-top: 3.375rem; /* 54px */
}
.card-icon,
.card-icon img {
  height: 4rem;
  width: 4rem;
  object-fit: contain;
}
/* Slider Wrapper */
.enrolment-slider-wrapper {
  position: relative;
  padding-left: 4.6875rem;
}

.enrolment-swiper .swiper-scrollbar-drag {
  background: #37818d;
}

.enrolment-swiper .swiper-horizontal > .swiper-scrollbar,
.enrolment-swiper .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: initial;
  margin-top: 2.8125rem; /* 45px */
  height: 0.4375rem; /* 7px */
}

/* Drag Indicator */
.drag-indicator {
  position: absolute;
  width: 6.25rem; /* 100px */
  height: 6.25rem; /* 100px */
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Initial styling, JS will move it or it can be static */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; /* Hidden by default, show on hover via JS or CSS */
}

.drag-indicator img {
  width: 100%;
  height: 100%;
}

/* Show Drag on hover over swiper */
.enrolment-slider-wrapper:hover .drag-indicator {
  display: flex;
}

.enrolment-slider-wrapper:hover {
  cursor: none;
}

.swiper-slide {
  width: auto; /* removed to use slidesPerView: 2.5 */
  height: auto;
  opacity: 1; /* Adjust if needed */
}

/* Card Styles */
.enrolment-card {
  position: relative;
  width: 100%;
  height: 41.4375rem; /* 663px */
  border-radius: 1.875rem; /* 30px */
  overflow: hidden;
  background: #d9d9d9;
}

.card-image img {
  width: 100%;
  height: 100%;
}

.card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(70, 70, 71, 0) 68.93%, #464647 100%);
  mix-blend-mode: multiply;
  opacity: 0.6;
  border-radius: 1.875rem; /* 30px */
  pointer-events: none;
}

.card-content {
  position: absolute;
  bottom: 3.125rem; /* 50px */
  left: 2.5rem; /* 40px */
  right: 2.5rem; /* 40px */
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
}

.card-title {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 3.125rem; /* 50px */
  line-height: 3.125rem; /* 50px */
  letter-spacing: -0.0625rem; /* -1px */
  color: #ffffff;
  margin: 0;
}

.card-desc {
  font-family:
    "Lexend", sans-serif; /* Fallback to Lexend as Dubai might be custom */
  font-weight: 400;
  font-size: 1.375rem; /* 22px */
  line-height: 1.875rem; /* 30px */
  color: #ffffff;
  margin: 0;
  max-width: 40rem; /* 640px */

  /* Animation Initial State */
  max-height: 0;
  opacity: 0;
  transform: translateY(1.25rem); /* 20px */
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother and slower transition */
}

.enrolment-card:hover .card-desc {
  max-height: 12.5rem; /* 200px */
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.625rem; /* 10px */
}

/* Image Zoom Effect */
.card-image img {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  height: 41.4375rem;
  object-fit: cover;
}

.enrolment-card:hover .card-image img {
  transform: scale(1.1);
}

.card-circle-top {
  position: absolute;
  right: 2.5rem; /* 40px */
  top: 3.75rem; /* 60px */
  /* background: #FFFFFF; Removed to let inner elements handle visuals */
  border-radius: 50%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.6s ease-in-out;
  cursor: pointer;
}

.enrolment-card:hover .card-circle-top {
  width: 2.875rem; /* 46px */
  height: 2.875rem; /* 46px */
}

.card-circle-top .dot {
  border: 1px solid #ffff;
  height: 1.875rem; /* 30px */
  width: 1.875rem; /* 30px */
  position: absolute;
  border-radius: 100%;
  background-color: #fff;
  transition: all 0.6s ease-in-out;
  transform: scale(1);
  opacity: 1;
}

.enrolment-card:hover .card-circle-top .dot {
  transform: scale(0);
  opacity: 0;
}

.card-circle-top svg {
  opacity: 0;
  transform: scale(0);
  transition: all 0.6s ease-in-out;
  width: 100%; /* SVG fills the container */
  height: 100%;
}

.enrolment-card:hover .card-circle-top svg {
  opacity: 1;
  transform: scale(1);
}

/* Responsiveness */

@media (min-width: 768px) and (max-width: 1024px) {
  .enrolment-card {
    height: 26.4375rem;
  }
}

@media (max-width: 530px) {
  .swiper-slide {
    width: 100% !important;
  }
  .enrolment-card {
    height: 29.25rem; /* 500px - Reduce height for mobile */
  }
  .card-title {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}