:root{
      --blue:#0b4fae;
      --sky:#4fc3f7;
      --light:#f5fbff;
      --white:#ffffff;
      --dark:#0d1b2a;
      --muted:#5f738c;
      --glass: rgba(255,255,255,0.16);
      --border: rgba(255,255,255,0.25);
      --shadow: 0 10px 30px rgba(11,79,174,0.18);
      --radius: 18px;
      --max-width: 1200px;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      scroll-behavior:smooth;
    }

    body{
      font-family:'Poppins',sans-serif;
      color:var(--dark);
      background:
        linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.92)),
        url('images/maam_Dizzy_Students.png') top/cover fixed no-repeat;
      overflow-x:hidden;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    img{
      max-width:100%;
      display:block;
    }

    .container{
      width:min(92%, var(--max-width));
      margin:auto;
    }

    /* Small Navbar */
    .navbar{
      position:sticky;
      top:0;
      z-index:999;
      background:rgba(255,255,255,0.92);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(11,79,174,0.08);
      box-shadow:0 4px 20px rgba(0,0,0,0.05);
    }

    .nav-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:10px 0;
      min-height:64px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .brand img{
      width:42px;
      height:42px;
      border-radius:50%;
      object-fit:cover;
      border:2px solid var(--sky);
      box-shadow:0 4px 12px rgba(79,195,247,0.35);
    }

    .brand-text h1{
      font-size:1rem;
      line-height:1.1;
      color:var(--blue);
      font-weight:800;
      white-space:nowrap;
    }

    .brand-text span{
      font-size:0.68rem;
      color:var(--muted);
      display:block;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:34px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .nav-links a{
      font-size:0.83rem;
      color:var(--blue);
      font-weight:600;
      position:relative;
    }

    .nav-links a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-4px;
      width:0;
      height:2px;
      background:var(--sky);
      transition:0.3s;
    }

    .nav-links a:hover::after{
      width:100%;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 18px;
      border-radius:999px;
      border:none;
      cursor:pointer;
      font-weight:700;
      transition:0.3s ease;
      box-shadow:var(--shadow);
    }

    .btn-primary{
      background:linear-gradient(135deg, var(--blue), var(--sky));
      color:white;
    }

    .btn-primary2{
      background-color: green;
      color:white;
    }

    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 14px 28px rgba(11,79,174,0.25);
    }

    .btn-light{
      background:white;
      color:var(--blue);
      border:1px solid rgba(11,79,174,0.12);
    }

    .btn-light:hover{
      background:var(--light);
      transform:translateY(-2px);
    }

    section{
      padding:70px 0;
      position:relative;
    }

    .section-bg{
      background:
       linear-gradient(115deg, rgba(50, 0, 249, 0.544), rgba(0, 180, 240, 0.105)),
        url('images/all_girls.png') top/cover fixed no-repeat;
      color:white;
    }

    .section-title{
      text-align:center;
      margin-bottom:18px;
    }

    .section-title h2{
      font-size:2rem;
      color:var(--blue);
      font-weight:800;
    }

    .section-bg .section-title h2{
      color:white;
    }

    .section-title p{
      max-width:720px;
      margin:10px auto 0;
      color:var(--muted);
    }

    .section-bg .section-title p{
      color:rgba(255,255,255,0.92);
    }

    /* Hero */
    .hero{
      min-height:92vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(115deg, rgba(29, 1, 138, 0.922), rgba(0, 180, 240, 0.232)),
        url('images/Sec-book.JPG') center/cover no-repeat;
      color:rgb(1, 6, 98);
      padding-top:40px;
    }

    .heading-col {
        color: rgb(238, 239, 243);
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.2fr 0.8fr;
      gap:100px;
      margin-top: 150px;
      align-items:center;
    }

    .hero h2{
      font-size:3rem;
      line-height:1.1;
      font-weight:800;
      margin-bottom:16px;
    }

    .hero p{
      font-size:1rem;
      max-width:680px;
      color:rgba(255, 255, 255, 0.92);
      margin-bottom:24px;
    }

    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    .hero-card{
      background:var(--glass);
      backdrop-filter:blur(16px);
      border:1px solid var(--border);
      border-radius:24px;
      padding:24px;
      box-shadow:var(--shadow);
    }

    .hero-card h3{
      font-size:1.2rem;
      margin-bottom:10px;
    }

    .hero-card ul{
      list-style:none;
      display:grid;
      gap:12px;
    }

    .hero-card li{
      background:rgba(255,255,255,0.12);
      padding:12px 14px;
      border-radius:14px;
      font-size:0.95rem;
    }

    /* Notice board */
    .notice-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      margin-top:30px;
    }

    .card{
      background:rgba(255,255,255,0.86);
      border:1px solid rgba(11,79,174,0.08);
      border-radius:var(--radius);
      padding:24px;
      box-shadow:var(--shadow);
    }

    .card h3{
      color:var(--blue);
      margin-bottom:14px;
      font-size:1.2rem;
    }

    .notice-list{
      display:grid;
      gap:12px;
    }

    .notice-item{
      padding:14px;
      border-left:4px solid var(--sky);
      background:linear-gradient(135deg, #ffffff, #f2fbff);
      border-radius:12px;
    }

    .notice-item strong{
      display:block;
      color:var(--blue);
      margin-bottom:4px;
    }

    .depaah {
      font-size: 0.70rem;
      padding: 10px;
    }

    .download-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      margin-top:30px;
    }

    .download-card{
      background:rgba(255,255,255,0.88);
      border:1px solid rgba(11,79,174,0.1);
      border-radius:18px;
      padding:20px;
      text-align:center;
      box-shadow:var(--shadow);
      transition:0.3s;
    }

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

    .download-card h4{
      color: var(--blue);
      margin-bottom:12px;
      font-size:1rem;
    }

    .download-card p{
      color:var(--muted);
      font-size:0.88rem;
      min-height:48px;
      margin-bottom:16px;
    }

    /* Gallery */
    .gallery-wrap{
      overflow:hidden;
      position:relative;
      margin-top:30px;
      border-radius:24px;
      padding:10px 0;
    }

    .gallery-track{
      display:flex;
      width:max-content;
      gap:18px;
      animation:scrollGallery 35s linear infinite;
    }

    .gallery-wrap:hover .gallery-track{
      animation-play-state:running;
    }

    .gallery-item{
      min-width:280px;
      height:200px;
      border-radius:20px;
      overflow:hidden;
      box-shadow:var(--shadow);
      border:4px solid rgba(255,255,255,0.7);
      background:white;
      position:relative;
      flex-shrink:0;
    }

    .gallery-item img{
      width:100%;
      height:100%;
      object-fit:contain;
      transition:0.4s;
    }

    .gallery-item:hover img{
      transform:scale(1.08);
    }

    @keyframes scrollGallery{
      from{ transform:translateX(0); }
      to{ transform:translateX(-50%); }
    }

    /* Exams */
    .exam-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:24px;
      margin-top:30px;
    }

    .exam-card{
      background:rgba(255,255,255,0.9);
      border-radius:20px;
      padding:28px;
      box-shadow:var(--shadow);
      border:1px solid rgba(11,79,174,0.08);
      text-align:center;
    }

    .exam-card h3{
      color:var(--blue);
      margin-bottom:10px;
    }

    .exam-card p{
      color:var(--muted);
      margin-bottom:18px;
    }

    /* CTA Band */
    .cta-band{
      background:
        linear-gradient(115deg, rgba(29, 1, 138, 0.922), rgba(0, 180, 240, 0.232)),
        url('images/all_girls.png') top/cover no-repeat;
      color:white;
      border-radius:28px;
      padding:36px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
      box-shadow:var(--shadow);
      margin-top:20px;
    }

    .cta-band h3{
      font-size:1.8rem;
      margin-bottom:8px;
    }

    .cta-band p{
      color:rgba(255,255,255,0.92);
      max-width:720px;
    }

    /* Footer */
    footer{
      background:#072f69;
      color:white;
      padding:16px 0;
      margin-top:40px;
    }

    .footer-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:15px;
      flex-wrap:wrap;
      font-size:0.8rem;
    }

    .footer-wrap img{
      width:30px;
      height:30px;
      border-radius:50%;
      object-fit:cover;
      border:1px solid rgba(255,255,255,0.6);
    }

    .footer-brand{
      display:flex;
      align-items:center;
      gap:8px;
    }

    /* Floating shapes */
    .blur-shape{
      position:absolute;
      border-radius:50%;
      filter:blur(60px);
      z-index:-1;
      opacity:0.35;
    }

    .shape1{
      width:220px;
      height:220px;
      background:var(--sky);
      top:120px;
      left:-60px;
    }

    .shape2{
      width:200px;
      height:200px;
      background:var(--blue);
      bottom:100px;
      right:-50px;
    }

  /* =========================
   Responsive Design
   ========================= */


