/* ========== CTA SECTION ========== */
    .cta {
      text-align: center;
      background: linear-gradient(135deg, #a8dadc, #f6bd60);
      padding: 60px 20px;
      border-radius: 30px;
      color: #333;
      margin-top: 10px;
      max-width: 1200px;
      margin: auto;
    }

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

    .cta a {
      background: #fff;
      color: #333;
      padding: 12px 25px;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s;
    }

    .cta a:hover {
      background: #0056B3;
      color: #fff;
    }
        :root{
        /* Palette: 1 primary, 1 accent, 2-3 neutrals (max 5 total colors) */
        --color-primary:#0a4d96;
        --color-accent:#ffb400;
        --color-bg:#ffffff;
        --color-muted:#f5f7fb;
        --color-foreground:#fff;

        --radius:12px;

        --header-height:64px;
        --container:1200px;
        --transition:200ms ease;
      }

      /* Reset + base */
      *,*::before,*::after{box-sizing:border-box}
      /* html,body{margin:0;padding:0}
      body{
        font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        color:var(--color-foreground);
        background:var(--color-bg);
        line-height:1.6;
      } */
      img{max-width:100%;height:auto;display:block}
      a{color:inherit;text-decoration:none}
      .one-container{max-width:var(--container);margin-inline:auto;padding-inline:16px}
      .btn{
        display:inline-flex;align-items:center;justify-content:center;
        gap:8px;padding:12px 18px;border-radius:999px;font-weight:600;
        border:2px solid transparent;cursor:pointer;transition:transform var(--transition),background var(--transition),color var(--transition),border-color var(--transition);
      }
      .btn:active{transform:scale(0.98)}
      .btn-primary{background:var(--color-primary);color:#fff}
      .btn-primary:hover{background:#08417f}
      .btn-accent{background:var(--color-accent);color:#fff}
      .btn-accent:hover{background:#e3a100}
      .btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
      .btn-outline:hover{background:#0056B3}
      /* Sections */
      .section-sec{padding:56px 0}
      .section-muted{background:var(--color-muted)}
      .section-title{
        font-size:clamp(22px,3.5vw,30px);font-weight:800;margin:0 0 18px;text-wrap:balance;
      }
      .section-sub{margin:0 0 26px;color:#4b5563;max-width:70ch}

      /* About */
      .about{
        display:grid;grid-template-columns:1.1fr 0.9fr;gap:20px;align-items:center;
      }
      @media (max-width: 900px){.about{grid-template-columns:1fr}}
      .about-img{
        width:100%;aspect-ratio:16/10;border-radius:var(--radius);background:#dfe7f5;position:relative;overflow:hidden;border:1px solid #e5e7eb;
      }
      /* .about-img::after{
        content:"";position:absolute;inset:0;display:grid;place-items:center;color:#374151;font-weight:700;opacity:0.6;
      } */

      /* Blog */
      .blog-grid{
        display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
      }
      @media (max-width: 1000px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
      @media (max-width: 640px){.blog-grid{grid-template-columns:1fr}}
      .post{
        background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition);
      }
      .post:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.07)}
      .post-img{width:100%;aspect-ratio:16/9;background:#e7ebf5;display:block;position:relative}
      /* .post-img::after{content:"Blog Image";position:absolute;inset:0;display:grid;place-items:center;color:#4b5563;font-weight:700;opacity:0.6} */
      .post-body{padding:14px}
      .post h3{margin:0 0 6px;font-size:18px}
      .post p{margin:0;color:#4b5563}

      /* Gallery Carousel */
      .carousel{
        position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid #e5e7eb;background:#fff;
      }
      .carousel-track{
        display:flex;transition:transform var(--transition);
      }
      .slide{
        min-width:100%;height:450px;background:#eaf0fb;position:relative;display:grid;place-items:center;font-weight:800;color:#374151;
      }
      .slide:nth-child(2){background:#e8f6ff}
      .slide:nth-child(3){background:#f6f9ff}
      .carousel-btn{
        position:absolute;top:50%;transform:translateY(-50%);background:#0056B3;color:#fff;border:none;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;cursor:pointer
      }
      .carousel-btn:hover{background:#0056B3}
      .carousel-btn.prev{left:10px}
      .carousel-btn.next{right:10px}

    
      
     .gallery {
      display: grid;
      gap: 50px;
      padding: 0 20px 60px;
      grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .gallery-item:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 15px;
    }

    /* Lightbox */
    .lightbox {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 10px;
    }

    .lightbox:target {
      display: flex;
    }

    /* ==============================
   🔧 RESPONSIVE FIXES FOR MOBILE
   ============================== */

/* Make background images scale correctly */
.about-img,
.post-img,
.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Adjust section layout for smaller screens */
@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
  }

  .about-img {
    aspect-ratio: 4 / 3; /* slightly taller image on mobile */
    margin-top: 20px;
  }

  .carousel .slide {
    height: 280px; /* smaller carousel height */
  }
}

/* Blog grid responsive fix */
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  
  .post {
    margin-bottom: 20px;
  }

  .post-img {
    aspect-ratio: 16 / 10;
  }
}

/* CTA section margin fix on mobile */
@media (max-width: 768px) {
  .cta {
    padding: 40px 16px;
    border-radius: 20px;
  }
}



/* ///active nav */
#main-nav a.active {
  color: #0056B3 !important;
  font-weight: 600;
  border-bottom: 2px solid #0056B3;
}