@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* ---------- RESET & BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins',sans-serif;
  color:#0b1c8c;
  background:#2475c7;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- TOPBAR / NAV ---------- */
.color {
  background: linear-gradient(90deg, #2475c7, #0b1c8c);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  flex-wrap: wrap;
}

.logo img{height:50px;padding-left: 10px;}


/* Navbar Base */
    .navbar {
      padding: 12px 40px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav-links {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .nav-links a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 6px;
    }

    /* Hover effect */
    .nav-links a:hover {
      background: #ffcc00;
      color: #111;
    }

    /* Active page highlight */
    .nav-links a:hover,
    .nav-links a.active {
      background: #ffcc00;
      color: #111;
    }

    /* Dropdown */
    .dropdown {
      position: relative;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #222;
      min-width: 180px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      flex-direction: column;
      overflow: hidden;
    }

    .dropdown-menu li a {
      display: block;
      padding: 10px 15px;
      color: #fff;
      transition: 0.3s;
    }

    .dropdown-menu li a:hover {
      background: #ffcc00;
      color: #111;
    }

    /* Show dropdown on hover */
    .dropdown:hover .dropdown-menu {
      display: flex;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .nav-links {
        flex-direction: column;
        background: #111;
        position: absolute;
        top: 60px;
        right: 0;
        width: 200px;
        display: none;
        border-radius: 10px;
        padding: 15px 0;
      }

      .nav-links.active {
        display: flex;
      }

      .menu-toggle {
        display: block;
        cursor: pointer;
        color: #fff;
        font-size: 28px;
        position: absolute;
        right: 30px;
      }
    }

    .menu-toggle {
      display: none;
    }

/* Call button */
.call button{
  background:#ffd700;color:#0b1c8c;border:none;padding:10px 14px;border-radius:6px;font-weight:700;cursor:pointer;transition:0.25s
}
.call button:hover{transform:scale(1.03)}

/* --- Hero --- */
    .contact-hero {
      background: url('about.png') center/cover no-repeat;
      position: relative;
      color: #fff;
      padding: 100px 0;
    }

    .contact-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
    }

    .hero-container {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20px;
    }

    .hero-text h1 {
      font-size: 36px;
      color: #fff;
      text-align: center;
    }

/* ---------- ABOUT HERO ---------- */
.about-hero{background:linear-gradient(180deg, rgba(36,117,199,0.06), rgba(250,250,255,0));padding:48px 18px}
.container{max-width:1100px;margin:0 auto;padding:0 12px}
.hero-grid{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero-left{flex:1;min-width:260px}
.hero-right{flex:0 0 220px;text-align:center}
.hero-left h1{font-size:30px;color:#ffffff;margin-bottom:10px}
.lead{color:rgba(255, 255, 255, 0.9);margin-bottom:12px}
.cta{display:inline-block;background:#0b1c8c;color:#fff;padding:10px 14px;border-radius:6px;text-decoration:none;font-weight:700}

/* stats */
.stats{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.stats li{background:#fff;padding:14px 18px;border-radius:10px;box-shadow:0 8px 20px rgba(11,28,140,0.04);min-width:140px}
.stats li strong{display:block;font-size:20px;color:#0b1c8c}
.stats li span{display:block;font-size:13px;color:#555;margin-top:6px}

/* ---------- CARDS / CONTENT ---------- */
.card{background:#fff;border-radius:10px;padding:20px;margin-bottom:18px;box-shadow:0 10px 24px rgba(11,28,140,0.04)}
.story h2,.team h2,.why h2,.testimonials h2{color:#0b1c8c;margin-bottom:12px}

/* timeline */
.timeline{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.t-item{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.t-year{width:72px;background:#0b1c8c;color:#fff;padding:10px;border-radius:8px;text-align:center;font-weight:700}
.t-body p{margin-top:6px;color:rgba(11,28,140,0.9)}

/* team */
.team-grid{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.member{flex:1 1 200px;text-align:center}
.member img{width:100%;height:360px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.member h4{color:#0b1c8c;margin-bottom:6px}

/* why-grid */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.why-grid h3{color:#0b1c8c}

/* testimonials */
.testimonials .quote{background:#f3f7ff;padding:12px;border-radius:8px;margin-top:10px;color:rgba(11,28,140,0.9)}

/* cta */
.cta-card{text-align:center;padding:22px}
.cta-card .cta{background:#ffd700;color:#0b1c8c;text-decoration:none;padding:10px 16px;border-radius:6px}

/* --- Footer --- */
    .footer {
      background: #0b1c8c;
      color: #fff;
      padding: 14px 20px;
    }

    .footer-container {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .footer p { font-size: 16px; }
    .social a {
      color: #fafafa;
      margin: 0 10px;
      font-size: 18px;
      text-decoration: none;
    }

/* responsive */
@media(max-width:900px){
  .hero-grid{flex-direction:column}
  .hero-right{order:2;width:100%}
  .team-grid{flex-direction:column}
  .why-grid{grid-template-columns:1fr}
  .t-item{flex-direction:row;align-items:center}
  .t-year{width:56px;padding:8px}
  .container{padding:0 12px}
  .main-nav ul{flex-wrap:wrap;justify-content:center;gap:12px}
}
@media(max-width:480px){
  .brand-main{font-size:16px}
  .hero-left h1{font-size:22px}
  .member img{height:140px}
}