/* ========== GLOBAL ========== */
:root{
  --brand-accent:#014e9e;
  --accent-dark:#012d74;
  --surface:#ffffff;
  --muted:#6b7280;
  --card-shadow: 0 18px 45px rgba(3,12,34,0.08);
  --radius: 14px;
  --container-max: 1200px;
  font-synthesis: none;
}


*{box-sizing:border-box}
html,body{height:100%}
html{
  overflow-x: hidden;
}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:#24303a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:#fff;
  overflow-x: hidden;
}

/* ========= HERO (premium) ========= */
.hero-section{
  position:relative;
  height:100vh;
  min-height:700px;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}

.hero-bg-div{
  position:absolute; inset:0;
  background-image: url('./img/heroSection1.jpg');
  background-size:cover;
  background-position:center;
  /* filter: saturate(95%) contrast(95%); */
  z-index:0;
}

/* overlay soft gradient to make text pop */
.hero-section::after{
  content:"";
  position:absolute; inset:0;
  /* background: linear-gradient(180deg, rgba(2,61,141,0.55) 0%, rgba(2,61,141,0.18) 45%, rgba(255,255,255,0.00) 80%); */
  z-index:1;
  pointer-events:none;
}

.hero-content-wrapper{
  position:relative;
  z-index:2;
  padding-top:6vh;
  padding-bottom:4vh;
  width:100%;
}

.hero-content{ max-width:900px; padding-left:4%; }

.hero-logos{ display:flex; gap:1rem; align-items:center; margin-bottom:1.2rem; }
.hero-logo{ max-height:90px; width:auto; filter:brightness(1.02); }
/* #roots-logo{ max-height:100px; width:auto; filter:brightness(1.02); } */

.logo-divider{ width:1px; height:90px; background:rgba(255,255,255,0.3); }

@media (min-width: 769px) {

  .hero-logo {
    max-height: 70px;   /* reduce from 90px */
  }

  .logo-divider {
    height: 70px;       /* match logo height */
  }

  .hero-bg-div{
    background-position:center 40%;
  }

}

.hero-title{
  color:#fff;
  font-weight:800;
  font-size:48px;
  line-height:1.05;
  margin:0 0 .6rem 0;
  text-shadow: 0 6px 30px rgba(2,13,36,0.28);
  letter-spacing:-0.01em;
}

.section-title{
    font-weight: 700;
}

/* the "via Hyderabad" controlled break */
.hero-title .line-sub{ display:block; font-weight:700; font-size:20px; margin-top:.35rem; opacity:0.95; }
@media(min-width:992px){ .hero-title .line-sub{ display:inline-block; margin-left:.6rem; font-size:22px; } }
.mobile-br{ display:none; }
@media(max-width:768px){ 
    .hero-bg-div{
        background-image: url('./img/heroSectionMob.png');
        background-position:center;
    }
    .mobile-br{ display:inline; } .hero-title{ font-size:28px; } .hero-title .line-sub{ font-size:20px; display:block; } }

.hero-badge{
  display:inline-block; background: rgba(255,255,255,0.12); color:#fff;
  padding:0.45rem 0.9rem; border-radius:999px; font-weight:600; margin-top:1rem;
}

