body {
    font-family: 'Public Sans', sans-serif;
    background: #F4F4F9;
    color: #5d596c;
}

/* NAVBAR */
.navbar {
    padding: 20px 0;
    transition: all 0.35s ease;
    background: rgba(255, 255, 255, 0.10) !important; /* more translucent */
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* subtle glass line */
}

.navbar.scrolled {
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.55) !important; /* more solid but still glass */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* NAVLINKS */
.navbar .nav-link {
    font-weight: 700;
    padding: 8px 14px;
    position: relative;
    margin-right: 0px;
}

/* CTA Buttons */
.navbar .btn {
    font-size: 0.9rem;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Dark Mode */
body.dark-mode .navbar {
    background: rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .navbar.scrolled {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

body.dark-mode {
    background: #121212;
    color: #eaeaea;
}
body.dark-mode .navbar {
    background: rgba(0,0,0,0.35) !important;
}
body.dark-mode .navbar.scrolled {
    background: rgba(0,0,0,0.95) !important;
}


/* Hero with animated gradient */
.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  z-index: 1;
  background: linear-gradient(120deg, #6f86b4 0%, #7a90c1 25%, #5b6fa0 60%, #3f4b80 100%);
  background-size: 300% 300%;
  animation: gradientMove 10s ease-in-out infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glass card effect */
.card-glass {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 1.75rem; /* Bootstrap 28px equivalent */
  backdrop-filter: blur(26px);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}


/* Floating Animation for Lottie */
lottie-player {
    animation: float 4s ease-in-out infinite;
    max-width: 480px;
    margin: 0 auto;
    display: block;
}
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

/* REGISTRATION FORM */
.form-section {
    margin-top: -60px;
    padding: 40px;
    background: white;
    border-radius: 15px;
    box-shadow: 0px 10px 35px rgba(0,0,0,0.1);
    transition: 0.3s;
}
body.dark-mode .form-section {
    background: #1f1f1f;
}

/* Sticky Sidebar CTA */
.sticky-cta {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}
.sticky-cta button {
    border-radius: 50px;
    padding: 15px 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.feature-box {
    background: #F4F4F9;
    border-radius: 20px;
    padding: 20px 0;
}

.feature-box ul li {
    margin-bottom: 10px;
    color: #555;
}

.feature-img {
    max-width: 420px;
}

.counter-section {
    background: #000;
    color: #fff;
}
.counter {
    font-size: 3rem;
    font-weight: 700;
}


.form-label{
  font-size: 12px;
  line-height: 4px;
}

.tncLink{
  color: #000 !important;
}


.triangle {
  clip-path: polygon(0 0, 0 700%, 100% 0);
}

.leftclipbackground {
  background: #474747;
}


/* Aurora particles */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.6);
  filter: blur(2px);
  animation: auroraParticle linear infinite;
  z-index: 0;
  opacity: 0;
}

@keyframes auroraParticle {
  0% { transform: translateX(0px) translateY(0px) scale(0.8) rotate(0deg); opacity: 0; }
  10% { opacity: 0.5; }
  50% { transform: translateX(calc(var(--driftX, 20px))) translateY(-250px) scale(var(--scale,1)) rotate(var(--rotate,0deg)); opacity: 0.4; }
  100% { transform: translateX(calc(var(--driftX, -15px))) translateY(-500px) scale(calc(var(--scale,0.9))) rotate(var(--rotateEnd,90deg)); opacity: 0; }
}


/* Particle properties (same as before) */
.particle:nth-child(1) { width: 5px; height: 5px; left: 5%; animation-duration: 14s; animation-delay: 0s; --driftX: 30px; --scale: 1.1; --rotate: 15deg; --rotateEnd: 45deg;}
.particle:nth-child(2) { width: 7px; height: 7px; left: 15%; animation-duration: 18s; animation-delay: 2s; --driftX: 20px; --scale: 1; --rotate: 5deg; --rotateEnd: 60deg;}
.particle:nth-child(3) { width: 4px; height: 4px; left: 25%; animation-duration: 16s; animation-delay: 1s; --driftX: 25px; --scale: 0.9; --rotate: -10deg; --rotateEnd: 30deg;}
.particle:nth-child(4) { width: 6px; height: 6px; left: 35%; animation-duration: 20s; animation-delay: 3s; --driftX: 35px; --scale: 1.2; --rotate: 0deg; --rotateEnd: 50deg;}
.particle:nth-child(5) { width: 5px; height: 5px; left: 45%; animation-duration: 22s; animation-delay: 4s; --driftX: 28px; --scale: 1; --rotate: 20deg; --rotateEnd: 70deg;}
.particle:nth-child(6) { width: 8px; height: 8px; left: 55%; animation-duration: 18s; animation-delay: 2s; --driftX: 40px; --scale: 1.1; --rotate: -15deg; --rotateEnd: 80deg;}
.particle:nth-child(7) { width: 5px; height: 5px; left: 60%; animation-duration: 19s; animation-delay: 5s; --driftX: 25px; --scale: 1; --rotate: 10deg; --rotateEnd: 50deg;}
.particle:nth-child(8) { width: 6px; height: 6px; left: 70%; animation-duration: 17s; animation-delay: 6s; --driftX: 30px; --scale: 1.2; --rotate: 0deg; --rotateEnd: 60deg;}
.particle:nth-child(9) { width: 4px; height: 4px; left: 75%; animation-duration: 21s; animation-delay: 7s; --driftX: 20px; --scale: 0.9; --rotate: -5deg; --rotateEnd: 40deg;}
.particle:nth-child(10){ width: 7px; height: 7px; left: 80%; animation-duration: 16s; animation-delay: 3s; --driftX: 35px; --scale: 1.1; --rotate: 10deg; --rotateEnd: 70deg;}
.particle:nth-child(11){ width: 5px; height: 5px; left: 10%; animation-duration: 15s; animation-delay: 4s; --driftX: 25px; --scale: 1; --rotate: -10deg; --rotateEnd: 45deg;}
.particle:nth-child(12){ width: 6px; height: 6px; left: 30%; animation-duration: 18s; animation-delay: 1s; --driftX: 30px; --scale: 1.2; --rotate: 5deg; --rotateEnd: 50deg;}
.particle:nth-child(13){ width: 4px; height: 4px; left: 40%; animation-duration: 20s; animation-delay: 2s; --driftX: 20px; --scale: 0.9; --rotate: 0deg; --rotateEnd: 30deg;}
.particle:nth-child(14){ width: 5px; height: 5px; left: 50%; animation-duration: 22s; animation-delay: 3s; --driftX: 25px; --scale: 1.1; --rotate: 15deg; --rotateEnd: 55deg;}
.particle:nth-child(15){ width: 6px; height: 6px; left: 60%; animation-duration: 19s; animation-delay: 5s; --driftX: 35px; --scale: 1.2; --rotate: -10deg; --rotateEnd: 65deg;}
.particle:nth-child(16){ width: 4px; height: 4px; left: 70%; animation-duration: 17s; animation-delay: 6s; --driftX: 20px; --scale: 0.9; --rotate: 5deg; --rotateEnd: 40deg;}
.particle:nth-child(17){ width: 7px; height: 7px; left: 80%; animation-duration: 21s; animation-delay: 7s; --driftX: 40px; --scale: 1.1; --rotate: -5deg; --rotateEnd: 70deg;}
.particle:nth-child(18){ width: 5px; height: 5px; left: 85%; animation-duration: 16s; animation-delay: 3s; --driftX: 30px; --scale: 1; --rotate: 10deg; --rotateEnd: 50deg;}
.particle:nth-child(19){ width: 6px; height: 6px; left: 90%; animation-duration: 18s; animation-delay: 2s; --driftX: 25px; --scale: 1.2; --rotate: -10deg; --rotateEnd: 60deg;}
.particle:nth-child(20){ width: 4px; height: 4px; left: 95%; animation-duration: 20s; animation-delay: 1s; --driftX: 20px; --scale: 0.9; --rotate: 5deg; --rotateEnd: 45deg;}



 /* Wrapper */
.comparison-wrapper {
  position: relative;
  height: 70vh; /* increased height */
  width: 100%;
  background: #000; /* dark background for fade effect */
}

/* Base card */
.comparison-card {
  position: absolute;
  top: 0;
  width: 70%;
  height: 100%;
  transition: opacity 0.5s ease, transform 0.4s ease;
  padding: 4rem; /* generous internal padding */
  box-shadow: 0 25px 80px rgba(0, 0, 0); /* heavy shadow */
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Professional gradients */
.left-card {
  left: 0;
  z-index: 2;
  opacity: 1;
  background: linear-gradient(135deg, #2a3f54, #1c2a3a); /* muted dark blue */
}

.right-card {
  right: 0;
  z-index: 1;
  opacity: 0.65; /* dark overlay effect */
  background: linear-gradient(135deg, #4a4f5a, #2f3238); /* slate gray */
}

/* Hover swap: inactive card dark overlay */
.comparison-wrapper.hover-right .left-card {
  opacity: 0.65; /* darken behind */
  z-index: 1;
}

.comparison-wrapper.hover-right .right-card {
  opacity: 1;
  z-index: 3;
}

.comparison-wrapper.hover-left .left-card {
  opacity: 1;
  z-index: 3;
}

.comparison-wrapper.hover-left .right-card {
  opacity: 0.65; /* darken behind */
  z-index: 1;
}

/* Typography */
.comparison-card h2 {
  font-size: 2.5rem;
}

.comparison-card p {
  max-width: 520px;
}

/* Pointer cursor */
.comparison-card {
  cursor: pointer;
}

/* Edge images */
.card-edge-image {
  position: absolute;
  bottom: 0;
  width: 280px;
  opacity: inherit; /* fade with parent */
  transition: transform 0.4s ease;
  z-index: 5;
}

/* Left card image: bottom right edge */
.left-image {
  left: auto;       /* reset left */
  right: -60px;     /* overflow right */
  bottom: 20px;    /* slightly below bottom */
  top: auto;        /* reset top */
  border-radius: 15px;
}

/* Right card image: top left edge */
.right-image {
  right: auto;      /* reset right */
  left: -60px;      /* overflow left */
  top: 20px;       /* slightly above top */
  bottom: auto;     /* reset bottom */
  border-radius: 15px;
}


/* Optional hover motion for active card image */
/* .comparison-wrapper.hover-right .right-card .right-image,
.comparison-wrapper.hover-left .left-card .left-image {
  transform: translateY(-10px);
} */

/* Responsive stack */
@media (max-width: 768px) {
  .comparison-card {
    position: static;
    width: 100%;
    height: auto;
    opacity: 1 !important;
    margin-bottom: 1rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.35);
  }
  .comparison-wrapper {
    height: auto;
  }
  .card-edge-image {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    transform: none;
    margin-top: 1rem;
  }
}


/* Horizontal button row */
.practice-btn-row {
  width: 100%;
  max-width: 90%;
  justify-content: center;
  position: relative;
}

/* Each button */
.practice-btn {
  transition: background-color 0.3s ease, color 0.3s ease;
  flex: 0 0 auto; /* prevent shrinking */
}

/* Fill color on click */
.practice-btn.active {
  background-color: #fff;
  color: #2a3f54;
}

/* Last button fade effect */
.last-btn {
  position: relative;
  overflow: hidden;
}

.last-btn::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px; /* fade width */
  background: linear-gradient(to right, rgba(42,63,84,0), rgba(42,63,84,1));
  pointer-events: none; /* allow clicks to pass */
}

/* Add Packages Button animation */
.add-package-btn {
  margin-top: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.add-package-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,255,255,0.3);
}



/* Slider styling */
.student-slider {
  width: 100%;
  accent-color: #fff; /* slider color */
}

/* Dynamic CTA button (copy left card style) */
.slider-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Fill color on active state */
.slider-cta-btn.active {
  background-color: #fff;
  color: #2a3f54;
}

/* Hover animation */
.slider-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,255,255,0.3);
}


.benefit-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.1);
}


/* FAQ card */
.faq-item {
  background: #fff;
  border-radius: 8px; /* subtle, always visible */
  box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.25);
  overflow: hidden; /* ensures radius stays clean */
}

/* Question text */
.faq-accordion .accordion-button {
  background: #fff;
  box-shadow: none;
  color: #555; /* soft grey */
}

/* Open state (no dark jump) */
.faq-accordion .accordion-button:not(.collapsed) {
  color: #555;
  background: #fff;
}

/* Answer text */
.faq-accordion .accordion-body {
  color: #777; /* lighter grey */
  line-height: 1.7;
}

/* Remove chevron */
.faq-accordion .accordion-button::after {
  display: none;
}


.modal-dialog p{
    margin-bottom: 0;
}


.bg-blue-left-card {
  background: #213142;
}

.bg-blue-right-card {
  background: #373B42;
}