/* Tablets & small laptops */
@media (max-width:1024px){

  .hero-grid,
  .notice-grid,
  .exam-grid{
    grid-template-columns:1fr;
  }

  .download-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}


  .hero h2{
    font-size:2.2rem;
  }

}


/* Tablets */
@media (max-width:900px){

  .nav-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-links{
    gap:16px;
  }

  .nav-links a{
    font-size:0.9rem;
  }

  .hero{
    background:
    linear-gradient(115deg, rgba(29,1,138,0.9), rgba(0,180,240,0.23)),
    url("images/Sec-book.JPG") center/cover no-repeat;
    padding-top:20px;
  }

  .hero-grid{
    margin-top:20px;
  }

  .download-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

  }




/* Mobile phones */
@media (max-width:600px){

  .nav-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-links{
    flex-wrap:wrap;
    gap:12px;
  }

  .nav-links a{
    font-size:0.85rem;
  }

  .hero h2{
    font-size:1.7rem;
    line-height:1.3;
  }

 .download-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

  .cta-band{
    padding:20px;
  }

  .section-title h2{
    font-size:1.1rem;
  }

  .depaah {
      font-size: 0.50rem;
      padding: 10px;
    }

  .rights,
  .email{
    font-size:0.85rem;
  }

}

/* Small mobile phones */
@media (max-width:480px){

  .hero h2{
    font-size:1.2rem;
  }

  .nav-links{
    gap:8px;
  }

  .nav-links a {
    font-size:0.75rem;
  }

  .download-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.depaah {
      font-size: 0.50rem;
      padding: 10px;
    }

    .rights,
  .email{
    font-size:0.95rem;
  }

}

