/* styles.css — shared across all pages
   Notes: Replace color variables and fonts to match the final pixel palette.
*/

:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --accent:#0f4c81;
  --accent-2:#0a6fb3;
  --soft:#f7f9fb;
  --card:#ffffff;
  --container:1200px;
  --gap:20px;
  --radius:12px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);line-height:1.5}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:120;background:rgba(255,255,255,0.96);backdrop-filter:saturate(140%) blur(4px);border-bottom:1px solid rgba(11,18,30,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand .logo{height:44px;display:block}
.nav{display:flex;align-items:center;gap:18px}
.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:18px}
.nav-list a{color:var(--text);text-decoration:none;font-weight:700;padding:6px 10px;border-radius:8px;transition:all .22s ease}
.nav-list a:hover{background:var(--soft);transform:translateY(-2px)}
.nav-list a.active{background:linear-gradient(90deg, rgba(15,76,129,0.09), rgba(10,111,179,0.06));color:var(--accent)}
.nav-cta{margin-left:10px;text-decoration:none}

/* mobile nav toggle */
.nav-toggle{display:none;border:0;background:none;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;border-radius:2px;transition:all .18s ease}

/* HERO carousel */
/* HERO SECTION */
.hero {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  text-align: center;
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: 0;
  /* background-image: url('assets/images/contact.jpg'); */
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(0.7);
  z-index: 0;
}

.hero-carousel {
  position: relative;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  height: 100%;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 2s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
}

.hero-label {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 5%;
  z-index: 2;
  max-width: 700px;
  padding: 0 20px;
}

.hero-copy h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 12px;
  text-shadow: 0 3px 15px rgba(0,0,0,0.5);
}

.hero-copy p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #eee;
  margin-bottom: 20px;
  max-width: 580px;
}

.hero-cta a {
  margin-right: 12px;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 600;
}

.hero-cta .btn-outline {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  transition: 0.3s;
}

.hero-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
}

.hero-cta .btn-primary {
  background: var(--accent, #0055ff);
  color: #fff;
  border: none;
  transition: 0.3s;
}

.hero-cta .btn-primary:hover {
  background: var(--accent-2, #0041cc);
}

/* Carousel Controls */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: none;
  color: #fff;
  font-size: 1.4rem;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.carousel-control:hover {
  background: rgba(255,255,255,0.3);
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

/* Carousel Dots */
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s ease;
}

.carousel-dots button.active {
  background: #fff;
}

/* Smooth fade-in animations for text */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s ease forwards;
}

.reveal.delay-1 {
  animation-delay: 0.4s;
}

.reveal.delay-2 {
  animation-delay: 0.8s;
}

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

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-copy h1 {
    font-size: 2rem;
  }

  .hero { height: 40vh; }
  .hero-carousel { height: 100%; }

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

@media (max-width: 1100px){
  .hero { height: 50vh; }
  .hero-carousel { height: 100%; }
}


/* Core Values section styles */
.core-values {
  padding: 48px 0;
  text-align: center;
}

.values-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.value-item {
  max-width: 250px;
}

.value-item h3 {
  color: #0055ff; /* accent color */
  margin-bottom: 8px;
}

.value-item p {
  color: #333;
  font-size: 1rem;
  line-height: 1.4;
}

/* carousel controls */
.carousel-control{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,0.45);width:44px;height:44px;border-radius:999px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3}
.carousel-control:hover{transform:translateY(-50%) scale(1.03)}
.carousel-control.prev{left:18px}
.carousel-control.next{right:18px}
.carousel-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;display:flex;gap:8px;z-index:3}
.carousel-dots button{width:10px;height:10px;border-radius:99px;border:0;background:rgba(255,255,255,0.45);cursor:pointer}
.carousel-dots button.active{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.25)}

/* about CTA / stats */
.about-cta{padding:44px 0;display:flex;align-items:center;justify-content:space-between}
.about-grid{display:flex;gap:30px;align-items:center;width:100%}
.about-text h2{font-size:28px;margin:0}
.about-stats{display:flex;gap:16px}
.stat{background:var(--card);padding:18px;border-radius:12px;text-align:center;box-shadow:0 10px 30px rgba(11,18,30,0.04)}
.stat h3{font-size:28px;margin:0}
.stat p{margin:6px 0 0;color:var(--muted)}

