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

    body{
      font-family:'Poppins', sans-serif;
      background:linear-gradient(135deg, #f7f5ef 0%, #eef3f7 100%);
      color:#223041;
      overflow-x:hidden;
    }

    section{
      padding:100px 10%;
      background:transparent;
    }

    h1,h2,h3{
      font-family:'Playfair Display', serif;
    }

    /* NAVBAR */

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

/* =====================================
   NAVBAR
===================================== */

nav{
    width:100%;
    position:fixed;
    top:0;
    left:0;

    padding:18px 8%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(10px);

    z-index:1000;
}

.logo{
    color:#fff;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:2px;
}
.logo a{
    color:white;
    text-decoration:none;
}

/* DESKTOP NAV */

.nav-links{
    display:flex;
    align-items:center;
    gap:30px;

    list-style:none;
}

.nav-links li a{
    color:white;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

.nav-links li a:hover{
    color:#f5c542;
}

/* HAMBURGER */

.hamburger{
    display:none;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
    z-index:1001;
}

.hamburger span{
    width:28px;
    height:3px;
    background:white;
    border-radius:20px;
    transition:0.4s ease;
}

/* ANIMATION */

.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translateY(12px);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translateY(-12px);
}

/* =====================================
    MOBILE NAVBAR
===================================== */

@media(max-width:768px){

    nav{
        padding:18px 6%;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }

    .logo{
        font-size:1.2rem;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .hamburger{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav-links{
        position:fixed;

        top:0;
        right:-100%;

        width:260px;
        height:100vh;

        background:#020617;

        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:40px;

        transition:0.5s ease;
    }

    .nav-links.active{
        right:0;
    }

}

/* =====================================
    SMALL MOBILE
===================================== */

@media(max-width:500px){

    .logo{
        font-size:1.2rem;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .logo a{
        color:white;
        text-decoration:none;
    }

     .nav-links{
        width:100%;
    }

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

 }

 /* HERO */

    .hero{
      min-height:100vh;
      padding:140px 10% 100px;
      background:
      linear-gradient(135deg, rgba(5, 10, 18, 0.774), rgba(20, 35, 52, 0.614)),
      url('https://images.unsplash.com/photo-1584515933487-779824d29309?q=80&w=1470&auto=format&fit=crop');
      background-size:cover;
      background-position:center;
      display:flex;
      align-items:center;
      color:white;
    }

    .hero-content{
      max-width:850px;
      animation:fadeUp 1s ease;
      text-align:left;
      margin:0;
    }

    .hero h1{
      font-size:4rem;
      line-height:1.1;
      margin-bottom:25px;
      text-decoration:none;
      border-bottom:none;
    }

    .hero p{
      font-size:1.1rem;
      line-height:1.9;
      margin-bottom:35px;
      color:#f1f1f1;
    }

    .btn-group{
      display:flex;
      gap:20px;
      flex-wrap:wrap;
      justify-content:flex-start;
    }

    .btn{
      padding:15px 32px;
      border:none;
      border-radius:50px;
      cursor:pointer;
      font-size:1rem;
      font-weight:600;
      text-decoration:none;
      transition:0.4s;
      display:inline-block;
    }

    .primary-btn{
      background:#f5c542;
      color:#111;
    }

    .primary-btn:hover{
      transform:translateY(-5px);
      background:white;
    }

    .secondary-btn{
      border:2px solid white;
      color:white;
    }

    .secondary-btn:hover{
      background:white;
      color:#111;
    }

    .reveal{
      opacity:0;
      transform:translateY(40px);
      transition:opacity 0.8s ease, transform 0.8s ease;
    }

    .reveal.active{
      opacity:1;
      transform:translateY(0);
    }

    /* SECTION TITLES */

    .section-title{
      text-align:center;
      font-size:3rem;
      margin-bottom:60px;
      color:#111827;
      position:relative;
    }

    .section-title::after{
      display:none;
    }

    /* ABOUT */

    .about{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:60px;
      align-items:center;
    }

    .about img{
      width:100%;
      border-radius:25px;
      box-shadow:0 15px 40px rgba(0,0,0,0.15);
    }

    .about-content h3{
      font-size:2.2rem;
      margin-bottom:20px;
      color:#0f172a;
    }

    .about-content p{
      line-height:1.9;
      margin-bottom:20px;
      color:#444;
    }

    .credentials{
      display:flex;
      flex-wrap:wrap;
      gap:15px;
      margin-top:25px;
    }

    .credential{
      background:#111827;
      color:white;
      padding:10px 18px;
      border-radius:30px;
      font-size:0.9rem;
    }

    /* MISSION */

    .mission{
      background:#0b203a;
      color:white;
    }

    .mission .section-title{
      color:white;
    }

    .mission-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:30px;
    }

    .mission-card{
      background:rgba(255,255,255,0.08);
      padding:35px;
      border-radius:20px;
      backdrop-filter:blur(10px);
      transition:0.4s;
      min-width:0;
      width:100%;
      max-width:320px;
      margin:0 auto;
    }

    .mission-card:hover{
      transform:translateY(-10px);
    }

    .mission-card h3{
      margin-bottom:20px;
      color:#f5c542;
    }

    .mission-card p{
      line-height:1.8;
    }

    /* SERVICES */

    .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:30px;
    }

    .service-card{
      background:white;
      padding:35px;
      border-radius:20px;
      box-shadow:0 10px 30px rgba(0,0,0,0.08);
      transition:0.4s;
      width:100%;
      max-width:320px;
      margin:0 auto;
    }

    .service-card:hover{
      transform:translateY(-10px);
    }

    .service-card h3{
      margin-bottom:15px;
      color:#111827;
    }

    .service-card p{
      line-height:1.8;
      color:#555;
    }

    /* CONTACT */

    .contact{
      background:#0b203a;
      color:white;
    }

    .contact .section-title{
      color:white;
    }

    .contact-wrapper{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:60px;
    }

    .contact-info h3{
      margin-bottom:20px;
      font-size:2rem;
      color:#f5c542;
    }

    .contact-info p{
      margin-bottom:15px;
      line-height:1.8;
      color:#ddd;
    }

    form{
      display:flex;
      flex-direction:column;
      gap:20px;
    }

    input,
    textarea{
      padding:16px;
      border:none;
      border-radius:10px;
      outline:none;
      font-family:'Poppins',sans-serif;
    }

    textarea{
      resize:none;
      height:150px;
    }

    form button{
      background:#f5c542;
      color:#111;
      border:none;
      padding:16px;
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
      transition:0.4s;
    }

    form button:hover{
      background:white;
    }

    /* FOOTER */

    footer{
      background:#020617;
      color:#bbb;
      text-align:center;
      padding:60px 10% 30px;
    }

    .footer-content{
      max-width:1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:40px;
      text-align:left;
    }

    .footer-brand p{
      margin-bottom:10px;
      line-height:1.6;
    }

    .footer-logo{
      font-size:1.5rem;
      font-weight:700;
      color:#fff;
      letter-spacing:2px;
      display:block;
      margin-bottom:10px;
      font-family:'Playfair Display', serif;
    }

    .footer-tagline{
      font-size:0.9rem;
      color:#888;
      margin-top:5px;
    }

    .footer-stats{
      display:flex;
      gap:30px;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
    }

    .stat-item{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:5px;
    }

    .stat-number{
      font-size:1.8rem;
      font-weight:700;
      color:#f5c542;
      font-family:'Playfair Display', serif;
    }

    .stat-label{
      font-size:0.85rem;
      color:#888;
      text-transform:uppercase;
      letter-spacing:1px;
    }

    .footer-social{
      display:flex;
      gap:15px;
      justify-content:center;
      flex-wrap: nowrap;
    }

    .footer-social a{
      display:flex;
      align-items:center;
      justify-content:center;
      width:48px;
      height:48px;
      border-radius:50%;
      background:rgba(255,255,255,0.08);
      color:#bbb;
      font-size:1.2rem;
      transition:0.3s;
      text-decoration:none;
    }

    .footer-social a:hover{
      background:#f5c542;
      color:#111;
      transform:translateY(-5px);
    }

    .footer-bottom{
      grid-column:1/-1;
      border-top:1px solid rgba(255,255,255,0.1);
      padding-top:25px;
      margin-top:20px;
      text-align:center;
    }

    .footer-bottom p{
      margin:0;
      font-size:0.9rem;
      color:#888;
    }

    /* ANIMATION */

    @keyframes fadeUp{
      from{
        opacity:0;
        transform:translateY(40px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    /* RESPONSIVE */

    @media(max-width:900px){

      nav{
        flex-direction:column;
        gap:15px;
      }

      .hero h1{
        font-size:2.7rem;
      }

      .section-title{
        font-size:2.3rem;
      }

    }

    /* =========================================
   RESPONSIVE DESIGN FOR ALL SCREEN SIZES
   Add this BELOW your existing CSS
========================================= */

/* LARGE LAPTOPS */
@media screen and (max-width: 1400px){

  .hero h1{
    font-size: 3.5rem;
  }

  section{
    padding: 90px 8%;
  }

}


/* LAPTOPS */
@media screen and (max-width: 1200px){

  .hero h1{
    font-size: 3rem;
  }

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

  .section-title{
    font-size: 2.5rem;
  }

  nav{
    padding: 18px 6%;
  }

  section{
    padding: 80px 6%;
  }

}


/* TABLETS */
@media screen and (max-width: 992px) and (min-width: 769px){

  nav{
    gap: 15px;
    padding: 18px 5%;
  }

  nav ul{
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero{
    text-align: center;
    padding-top: 120px;
  }

  .hero-content{
    max-width: 100%;
  }

  .hero h1{
    font-size: 2.6rem;
    line-height: 1.3;
  }

  .hero p{
    font-size: 1rem;
    line-height: 1.8;
  }

  .btn-group{
    justify-content: center;
  }

  .about{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-content{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .credentials{
    justify-content: center;
  }

  .mission-grid,
  .services-grid,
  .contact-wrapper{
    grid-template-columns: 1fr 1fr;
  }

}


/* LARGE MOBILE DEVICES */
@media screen and (max-width: 768px){

  section{
    padding: 60px 5%;
  }

  .hero{
    min-height: 100vh;
    padding-top: 130px;
  }

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

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

  .btn{
    width: 100%;
    text-align: center;
  }

  .btn-group{
    flex-direction: column;
    width: 100%;
  }

  .section-title{
    font-size: 2rem;
  }

  .about-content h3{
    font-size: 1.7rem;
  }

  .mission-grid,
  .services-grid,
  .contact-wrapper{
    grid-template-columns: 1fr;
  }

  .mission-card,
  .service-card{
    padding: 28px;
  }

  .contact-info h3{
    font-size: 1.7rem;
  }

}


/* SMALL MOBILE DEVICES */
@media screen and (max-width: 576px){

  body{
    overflow-x: hidden;
  }

  section{
    padding: 60px 20px;
  }

  nav{
    padding: 15px 20px;
  }

.logo{
        font-size:1.2rem;
        display:flex;
        align-items:center;
        justify-content:center;
    }

  .hero{
    padding-top: 140px;
  }

  .hero h1{
    font-size: 1.8rem;
  }

  .hero p{
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .section-title{
    font-size: 1.7rem;
  }

  .about img{
    border-radius: 18px;
  }

  .about-content h3{
    font-size: 1.4rem;
  }

  .about-content p,
  .mission-card p,
  .service-card p,
  .contact-info p{
    font-size: 0.92rem;
    line-height: 1.7;
  }

  .credential{
    font-size: 0.8rem;
    padding: 8px 14px;
  }

  input,
  textarea{
    font-size: 0.9rem;
  }

  footer{
    font-size: 0.85rem;
    padding: 25px 15px;
  }

}


/* EXTRA SMALL DEVICES */
@media screen and (max-width: 360px){

  .hero h1{
    font-size: 1.5rem;
  }

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

  .btn{
    padding: 13px 20px;
    font-size: 0.9rem;
  }

  .section-title{
    font-size: 1.5rem;
  }

}