/* Short screens like 388x425 or 406x425 */
@media (max-height:425px){

  .hero{
    padding:20px 0;
  }

  .nav-links a{
    font-size:0.50rem;
  }

  .hero h2{
    font-size:1.4rem;
  }

  .hero p{
    font-size: 0.75rem;
  }

  .download-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

  .cta-band{
    padding:15px;
  }

   .rights,
  .email{
    font-size:0.98rem;
    text-align: center;
  }

}

/* Small phones like 388px - 406px width */
@media (max-width:330px){

  .nav-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-links{
    flex-wrap:wrap;
    gap:8px;
  }

  .nav-links a{
    font-size:0.40rem;
  }

  .hero h2{
    font-size:1.4rem;
    line-height:1.3;
  }

  .hero p{
    font-size: 0.75rem;
  }

  .download-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

  .cta-band{
    padding:16px;
  }

   .rights,
  .email{
    font-size:0.95rem;
    text-align: center;
  }

  .depaah {
      font-size: 0.50rem;
      padding: 10px;
    }

}

@media (max-width:300px){

  .nav-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-links{
    flex-wrap:wrap;
    gap:8px;
  }

  .nav-links a{
    font-size:0.45rem;
  }

  .hero h2{
    font-size:1.4rem;
    line-height:1.3;
  }

  .hero p{
    font-size: 0.75rem;
  }

  .download-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

  .cta-band{
    padding:16px;
  }

   .rights,
  .email{
    font-size:0.85rem;
    text-align: center;
  }

  .depaah {
      font-size: 0.50rem;
      padding: 10px;
    }

}