/* SERVICES */
.services{padding:48px 0}
.section-title{font-size:28px;margin:0 0 8px}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.service-card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 12px 40px rgba(11,18,30,0.05);transition:transform .28s cubic-bezier(.22,.9,.35,1),box-shadow .28s}
.service-card:hover{transform:translateY(-8px);box-shadow:0 22px 60px rgba(11,18,30,0.08)}
.service-icon{font-size:28px;color:var(--accent);margin-bottom:12px}

/* PROJECTS */
.projects{padding:48px 0}
.section-header{text-align:center;margin-bottom:18px}
.projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.project-item{position:relative;border-radius:10px;overflow:hidden;cursor:zoom-in}
.project-item img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .5s ease}
.project-item:hover img{transform:scale(1.06)}
.project-caption{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);color:#fff;transform:translateY(6px);opacity:0;transition:all .28s}
.project-item:hover .project-caption{transform:translateY(0);opacity:1}
.project-caption h4{margin:0}
.project-caption p{margin:6px 0 0;color:rgba(255,255,255,0.85)}

/* TEAM */
.team{padding:48px 0}
.team-grid{display:flex;gap:18px}
.team-member{background:var(--card);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(11,18,30,0.04);text-align:center;transition:transform .28s}
.team-member:hover{transform:translateY(-8px)}
.team-member img{width:100%;height:220px;object-fit:cover;border-radius:8px}

/* CONTACT CTA */
.contact-cta{padding:44px 0}
.contact-grid{display:flex;gap:20px;align-items:center;justify-content:space-between}
.contact-info{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 10px 30px rgba(11,18,30,0.04)}
.contact-mini{background:transparent;padding:12px}

/* FOOTER */
/* --- Footer --- */
.site-footer {
  background: #071126;
  color: #d0d7f1;
  padding: 40px 0 20px;
  font-size: 14px;
  margin-top: 48px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto 24px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-col {
  flex: 1 1 280px;
  min-width: 280px;
}

.logo-col {
  max-width: 280px;
}

.footer-logo {
  width: 180px;
  display: block;
  height: auto;
  margin-bottom: 10px;
}

.footer-tagline {
  font-size: 14px;
  color: #a0aec0;
  margin: 0;
  line-height: 1.4;
}

/* Footer headings */
.footer-col h4 {
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 600;
  color: #a0aec0;
}

/* Footer lists like services & categories */
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 8px;
}

.footer-list li a {
  color: #d0d7f1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-list li a:hover,
.footer-list li a:focus {
  color: var(--accent);
  text-decoration: underline;
}

/* Contact text */
.footer-col p {
  margin: 6px 0;
  color: #cbd5e1;
}

/* Social icons in footer */
.social-links {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255 255 255 / 0.15);
  color: #d0d7f1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.social-icon:hover,
.social-icon:focus {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Google map embed */
.map-embed {
  border-radius: 8px;
  border: 0;
  width: 100%;
  height: 220px;
}

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid #1a237e;
  padding-top: 12px;
  color: #a0aec0;
  font-size: 13px;
  text-align: center;
}

/* Animations & reveal helpers */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.12s}
.reveal.delay-2{transition-delay:.24s}

/* small card animation hook */
.card-animate{opacity:0;transform:translateY(12px) scale(.995);transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.35,1)}
.card-animate.visible{opacity:1;transform:none}