/* hero bullets — premium style with split lines */
.hero-points{ list-style:none; padding:0; margin:1.1rem 0 1.5rem 0; color: #f1f5f9; max-width:680px; }
.hero-points li{
  display:block; font-size:18px; margin-bottom:.9rem; position:relative; padding-left:1.6rem;
}
.hero-points li::before{
  content:""; position:absolute; left:0; top:5px; width:10px; height:10px; background:white; border-radius:50%;
}
.hero-points .bullet-head{ display:block;}
.hero-points .bullet-rest{ display:block; margin-top:.18rem; opacity:0.95; font-weight:700; }

/* CTA */
.hero-btn{
  background: linear-gradient(135deg, var(--brand-accent), var(--accent-dark));
  color:#fff; padding:0.9rem 2rem; border-radius:10px; font-weight:700; border:none;
  box-shadow: 0 12px 30px rgba(1, 45, 116,0.18);
}
.hero-btn:hover{
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(1, 45, 116,0.3);
}

/* ===== PARTNERS (Swiper) ===== */
.partners-section{ background:#fafafa; padding-top:2.5rem; padding-bottom:2.5rem;}
.partner-card{
  background:#fff; padding:1.6rem; border-radius:12px; height:160px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--card-shadow);
}
.partner-card img{ height:90px; width:auto; object-fit:contain; }

/* ===== AMBASSADOR ===== */
.ambassador-section{ background:#fff; }
.ambassador-img{ width:70%; max-width:260px; border-radius:12px; box-shadow: 0 18px 45px rgba(3,12,34,0.08); }
.ambassador-name{ font-size:20px; color:#10202a; font-weight:700; }

.metric-card {
    background: #ffffff;
    padding: 1.5rem 1.2rem;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.metric-icon {
    width: 50px;
    height: 50px;
    background: var(--brand-accent);
    color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.metric-number {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.metric-label {
    font-size: 14px;
    color: #6b7280;
}

/* ===== MOBILE METRIC STACKING ===== */
@media (max-width: 768px) {

    .metric-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 8px;
        padding: 1.4rem 1rem;
    }

    .metric-icon {
        width: 55px;
        height: 55px;
        border-radius: 14px;
    }

    .metric-number {
        font-size: 20px;
        margin-top: 4px;
    }

    .metric-label {
        font-size: 13px;
        line-height: 1.4;
        max-width: 140px;
    }
}


/* ===== PROGRAM & SPECIALISATION ===== */
.program-section{ background:#f8f9fa; padding-top:2.5rem; padding-bottom:2.5rem; }
.program-description.left{ text-align:left; color:#374151; font-size:16px; line-height:1.7; }
.specialisation-wrapper{ background:#fff; padding:22px; border-radius:14px; box-shadow:var(--card-shadow); margin-top:1rem; }
.specialisation-list, .journey-list, .comparison-list {
    list-style: none;   /* 🔥 THIS removes default bullet */
    padding: 0;
    margin: 0;
}

.specialisation-list li{ font-size:15px; padding:0.6rem 0; border-bottom:1px solid #f1f1f2; color:#374151; padding-left:18px; position:relative; }
.specialisation-list li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:8px; height:8px; background:var(--brand-accent); border-radius:50%; }

/* ===== JOURNEY ===== */
/* =========================
   JOURNEY SECTION CLEAN FIX
========================= */

.journey-section {
  background: #fff;
}

/* Card */
.journey-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Image Wrapper */
.journey-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* 🔥 removes cropping problem */
  overflow: hidden;
}

/* Image */
.journey-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge */
.journey-badge-card {
  position: absolute;
  left: 20px;
  bottom: 20px; /* 🔥 moved from top to bottom */
  background: linear-gradient(135deg, var(--brand-accent), var(--accent-dark));
  color: #fff;
  padding: 10px 16px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(169,0,17,0.25);
}

/* Body */
.journey-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Location */
.journey-location {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* Credits */
.credits {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.credit-number {
  font-size: 40px;
  font-weight: 800;
  color: var(--brand-accent);
}

.credit-text {
  color: var(--muted);
  font-weight: 600;
}

/* List */
.journey-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.journey-list li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.journey-list li i {
  color: var(--brand-accent);
}

/* =========================
   RESPONSIVE FIX
========================= */

@media (max-width: 992px) {

  .credit-number {
    font-size: 32px;
  }

}

@media (max-width: 768px) {

  /* Keep image wrapper normal */
  .journey-media {
    position: relative;
  }

  /* Add subtle dark fade for text visibility */
  .journey-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.45),
      rgba(0,0,0,0.15),
      transparent
    );
    z-index: 1;
  }

  /* Keep badge on image */
  .journey-badge-card {
    position: absolute;
    left: 16px;
    bottom: 16px;
    top: auto;
    font-size: 13px;
    padding: 8px 14px;
    z-index: 2;   /* make sure it stays above overlay */
  }

  .journey-card-body {
    padding: 20px;
  }

}


/* ===== PREMIUM FEES SECTION ===== */

.fees-section.premium {
    background: #f8f9fa;
}

.section-subtitle {
    color: #6b7280;
    max-width: 700px;
    margin: 0 auto;
}

.premium-block {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    overflow: hidden;
}

.block-header {
    background: var(--brand-accent);
    color: #fff;
    font-weight: 600;
    padding: 1rem 1.5rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 14px;
}

.premium-cell {
    padding: 2rem;
}

.border-start-md {
    border-left: 1px solid #e5e7eb;
}

.big-price {
    font-size: 34px;
    font-weight: 800;
    color: var(--brand-accent);
    margin: 0.75rem 0;
}

.big-price span {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 4px;
}

.premium-cell h6,
.premium-cell h5 {
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.premium-cell ul {
    padding-left: 1rem;
}

.premium-cell ul li {
    margin-bottom: 0.5rem;
    color: #374151;
}

/* POST STUDY HIGHLIGHT */
.post-study-highlight {
    background: #ffffff;
    color: #000000;
    padding: 2rem;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(1, 45, 116,0.25);
}

.post-study-highlight h5 {
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .border-start-md {
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }

    .premium-cell {
        padding: 1.5rem;
    }

    .big-price {
        font-size: 26px;
    }

}


/* ===== USW ===== */
.usw-section{ background:#fff; }
.usw-img{ width:100%; height:320px; object-fit:cover; border-radius:12px; box-shadow:var(--card-shadow); }
.usw-content-card{ background:#fff; padding:1.4rem; border-radius:12px; box-shadow:var(--card-shadow); }
/* ===== USW CLEAN HEADER ===== */

.usw-header {
    margin-bottom: 1.5rem;
}

.usw-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.usw-badge {
    display: inline-block;
    background: rgba(169, 0, 17, 0.08);
    color: var(--brand-accent);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {

    .usw-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    .usw-image-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    .usw-img {
        border-radius: 0px !important;   /* remove rounded corners for full-bleed look */
    }

}



/* ===== COMPARISON ===== */
.comparison-section{ background:#fff; }
.comparison-card{ background:#fff; padding:1.6rem; border-radius:12px; box-shadow:var(--card-shadow); }
.comparison-card.traditional{ border:1px solid rgba(1, 45, 116,0.06); }

.comparison-heading{ font-weight:600}

@media (max-width: 768px) {
    .comparison-list{
        font-size:14px;
    }
}
@media (min-width: 768px) {

    .comparison-section .row {
        display: flex;
        align-items: stretch;
    }

    .comparison-section .col-md-6 {
        display: flex;
    }

    .comparison-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .comparison-list {
        flex-grow: 1;
    }

}
 .card-heading{
    font-weight: 600;
 }

/* ===== PROCESS (roadmap) ===== */
/* ===== PREMIUM ADMISSIONS PROCESS ===== */

.process-section {
    background: #f8f9fa;
}

.process-subtitle {
    max-width: 600px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 16px;
}

/* Grid Layout */
.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    align-items: stretch; /* 🔥 important */
}

/* Card */
.process-card {
    background: #ffffff;
    padding: 2rem 1.5rem;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0,0,0,0.06);
    position: relative;
    z-index: 1;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.process-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.1);
}

/* Icon */
.process-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--brand-accent), #012d74);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem auto;
    font-size: 24px;
    box-shadow: 0 15px 35px rgba(1, 45, 116,0.3);
}


/* Heading */
.process-card h5 {
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #1f2933;
}

/* Description */
.process-card p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    flex-grow: 1;
}

/* ===== MOBILE VERSION ===== */

/* ===== MOBILE ROADMAP PROPER PATH ===== */

/* ===== DESKTOP CONNECTOR LINE ===== */

@media (min-width: 993px) {

    .process-grid {
        position: relative;
    }

    .process-grid::before {
        content: "";
        position: absolute;
        top: 55px; /* aligns with icon center */
        left: 8%;
        width: 84%;
        height: 2px;
        background: rgba(169, 0, 17, 0.15);
        z-index: 0;
    }

    .process-card {
        position: relative;
        z-index: 1;
    }

}


@media (max-width: 992px) {

  .process-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .process-card {
    width: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 0;
  }

  .process-connector {
    width: 2px;
    height: 50px;
    background: rgba(169, 0, 17, 0.25);
  }

}




/* ===== SUPPORT ===== */
.support-section{ background:#fff; }
/* ===== EQUAL HEIGHT SUPPORT CARDS ===== */

.support-section .row {
    align-items: stretch; /* ensure columns stretch */
}

.support-card {
    height: 100%; /* fill full column height */
    display: flex;
    flex-direction: column;
}

.support-card{ background:#fff; padding:1.6rem; border-radius:12px; box-shadow:var(--card-shadow); }
.card-heading i{ background:var(--brand-accent); color:#fff; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-weight: 600; }
@media (max-width: 768px) {

    .support-card .card-heading {
        font-size: 16px;        /* reduced size */
        white-space: nowrap;    /* force one line */
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
    }
    .support-list{
        font-size:14px;
    }

}

/* ===== TESTIMONIALS ===== */
/* =========================
   PREMIUM TESTIMONIAL (PORTRAIT SAFE)
========================= */

.testimonial-section {
  background: #f8f9fa;
  padding: 100px 0;
}

/* Make swiper slides equal height */
.testimonialSwiper .swiper-wrapper {
  align-items: stretch;
}

.testimonialSwiper .swiper-slide {
  display: flex;
  height: auto;
}

/* =========================
   CARD
========================= */

.testimonial-card {
  background: #f8f9fb;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  padding: 28px;
  min-height: 520px;   /* 🔥 equal card height */
  transition: all 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.12);
}

/* =========================
   IMAGE (NO CROPPING)
========================= */

.testi-avatar {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 18px;
}

.adjust-prashant {
  object-position: center 50%;
}


/* =========================
   NAME
========================= */

.testimonial-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-accent);
  margin-top: 20px;
}

/* =========================
   TEXT
========================= */

.testimonial-text {
  margin-top: 12px;
  flex-grow: 1;
  position: relative;
}

.testimonial-text p {
  font-size: 16px;
  line-height: 1.75;
  color: #374151;
  margin: 0;
}

/* Elegant quote decoration */
/* .testimonial-text::before {
  content: "“";
  position: absolute;
  top: -18px;
  left: -6px;
  font-size: 60px;
  color: rgba(169, 0, 17, 0.07);
  font-weight: 800;
} */

/* =========================
   SWIPER ARROWS
========================= */

.testimonial-section .swiper-button-next,
.testimonial-section .swiper-button-prev {
  color: var(--brand-accent) !important;
}

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

@media (max-width: 992px) {

  .testimonial-card {
    min-height: 480px;
  }

  .testi-avatar {
    height: 280px;
  }

}

@media (max-width: 768px) {

  .testimonial-section {
    padding: 70px 0;
  }

  .testimonial-card {
    min-height: auto;
    padding: 22px;
  }

  .testi-avatar {
    height: 240px;
  }

  .testimonial-name {
    font-size: 18px;
  }

  .testimonial-text p {
    font-size: 15px;
  }

}





/* ===== RESPONSIVE ===== */
@media(max-width: 992px){
  .hero-section{ min-height:720px; padding-bottom:140px; }
  .hero-content{ padding-left:6%; padding-right:6%; }
  .partnersSwiper .swiper-slide { display:flex; justify-content:center; }
  .process-flow-wrapper{ flex-wrap:wrap; gap:14px; }
  .process-arrow::after{ content:"↓"; transform:none; font-size:22px; color:var(--brand-accent); }
  .usw-img{ height:240px; }
  .hero-points li{ font-size:16px; }
}

@media (max-width: 400px) {

  .logo-divider {
    width: 1px;                  /* slightly thicker */
    height: 80px;                /* proportional */
    background: rgba(255,255,255,0.6); /* more visible */
  }

  .hero-logo {
    max-height: 80px;            /* prevent overflow squeeze */
  }

  .hero-logos {
    gap: 0.6rem;                 /* tighter spacing */
  }

}

@media (max-width: 320px) {
    .logo-divider {
    width: 2px;                  /* slightly thicker */
    height: 80px;                /* proportional */
    background: rgba(255,255,255,0.6); /* more visible */
  }
}



/* small mobile refinements */
@media(max-width: 576px){
  .hero-title{ font-size:22px; }
  .hero-points{ max-width:100%; }
  .metric-card{ min-height:100px; }
  .process-step-card{ width:100%; max-width:400px; }
  .testimonial-card{ min-height:200px; }
}

/* small UX touches */
.btn{ font-weight:600; border-radius:12px; }
.rounded-12{ border-radius:12px; }
.card-elevated{ border-radius:12px; box-shadow:var(--card-shadow); overflow:hidden; }

/* =========================
   FAQ SECTION
========================= */
.faq-section {
    background-color: #fff;
}

.faq-subtitle {
    color: #6b7280;
    font-size: 16px;
    max-width: 650px;
    margin: 0 auto;
}

/* Accordion Styling */
.faq-accordion .accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.faq-accordion .accordion-button {
    font-weight: 600;
    font-size: 16px;
    padding: 1.2rem 1.5rem;
    background-color: #ffffff;
    color: #1f2933;
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: #fff5f5;
    color: var(--brand-accent);
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.faq-accordion .accordion-body {
    background-color: #ffffff;
    color: #374151;
    font-size: 15px;
    padding: 1.2rem 1.5rem;
}

/* CTA */
.faq-cta h5 {
    font-weight: 600;
}

.faq-cta p {
    max-width: 600px;
    margin: 0 auto;
    color: #6b7280;
}

/* MOBILE */
@media (max-width: 768px) {

    .faq-accordion .accordion-button {
        font-size: 15px;
        padding: 1rem;
    }

    .faq-accordion .accordion-body {
        font-size: 14px;
        padding: 1rem;
    }

}
/* ===== PREMIUM GLOBAL EDGE CARDS ===== */

.edge-card {
    background: #ffffff;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 60px;
}

.edge-card i {
    color: var(--brand-accent);
    font-size: 18px;
}

.edge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.edge-card.dark {
    background: linear-gradient(135deg, var(--brand-accent), #8f000e);
    color: #ffffff;
}

.edge-card.dark i {
    color: #ffffff;
}

/* =========================
   APPLICATION MODAL
========================= */
.application-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.application-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-container {
    position: relative;
    z-index: 10000;
    width: 90%;
    max-width: 750px;
    max-height: 95vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--accent-dark) 100%);
    padding: 2rem 3.5rem;
    border-radius: 16px 16px 0 0;
    text-align: center;
    position: relative;
}

.modal-title {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
    display: block;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
    display: block;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-form {
    padding: 2.5rem 3rem;
}

.form-group {
    margin-bottom: 1.75rem;
}

.form-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.required {
    color: var(--brand-accent);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 1.1rem;
}

.form-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(169, 0, 17, 0.1);
}

.form-input.error {
    border-color: #dc3545;
}

.error-message {
    display: none;
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.checkbox-group {
    margin-bottom: 1.25rem;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    position: relative;
    padding-left: 2rem;
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-custom {
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-input:checked ~ .checkbox-custom {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}

.checkbox-input:checked ~ .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

.form-actions {
    margin-top: 1.5rem;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--accent-dark) 100%);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(1, 45, 116, 0.3);
}

.btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loader {
    display: none;
}

.spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Two-column layout for desktop */
@media (min-width: 769px) {
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container {
        width: 92%;
        max-height: 92vh;
    }

    .modal-header {
        padding: 1.25rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .modal-title {
        font-size: 1.35rem;
        margin-bottom: 0.5rem;
        text-align: center;
        width: 100%;
    }

    .modal-subtitle {
        font-size: 0.85rem;
        text-align: center;
        width: 100%;
        order: 2;
    }

    .modal-form {
        padding: 1.25rem 1rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
    }

    .form-input {
        padding: 0.7rem 0.75rem 0.7rem 2.5rem;
        font-size: 0.9rem;
    }

    .input-icon {
        left: 0.75rem;
        font-size: 1rem;
    }

    .checkbox-group {
        margin-bottom: 0.85rem;
    }

    .checkbox-label {
        padding-left: 1.75rem;
    }

    .checkbox-custom {
        width: 18px;
        height: 18px;
    }

    .checkbox-input:checked ~ .checkbox-custom::after {
        left: 5px;
        top: 1px;
        width: 4px;
        height: 9px;
    }

    .checkbox-text {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .form-actions {
        margin-top: 1rem;
    }

    .btn-submit {
        font-size: 0.95rem;
        padding: 0.8rem 1.25rem;
    }

    .error-message {
        font-size: 0.75rem;
        margin-top: 0.2rem;
    }
}

/* =========================
   STUDENT SUPPORT SECTION
========================= */

.student-support-section {
  background: #f8f9fa;
}

.support-content-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
}

.support-points-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-point {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.04);
  transition: 0.3s ease;
}

.support-point:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.support-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--brand-accent), var(--accent-dark));
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.support-point span {
  font-weight: 600;
  font-size: 15px;
  color: #1f2933;
}

.support-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 16px;
}

/* ===== MOBILE ORDER FIX ===== */

@media (max-width: 768px) {

  .support-img {
    height: 300px;
  }

  .support-content-card {
    padding: 1.5rem;
  }

  .support-point span {
    font-size: 14px;
  }

  .student-support-section .container {
    padding-left: 0;
    padding-right: 0;
  }

  .student-support-section .col-lg-6 {
    padding-left: 0;
    padding-right: 0;
  }

  .support-image-wrapper {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;  /* remove rounded corner for full-bleed look */
  }

  .support-img {
    border-radius: 0;
  }

}