/* RESET & GLOBAL STYLES */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Arial', sans-serif;
      background: #ffffff;
      color: #001f3f;
      line-height: 1.6;
      overflow-x: hidden;
    }
        img{max-width:100%;display:block;height:auto;}
    a{color:#00C48C;text-decoration:none;transition:all .2s ease;}a:hover{opacity:.85; }
    /*h2,h3,h4,h5{font-family:'Space Grotesk',sans-serif;line-height:1.2;color:#253240;} */

    /* Utility */
    .container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(1rem,2vw,2rem);}  
    .section{padding-block:clamp(4rem,8vw,7rem);}  
    .section-header{text-align:center;max-width:700px;margin-inline:auto;margin-bottom:3rem;}  
    .section-header h2{font-size:clamp(2rem,5vw,2.75rem);margin-bottom:1rem;}  
    .section-header p{color:#5c6170;font-size:1.05rem;}
    
   
    /* TOP BAR */
    .top-bar {
      background: #34495E;
      color: #FFFFFF;
      padding: 10px 20px;
      text-align: center;
      font-size: 14px;
      border-bottom: 2px solid #7F8C8D;
        overflow-x: auto; /* optional for very small screens */
    }
    .top-bar span {
      margin: 0 8px;
      display: inline-block;
      white-space: nowrap;
    }
    .top-bar strong {
    color: gold;
}

.top-bar span {
    color: white; /* Keeps the address in white */
}



    /* SLIDER SECTION */
    .slider {
      margin-top: 0;
      position: relative;
      height: 60vh;
      overflow: hidden;
    }
    .banner-content {
      position: relative;
      z-index: 2;
      padding-top: 60px;
      animation: fadeInAssembly 1.5s ease-out forwards;
    }
    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #FFF;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .slide.active {
      opacity: 1;
    }
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 1;
    }
    .slide h1 {
      font-size: 2.5em;
      margin-bottom: 0.5em;
      letter-spacing: 2px;
    }
    .slide p {
      font-size: 1.2em;
    }
    .slider-dots {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      z-index: 2;
    }
    .slider-dots span {
      display: inline-block;
      width: 40px;
      height: 2px;
      margin: 0 5px;
      background-color: #ccc;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .slider-dots span.active {
      background-color: #FFD700;
    }
    @keyframes fadeInAssembly {
      0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    /* INFO BANNER SECTION */
    .info-banner {
      background: linear-gradient(135deg, #FFF8DC, #F5DEB3);
      padding: 30px 20px 40px;
      position: relative;
      clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
      color: #001f3f;
    }
    .info-details {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
    }
    .info-column {
      flex: 1;
      min-width: 200px;
      padding: 10px 20px;
    }
    .info-column h2 {
      font-size: 1.4em;
      margin-bottom: 8px;
      color: #2f2d30c0;
    }
    .info-column p {
      font-size: 0.9em;
      margin: 4px 0;
      color: #001f3f;
    }
    .info-column.whatsapp {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .whatsapp-btn {
      background: #00850f;
      color: #FFF;
      padding: 10px 40px;
      border-radius: 5px;
      text-decoration: none;
      font-size: 1em;
      transition: background 0.3s;
      margin-top: 20px;
    }
    .whatsapp-btn:hover {
      background: #1ebe5a;
    }

     /* ==========================
       TRUST / CLIENT MARQUEE
       ========================== */
    .trust-marquee{background:#f7f9fc;padding-block:2.5rem;overflow:hidden;position:relative;border-bottom:1px solid rgba(0,0,0,.05);} 
    .trust-marquee h3{text-align:center;margin-bottom:1.5rem;font-size:1rem;font-weight:600;color:#5c6170;letter-spacing:.05em;text-transform:uppercase;} 
    .marquee-track{display:flex;gap:4rem;animation:scroll-x 25s linear infinite;align-items:center;}
    .marquee-track img{height:48px;width:auto;filter:grayscale(1) contrast(.7) brightness(.9);opacity:.9;transition:filter .2s;}
    .marquee-track img:hover{filter:none;opacity:1;}
    @keyframes scroll-x{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

        /* Gradient underlines */
    .underline-gradient {
      position: relative;
      display: inline-block;
    }
    .underline-gradient:after {
      content:"";
      position:absolute;left:0;bottom:-4px;width:100%;height:4px;border-radius:2px;
      background:linear-gradient(90deg,#00C48C,#FFB547);
    }
    /* ==========================
       VALUE PILLARS (3 cols)
       ========================== */
    .pillars-grid{display:grid;gap:2rem;margin-top:3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
    .pillar-card{background:#ffffff;padding:2.5rem;border-radius:16px;box-shadow:0 2px 6px rgba(0,0,0,.06);text-align:center;transition:all .35s ease;position:relative;overflow:hidden;}
    .pillar-card:hover{box-shadow: 0 8px 24px rgba(0,0,0,.08);transform:translateY(-6px);} 
    .pillar-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(0,196,140,.08) 100%);opacity:0;transition:all .2s ease;} 
    .pillar-card:hover:after{opacity:1;} 
    .pillar-icon{font-size:2.25rem;color:#00C48C;margin-bottom:1rem;} 
    .pillar-card h3{margin-bottom:1rem;font-size:1.35rem;} 
    .pillar-card p{color:#5c6170;}
    
     /* ==========================
       SERVICES GRID
       ========================== */
   #what-we-do {
  padding: 5rem 0;
}

.section-header .lead {
  font-size: 1.1rem;
  color: #5c6170;
  max-width: 750px;
  margin: 0 auto 2.5rem;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.expertise-item {
  background: #ffffff;
  padding: 2rem;
  border-radius:16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: all .35s ease;
}

.expertise-item:hover {
  box-shadow:  0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

.expertise-item h4 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.expertise-item p {
  font-size: 0.96rem;
  color: #5c6170;
}

.btn-primary {
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  background: #00C48C;
  color: #fff;
  border-radius: 6px;
  transition: 0.3s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background: #FFB547;
  color: #000;
}

    /* ==========================
       INDUSTRIES WE SERVE (cards w icons)
       ========================== */
    .industries-wrap{margin-top:3rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));}
    .industry-card{background:#ffffff;padding:1.75rem;text-align:center;border-radius:16px;box-shadow:0 2px 6px rgba(0,0,0,.06);transition: all .2s ease;} 
    .industry-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.08);} 
    .industry-card i{font-size:1.75rem;color:#00C48C;margin-bottom:.75rem;} 
    .industry-card span{display:block;font-weight:600;}

        /* ==========================
       INTERACTIVE METRICS COUNTERS
       ========================== */
    .metrics-band{background:#253240;color:#fff;padding-block:4rem;}
    .metrics-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));text-align:center;}
    .metric-value{font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1;margin-bottom:.5rem;}
    .metric-label{font-size:1rem;opacity:.85;}

       /* ==========================
       APPROACH ACCORDION
       ========================== */
    .accordion{max-width:800px;margin-inline:auto;margin-top:1rem;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
    .accordion-item + .accordion-item{border-top:1px solid rgba(0,0,0,.08);} 
    .accordion-header{width:100%;background:#ffffff;color:#253240;display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;text-align:left;}
    .accordion-header-icon{transition:transform .25s ease;}
    .accordion-header.open .accordion-header-icon{transform:rotate(90deg);} 
    .accordion-content{max-height:0;overflow:hidden;transition:max-height .35s ease;padding-inline:1.5rem;background:#f7f9fc;} 
    .accordion-content-inner{padding-block:0 1.5rem;color:#5c6170;font-size:1rem;}
    
    /* MISSION STATEMENT SECTION (Old Glassmorphism Design) */
    .mission-section {
      position: relative;
      padding: 80px 20px;
      margin-top: 3rem;
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      text-align: center;
      overflow: hidden;
    }
    .mission-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('https://media.istockphoto.com/id/2166685594/photo/electricity-and-electrical-maintenance-service-electrical-tests-industrial-electrical.webp?a=1&b=1&s=612x612&w=0&k=20&c=SzJ44xK0kkWaGeWzV1ajYnP8te3Y5b770KRw7_5ykU0=') no-repeat center/cover;
      opacity: 0.3;
      z-index: 1;
    }
    .mission-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px;
      background: rgba(255,255,255,0.8);
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 1s ease, transform 1s ease;
    }
    .mission-section.animate .mission-content {
      opacity: 1;
      transform: scale(1);
    }
    .mission-content h2 {
      font-size: 2em;
      margin-bottom: 20px;
      color: #001f3f;
    }
    .mission-content p {
      font-size: 1.1em;
      color: #555;
      line-height: 1.5;
    }

        /* ==========================
       TESTIMONIALS (Swiper w cards)
       ========================== */
    .testimonials{background:#34495E;color:#fff;text-align:center; margin-top: 4rem;}
    .testimonial-list {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      max-width: 1200px;
      margin-inline: auto;
    }
    .testimonial-card {
      max-width: 360px;
      padding: 1.5rem 1rem;
      flex: 1 1 300px;
      box-sizing: border-box;
    }
    .testimonial-quote{font-size:1.1rem;line-height:1.4;margin-bottom:1rem;}
    .testimonial-author{font-weight:700;font-size:1rem;}
    .testimonial-role{opacity:.8;font-size:.85rem;}
    .testimonial-stars{color:#FFB547;margin-bottom:1rem;font-size:1rem;}

    
      /*=============================================
     WHY CLIENTS CHOOSE US
============================================== */
/* Carousel Container */
#why-kb {
  background: #f8f9fb;
  padding: 60px 20px;
  text-align: center;
}

.value-carousel {
  margin-top: 40px;
  padding: 20px 0;
  overflow: hidden;
}

.value-slide {
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  max-width: 600px;
  margin: auto;
  transition: transform 0.3s ease;
}

.value-slide:hover {
  transform: scale(1.02);
}

.value-slide h4 {
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.value-slide p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

    :root {
      --brand: #34495E; /* Primary brand color */
      --brand-dark: #253240;
      --accent: #00C48C; /* Secondary accent (teal/green for energy) */
    }

 /* ==========================
       CTA BANNER
       ========================== */
    .cta-band{background:linear-gradient(135deg,var(--brand)0%,var(--brand-dark)70%);color:#fff;text-align:center;padding-block:5rem;position:relative;overflow:hidden;}
    .cta-band h2{font-size:clamp(2rem,5vw,2.75rem);margin-bottom:1rem;color:#fff;}
    .cta-band p{max-width:600px;margin-inline:auto;color:rgba(255,255,255,.85);font-size:1.1rem;margin-bottom:2rem;}
    .cta-band .btn{font-size:1.15rem;padding:1.25rem 2.75rem;}
    .cta-band-glow{position:absolute;inset:auto auto -50% 50%;width:800px;height:800px;transform:translateX(-50%);background:radial-gradient(circle,var(--accent)0%,transparent 70%);opacity:.25;filter:blur(80px);z-index:-1;} 






.quality-safety-modern {
  background: linear-gradient(to bottom, #f9f9f9, #eaeef3);
  padding: 80px 20px;
}

.qs-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.qs-card {
  display: flex;
  align-items: center;
  background: #ffffffcc;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}

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

.qs-card.reverse {
  flex-direction: row-reverse;
}

.qs-image {
  flex: 0 0 40%;
  overflow: hidden;
}

.qs-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qs-content {
  flex: 1;
  padding: 40px;
}

.qs-content h2 {
  font-size: 2.2em;
  margin-bottom: 20px;
  color: #1a1a1a;
}

.qs-content p {
  font-size: 1.1em;
  line-height: 1.7;
  color: #444;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .qs-card,
  .qs-card.reverse {
    flex-direction: column;
  }

  .qs-content {
    padding: 20px;
    text-align: center;
  }

  .qs-content h2 {
    font-size: 1.8em;
  }

  .qs-image {
    width: 100%;
  }
}