/* Responsive */
@media (max-width:1100px){
  .hero-carousel{height:480px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav.open { 
    display: flex; 
    flex-direction: column; 
    background: var(--bg); 
    position: absolute;
    top: 60px; /* Adjust for header height */
    left: 0;
    width: 100%;
    padding: 20px;
    gap: 12px;
  }
  .nav{display:none}
  .nav-toggle{display:block}
  .header-inner{padding:12px 0}
  .hero-carousel{height:420px}
  .about-grid{flex-direction:column}
  .contact-grid{flex-direction:column}
  .projects-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:12px}
}

 /* top info bar */
    .top-bar {
      background:#071126;
      color:#fff;
      font-size:14px;
      padding:8px 0;
    }
    .top-bar .container {display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .top-left {display:flex;gap:18px;align-items:center;flex-wrap:wrap}
    .top-left li{list-style:none;display:flex;gap:8px;align-items:center}
    .top-right {display:flex;gap:12px;align-items:center}
    .top-right a{color:#fff;text-decoration:none}
    .social-icon{width:36px;height:36px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.06)}

    /* hero caption center override for per-slide label */
    .hero-slide .hero-label{
      position:absolute;
      left:50%;
      top:18%;
      transform:translateX(-50%);
      background:rgba(0,0,0,0.5);
      color:#fff;
      padding:8px 14px;
      border-radius:999px;
      font-weight:700;
      letter-spacing:0.01em;
      z-index:4;
    }

    /* Who We Are layout */
.who-wrap {
  display: grid;
  grid-template-columns: 1fr 500px; /* Slightly larger left column for image */
  gap: 40px;
  align-items: center;
  padding: 80px 0;
}

.who-image {
  display: flex;
  justify-content: center; /* horizontal center if image smaller than column */
  align-items: center;     /* vertical center */
  overflow: hidden;
  max-height: 70%;          /* image covers most of column height */
  margin: 6%;           /* center horizontally */
  border-radius: 16px;
}

.who-content h2 {
  margin-top: 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.who-content p,
.who-content li {
  color: #555; /* Muted text color */
  line-height: 1.7;
}

.who-content .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.who-content ul {
  padding-left: 0;
  list-style: none;
}

.who-content ul li {
  background-color: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.who-content ul li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.who-image img {
  width: 100%;             /* scale image proportionally */
  height: 100%;            /* fill the max-height of wrapper */
  object-fit: cover;
  border-radius: 16px;
  filter: blur(4px);       /* blur effect */
  transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.3s ease;
}

.who-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  filter: blur(2px); /* Optional: reduce blur on hover */
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  .who-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .who-image {
   max-width: 100%; 
    max-height: 400px;     /* adjust max height for small screens */
    margin: 20px auto; 
    order: -1;             /* move image above content */
  }

  .who-content h2 {
    font-size: 2rem;
  }

  .who-content .cols {
    grid-template-columns: 1fr; /* Stack vision/mission on small screens */
  }
}

@media (max-width: 576px) {
  .who-wrap {
    padding: 50px 0;
  }

  .who-we-are {
    flex-direction: column;
  }
  .who-image {
    width: 100%;
    height: 300px;
  }
  .who-content {
    padding: 32px;
  }

  .who-content h2 {
    font-size: 1.75rem;
  }
}


    /* Clients carousel */
    .clients-carousel{display:flex;gap:18px;overflow:hidden;padding:20px 0}
    .clients-track{display:flex;gap:18px;transition:transform .6s linear}
    .client-item{min-width:180px;height:80px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(11,18,30,0.04)}
    .client-item img{max-width:160px;max-height:68px;object-fit:contain}

    /* Testimonials*/
    .testimonials-wrap{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;padding:64px 0}
    .testimonial{background:#fff;padding:18px;border-radius:10px;box-shadow:0 8px 30px rgba(11,18,30,0.04);margin-bottom:12px}
    .testimonial p{margin:8px 0}

    @media (max-width:1000px){
      .testimonials-wrap{grid-template-columns:1fr}
    }

    /* categories grid */
    .categories-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
    .cat{background:#fff;padding:14px;border-radius:10px;text-align:center;box-shadow:0 8px 18px rgba(11,18,30,0.04);cursor:pointer}
    .cat a{display:block;color:var(--text);text-decoration:none;font-weight:700}
    @media (max-width:1100px){.categories-grid{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:600px){.categories-grid{grid-template-columns:repeat(2,1fr)}}

    /* small tweaks for contact block */
    .contact-block{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(11,18,30,0.04)}
    .map-embed{width:100%;height:220px;border-radius:8px;border:0}

    
    /* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366; /* WhatsApp green */
  color: #fff;
  border-radius: 50px;
  padding: 12px 18px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: all 0.3s ease;
}

/* WhatsApp icon */
.whatsapp-float i {
  font-size: 22px;
  background: #fff;
  color: #25d366;
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text */
.whatsapp-text {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

/* Hover effect */
.whatsapp-float:hover {
  background-color: #20b954;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Mobile: Hide text, keep round button */
@media (max-width: 768px) {
  .whatsapp-float {
    padding: 14px;
    border-radius: 50%;
  }
  .whatsapp-text {
    display: none;
  }
}


.category-btn {
  margin: 4px;
  border-radius: 30px;
  padding: 8px 18px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.category-btn.active,
.category-btn:hover {
  background-color: #0d6efd; /* Bootstrap primary */
  color: #fff;
}