:root{
      --primary:#0d6efd;
      --accent:#06b6d4;
      --muted:#6b7280;
      --bg:#f4f7fb;
      --card:#ffffff;
      --max-w:1200px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#0b1220;background:var(--bg);-webkit-font-smoothing:antialiased}
    body{margin:0;overflow-x:hidden} /* prevent horizontal scrollbar */
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    .site-container{max-width:var(--max-w);margin:0 auto;padding:0 20px}

    /* HEADER overlay fixed at very top (top:0) */
    .header-overlay{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      top:0;                /* ← changed: no top gap */
      z-index:999;
      width:100%;
      max-width:var(--max-w);
      pointer-events:none;
      padding:12px 20px;    /* small inner padding so header items don't touch edge */
    }
    /* Header - initial (transparent over slider) */
.header-overlay{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  top:0;
  z-index:999;
  width:100%;
  max-width:100%;
  pointer-events:none;
  padding:12px 20px;
  transition: background-color .35s ease, box-shadow .35s ease, color .25s ease;
  background: transparent; /* initial transparent */
}

/* inner area must remain clickable */
.header-inner{ pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Nav links initial (white over image) */
.header-overlay nav ul li a{
  color: rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.12);
  transition: color .25s ease, background .25s ease;
}

/* CTA initial */
.header-overlay .cta{
  background:linear-gradient(90deg,var(--accent),var(--primary));
  color:white;
  box-shadow:0 8px 18px rgba(6,120,150,0.12);
}

/* ===== WHEN SCROLLED PAST HERO ===== */
/* Add class .scrolled to header-overlay */
.header-overlay.scrolled{
  background: #ffffff;               /* white background behind header */
  box-shadow: 0 6px 20px rgba(15,23,42,0.12);
}

/* change brand text color when scrolled */
.header-overlay.scrolled .brand div{ color: #0b1220 !important; }

/* nav links when scrolled -> dark text, lighter pill background */
.header-overlay.scrolled nav ul li a{
  color: #0b1220;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 16px rgba(2,6,23,0.06);
}

/* CTA when scrolled -> keep gradient but add subtle border so it stands out on white */
.header-overlay.scrolled .cta{
  background: linear-gradient(90deg,var(--accent),var(--primary));
  color: white;
  box-shadow: 0 10px 26px rgba(6,120,150,0.12);
}

/* small responsive tweak so header height stays consistent */
.header-overlay .brand img{ width:64px; height:64px; transition:width .25s ease, height .25s ease; }
.header-overlay.scrolled .brand img{ width:56px; height:56px; }

/* ensure header elements are readable */
.header-overlay.scrolled nav ul li a:hover{ opacity:0.95; transform:translateY(-1px); transition: transform .15s;}

/* optional: change dot colors if you use slider dots inside header area */

    .header-inner{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent}
    .brand{display:flex;align-items:center;gap:12px}
    .brand img{width:68px;height:68px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,0.95);padding:6px;box-shadow:0 8px 20px rgba(2,6,23,0.12)}
    nav ul{display:flex;gap:12px;align-items:center;list-style:none}
    nav ul li a{color:white;padding:8px 12px;border-radius:10px;font-weight:600;background:linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06))}
    .cta{background:linear-gradient(90deg,var(--accent),var(--primary));color:white;padding:8px 12px;border-radius:10px;font-weight:700;box-shadow:0 8px 18px rgba(6,120,150,0.12)}

    /* FULL-BLEED HERO starting at top:0 (no extra spacing) */
    .hero-wrap{
      position:relative;
      width:100vw;
      left:50%;
      margin-left:-50vw;
      margin-right:-50vw;
      box-sizing:border-box;
      z-index:1;
    }

    .slider{
      width:100vw;
      height:540px;
      overflow:hidden;
      position:relative;
      background:#000;
    }

    .slides{
      display:flex;
      transition:transform .6s ease;
      height:100%;
      width:100%;
    }
    .slide{
      min-width:100vw;
      height:100%;
      position:relative;
    }
    .bg{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center center;
      filter:contrast(1.03) saturate(1.03);
    }
    .grad{
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(3,7,18,0.28), rgba(3,7,18,0.62));
    }
    .slide-inner{
      position:absolute;
      left:8%;
      top:42%;
      transform:translateY(-42%);
      max-width:680px;
      z-index:5;
      color:white;
    }
    .slide-inner h1{font-size:42px;margin-bottom:12px;text-shadow:0 6px 30px rgba(2,6,23,0.28)}
    .slide-inner p{color:rgba(255,255,255,0.9);margin-bottom:18px;font-size:16px}

    .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);border-radius:999px;width:46px;height:46px;display:grid;place-items:center;color:white;cursor:pointer;z-index:60}
    .arrow.left{left:14px}
    .arrow.right{right:14px}
    .dots{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:8px;z-index:60}
    .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer}
    .dot.active{background:white;transform:scale(1.05)}

    section{padding:56px 0}
    .section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}
    .subtle{color:var(--muted);font-size:14px}
    .grid{display:grid;gap:18px}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .grid.cols-4{grid-template-columns:repeat(4,1fr)}
    .card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.06);transition:transform .18s ease}
    .card:hover{transform:translateY(-6px)}

    @media (max-width:1000px){
      .slide-inner{left:5%;top:38%}
      .brand img{width:60px;height:60px}
    }
    @media (max-width:700px){
      nav ul{display:none}
      .slider{height:420px}
      .slide-inner h1{font-size:26px;padding-top:77px;}
      .slide-inner{left:6%;top:36%}
    }
    @media (max-width:420px){
      .slider{height:340px}
      .brand img{width:52px;height:52px}
      .slide-inner{left:6%;top:34%}
    }
     .about-section{background:linear-gradient(180deg,#fbfdff,#f0f6fb);padding:64px 20px;}
  .about-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;}
  
  /* Media / image */
  .about-media{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(10,20,40,0.08)}
  .about-media img{width:100%;height:100%;display:block;object-fit:cover;min-height:360px;transition:transform .6s ease}
  .about-media:hover img{transform:scale(1.03)}
  .about-badge{
    position:absolute;left:18px;bottom:18px;background:linear-gradient(90deg,#06b6d4,#0d6efd);color:white;padding:8px 12px;border-radius:10px;font-weight:700;box-shadow:0 8px 30px rgba(6,120,150,0.12)
  }

  /* Content */
  .about-content h2{font-size:30px;margin:0 0 14px;color:#0b1220;letter-spacing:-0.3px}
  .about-content .lead{color:#334155;font-size:16.5px;line-height:1.6;margin-bottom:12px}
  .about-content p{color:#475569;line-height:1.65;margin-bottom:12px}

  /* Features list */
  .about-features{list-style:none;padding:0;margin:18px 0 6px;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
  .about-features li{display:flex;align-items:flex-start;gap:10px;background:white;padding:12px;border-radius:10px;box-shadow:0 8px 20px rgba(10,20,40,0.03)}
  .about-features .tick{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:linear-gradient(90deg,#06b6d4,#0d6efd);color:white;font-weight:700;flex-shrink:0}

  /* CTAs */
  .about-cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
  .btn-primary{background:linear-gradient(90deg,#06b6d4,#0d6efd);color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 12px 30px rgba(6,120,150,0.12)}
  .btn-ghost{background:transparent;color:#0b1220;padding:10px 16px;border-radius:10px;border:1px solid rgba(11,17,34,0.08);text-decoration:none;font-weight:600}

  /* Responsive: stack on small screens */
  @media (max-width:900px){
    .about-inner{grid-template-columns:1fr;gap:20px}
    .about-media img{min-height:240px}
    .about-features{grid-template-columns:repeat(1, minmax(0,1fr))}
  }

  /* optional small polish */
  #about-us .about-content h2{font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-weight:700}

  /* ===== Why / features section (updated design) ===== */

.why-section{
  background:#fff;
  padding:56px 20px;
  font-family:'Poppins', system-ui;
}

.why-section .wrap{
  max-width:1100px;
  margin:0 auto;
}

.why-section .intro{
  text-align:center;
  max-width:820px;
  margin:0 auto 36px;
}

.why-section h2{
  font-size:30px;
  font-weight:700;
  margin-bottom:12px;
}

.why-section .desc{
  font-size:15px;
  color:#556575;
  max-width:700px;
  margin:auto;
  line-height:1.6;
}

/* GRID */
.features-grid{
  list-style:none;
  padding:0;
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* FEATURE ITEM (centered layout fix) */
.feature{
  text-align:center;
  background: rgba(255, 255, 255, 0.90);
  padding:20px 10px;
  border-radius:14px;
  transition:.2s ease;
}

.feature:hover{
  transform:translateY(-6px);
}

/* ICON BOX — centered */
.icon-box{
  width:70px;
  height:70px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px auto;   /* CENTER + spacing */
  background:rgba(13,110,253,0.08);
  color:#0d6efd;
}

.icon-box.red{ background:rgba(255,80,80,0.12); color:#ef4444; }
.icon-box.blue{ background:rgba(13,110,253,0.12); color:#0d6efd; }

/* TEXT */
.ft-title{
  font-size:17px;
  font-weight:700;
  color:#0b1220;
  margin-bottom:6px;
}

.ft-sub{
  font-size:14px;
  color:#6b7280;
  margin-top:2px;
  line-height:1.5;
}

/* RESPONSIVE */
@media(max-width:900px){
  .features-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:500px){
  .features-grid{ grid-template-columns:1fr; }
}
 .news-section{background:#f8fbff;padding:56px 16px;font-family: 'Poppins', system-ui, -apple-system;}
  .news-section .container{max-width:1200px;margin:0 auto}
  .news-intro{text-align:center;margin-bottom:28px}
  .news-intro .kicker{font-size:13px;color:#9aa4b2;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
  .news-intro h2{font-size:28px;color:#0b1220;margin:0 0 8px}
  .news-intro .lead{color:#556575;max-width:820px;margin:0 auto;font-size:15px;line-height:1.7}

  /* grid */
  .news-grid{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(4, 1fr);gap:22px}
  .news-card{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(10,20,40,0.06);transition:transform .18s ease, box-shadow .18s ease}
  .news-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(10,20,40,0.09)}

  .news-card .thumb{height:160px;background-size:cover;background-position:center}
  .news-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
  .news-body h3{font-size:16px;margin:0;color:#0b1220}
  .news-body p{color:#556575;font-size:14px;margin:0;line-height:1.6}
  .news-body .btn{align-self:flex-start;margin-top:auto;padding:8px 14px;background:linear-gradient(90deg,#06b6d4,#0d6efd);color:white;border-radius:8px;text-decoration:none;font-weight:700;box-shadow:0 10px 26px rgba(6,120,150,0.12)}

  /* responsive */
  @media (max-width:1100px){
    .news-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:680px){
    .news-grid{grid-template-columns:1fr}
    .news-card .thumb{height:200px}
  }
  /* 2-column clean Mission & Vision */
.mv-clean-two{
  padding:60px 20px;
  background:#f8fbff;
  font-family:'Poppins', system-ui, sans-serif;
}

.mv-two-wrap{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
}

/* IMAGE */
.mv-image img{
  width:100%;
  height: 100%;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(10,20,40,0.08);
  object-fit:cover;
}

/* CONTENT */
.mv-heading{
  font-size:32px;
  font-weight:700;
  margin-bottom:14px;
  color:#07102a;
  position:relative;
}

.mv-heading::after{
  content:"";
  width:60px;
  height:4px;
  background:linear-gradient(90deg,#06b6d4,#0d6efd);
  display:block;
  border-radius:4px;
  margin-top:10px;
}

.mv-intro{
  color:#4b5563;
  font-size:15.5px;
  line-height:1.7;
  margin-bottom:28px;
}

/* BLOCKS */
.mv-block{
  background:white;
  padding:20px 24px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(10,20,40,0.06);
  margin-bottom:16px;
  transition:transform .2s ease;
}
.mv-block:hover{
  transform:translateY(-4px);
}

.mv-block h3{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  color:#0d6efd;
}

.mv-block p{
  margin:0;
  line-height:1.7;
  color:#475569;
  font-size:15px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .mv-two-wrap{
    grid-template-columns:1fr;
  }
  .mv-image img{
    max-height:340px;
  }
  .mv-heading{font-size:26px;}
}
.academic-section{
  background: #f6fbff;
  padding:54px 20px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  color:#0b1220;
}
.academic-wrap{max-width:1150px;margin:0 auto}

/* header */
.acad-header{text-align:center;max-width:900px;margin:0 auto 26px}
.acad-header h2{font-size:22px;letter-spacing:1px;margin:0 0 8px;font-weight:800}
.acad-intro{color:#475569;margin:0 auto;font-size:15px;line-height:1.7;max-width:820px}

/* panels row (visual blocks) */
.panels-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
  margin:22px 0 28px;
  align-items:stretch;
}

/* individual panel style */
.panel{
  height:160px;
  border-radius:10px;
  color:white;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(6,22,50,0.06);
  transition:transform .22s ease, box-shadow .22s ease;
}

/* slight decorative diagonal overlay */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  transform:skewX(-8deg) translateX(-12%);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0));
  pointer-events:none;
  opacity:0.12;
}

/* panel variants (colors inspired by your image) */
.panel-left{background: linear-gradient(180deg,#0f766e,#0ea5a0);}     /* teal-ish */
.panel-center{background: linear-gradient(180deg,#f59e0b,#f97316);}   /* amber */
.panel-right{background: linear-gradient(180deg,#2563eb,#174ea6);}    /* blue */

/* titles and small text in panels */
.panel-title{font-weight:800;font-size:16px;margin-bottom:6px;z-index:2}
.panel-text.small{font-size:13px;opacity:0.92;z-index:2;max-width:80%}

/* hover */
.panel:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(6,22,50,0.10)}

/* program list details */
.program-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.program-item{
  background:white;border-radius:10px;padding:18px;box-shadow:0 12px 30px rgba(6,22,50,0.05);
  transition:transform .18s ease;
}
.program-item h3{margin:0 0 8px;font-size:17px;color:#0d6efd;font-weight:700}
.program-item p{margin:0;color:#475569;line-height:1.7;font-size:14px}
.program-item:hover{transform:translateY(-6px)}

/* responsive */
@media (max-width:980px){
  .panels-row{grid-template-columns:1fr;gap:14px}
  .program-list{grid-template-columns:1fr}
  .panel{height:170px}
}
@media (max-width:480px){
  .academic-section{padding:36px 14px}
  .panel{height:150px;padding:14px}
  .panel-title{font-size:15px}
  .panel-text.small{font-size:13px;max-width:100%}
  .program-item{padding:14px}
}
.academic-section{
  background: #f6fbff;
  padding:54px 20px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  color:#0b1220;
}
.academic-wrap{max-width:1150px;margin:0 auto}

/* header */
.acad-header{text-align:center;max-width:900px;margin:0 auto 26px}
.acad-header h2{font-size:22px;letter-spacing:1px;margin:0 0 8px;font-weight:800}
.acad-intro{color:#475569;margin:0 auto;font-size:15px;line-height:1.7;max-width:820px}

/* panels row (visual blocks) */
.panels-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
  margin:22px 0 28px;
  align-items:stretch;
}

/* individual panel style */
.panel{
  height:160px;
  border-radius:10px;
  color:white;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(6,22,50,0.06);
  transition:transform .22s ease, box-shadow .22s ease;
}

/* slight decorative diagonal overlay */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  transform:skewX(-8deg) translateX(-12%);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0));
  pointer-events:none;
  opacity:0.12;
}

/* panel variants (colors inspired by your image) */
.panel-left{background: linear-gradient(180deg,#0f766e,#0ea5a0);}     /* teal-ish */
.panel-center{background: linear-gradient(180deg,#f59e0b,#f97316);}   /* amber */
.panel-right{background: linear-gradient(180deg,#2563eb,#174ea6);}    /* blue */

/* titles and small text in panels */
.panel-title{font-weight:800;font-size:16px;margin-bottom:6px;z-index:2}
.panel-text.small{font-size:13px;opacity:0.92;z-index:2;max-width:80%}

/* hover */
.panel:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(6,22,50,0.10)}

/* program list details */
.program-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.program-item{
  background:white;border-radius:10px;padding:18px;box-shadow:0 12px 30px rgba(6,22,50,0.05);
  transition:transform .18s ease;
}
.program-item h3{margin:0 0 8px;font-size:17px;color:#0d6efd;font-weight:700}
.program-item p{margin:0;color:#475569;line-height:1.7;font-size:14px}
.program-item:hover{transform:translateY(-6px)}

/* responsive */
@media (max-width:980px){
  .panels-row{grid-template-columns:1fr;gap:14px}
  .program-list{grid-template-columns:1fr}
  .panel{height:170px}
}
@media (max-width:480px){
  .academic-section{padding:36px 14px}
  .panel{height:150px;padding:14px}
  .panel-title{font-size:15px}
  .panel-text.small{font-size:13px;max-width:100%}
  .program-item{padding:14px}
}
.academic-section{
  background:#f6fbff;
  padding:54px 20px;
  font-family:'Poppins',system-ui;
}
.academic-wrap{max-width:1150px;margin:0 auto}

/* Header */
.acad-header{text-align:center;margin-bottom:28px}
.acad-header h2{font-size:26px;font-weight:800;margin-bottom:8px}
.acad-intro{color:#475569;max-width:820px;margin:0 auto;font-size:15px;line-height:1.7}

/* Panels row */
.panels-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:32px;
}

/* Individual panel */
.panel{
  position:relative;
  height:170px;
  border-radius:12px;
  padding:18px;
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:0 12px 34px rgba(6,22,50,0.06);
  transition:.22s;
}
.panel:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(6,22,50,0.10)}

.panel-left{background:linear-gradient(180deg,#0f766e,#0ea5a0);}
.panel-center{background:linear-gradient(180deg,#f59e0b,#f97316);}
.panel-right{background:linear-gradient(180deg,#2563eb,#174ea6);}

/* Icon inside panel */
.icon-boxs{
  position:absolute;
  top:14px;
  left:14px;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(4px);
  width:48px;
  height:48px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
}

/* Text */
.panel-title{font-size:17px;font-weight:700;z-index:2}
.panel-text{font-size:13px;z-index:2}

/* Program detailed list */
.program-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.program-item{
  background:white;
  padding:18px;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(6,22,50,0.05);
  position:relative;
  transition:.18s;
}
.program-item:hover{transform:translateY(-6px)}

/* Icons in program items */
.prog-icon{
  width:44px;
  height:44px;
  background:#eaf3ff;
  color:#0d6efd;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.program-item h3{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  color:#0d6efd;
}
.program-item p{
  margin:0;color:#475569;line-height:1.7;font-size:14px;
}

/* Responsive */
@media(max-width:900px){
  .panels-row{grid-template-columns:1fr}
  .program-list{grid-template-columns:1fr}
}
/* ========== AIS Facilities Section ========== */
.ais-facilities{background:linear-gradient(180deg,#f8fbff,#f3f9ff);padding:56px 18px;font-family:'Poppins',system-ui, -apple-system, 'Segoe UI', Roboto, Arial;color:#0b1220}
.ais-wrap{max-width:1200px;margin:0 auto}
.ais-head{text-align:center;margin-bottom:28px}
.ais-head h2{font-size:24px;letter-spacing:1px;margin-bottom:6px;font-weight:800}
.ais-head p{color:#556575;margin:0 auto;max-width:760px;line-height:1.65}

/* grid */
.ais-grid{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* card base */
.ais-card{
  background:#fff;border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 14px 36px rgba(10,20,40,0.06);transition:transform .18s ease,box-shadow .18s ease;
  min-height:170px;
}
.ais-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(10,20,40,0.10)}

/* icon */
.ais-icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,rgba(13,110,253,0.06),rgba(13,110,253,0.02));display:grid;place-items:center;color:#0d6efd;flex-shrink:0}
.ais-card--auditorium .ais-icon{background:linear-gradient(180deg,rgba(6,120,150,0.06),rgba(6,120,150,0.02));color:#06b6d4}
.ais-card--library .ais-icon{background:linear-gradient(180deg,rgba(16,185,129,0.06),rgba(16,185,129,0.02));color:#10b981}
/* you can alter icon bg per card by card-specific class above */

/* title & desc */
.ais-title{font-size:16px;font-weight:700;margin:0;color:#07102a}
.ais-desc{margin:0;color:#475569;line-height:1.6;font-size:14px}

/* layout for icon + title stacked nicely */
.ais-card{align-items:flex-start}
.ais-card .ais-icon{margin-bottom:4px}

/* small screens */
@media (max-width:980px){
  .ais-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ais-grid{grid-template-columns:1fr}
  .ais-card{min-height:auto}
  .ais-icon{width:48px;height:48px}
  .ais-wrap{padding:0 12px}
}

/* OPTIONAL: distinct visuals — make certain cards slightly tinted */
.ais-card--smart{border-left:6px solid rgba(13,110,253,0.12)}
.ais-card--labs{border-left:6px solid rgba(16,185,129,0.12)}
.ais-card--sports{border-left:6px solid rgba(249,115,22,0.12)}
.programmes-section{
  background: #ffffff;
  padding:56px 18px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  color:#0b1220;
}
.prog-wrap{margin:0 auto}
.prog-head{text-align:center;max-width:900px;margin:0 auto 26px}
.prog-head h2{font-size:26px;letter-spacing:0.6px;margin-bottom:8px;font-weight:800}
.prog-head p{color:#556575;line-height:1.7;margin:0 auto;max-width:820px;font-size:15px}

/* grid */
.prog-grid{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* card */
.prog-card{
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:6px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 18px rgba(12,20,40,0.04);
}
.prog-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(12,20,40,0.08)}

/* thumbnail */
.prog-thumb{
  width:100%;
  height:160px;
  background-size:cover;
  background-position:center;
  display:block;
  border-bottom:6px solid #f6f6f6;
}

/* caption */
.prog-caption{
  padding:12px 14px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:#0b1220;
  text-align:center;
  background:#fff;
}

/* responsive */
@media (max-width:1000px){
  .prog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .prog-grid{grid-template-columns:1fr}
  .prog-thumb{height:200px}
}

/* ===== Teachers Section ===== */
.ais-teachers{
  background:#f8fbff;
  padding:56px 18px;
  font-family:'Poppins', system-ui, sans-serif;
}

.teachers-wrap{
  max-width:1150px;
  margin:0 auto;
}

.teachers-head{
  text-align:center;
  max-width:850px;
  margin:0 auto 34px;
}

.teachers-head h2{
  font-size:28px;
  font-weight:800;
  margin-bottom:8px;
  letter-spacing:0.6px;
}

.teachers-head p{
  font-size:15px;
  color:#556575;
  line-height:1.7;
}

/* Grid Layout */
.teachers-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

/* Teacher Card */
.teacher-card{
  background:white;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(10,20,40,0.06);
  padding:16px;
  text-align:center;
  transition:.2s ease;
}

.teacher-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(10,20,40,0.08);
}

/* Photo */
.teacher-photo{
  width:100%;
  height:180px;
  background-size:cover;
  background-position:center;
  border-radius:12px;
  margin-bottom:12px;
  transition:transform .3s ease;
}

.teacher-card:hover .teacher-photo{
  transform:scale(1.05);
}

/* Name & Role */
.teacher-name{
  font-size:17px;
  font-weight:700;
  margin:0;
  color:#07102a;
}

.teacher-role{
  margin-top:4px;
  font-size:14px;
  color:#6b7280;
}

/* Responsive */
@media (max-width:1000px){
  .teachers-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:760px){
  .teachers-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:480px){
  .teachers-grid{grid-template-columns:1fr;}
  .teacher-photo{height:200px;}
}

/* Toppers & Achievements styles */
.ta-section{background:#ffffff;padding:48px 18px;font-family:'Poppins',system-ui, -apple-system, 'Segoe UI', Roboto;color:#07102a}
.ta-wrap{max-width:1100px;margin:0 auto}
.ta-intro{text-align:left;margin-bottom:20px}
.ta-intro h2{font-size:22px;margin:0 0 8px;font-weight:800}
.ta-intro p{color:#515e6b;line-height:1.7;margin:0}

/* two column grid */
.ta-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}

/* common card */
.card{background:#f9fbff;border-radius:10px;padding:16px;box-shadow:0 10px 30px rgba(6,22,50,0.04)}
.card-title{font-weight:800;margin-bottom:12px;color:#0d6efd}

/* Achievements column specifics */
.achievements .ach-tiles{display:flex;gap:12px;align-items:center}
.poster{flex:1;border-radius:8px;overflow:hidden;border:1px solid rgba(10,20,40,0.06)}
.poster img{width:100%;height:160px;object-fit:cover;display:block}
.ach-caption{margin-top:10px;color:#475569;font-size:14px}

/* Toppers column specifics */
.toppers .topper-group{margin-top:6px}
.group-title{font-weight:700;color:#0b1220;margin-bottom:10px}
.topper-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* single topper */
.topper{background:white;padding:10px;border-radius:8px;text-align:center;box-shadow:0 8px 22px rgba(10,20,40,0.04)}
.avatar{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 18px rgba(6,22,50,0.06);margin:0 auto 8px;display:block}
.tname{font-weight:700;font-size:13px;color:#0b1220}
.tpercent{font-size:13px;color:#06b6d4;margin-top:4px;font-weight:700}

/* responsive tweaks */
@media(max-width:980px){
  .ta-grid{grid-template-columns:1fr;align-items:start}
  .topper-grid{grid-template-columns:repeat(3,1fr)}
  .poster img{height:140px}
}
@media(max-width:680px){
  .topper-grid{grid-template-columns:repeat(2,1fr)}
  .poster img{height:120px}
}
@media(max-width:420px){
  .topper-grid{grid-template-columns:1fr}
  .avatar{width:80px;height:80px}
}
/* Common layout */
.site-section{padding:56px 18px;font-family:'Poppins',system-ui;color:#07102a}
.container{max-width:1150px;margin:0 auto}
.section-head{text-align:center;margin-bottom:22px}
.section-head h2{font-size:24px;margin-bottom:8px;font-weight:800}
.section-head p{color:#536574;margin:0 auto;max-width:900px;line-height:1.6}


/* ===== BLOGS ===== */
.blogs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:18px;
}

.blog-card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(10,20,40,0.06);
  transition:.2s;
}
.blog-card:hover{transform:translateY(-6px)}

.blog-thumb{
  height:160px;
  background-size:cover;
  background-position:center;
}

.blog-body{padding:14px}
.blog-body h3{margin:0 0 8px;font-size:16px}
.blog-body p{margin:0 0 10px;color:#475569;font-size:14px}
.btn-sm{
  padding:8px 12px;
  background:linear-gradient(90deg,#06b6d4,#0d6efd);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}


/* ===== TESTIMONIALS ===== */
.alt-bg{background:#f6fbff}
.testi-wrap{max-width:820px;margin:0 auto}
.testi-slider{position:relative;min-height:150px;overflow:hidden;background: white;
    padding: 16px;
    border-radius: 10px;}
.testi-item{display:none;padding:18px;text-align:center}
.testi-item.active{display:block}

.quote{font-size:16px;color:#0b1220;margin:0 0 12px;line-height:1.6;font-style:italic}

.who{
  display:flex;gap:10px;
  justify-content:center;align-items:center;
}
.who img{
  width:56px;height:56px;border-radius:50%;
  object-fit:cover;
}
.testi-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:14px;
  gap:12px;
}
.testi-controls button{
  width:40px;height:40px;border-radius:50%;
  border:1px solid #d2dce6;
  font-size:20px;cursor:pointer;
}

.dots{display:flex;gap:8px}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:#cdd9e5;
}
.dot.active{background:#0d6efd}


/* ===== GALLERY ===== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:20px;
}
.g-item{
  display:block;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(10,20,40,0.06);
}
.g-item img{
  width:100%;height:160px;
  object-fit:cover;
  transition:.35s;
}
.g-item:hover img{transform:scale(1.05)}


/* Responsive */
@media(max-width:980px){
  .blogs-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .blogs-grid,.gallery-grid{grid-template-columns:1fr}
}
/* ===========================
   AIS FOOTER STYLING
=========================== */

.ais-footer{
  width:100%;
  background:#03142a;
  color:#cfe6ff;
  padding:32px 20px;
  font-family:'Poppins', system-ui, sans-serif;
}

.ais-footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:28px;
}

/* Columns */
.footer-col{
  flex:1;
  min-width:240px;
  padding: 30px 0;
}

.footer-about h3{
  color:#fff;
  margin-bottom:8px;
  font-size:20px;
  font-weight:700;
}

.footer-about p{
  color:rgba(255,255,255,0.9);
  line-height:1.6;
}

/* Quick Links */
.footer-links h4,
.footer-contact h4{
  color:#fff;
  margin-bottom:10px;
  font-size:18px;
  font-weight:600;
}

.footer-links ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-links a{
  color:#cfe6ff;
  text-decoration:none;
  font-size:15px;
  transition:.2s;
}

.footer-links a:hover{
  color:#fff;
}
.program-item {
    background: rgba(255, 255, 255, 0.60); /* white with 45% opacity */
}
/* Parent li must be positioned relative so submenu positions under it */
.dropdown-footer {
  position: relative;         /* important */
}

/* Main anchor styling (so width matches text) */
.dropdown-footer > .drop-toggle {
  display: inline-block;
  padding: 6px 2px;
  cursor: pointer;
}

/* Submenu: positioned directly under the parent link */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);   /* 6px gap below the parent link */
  left: 0;                 /* align left edge of submenu to parent */
  min-width: max-content;  /* take natural width (not collapse) */
  white-space: nowrap;     /* keep items on single line if possible */
  display: none;           /* hidden by default */
  z-index: 9999;           /* above other content */
  background: #05203b;
  border-radius: 6px;
  padding: 6px 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Menu items */
.dropdown-menu li{ margin:0; }
.dropdown-menu li a{
  display:block;
  padding:9px 14px;
  color:#cfe6ff;
  text-decoration:none;
  font-size:14px;
  border-radius:6px;
}
.dropdown-menu li a:hover{
  background: rgba(255,255,255,0.06);
  color:#fff;
}

/* Show on hover (desktop) */
.dropdown-footer:hover > .dropdown-menu {
  display: block;
}

/* If your header is fixed and has overflow hidden on container, ensure parent allows visible overflow */
/* Example: if your nav container has overflow:hidden; change to overflow:visible for the dropdown to show */
.navbar, .header-inner { overflow: visible !important; }

/* RESPONSIVE: on small screens make menu static (stacked) and show on click instead */
@media (max-width: 760px) {
  .dropdown-menu {
    position: static;
    display: none;      /* will be toggled by JS on click */
    box-shadow: none;
    background: #042036;
    padding-left: 0;
    margin-top: 8px;
  }
  .dropdown-menu li a { padding:12px 10px; }
  .dropdown-footer.open > .dropdown-menu { display: block; }
}

/* ===== Dropdown (multi-level) styling ===== */
.dropdown-footer { position: relative; } /* parent reference for absolute submenu */

.drop-toggle {
  display: inline-block;
  cursor: pointer;
  padding: 6px 8px;
  color: inherit;
  text-decoration: none;
}

/* base submenu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: max-content;
  white-space: nowrap;
  display: none;           /* hidden by default */
  z-index: 9999;
  background: #05203b;
  border-radius: 6px;
  padding: 6px 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* nested submenu (submenu inside a submenu) opens to the right */
.dropdown-menu .dropdown-footer > .dropdown-menu {
  top: 0;
  left: calc(100% + 8px);  /* place to the right of parent item */
}

/* menu items */
.dropdown-menu li { margin: 0; }
.dropdown-menu li a {
  display: block;
  padding: 9px 14px;
  color: #cfe6ff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
}
.dropdown-menu li a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* show on hover (desktop) — JS will also set inline display during hover to prevent flicker */
.dropdown-footer:hover > .dropdown-menu { display: block; }

/* ensure nav container allows overflow visible so absolute menu is not clipped */
.navbar, .header-inner { overflow: visible !important; }

/* small visual polish: caret for items that have submenu */
.drop-toggle.has-sub::after {
  content: "▾";
  font-size: 12px;
  margin-left: 6px;
  opacity: 0.9;
}

/* RESPONSIVE: mobile/touch — menus become static and controlled by .open class */

@media (max-width: 760px) {

  .dropdown-menu {
    position: static;
    display: none;           /* show via .open class */
    box-shadow: none;
    background: transparent;
    padding-left: 0;
    margin-top: 6px;
  }

  /* nested menus indent */
  .dropdown-menu .dropdown-menu { padding-left: 12px; }

  /* show when parent has .open */
  .dropdown-footer.open > .dropdown-menu { display: block; }

  /* style menu items on mobile */
  .dropdown-menu li a {
    padding: 12px 14px;
    background: rgba(4,32,54,0.04);
    color: #07102a;
    border-radius: 8px;
    margin-bottom: 6px;
  }
}
/* ---- Force nested submenu to open to the right (override) ---- */

/* Ensure any dropdown li used inside menus is reference for absolute positioning */
.dropdown-menu .dropdown-footer { position: relative; }

/* Top-level submenu (under parent link) stays as before */
.dropdown-footer > .dropdown-menu {
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
}

/* === THIS is the important override for nested submenu ===
   When a .dropdown-footer (inside a .dropdown-menu) has its own .dropdown-menu,
   place that nested menu to the RIGHT of its parent menu item.
*/
.dropdown-menu .dropdown-footer > .dropdown-menu {
  position: absolute !important;
  top: 0 !important;                     /* align with parent item top */
  left: calc(100% + 8px) !important;     /* place to the right with small gap */
  right: auto !important;
  white-space: nowrap !important;
  z-index: 12000 !important;
  transform-origin: left top;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

/* If it must open to left (flipped by JS) */
.dropdown-menu .dropdown-footer > .dropdown-menu[data-flip="left"]{
  left: auto !important;
  right: calc(100% + 8px) !important;
  transform-origin: right top;
}

/* small-screen/mobile: nested menus become static (accordion) */
@media (max-width:760px){
  .dropdown-menu { position: static !important; display: none !important; }
  .dropdown-footer.open > .dropdown-menu { display:block !important; }
  .dropdown-menu .dropdown-footer > .dropdown-menu { position: static !important; left:auto !important; right:auto !important; }
}
/* ====== FORCE OVERRIDE: center .slide-inner and remove previous translate/left ====== */
/* Put this at the END of assets/style.css */

.slide-inner {
  /* position kept absolute but centered precisely */
  position: absolute !important;
  left: 50% !important;
  top: 42% !important;                     /* tweak vertical placement if needed */
  transform: translate(-50%, -42%) !important;

  /* remove any leftover offsets */
  margin: 0 !important;
  right: auto !important;
  width: auto !important;
  max-width: 1100px !important;
  box-sizing: border-box !important;
  padding: 18px 28px !important;
  z-index: 999 !important;
}

/* also explicitly nullify any translateX-only transforms that might be applied elsewhere */
.slide-inner[style] { transform: translate(-50%, -42%) !important; left:50% !important; top:42% !important; }

/* arrows/dots positioning keep centered vertically */
.arrow { top: 50% !important; transform: translateY(-50%) !important; }

/* responsive: push slide-inner slightly more central on small screens */
@media (max-width: 900px) {
  .slide-inner {
    top: 48% !important;
    transform: translate(-50%, -48%) !important;
    width: 92% !important;
    padding: 14px 12px !important;
  }
}
@media (max-width:420px){
  .slide-inner { top:50% !important; transform: translate(-50%,-50%) !important; padding:10px 12px !important; }
}

.modern-about-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
}

.modern-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Main grid wrapper - image and content side by side */
.modern-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
    align-items: start;
}

/* Left column - Image with fixed height */
.modern-about-left {
    height: 500px; /* Fixed height */
    position: relative;
}

.modern-about-media {
    position: relative;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
}

.modern-about-media:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.modern-about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.modern-about-media:hover img {
    transform: scale(1.05);
}

.modern-about-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #1a2980, #26d0ce);
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(26, 41, 128, 0.3);
    animation: modern-float 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes modern-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Right column - Content matching image height */
.modern-about-right {
    height: 500px; /* Same height as image */
    overflow-y: auto; /* Scroll if content overflows */
    padding-right: 15px;
}

/* Custom scrollbar for right column */
.modern-about-right::-webkit-scrollbar {
    width: 6px;
}

.modern-about-right::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modern-about-right::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #1a2980, #26d0ce);
    border-radius: 10px;
}

.modern-about-right::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #26d0ce, #1a2980);
}

/* Content inside right column */
.modern-about-heading {
    font-size: 2.4rem;
    color: #1a2980;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.modern-about-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #26d0ce, #1a2980);
    border-radius: 2px;
}

.modern-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 20px;
    font-weight: 500;
    background: white;
    padding: 20px;
    border-radius: 12px;
    border-left: 5px solid #26d0ce;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.modern-content-paragraph {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 20px;
    border-radius: 12px;
}

/* Full width content section - Below the grid */
.modern-full-width-content {
   
    border-radius: 20px;
    padding: 40px;
    margin-top: 20px;
}

.modern-sub-heading {
    font-size: 2rem;
    color: #1a2980;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
    font-weight: 600;
}

.modern-sub-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #26d0ce, #1a2980);
    border-radius: 2px;
}

/* Features list */
.modern-about-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.modern-about-features li {
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.3s ease;
}

.modern-about-features li:hover {
    background: #f8fafc;
    transform: translateX(5px);
    border-radius: 8px;
    padding-left: 15px;
}

.modern-about-features li:last-child {
    border-bottom: none;
}

.modern-tick {
    color: #10b981;
    font-size: 20px;
    font-weight: bold;
    min-width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.modern-about-features li strong {
    color: #334155;
    font-weight: 600;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* CTA Buttons */
.modern-about-cta {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e2e8f0;
}

.modern-btn-primary {
    background: linear-gradient(135deg, #1a2980, #26d0ce);
    color: white;
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 10px 25px rgba(26, 41, 128, 0.3);
    position: relative;
    overflow: hidden;
}

.modern-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.modern-btn-primary:hover::before {
    left: 100%;
}

.modern-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(26, 41, 128, 0.4);
}

.modern-btn-ghost {
    background: white;
    color: #1a2980;
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #1a2980;
    position: relative;
    overflow: hidden;
}

.modern-btn-ghost::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, #1a2980, #26d0ce);
    transition: 0.3s ease;
    z-index: 1;
}

.modern-btn-ghost:hover::before {
    width: 100%;
}

.modern-btn-ghost:hover {
    color: white;
    border-color: transparent;
}

/* Responsive Design */
@media (max-width: 992px) {
    .modern-about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .modern-about-left {
        height: 400px;
    }
    
    .modern-about-right {
        height: auto;
        overflow-y: visible;
        padding-right: 0;
    }
    
    .modern-about-heading {
        font-size: 2rem;
        text-align: center;
    }
    
    .modern-about-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .modern-full-width-content {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .modern-about-section {
        padding: 60px 0;
    }
    
    .modern-about-left {
        height: 350px;
    }
    
    .modern-about-heading {
        font-size: 1.8rem;
    }
    
    .modern-sub-heading {
        font-size: 1.6rem;
    }
    
    .modern-lead {
        font-size: 1.05rem;
        padding: 15px;
    }
    
    .modern-content-paragraph {
        padding: 15px;
    }
    
    .modern-about-cta {
        flex-direction: column;
    }
    
    .modern-btn-primary,
    .modern-btn-ghost {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modern-about-section {
        padding: 40px 0;
    }
    
    .modern-about-left {
        height: 280px;
    }
    
    .modern-about-heading {
        font-size: 1.6rem;
    }
    
    .modern-sub-heading {
        font-size: 1.4rem;
    }
    
    .modern-full-width-content {
        padding: 20px;
    }
    
    .modern-about-features li {
        padding: 12px 0;
    }
    
    .modern-tick {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
}

/* Facilities Section Styles */
.facilities-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
}

.facilities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(38, 208, 206, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(26, 41, 128, 0.05) 0%, transparent 50%);
}

.facilities-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 3.2rem;
    color: #1a2980;
    margin-bottom: 15px;
    font-weight: 800;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #26d0ce, #1a2980);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.3rem;
    color: #475569;
    max-width: 700px;
    margin: 25px auto 0;
    line-height: 1.6;
}

.title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.decoration-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #26d0ce, transparent);
}

.decoration-dot {
    color: #26d0ce;
    font-size: 12px;
    animation: pulse 2s infinite;
}

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

/* Facilities Grid */
.facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Facility Card */
.facility-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.facility-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: #26d0ce;
}

.facility-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #1a2980, #26d0ce);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.facility-card:hover::before {
    transform: scaleX(1);
}

/* Facility Icon */
.facility-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.facility-icon svg {
    width: 24px;
    height: 24px;
    color: #1a2980;
    stroke-width: 2;
}

/* Facility Image */
.facility-image {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: transform 0.5s ease;
}

.facility-card:hover .image-placeholder {
    transform: scale(1.05);
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), transparent);
}

/* Facility Content */
.facility-content {
    padding: 30px;
}

.facility-title {
    font-size: 1.6rem;
    color: #1a2980;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3;
    position: relative;
    padding-bottom: 10px;
}

.facility-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #26d0ce;
    border-radius: 2px;
}

.facility-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

/* Stats Counter (Optional Addition) */
.facilities-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 80px;
    padding: 40px;
    background: linear-gradient(135deg, #1a2980, #26d0ce);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(26, 41, 128, 0.3);
}

.stat-item {
    text-align: center;
    color: white;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
    line-height: 1;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .facilities-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .section-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 992px) {
    .facilities-section {
        padding: 80px 0;
    }
    
    .section-title {
        font-size: 2.4rem;
    }
    
    .section-subtitle {
        font-size: 1.2rem;
        padding: 0 20px;
    }
    
    .facilities-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .facilities-section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .facilities-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .facility-content {
        padding: 25px;
    }
    
    .facility-image {
        height: 180px;
    }
    
    .facility-icon {
        width: 45px;
        height: 45px;
    }
    
    .facility-icon svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 576px) {
    .facilities-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
        padding: 0;
    }
    
    .facility-title {
        font-size: 1.4rem;
    }
    
    .facility-description {
        font-size: 0.95rem;
    }
    
    .facilities-stats {
        grid-template-columns: 1fr;
        padding: 30px 20px;
        gap: 30px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
}

/* Animation Classes */
.facility-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.facility-card:nth-child(1) { animation-delay: 0.1s; }
.facility-card:nth-child(2) { animation-delay: 0.2s; }
.facility-card:nth-child(3) { animation-delay: 0.3s; }
.facility-card:nth-child(4) { animation-delay: 0.4s; }
.facility-card:nth-child(5) { animation-delay: 0.5s; }
.facility-card:nth-child(6) { animation-delay: 0.6s; }
.facility-card:nth-child(7) { animation-delay: 0.7s; }
.facility-card:nth-child(8) { animation-delay: 0.8s; }
.facility-card:nth-child(9) { animation-delay: 0.9s; }
.facility-card:nth-child(10) { animation-delay: 1s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effect Enhancement */
.facility-card:hover .facility-icon {
    background: linear-gradient(135deg, #1a2980, #26d0ce);
    transform: rotate(15deg);
}

.facility-card:hover .facility-icon svg {
    color: white;
    stroke-width: 2.5;
}

/* Gradient Background Animation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.facilities-section {
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}
/* Mission & Vision Section Styles */
.mission-vision-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
    color: white;
}

.mv-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Background Shapes */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.1;
    z-index: 1;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #26d0ce, #1a2980);
    top: -150px;
    left: -150px;
    animation: float 20s infinite ease-in-out;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    bottom: -200px;
    right: -200px;
    animation: float 25s infinite ease-in-out reverse;
}

.shape-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    top: 50%;
    left: 10%;
    animation: float 15s infinite ease-in-out;
}

.shape-4 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    bottom: 30%;
    right: 15%;
    animation: float 18s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, 30px) rotate(120deg); }
    66% { transform: translate(-20px, 40px) rotate(240deg); }
}

/* Section Header */
.mv-header {
    text-align: center;
    margin-bottom: 80px;
}

.mv-main-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #26d0ce, #667eea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 10px 30px rgba(38, 208, 206, 0.3);
    position: relative;
    display: inline-block;
}

.mv-main-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 4px;
    background: linear-gradient(90deg, #26d0ce, #667eea);
    border-radius: 2px;
}

.mv-subtitle {
    font-size: 1.4rem;
    color: #cbd5e1;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.mv-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.divider-line {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #26d0ce, transparent);
}

.divider-icon {
    color: #26d0ce;
    font-size: 24px;
    animation: spin 10s infinite linear;
}

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

/* Content Wrapper */
.mv-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    position: relative;
}

/* Cards */
.mv-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.mv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    border-color: #26d0ce;
}

.mission-card {
    border-left: 5px solid #26d0ce;
}

.vision-card {
    border-left: 5px solid #667eea;
}

.mv-card-inner {
    padding: 40px;
}

/* Card Header */
.mv-card-header {
    position: relative;
    margin-bottom: 30px;
}

.mv-icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.mv-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #26d0ce, #1a2980);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(38, 208, 206, 0.3);
}

.mission-card .mv-icon {
    background: linear-gradient(135deg, #26d0ce, #1a2980);
}

.vision-card .mv-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.mv-icon svg {
    width: 32px;
    height: 32px;
    color: white;
    stroke-width: 2;
}

.mv-card-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-left: 90px;
    margin-bottom: 20px;
    padding-top: 10px;
}

.mission-card .mv-card-title {
    color: #26d0ce;
}

.vision-card .mv-card-title {
    color: #667eea;
}

/* Image Placeholder */
.mv-image-placeholder {
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}

.mission-image {
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

.vision-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.placeholder-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.placeholder-content span {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.placeholder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Card Body */
.mv-card-body {
    margin-top: 30px;
}

.mv-description {
    margin-bottom: 30px;
}

.mv-main-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0;
    padding: 20px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 15px;
    border-left: 4px solid;
}

.mission-card .mv-main-text {
    border-left-color: #26d0ce;
}

.vision-card .mv-main-text {
    border-left-color: #667eea;
}

/* Key Points */
.mv-key-points {
    margin-top: 30px;
}

.mv-key-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #f1f5f9;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.mv-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mv-point-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.3s ease;
}

.mv-point-item:hover {
    background: rgba(255, 255, 255, 0.03);
    padding-left: 15px;
    border-radius: 10px;
}

.mv-point-item:last-child {
    border-bottom: none;
}

.point-icon {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
    margin-top: 2px;
}

.point-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e2e8f0;
    flex: 1;
}

/* Connector */
.mv-connector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.connector-line {
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, #26d0ce, #667eea);
    border-radius: 2px;
}

.connector-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #26d0ce, #667eea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(38, 208, 206, 0.4);
    animation: pulse 2s infinite;
}

.connector-circle span {
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .mv-content-wrapper {
        gap: 30px;
    }
    
    .mv-card-inner {
        padding: 30px;
    }
    
    .mv-main-title {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .mission-vision-section {
        padding: 80px 0;
    }
    
    .mv-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .mv-connector {
        display: none;
    }
    
    .mv-header {
        margin-bottom: 60px;
    }
    
    .mv-main-title {
        font-size: 2.6rem;
    }
}

@media (max-width: 768px) {
    .mission-vision-section {
        padding: 60px 0;
    }
    
    .mv-main-title {
        font-size: 2.2rem;
    }
    
    .mv-subtitle {
        font-size: 1.2rem;
    }
    
    .mv-card-title {
        font-size: 1.8rem;
        margin-left: 0;
        margin-top: 80px;
    }
    
    .mv-icon-wrapper {
        top: -20px;
        left: -20px;
    }
    
    .mv-card-inner {
        padding: 25px;
    }
    
    .mv-image-placeholder {
        height: 150px;
    }
    
    .placeholder-content span {
        font-size: 2.5rem;
    }
    
    .point-icon {
        font-size: 1.3rem;
        min-width: 35px;
    }
    
    .point-text {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .mission-vision-section {
        padding: 40px 0;
    }
    
    .mv-main-title {
        font-size: 1.8rem;
    }
    
    .mv-subtitle {
        font-size: 1rem;
    }
    
    .mv-card-title {
        font-size: 1.6rem;
    }
    
    .mv-image-placeholder {
        height: 120px;
    }
    
    .placeholder-content span {
        font-size: 2rem;
    }
    
    .mv-main-text {
        font-size: 1rem;
        padding: 15px;
    }
    
    .mv-key-title {
        font-size: 1.2rem;
    }
    
    .mv-point-item {
        padding: 12px 0;
    }
    
    .connector-circle {
        width: 60px;
        height: 60px;
    }
    
    .connector-circle span {
        font-size: 1rem;
    }
}

/* Animation Classes */
.mv-card {
    opacity: 0;
    transform: translateY(30px);
    animation: mvFadeIn 0.8s ease forwards;
}

.mission-card {
    animation-delay: 0.2s;
}

.vision-card {
    animation-delay: 0.4s;
}

@keyframes mvFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effects */
.mv-card:hover .mv-icon {
    transform: rotate(360deg);
    transition: transform 0.8s ease;
}

.mv-card:hover .mv-image-placeholder .placeholder-content span {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Gradient Text Animation */
.mv-main-title {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
/* News & Events Section - Complete Working Version */
.news-events-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e3e8f0 100%);
    min-height: 100vh;
}

.ne-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Section Header */
.ne-header {
    text-align: center;
    margin-bottom: 40px;
}

.ne-main-title {
    font-size: 3rem;
    color: #1a2980;
    margin-bottom: 15px;
    font-weight: 800;
}

.ne-subtitle {
    font-size: 1.2rem;
    color: #475569;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.ne-title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.ne-dec-line {
    width: 80px;
    height: 3px;
    background: #26d0ce;
}

.ne-dec-icon {
    font-size: 24px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Categories Navigation */
.ne-categories-nav {
    margin: 40px 0;
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ne-cat-scroll {
    display: flex;
    gap: 10px;
    padding: 10px 5px;
    min-width: max-content;
}

.ne-cat-btn {
    padding: 12px 24px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    min-width: 120px;
}

.ne-cat-btn:hover {
    background: #f1f5f9;
    border-color: #26d0ce;
}

.ne-cat-btn.active {
    background: #1a2980;
    color: white;
    border-color: #1a2980;
}

/* Events Grid */
.ne-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

/* Event Card */
.ne-event-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.ne-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.ne-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8fafc;
}

/* Category Badges */
.ne-category-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.academic-badge { background: linear-gradient(135deg, #667eea, #764ba2); }
.cultural-badge { background: linear-gradient(135deg, #f093fb, #f5576c); }
.sports-badge { background: linear-gradient(135deg, #30cfd0, #330867); }
.trips-badge { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.competitions-badge { background: linear-gradient(135deg, #a8edea, #fed6e3); color: #333; }
.awareness-badge { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.workshops-badge { background: linear-gradient(135deg, #fa709a, #fee140); }
.community-badge { background: linear-gradient(135deg, #a3bded, #6991c7); }
.special-badge { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: #333; }
.announcements-badge { background: linear-gradient(135deg, #ffecd2, #fcb69f); color: #333; }
.creative-badge { background: linear-gradient(135deg, #84fab0, #8fd3f4); color: #333; }
.health-badge { background: linear-gradient(135deg, #d4fc79, #96e6a1); color: #333; }

.ne-cat-icon {
    font-size: 1.2rem;
}

.ne-date {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

/* Event Image */
.ne-event-image {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.ne-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.academic-img { background: linear-gradient(135deg, #667eea, #764ba2); }
.cultural-img { background: linear-gradient(135deg, #f093fb, #f5576c); }
.sports-img { background: linear-gradient(135deg, #30cfd0, #330867); }
.trips-img { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.competitions-img { background: linear-gradient(135deg, #a8edea, #fed6e3); color: #333; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.awareness-img { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.workshops-img { background: linear-gradient(135deg, #fa709a, #fee140); }
.community-img { background: linear-gradient(135deg, #a3bded, #6991c7); }
.special-img { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: #333; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.announcements-img { background: linear-gradient(135deg, #ffecd2, #fcb69f); color: #333; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.creative-img { background: linear-gradient(135deg, #84fab0, #8fd3f4); color: #333; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.health-img { background: linear-gradient(135deg, #d4fc79, #96e6a1); color: #333; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }

/* Event Content */
.ne-event-content {
    padding: 20px;
}

.ne-event-title {
    font-size: 1.5rem;
    color: #1a2980;
    margin-bottom: 15px;
    font-weight: 700;
    border-bottom: 2px solid #26d0ce;
    padding-bottom: 10px;
}

.ne-event-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

.ne-event-desc > p {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #26d0ce;
}

/* Sub Categories */
.ne-sub-categories {
    margin-top: 20px;
}

.ne-sub-item {
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.ne-sub-item:hover {
    border-color: #26d0ce;
    transform: translateX(5px);
}

.ne-sub-item h4 {
    font-size: 1.1rem;
    color: #1a2980;
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ne-sub-item h4::before {
    content: '•';
    color: #26d0ce;
    font-size: 1.5rem;
}

.ne-sub-item p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* View All Button */
.ne-view-all {
    text-align: center;
    margin-top: 50px;
}

.ne-view-btn {
    padding: 15px 40px;
    background: linear-gradient(135deg, #1a2980, #26d0ce);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 250px;
}

.ne-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(26, 41, 128, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ne-events-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 992px) {
    .news-events-section {
        padding: 60px 20px;
    }
    
    .ne-main-title {
        font-size: 2.5rem;
    }
    
    .ne-subtitle {
        font-size: 1.1rem;
    }
    
    .ne-events-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
    }
    
    .ne-cat-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .news-events-section {
        padding: 40px 15px;
    }
    
    .ne-main-title {
        font-size: 2rem;
    }
    
    .ne-subtitle {
        font-size: 1rem;
    }
    
    .ne-events-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .ne-event-image {
        height: 160px;
    }
    
    .ne-img-placeholder {
        font-size: 1.6rem;
    }
    
    .ne-view-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .ne-categories-nav {
        margin: 30px 0;
    }
    
    .ne-cat-scroll {
        padding-bottom: 15px;
    }
    
    .ne-event-card {
        max-width: 100%;
    }
    
    .ne-event-content {
        padding: 15px;
    }
    
    .ne-event-title {
        font-size: 1.3rem;
    }
    
    .ne-sub-item {
        padding: 12px;
    }
}

 .calendar-section {
            flex: 1;
            min-width: 300px;
            background-color: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .events-section {
            flex: 1;
            min-width: 300px;
            background-color: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .section-title {
            font-size: 1.8rem;
            color: #1a4a63;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 3px solid #e6f2ff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: #2c6e91;
        }
        
        .month-year {
            text-align: center;
            font-size: 1.8rem;
            color: #1a4a63;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .calendar-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        
        .calendar-table th {
            background-color: #e6f2ff;
            color: #1a4a63;
            padding: 12px 5px;
            text-align: center;
            font-weight: 600;
            border: 1px solid #d1e7ff;
        }
        
        .calendar-table td {
            border: 1px solid #e6f2ff;
            height: 60px;
            width: 14.28%;
            text-align: center;
            vertical-align: middle;
            font-size: 1.1rem;
            transition: all 0.2s ease;
        }
        
        .calendar-table td:hover {
            background-color: #f0f8ff;
            transform: scale(1.05);
        }
        
        .other-month {
            color: #aaa;
            background-color: #f9f9f9;
        }
        
        .today {
            background-color: #ffefc6;
            font-weight: bold;
            color: #d48806;
            border: 2px solid #ffc53d;
        }
        
        .event-day {
            background-color: #e6f7ff;
            position: relative;
        }
        
        .event-day::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background-color: #1890ff;
            border-radius: 50%;
        }
        
        .events-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .event-item {
            padding: 18px;
            border-radius: 10px;
            background-color: #f8fbff;
            border-left: 5px solid #2c6e91;
            transition: transform 0.3s ease;
        }
        
        .event-item:hover {
            transform: translateX(5px);
            background-color: #f0f7ff;
        }
        
        .event-date {
            font-weight: 600;
            color: #1a4a63;
            font-size: 1.1rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .event-title {
            font-size: 1.2rem;
            color: #333;
            margin-bottom: 5px;
        }
        
        .event-description {
            color: #666;
            font-size: 0.95rem;
        }
        
        .event-highlight {
            background-color: #fff7e6;
            border-left-color: #ffa940;
        }
        
        .event-important {
            background-color: #fff1f0;
            border-left-color: #ff4d4f;
        }
        
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px dashed #ddd;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }
        
        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 3px;
        }
        
        .footer {
            text-align: center;
            margin-top: 20px;
            padding: 20px;
            color: #666;
            font-size: 0.9rem;
            border-top: 1px solid #eaeaea;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .calendar-table td {
                height: 50px;
                font-size: 1rem;
            }
            
            header h1 {
                font-size: 2rem;
            }
        }
        
          .ais-about {
    padding: 90px 0;
    background-color: #F5F7FA;
  }
  
  .ais-section-title {
    text-align: center;
    font-size: 2.7rem;
    color: #1A237E;
    margin-bottom: 60px;
    position: relative;
  }
  
  .ais-section-title:after {
    content: '';
    position: absolute;
    width: 120px;
    height: 5px;
    background-color: #FFB300;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
  }
  
  .ais-about-content {
    max-width: 950px;
    margin: 0 auto;
  }
  
  .ais-about-text p {
    margin-bottom: 28px;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    text-align: justify;
  }
  
  /* SUPPORT SECTION STYLES */
  .ais-support {
    padding: 90px 0;
    background-color: white;
  }
  
  .ais-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 35px;
    margin-top: 50px;
  }
  
  .ais-support-card {
    background-color: #F9FBFF;
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    border-left: 6px solid #2196F3;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }
  
  .ais-support-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    background-color: #F0F7FF;
  }
  
  .ais-support-icon {
    font-size: 2.8rem;
    margin-bottom: 18px;
  }
  
  .ais-support-card h3 {
    font-size: 1.35rem;
    color: #1A237E;
    margin-bottom: 18px;
    line-height: 1.4;
  }
  
  .ais-support-card p {
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
  }
  
  /* CTA SECTION STYLES */
  .ais-cta {
    padding: 90px 0;
    background: linear-gradient(135deg, #1A237E 0%, #283593 100%);
    color: white;
    text-align: center;
  }
  
  .ais-cta-title {
    font-size: 2.8rem;
    margin-bottom: 25px;
    font-weight: 700;
  }
  
  .ais-cta-text {
    font-size: 1.4rem;
    max-width: 700px;
    margin: 0 auto 50px;
    opacity: 0.9;
    font-weight: 300;
  }
  
  .ais-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
  }
  
  .ais-primary-btn {
    display: inline-block;
    background-color: #FFB300;
    color: #1A237E;
    padding: 18px 45px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
  }
  
  .ais-primary-btn:hover {
    background-color: #FFA000;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }
  
  .ais-secondary-btn {
    display: inline-block;
    background-color: transparent;
    color: white;
    padding: 18px 45px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 3px solid white;
  }
  
  .ais-secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
  }
  
  /* RESPONSIVE DESIGN */
  @media (max-width: 768px) {
    .ais-hero-title {
      font-size: 2.5rem;
    }
    
    .ais-hero-subtitle {
      font-size: 1.3rem;
    }
    
    .ais-section-title {
      font-size: 2.2rem;
    }
    
    .ais-support-grid {
      grid-template-columns: 1fr;
      gap: 25px;
    }
    
    .ais-cta-title {
      font-size: 2.3rem;
    }
    
    .ais-cta-text {
      font-size: 1.2rem;
    }
    
    .ais-cta-buttons {
      flex-direction: column;
      align-items: center;
    }
    
    .ais-primary-btn, .ais-secondary-btn {
      width: 100%;
      max-width: 300px;
      text-align: center;
    }
  }
  
  @media (max-width: 480px) {
    .ais-hero {
      height: 75vh;
      min-height: 450px;
    }
    
    .ais-hero-title {
      font-size: 2rem;
    }
    
    .ais-hero-subtitle {
      font-size: 1.1rem;
    }
    
    .ais-section-title {
      font-size: 1.8rem;
    }
    
    .ais-about-text p {
      font-size: 1rem;
    }
    
    .ais-support-card {
      padding: 25px;
    }
  }
  
    .ais-primary-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
  }
  
  /* ABOUT SECTION STYLES */
  .ais-primary-about {
    padding: 100px 0;
    background-color: #F8FAFC;
  }
  
  .ais-primary-section-title {
    text-align: center;
    font-size: 2.8rem;
    color: #1E3C72;
    margin-bottom: 70px;
    position: relative;
    font-weight: 700;
  }
  
  .ais-primary-section-title:after {
    content: '';
    position: absolute;
    width: 140px;
    height: 5px;
    background-color: #4CAF50;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
  }
  
  .ais-primary-about-content {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .ais-primary-about-content p {
    margin-bottom: 30px;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    text-align: justify;
  }
  
  /* SUPPORT FEATURES STYLES */
  .ais-primary-support {
    padding: 100px 0;
    background-color: white;
  }
  
  .ais-primary-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 35px;
    margin-top: 60px;
  }
  
  .ais-primary-feature-card {
    background-color: #F8FAFC;
    border-radius: 12px;
    padding: 30px;
    transition: all 0.4s ease;
    border-top: 5px solid #1E3C72;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .ais-primary-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    background-color: #F0F7FF;
  }
  
  .ais-primary-feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
  }
  
  .ais-primary-feature-title {
    font-size: 1.4rem;
    color: #1E3C72;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: 600;
  }
  
  .ais-primary-feature-desc {
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
    flex-grow: 1;
  }
  
  /* CTA SECTION STYLES */
  .ais-primary-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #1E3C72 0%, #2A5298 100%);
    color: white;
  }
  
  .ais-primary-cta-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }
  
  .ais-primary-cta-title {
    font-size: 2.8rem;
    margin-bottom: 25px;
    font-weight: 700;
    line-height: 1.3;
  }
  
  .ais-primary-cta-text {
    font-size: 1.4rem;
    margin-bottom: 50px;
    opacity: 0.9;
    font-weight: 300;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .ais-primary-cta-btns {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
  }
  
  .ais-primary-cta-btn-main {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 20px 50px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border: 2px solid #4CAF50;
  }
  
  .ais-primary-cta-btn-main:hover {
    background-color: #3D8B40;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }
  
  .ais-primary-cta-btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: white;
    padding: 20px 50px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white;
  }
  
  .ais-primary-cta-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
  }
  
  /* RESPONSIVE DESIGN */
  @media (max-width: 992px) {
    .ais-primary-hero-title {
      font-size: 2.8rem;
    }
    
    .ais-primary-hero-subtitle {
      font-size: 1.5rem;
    }
    
    .ais-primary-section-title {
      font-size: 2.4rem;
    }
    
    .ais-primary-features-grid {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
    }
    
    .ais-primary-cta-title {
      font-size: 2.4rem;
    }
    
    .ais-primary-cta-text {
      font-size: 1.2rem;
    }
  }
  
  @media (max-width: 768px) {
    .ais-primary-hero {
      height: 75vh;
      min-height: 500px;
    }
    
    .ais-primary-hero-title {
      font-size: 2.3rem;
    }
    
    .ais-primary-hero-subtitle {
      font-size: 1.3rem;
    }
    
    .ais-primary-section-title {
      font-size: 2rem;
    }
    
    .ais-primary-about, .ais-primary-support, .ais-primary-cta {
      padding: 70px 0;
    }
    
    .ais-primary-features-grid {
      grid-template-columns: 1fr;
    }
    
    .ais-primary-cta-btns {
      flex-direction: column;
      align-items: center;
    }
    
    .ais-primary-cta-btn-main, .ais-primary-cta-btn-secondary {
      width: 100%;
      max-width: 350px;
      text-align: center;
    }
  }
  
  @media (max-width: 480px) {
    .ais-primary-hero-title {
      font-size: 1.9rem;
    }
    
    .ais-primary-hero-subtitle {
      font-size: 1.1rem;
    }
    
    .ais-primary-hero-btn {
      padding: 15px 35px;
      font-size: 1.1rem;
    }
    
    .ais-primary-section-title {
      font-size: 1.7rem;
    }
    
    .ais-primary-about-content p {
      font-size: 1rem;
    }
    
    .ais-primary-feature-card {
      padding: 25px;
    }
    
    .ais-primary-cta-title {
      font-size: 1.9rem;
    }
    
    .ais-primary-cta-text {
      font-size: 1.1rem;
    }
  }
  
   .ais-middle-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  /* ===== CONTENT SECTION ===== */
  .ais-middle-content-section {
    padding: 100px 0;
    background: #f8fafc;
    position: relative;
  }
  
  .ais-middle-content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(to right, #00bcd4, #1a2a6c);
  }
  
  .ais-middle-header {
    text-align: center;
    margin-bottom: 70px;
  }
  
  .ais-middle-section-heading {
    font-size: 2.8rem;
    color: #1a2a6c;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
  }
  
  .ais-middle-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
  }
  
  .ais-middle-divider-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, transparent, #00bcd4, transparent);
  }
  
  .ais-middle-divider-circle {
    width: 10px;
    height: 10px;
    background: #00bcd4;
    border-radius: 50%;
  }
  
  .ais-middle-text-block {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8f4f8;
  }
  
  .ais-middle-text-block p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
    text-align: justify;
  }
  
  .ais-middle-text-block p:last-child {
    margin-bottom: 0;
  }
  
  /* ===== FEATURES SECTION ===== */
  .ais-middle-features-section {
    padding: 100px 0;
    background: white;
    position: relative;
  }
  
  .ais-middle-features-intro {
    font-size: 1.2rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }
  
  .ais-middle-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
    margin-top: 60px;
  }
  
  .ais-middle-feature-item {
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border-radius: 15px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    transition: all 0.4s ease;
    border: 1px solid #e8f4f8;
    position: relative;
    overflow: hidden;
  }
  
  .ais-middle-feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #00bcd4, #1a2a6c);
  }
  
  .ais-middle-feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: #00bcd4;
  }
  
  .ais-middle-feature-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #00bcd4;
    opacity: 0.3;
    line-height: 1;
    flex-shrink: 0;
  }
  
  .ais-middle-feature-content {
    flex: 1;
  }
  
  .ais-middle-feature-content h3 {
    font-size: 1.4rem;
    color: #1a2a6c;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.4;
  }
  
  .ais-middle-feature-content p {
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
  }
  
  /* ===== CTA SECTION ===== */
  .ais-middle-cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e8f4f8 100%);
    position: relative;
    overflow: hidden;
  }
  
  .ais-middle-cta-card {
    background: linear-gradient(135deg, #1a2a6c 0%, #2d3b8a 100%);
    border-radius: 25px;
    padding: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(26, 42, 108, 0.2);
  }
  
  .ais-middle-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  }
  
  .ais-middle-cta-content {
    flex: 1;
    position: relative;
    z-index: 2;
  }
  
  .ais-middle-cta-title {
    font-size: 2.8rem;
    color: white;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .ais-middle-cta-text {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.6;
  }
  
  .ais-middle-cta-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .ais-middle-cta-primary {
    display: inline-block;
    background: linear-gradient(135deg, #00bcd4 0%, #4dd0e1 100%);
    color: white;
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.3);
  }
  
  .ais-middle-cta-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 188, 212, 0.4);
  }
  
  .ais-middle-cta-secondary {
    display: inline-block;
    background: transparent;
    color: white;
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  .ais-middle-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    transform: translateY(-5px);
  }
  
  .ais-middle-cta-decoration {
    position: relative;
    width: 300px;
    height: 300px;
    display: none;
  }
  
  .ais-middle-cta-circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid rgba(0, 188, 212, 0.3);
    border-radius: 50%;
    top: 50px;
    right: 50px;
  }
  
  .ais-middle-cta-square {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    top: 100px;
    right: 150px;
    transform: rotate(45deg);
  }
  
  .ais-middle-cta-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 87px solid rgba(255, 255, 255, 0.1);
    top: 150px;
    right: 50px;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 1100px) {
    .ais-middle-features-grid {
      grid-template-columns: 1fr;
    }
    
    .ais-middle-main-title {
      font-size: 3.2rem;
    }
    
    .ais-middle-cta-card {
      flex-direction: column;
      text-align: center;
      padding: 50px 30px;
    }
    
    .ais-middle-cta-decoration {
      display: none;
    }
  }
  
  @media (max-width: 768px) {
    .ais-middle-main-title {
      font-size: 2.5rem;
    }
    
    .ais-middle-subtitle {
      font-size: 1.4rem;
    }
    
    .ais-middle-section-heading {
      font-size: 2.2rem;
    }
    
    .ais-middle-text-block {
      padding: 30px 20px;
    }
    
    .ais-middle-text-block p {
      font-size: 1.05rem;
    }
    
    .ais-middle-feature-item {
      flex-direction: column;
      gap: 15px;
      padding: 25px;
    }
    
    .ais-middle-features-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    
    .ais-middle-cta-title {
      font-size: 2.2rem;
    }
    
    .ais-middle-cta-text {
      font-size: 1.1rem;
    }
    
    .ais-middle-cta-buttons {
      flex-direction: column;
      align-items: center;
    }
    
    .ais-middle-cta-primary,
    .ais-middle-cta-secondary {
      width: 100%;
      max-width: 300px;
      text-align: center;
    }
  }
  
  @media (max-width: 480px) {
    .ais-middle-hero-wrapper,
    .ais-middle-container {
      padding: 0 20px;
    }
    
    .ais-middle-main-title {
      font-size: 2rem;
    }
    
    .ais-middle-subtitle {
      font-size: 1.2rem;
    }
    
    .ais-middle-hero-desc {
      font-size: 1rem;
    }
    
    .ais-middle-explore-btn {
      padding: 15px 30px;
      font-size: 1rem;
    }
    
    .ais-middle-section-heading {
      font-size: 1.8rem;
    }
    
    .ais-middle-features-grid {
      grid-template-columns: 1fr;
    }
    
    .ais-middle-feature-content h3 {
      font-size: 1.2rem;
    }
    
    .ais-middle-feature-content p {
      font-size: 1rem;
    }
  }
   .ais-senior-intro {
    background: linear-gradient(135deg, #0c2461 0%, #1e3799 50%, #4a69bd 100%);
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
  }
  
  .ais-senior-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #f6b93b, #e55039, #4a69bd);
  }
  
  .ais-senior-intro-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
  }
  
  .ais-senior-intro-content {
    text-align: center;
    color: white;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .ais-senior-intro-title {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .ais-senior-intro-subtitle {
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 30px;
    opacity: 0.95;
  }
  
  .ais-senior-intro-highlight {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 30px;
    position: relative;
  }
  
  .ais-senior-highlight-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #f6b93b, #e55039);
    margin: 0 auto 15px;
    border-radius: 2px;
  }
  
  .ais-senior-intro-highlight p {
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
  }
  
  /* ===== CONTAINER ===== */
  .ais-senior-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  /* ===== CONTENT SECTION ===== */
  .ais-senior-content {
    padding: 80px 0;
    background: #f8f9fa;
  }
  
  .ais-senior-content-wrapper {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
  }
  
  .ais-senior-text-section {
    padding: 60px;
  }
  
  .ais-senior-text-section p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
    text-align: justify;
  }
  
  .ais-senior-text-section p:last-child {
    margin-bottom: 0;
  }
  
  /* ===== FEATURES SECTION ===== */
  .ais-senior-features {
    padding: 80px 0;
    background: white;
    position: relative;
  }
  
  .ais-senior-features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #e9ecef, transparent);
  }
  
  .ais-senior-features-header {
    text-align: center;
    margin-bottom: 60px;
  }
  
  .ais-senior-features-title {
    font-size: 2.5rem;
    color: #0c2461;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
  }
  
  .ais-senior-features-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
  }
  
  .ais-senior-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
  }
  
  .ais-senior-feature-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.4s ease;
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
  }
  
  .ais-senior-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #4a69bd;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }
  
  .ais-senior-feature-card:hover::before {
    transform: scaleX(1);
  }
  
  .ais-senior-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #4a69bd;
  }
  
  /* Feature-specific colors */
  .ais-senior-feature-academic::before { background: #4a69bd; }
  .ais-senior-feature-board::before { background: #e55039; }
  .ais-senior-feature-competitive::before { background: #f6b93b; }
  .ais-senior-feature-concept::before { background: #78e08f; }
  .ais-senior-feature-career::before { background: #6a89cc; }
  .ais-senior-feature-balanced::before { background: #fa983a; }
  .ais-senior-feature-emotional::before { background: #e55039; }
  .ais-senior-feature-labs::before { background: #38ada9; }
  .ais-senior-feature-sports::before { background: #4a69bd; }
  .ais-senior-feature-values::before { background: #f6b93b; }
  
  .ais-senior-feature-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .ais-senior-feature-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
  }
  
  .ais-senior-feature-card h3 {
    font-size: 1.3rem;
    color: #0c2461;
    font-weight: 600;
    line-height: 1.4;
    flex: 1;
  }
  
  .ais-senior-feature-card p {
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
    padding-left: 70px;
  }
  
   .adv-programs-section {
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
    padding: 70px 0 50px;
    position: relative;
    overflow: hidden;
  }
  
  .adv-programs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
  }
  
  .adv-programs-header {
    text-align: center;
    color: white;
  }
  
  .adv-programs-title {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .adv-programs-subtitle {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 700px;
    margin: 0 auto;
  }
  
  .adv-programs-subtitle-main {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
  }
  
  .adv-programs-subtitle-desc {
    font-size: 1.4rem;
    opacity: 0.9;
    font-weight: 300;
  }
  
  /* ===== CONTAINER ===== */
  .adv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  /* ===== CONTENT SECTION ===== */
  .adv-content-section {
    padding: 80px 0;
    background: #f8f9fa;
  }
  
  .adv-content-wrapper {
    background: white;
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
  }
  
  .adv-content-wrapper p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
    text-align: justify;
  }
  
  .adv-content-wrapper p:last-child {
    margin-bottom: 0;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 768px) {
    .adv-programs-title {
      font-size: 2.5rem;
    }
    
    .adv-programs-subtitle-main {
      font-size: 1.6rem;
    }
    
    .adv-programs-subtitle-desc {
      font-size: 1.2rem;
    }
    
    .adv-content-wrapper {
      padding: 35px 25px;
    }
    
    .adv-content-wrapper p {
      font-size: 1.05rem;
    }
  }
  
  @media (max-width: 480px) {
    .adv-programs-section {
      padding: 50px 0 30px;
    }
    
    .adv-programs-title {
      font-size: 2rem;
    }
    
    .adv-programs-subtitle {
      padding: 20px;
    }
    
    .adv-programs-subtitle-main {
      font-size: 1.4rem;
    }
    
    .adv-programs-subtitle-desc {
      font-size: 1.1rem;
    }
    
    .adv-container {
      padding: 0 20px;
    }
    
    .adv-content-section {
      padding: 50px 0;
    }
    
    .adv-content-wrapper {
      padding: 25px 20px;
    }
    
    .adv-content-wrapper p {
      font-size: 1rem;
      margin-bottom: 25px;
    }
  }
  
   .syl-header-section {
    background: linear-gradient(135deg, #2c3e50 0%, #4a6491 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
  }
  
  .syl-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #3498db, #2ecc71);
  }
  
  .syl-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  .syl-header-content {
    text-align: center;
    color: white;
  }
  
  .syl-main-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
  }
  
  .syl-subtitle {
    font-size: 1.3rem;
    opacity: 0.9;
    font-weight: 300;
  }
  
  /* ===== TABLE SECTION ===== */
  .syl-table-section {
    padding: 60px 0 80px;
    background: #f8f9fa;
  }
  
  .syl-table-wrapper {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
  }
  
  .syl-details-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .syl-details-table thead {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  }
  
  .syl-details-table th {
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 20px 25px;
    font-size: 1.1rem;
  }
  
  .syl-th-sno {
    width: 15%;
  }
  
  .syl-th-class {
    width: 65%;
  }
  
  .syl-th-status {
    width: 20%;
  }
  
  .syl-details-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
  }
  
  .syl-details-table tbody tr:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
  }
  
  .syl-details-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
  }
  
  .syl-details-table tbody tr:hover {
    background-color: #f0f7ff;
  }
  
  .syl-details-table td {
    padding: 18px 25px;
    font-size: 1.1rem;
    color: #333;
  }
  
  .syl-td-class {
    font-weight: 500;
    color: #2c3e50;
  }
  
  .syl-checkbox {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid #3498db;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    font-size: 1.2rem;
    color: #3498db;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .syl-checkbox:hover {
    background-color: #3498db;
    color: white;
    transform: scale(1.1);
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 768px) {
    .syl-main-title {
      font-size: 2.2rem;
    }
    
    .syl-subtitle {
      font-size: 1.1rem;
    }
    
    .syl-container {
      padding: 0 20px;
    }
    
    .syl-details-table th,
    .syl-details-table td {
      padding: 15px;
      font-size: 1rem;
    }
    
    .syl-table-section {
      padding: 40px 0 60px;
    }
  }
  
  @media (max-width: 480px) {
    .syl-main-title {
      font-size: 1.8rem;
    }
    
    .syl-subtitle {
      font-size: 1rem;
    }
    
    .syl-header-section {
      padding: 40px 0 30px;
    }
    
    .syl-details-table {
      display: block;
      overflow-x: auto;
    }
    
    .syl-details-table th,
    .syl-details-table td {
      padding: 12px;
      font-size: 0.95rem;
    }
    
    .syl-checkbox {
      width: 20px;
      height: 20px;
      line-height: 16px;
      font-size: 1rem;
    }
  }
    .srf-header-section {
    background: linear-gradient(135deg, #1a5f7a 0%, #2a8eb5 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
  }
  
  .srf-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #57cc99, #80ed99);
  }
  
  .srf-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  .srf-header-content {
    text-align: center;
    color: white;
  }
  
  .srf-main-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
  }
  
  .srf-subtitle {
    font-size: 1.3rem;
    opacity: 0.9;
    font-weight: 300;
  }
  
  /* ===== FORM SECTION ===== */
  .srf-form-section {
    padding: 60px 0 80px;
    background: #f8f9fa;
    min-height: 100vh;
  }
  
  .srf-form-wrapper {
    background: white;
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
  }
  
  /* ===== FORM STYLES ===== */
  .srf-registration-form {
    max-width: 700px;
    margin: 0 auto;
  }
  
  .srf-form-group {
    margin-bottom: 35px;
  }
  
  .srf-form-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
  }
  
  .srf-input-group {
    margin-bottom: 15px;
  }
  
  .srf-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 1.05rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    color: #333;
  }
  
  .srf-input:focus {
    outline: none;
    border-color: #1a5f7a;
    background: white;
    box-shadow: 0 0 0 3px rgba(26, 95, 122, 0.1);
  }
  
  .srf-input::placeholder {
    color: #888;
  }
  
  /* Name Fields */
  .srf-name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  /* Gender Options */
  .srf-gender-options {
    display: flex;
    gap: 30px;
  }
  
  .srf-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  
  .srf-radio {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  
  .srf-radio-label {
    font-size: 1.05rem;
    color: #333;
  }
  
  /* Address Fields */
  .srf-address-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
  }
  
  /* Contact Fields */
  .srf-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  /* Submit Button */
  .srf-form-actions {
    margin-top: 50px;
    text-align: center;
  }
  
  .srf-submit-btn {
    background: linear-gradient(135deg, #1a5f7a 0%, #2a8eb5 100%);
    color: white;
    border: none;
    padding: 16px 45px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(26, 95, 122, 0.2);
  }
  
  .srf-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(26, 95, 122, 0.3);
  }
  
  .srf-submit-btn:active {
    transform: translateY(-1px);
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 768px) {
    .srf-main-title {
      font-size: 2.2rem;
    }
    
    .srf-subtitle {
      font-size: 1.1rem;
    }
    
    .srf-form-wrapper {
      padding: 35px 25px;
    }
    
    .srf-name-fields,
    .srf-address-fields,
    .srf-contact-fields {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .srf-gender-options {
      flex-direction: column;
      gap: 15px;
    }
    
    .srf-input {
      padding: 12px 16px;
      font-size: 1rem;
    }
    
    .srf-form-label {
      font-size: 1.1rem;
    }
  }
  
  @media (max-width: 480px) {
    .srf-main-title {
      font-size: 1.8rem;
    }
    
    .srf-subtitle {
      font-size: 1rem;
    }
    
    .srf-header-section {
      padding: 40px 0 30px;
    }
    
    .srf-form-section {
      padding: 40px 0 60px;
    }
    
    .srf-container {
      padding: 0 20px;
    }
    
    .srf-form-wrapper {
      padding: 25px 20px;
    }
    
    .srf-form-group {
      margin-bottom: 25px;
    }
    
    .srf-submit-btn {
      width: 100%;
      padding: 14px 20px;
      font-size: 1.1rem;
    }
  }
    .adm-content-section {
    padding: 70px 0;
    background: #f8f9fa;
  }
  
  .adm-content-card {
    background: white;
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
  }
  
  .adm-content-card p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 25px;
    text-align: justify;
  }
  
  .adm-content-card p:last-child {
    margin-bottom: 0;
  }
  
  /* ===== STEPS SECTION ===== */
  .adm-steps-section {
    padding: 80px 0 100px;
    background: white;
  }
  
  .adm-steps-header {
    text-align: center;
    margin-bottom: 70px;
  }
  
  .adm-steps-title {
    font-size: 2.8rem;
    color: #0D47A1;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  .adm-steps-divider {
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, #FF9800, #FF5722);
    margin: 0 auto;
    border-radius: 2px;
  }
  
  .adm-steps-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
  }
  
  .adm-steps-timeline::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #1565C0, #0D47A1);
    border-radius: 3px;
  }
  
  .adm-step-item {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    position: relative;
  }
  
  .adm-step-item:last-child {
    margin-bottom: 0;
  }
  
  .adm-step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 25px rgba(21, 101, 192, 0.3);
    border: 5px solid white;
  }
  
  .adm-step-content {
    flex: 1;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 30px;
    border-left: 4px solid #FF9800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  
  .adm-step-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
  
  .adm-step-title {
    font-size: 1.4rem;
    color: #0D47A1;
    margin-bottom: 15px;
    font-weight: 600;
  }
  
  .adm-step-desc {
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .adm-hero-content {
      flex-direction: column;
      text-align: center;
    }
    
    .adm-hero-visual {
      order: -1;
    }
    
    .adm-steps-timeline::before {
      left: 35px;
    }
    
    .adm-step-number {
      width: 70px;
      height: 70px;
      font-size: 1.8rem;
    }
  }
  
  @media (max-width: 768px) {
    .adm-main-title {
      font-size: 2.5rem;
    }
    
    .adm-subtitle {
      font-size: 1.3rem;
    }
    
    .adm-steps-title {
      font-size: 2.2rem;
    }
    
    .adm-content-card {
      padding: 35px 25px;
    }
    
    .adm-content-card p {
      font-size: 1.05rem;
    }
    
    .adm-step-item {
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
    }
    
    .adm-steps-timeline::before {
      left: 35px;
    }
    
    .adm-step-number {
      width: 70px;
      height: 70px;
    }
    
    .adm-step-content {
      margin-left: 0;
    }
  }
  
  @media (max-width: 480px) {
    .adm-process-hero {
      padding: 50px 0;
    }
    
    .adm-main-title {
      font-size: 2rem;
    }
    
    .adm-subtitle {
      font-size: 1.1rem;
    }
    
    .adm-hero-visual {
      width: 100%;
    }
    
    .adm-visual-placeholder {
      height: 200px;
      padding: 30px;
    }
    
    .adm-placeholder-icon {
      font-size: 3rem;
    }
    
    .adm-process-container {
      padding: 0 20px;
    }
    
    .adm-steps-title {
      font-size: 1.8rem;
    }
    
    .adm-step-number {
      width: 60px;
      height: 60px;
      font-size: 1.5rem;
    }
    
    .adm-step-content {
      padding: 25px;
    }
    
    .adm-step-title {
      font-size: 1.2rem;
    }
    
    .adm-step-desc {
      font-size: 1rem;
    }
    
    .adm-content-section,
    .adm-steps-section {
      padding: 50px 0;
    }
  }
    .fc-header-section {
    background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
  }
  
  .fc-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #FFB300, #FF9800);
  }
  
  .fc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  .fc-header-content {
    text-align: center;
    color: white;
  }
  
  .fc-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .fc-note-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    max-width: 800px;
    margin: 0 auto;
  }
  
  .fc-note {
    font-size: 1.1rem;
    opacity: 0.95;
    font-weight: 500;
    line-height: 1.6;
  }
  
  /* ===== TABLE SECTION ===== */
  .fc-table-section {
    padding: 60px 0 80px;
    background: #f1f8e9;
  }
  
  .fc-table-wrapper {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    overflow-x: auto;
  }
  
  .fc-chart-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
  }
  
  .fc-chart-table thead {
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);
  }
  
  .fc-chart-table th {
    color: white;
    font-weight: 600;
    text-align: center;
    padding: 20px 15px;
    font-size: 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .fc-chart-table th:last-child {
    border-right: none;
  }
  
  .fc-chart-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
  }
  
  .fc-chart-table tbody tr:hover {
    background-color: #f1f8e9;
  }
  
  .fc-chart-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
  }
  
  .fc-chart-table tbody tr:hover {
    background-color: #e8f5e9;
    transform: translateY(-2px);
  }
  
  .fc-chart-table td {
    padding: 18px 15px;
    font-size: 1.05rem;
    color: #333;
    text-align: center;
    border-right: 1px solid #e0e0e0;
  }
  
  .fc-chart-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #2E7D32;
    padding-left: 25px;
  }
  
  .fc-chart-table td:last-child {
    border-right: none;
  }
  
  /* Special styling for percentage values */
  .fc-chart-table td:nth-child(2),
  .fc-chart-table td:nth-child(3),
  .fc-chart-table td:nth-child(4),
  .fc-chart-table td:nth-child(5),
  .fc-chart-table td:nth-child(6) {
    font-weight: 600;
    color: #1B5E20;
  }
  
  /* Highlight the first row */
  .fc-chart-table tbody tr:first-child {
    background-color: #f1f8e9;
    border-bottom: 2px solid #388E3C;
  }
  
  .fc-chart-table tbody tr:first-child td:first-child {
    font-weight: 700;
    color: #1B5E20;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .fc-main-title {
      font-size: 2.3rem;
    }
    
    .fc-table-wrapper {
      margin: 0 -20px;
      border-radius: 0;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    .fc-chart-table {
      min-width: 700px;
    }
  }
  
  @media (max-width: 768px) {
    .fc-main-title {
      font-size: 2rem;
    }
    
    .fc-note-box {
      padding: 15px;
    }
    
    .fc-note {
      font-size: 1rem;
    }
    
    .fc-header-section {
      padding: 40px 0 30px;
    }
    
    .fc-table-section {
      padding: 40px 0 60px;
    }
    
    .fc-container {
      padding: 0 20px;
    }
    
    .fc-chart-table th,
    .fc-chart-table td {
      padding: 15px 10px;
      font-size: 0.95rem;
    }
    
    .fc-chart-table td:first-child {
      padding-left: 15px;
    }
  }
  
  @media (max-width: 480px) {
    .fc-main-title {
      font-size: 1.7rem;
    }
    
    .fc-header-section {
      padding: 30px 0 25px;
    }
    
    .fc-table-section {
      padding: 30px 0 50px;
    }
    
    .fc-chart-table th {
      padding: 12px 8px;
      font-size: 0.9rem;
    }
    
    .fc-chart-table td {
      padding: 12px 8px;
      font-size: 0.9rem;
    }
    
    .fc-note-box {
      padding: 12px;
    }
    
    .fc-note {
      font-size: 0.9rem;
    }
  }
    .br-header-section {
    background: linear-gradient(135deg, #8B0000 0%, #B22222 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
  }
  
  .br-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #FFD700, #FFA500);
  }
  
  .br-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  .br-header-content {
    text-align: center;
    color: white;
  }
  
  .br-main-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .br-subtitle {
    font-size: 1.4rem;
    opacity: 0.9;
    font-weight: 300;
  }
  
  /* ===== TABLES SECTION ===== */
  .br-tables-section {
    padding: 60px 0 80px;
    background: #f5f5f5;
  }
  
  .br-tables-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  
  .br-class-table {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
  }
  
  .br-class-header {
    background: linear-gradient(135deg, #0b81f1 0%, #e7ecf4 100%);
    padding: 20px;
    text-align: center;
  }
  
  .br-class-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
  }
  
  .br-result-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .br-result-table thead {
    background: linear-gradient(135deg, #2a90f1 0%, #e3dfdf 100%);
  }
  
  .br-result-table th {
    color: white;
    font-weight: 600;
    text-align: center;
    padding: 18px 15px;
    font-size: 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .br-result-table th:last-child {
    border-right: none;
  }
  
  .br-result-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
  }
  
  .br-result-table tbody tr:hover {
    background-color: #fff5f5;
    transform: translateY(-2px);
  }
  
  .br-result-table tbody tr:nth-child(even) {
    background-color: #fafafa;
  }
  
  .br-result-table tbody tr:hover {
    background-color: #ffeaea;
  }
  
  .br-result-table td {
    padding: 16px 15px;
    font-size: 1.05rem;
    color: #333;
    text-align: center;
    border-right: 1px solid #e0e0e0;
  }
  
  .br-result-table td:first-child {
    font-weight: 600;
    color: #8B0000;
    background-color: #fff8f8;
  }
  
  .br-result-table td:last-child {
    border-right: none;
    font-weight: 600;
    color: #228B22;
  }
  
  .br-result-table td:nth-child(2),
  .br-result-table td:nth-child(3) {
    color: #1a1a1a;
    font-weight: 500;
  }
  
  /* Highlight percentage columns */
  .br-result-table td:last-child {
    background-color: #f8fff8;
    position: relative;
  }
  
  .br-result-table td:last-child::before {
    content: '%';
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #228B22;
    opacity: 0.7;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .br-tables-wrapper {
      grid-template-columns: 1fr;
      gap: 30px;
      max-width: 600px;
      margin: 0 auto;
    }
    
    .br-main-title {
      font-size: 2.5rem;
    }
  }
  
  @media (max-width: 768px) {
    .br-main-title {
      font-size: 2.2rem;
    }
    
    .br-subtitle {
      font-size: 1.2rem;
    }
    
    .br-header-section {
      padding: 40px 0 30px;
    }
    
    .br-tables-section {
      padding: 40px 0 60px;
    }
    
    .br-container {
      padding: 0 20px;
    }
    
    .br-result-table th {
      padding: 15px 10px;
      font-size: 1rem;
    }
    
    .br-result-table td {
      padding: 14px 10px;
      font-size: 1rem;
    }
    
    .br-class-title {
      font-size: 1.6rem;
    }
    
    .br-result-table td:last-child::before {
      display: none;
    }
  }
  
  @media (max-width: 480px) {
    .br-main-title {
      font-size: 1.8rem;
    }
    
    .br-subtitle {
      font-size: 1rem;
    }
    
    .br-header-section {
      padding: 30px 0 25px;
    }
    
    .br-tables-section {
      padding: 30px 0 50px;
    }
    
    .br-class-header {
      padding: 15px;
    }
    
    .br-class-title {
      font-size: 1.4rem;
    }
    
    .br-result-table th {
      padding: 12px 8px;
      font-size: 0.9rem;
    }
    
    .br-result-table td {
      padding: 12px 8px;
      font-size: 0.9rem;
    }
    
    .br-tables-wrapper {
      gap: 25px;
    }
  }
  
    .blog-header-section {
    background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%);
    padding: 70px 0 50px;
    position: relative;
    overflow: hidden;
  }
  
  .blog-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #00C9FF, #92FE9D);
  }
  
  .blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  .blog-header-content {
    text-align: center;
    color: white;
  }
  
  .blog-main-title {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
  }
  
  .blog-subtitle {
    font-size: 1.4rem;
    opacity: 0.9;
    font-weight: 300;
  }
  
  /* ===== FEATURED BLOG SECTION ===== */
  .blog-featured-section {
    padding: 70px 0;
    background: #f8f9fa;
  }
  
  .blog-featured-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    display: flex;
    transition: all 0.4s ease;
  }
  
  .blog-featured-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
  }
  
  .featured-image {
    flex: 1;
    min-height: 400px;
    overflow: hidden;
    position: relative;
  }
  
  .featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .blog-featured-card:hover .featured-img {
    transform: scale(1.05);
  }
  
  .featured-content {
    flex: 1;
    padding: 50px;
  }
  
  .blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .blog-category {
    background: #4A00E0;
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
  }
  
  .blog-date {
    color: #666;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
  }
  
  .featured-title {
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 700;
  }
  
  .featured-excerpt {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
  }
  
  .read-more-btn {
    display: inline-block;
    color: #4A00E0;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid #4A00E0;
    transition: all 0.3s ease;
  }
  
  .read-more-btn:hover {
    color: #8E2DE2;
    border-bottom-color: #8E2DE2;
    transform: translateX(5px);
  }
  
  /* ===== BLOG GRID SECTION ===== */
  .blog-grid-section {
    padding: 70px 0 100px;
    background: white;
  }
  
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 40px;
  }
  
  .blog-post-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border: 1px solid #e9ecef;
  }
  
  .blog-post-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  }
  
  .post-image {
    height: 220px;
    overflow: hidden;
    position: relative;
  }
  
  .post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .blog-post-card:hover .post-img {
    transform: scale(1.1);
  }
  
  .post-content {
    padding: 30px;
  }
  
  .post-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .post-category {
    background: #f0f0f0;
    color: #4A00E0;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  
  .post-date {
    color: #888;
    font-size: 0.85rem;
  }
  
  .post-title {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: 600;
  }
  
  .post-excerpt {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .post-read-btn {
    display: inline-block;
    color: #4A00E0;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid #4A00E0;
    transition: all 0.3s ease;
  }
  
  .post-read-btn:hover {
    color: #8E2DE2;
    border-bottom-color: #8E2DE2;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .blog-featured-card {
      flex-direction: column;
    }
    
    .featured-image {
      min-height: 300px;
    }
    
    .featured-content {
      padding: 40px 30px;
    }
    
    .blog-grid {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
    }
  }
  
  @media (max-width: 768px) {
    .blog-main-title {
      font-size: 2.5rem;
    }
    
    .blog-subtitle {
      font-size: 1.2rem;
    }
    
    .featured-title {
      font-size: 1.8rem;
    }
    
    .featured-excerpt {
      font-size: 1rem;
    }
    
    .blog-header-section {
      padding: 50px 0 40px;
    }
    
    .blog-featured-section,
    .blog-grid-section {
      padding: 50px 0;
    }
    
    .blog-container {
      padding: 0 20px;
    }
    
    .blog-grid {
      grid-template-columns: 1fr;
      max-width: 500px;
      margin: 0 auto;
    }
  }
  
  @media (max-width: 480px) {
    .blog-main-title {
      font-size: 2rem;
    }
    
    .blog-subtitle {
      font-size: 1rem;
    }
    
    .featured-content {
      padding: 30px 20px;
    }
    
    .blog-meta {
      flex-direction: column;
      gap: 10px;
    }
    
    .featured-title {
      font-size: 1.5rem;
    }
    
    .post-content {
      padding: 25px;
    }
    
    .post-title {
      font-size: 1.2rem;
    }
  }
  
   .contact-content-section {
    padding: 70px 0 100px;
    background: #f8f9fa;
  }
  
  .contact-wrapper {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
  }
  
  /* ===== CONTACT INFO SIDEBAR ===== */
  .contact-info-sidebar {
    position: sticky;
    top: 30px;
    height: fit-content;
  }
  
  .contact-info-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
  }
  
  .contact-info-header {
    margin-bottom: 40px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
  }
  
  .contact-info-header h2 {
    font-size: 1.8rem;
    color: #00695C;
    margin-bottom: 10px;
    font-weight: 700;
  }
  
  .contact-info-header p {
    color: #666;
    line-height: 1.6;
  }
  
  .contact-details {
    margin-bottom: 40px;
  }
  
  .contact-detail-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
  }
  
  .contact-detail-item:last-child {
    margin-bottom: 0;
  }
  
  .contact-icon {
    font-size: 2rem;
    color: #00897B;
    flex-shrink: 0;
  }
  
  .contact-detail-content h3 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 8px;
    font-weight: 600;
  }
  
  .contact-detail-content p {
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  .contact-social {
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
  }
  
  .contact-social h3 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
  }
  
  .social-icons {
    display: flex;
    gap: 15px;
  }
  
  .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 1.3rem;
    text-decoration: none;
    color: #00897B;
    transition: all 0.3s ease;
  }
  
  .social-icon:hover {
    background: #00897B;
    color: white;
    transform: translateY(-3px);
  }
  
  /* ===== CONTACT FORM & MAP ===== */
  .contact-form-map {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  
  /* Map Section */
  .map-section {
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  
  .map-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    position: relative;
  }
  
  .map-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px 25px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .map-overlay h3 {
    font-size: 1.2rem;
    color: #00695C;
    margin-bottom: 5px;
    font-weight: 600;
  }
  
  .map-overlay p {
    font-size: 0.9rem;
    color: #555;
  }
  
  .map-zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .map-btn {
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .map-btn:hover {
    background: #00897B;
    color: white;
  }
  
  .map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }
  
  /* Form Section */
  .form-section {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
  }
  
  .form-header {
    margin-bottom: 30px;
  }
  
  .form-header h2 {
    font-size: 1.8rem;
    color: #00695C;
    margin-bottom: 10px;
    font-weight: 700;
  }
  
  .form-header p {
    color: #666;
    line-height: 1.6;
  }
  
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group label {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 8px;
    font-weight: 600;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fafafa;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: #00897B;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.1);
  }
  
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: #999;
  }
  
  .checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  
  .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
  
  .checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: normal;
  }
  
  .submit-btn {
    background: linear-gradient(135deg, #00897B 0%, #00695C 100%);
    color: white;
    border: none;
    padding: 16px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
    box-shadow: 0 8px 25px rgba(0, 137, 123, 0.3);
  }
  
  .submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 137, 123, 0.4);
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .contact-wrapper {
      grid-template-columns: 1fr;
      max-width: 700px;
      margin: 0 auto;
    }
    
    .contact-info-sidebar {
      position: static;
    }
    
    .contact-info-card {
      text-align: center;
    }
    
    .contact-detail-item {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .social-icons {
      justify-content: center;
    }
  }
  
  @media (max-width: 768px) {
    .contact-main-title {
      font-size: 2.5rem;
    }
    
    .contact-subtitle {
      font-size: 1.2rem;
    }
    
    .contact-header-section {
      padding: 50px 0 40px;
    }
    
    .contact-content-section {
      padding: 50px 0 70px;
    }
    
    .contact-container {
      padding: 0 20px;
    }
    
    .form-row {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    
    .contact-info-card,
    .form-section {
      padding: 30px 25px;
    }
    
    .map-section {
      height: 250px;
    }
  }
  
  @media (max-width: 480px) {
    .contact-main-title {
      font-size: 2rem;
    }
    
    .contact-subtitle {
      font-size: 1rem;
    }
    
    .contact-header-section {
      padding: 40px 0 30px;
    }
    
    .contact-content-section {
      padding: 40px 0 60px;
    }
    
    .contact-info-card,
    .form-section {
      padding: 25px 20px;
    }
    
    .form-header h2 {
      font-size: 1.5rem;
    }
    
    .submit-btn {
      width: 100%;
      text-align: center;
    }
    
    .map-overlay {
      padding: 10px 15px;
    }
    
    .map-overlay h3 {
      font-size: 1rem;
    }
    
    .map-overlay p {
      font-size: 0.8rem;
    }
  }
  
    .sm-icons {
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 25px;
  }
  
  .sm-title {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
    text-align: center;
  }
  
  /* Icons Grid */
  .sm-icons-grid {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  
  /* Icon Styles */
  .sm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .sm-icon:hover {
    transform: translateY(-3px);
  }
  
  /* Facebook */
  .fb {
    background: #1877F2;
    color: white;
  }
  
  .fb:hover {
    background: #166FE5;
  }
  
  /* Instagram */
  .ig {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    color: white;
  }
  
  .ig:hover {
    opacity: 0.9;
  }
  
  /* Twitter */
  .tw {
    background: #1DA1F2;
    color: white;
  }
  
  .tw:hover {
    background: #1A91DA;
  }
  
  /* YouTube */
  .yt {
    background: #FF0000;
    color: white;
  }
  
  .yt:hover {
    background: #E60000;
  }
  
 
/* Contact section */
.footer-contact p{