:root{
  --brand-green:#7fc241;
  --brand-blue:#00a8d6;
  --dark:#122026;
  --muted:#6b7280;
  --max-width:1200px;
}
*{box-sizing:border-box}
body{font-family:'Poppins',sans-serif;margin:0;color:var(--dark);background:#fafafa;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* topbar */
.topbar{background:#0f1720;color:#fff;padding:6px 12px;font-size:14px}
.topbar .wrap{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar a{color:#cfeefb}

/* header nav */
header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #e6eef2}
.navwrap{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 0px;gap:12px}
.brand, .brand img{display:flex;align-items:center}
.logo{height:52px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{color:var(--dark);font-weight:600;padding:8px 10px;border-radius:6px}
nav a:hover{background:#f2fbff}
.btn-cta{background:var(--brand-green);color:#fff;padding:10px 16px;border-radius:26px;border:none;cursor:pointer}

/* mobile menu toggle (JS toggles class) */
.mobile-menu-toggle{display:none;background:transparent;border:0;font-size:20px}

/* slider */
.slider-wrap{margin:0}
.swiper{width:100%}
.swiper-slide{position:relative}
.swiper-slide img{width:100%;object-fit:cover}
.slide-caption{position:absolute;left:8%;top:50%;transform:translateY(-50%);color:#fff;max-width:640px}
.slide-caption h2{font-size:32px;margin:0 0 8px;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.slide-caption p{margin:0 0 12px;text-shadow:0 6px 30px rgba(0,0,0,.25)}

/* sections */
.section{padding:56px 18px}
.wrap{max-width:var(--max-width);margin:0 auto}
.lead{color:var(--muted);margin-bottom:18px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:var(--brand-blue);color:#fff;padding:12px 18px;border-radius:8px}
.btn-outline{background:transparent;border:2px solid #e6eef2;padding:10px 14px;border-radius:8px}
.btn-secondary{background:#fff;border:1px solid #e6eef2;padding:10px 14px;border-radius:8px}

/* grid utilities */
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 10px 30px rgba(20,40,60,.06)}

/* products */
.product img{height:140px;object-fit:cover;border-radius:8px}
.product h4{margin:12px 0 6px}
.muted{color:var(--muted)}

/* clients swiper */
.clientsSwiper .swiper-slide, .clientsFullSwiper .swiper-slide{display:flex;align-items:center;justify-content:center;padding:10px}
.client-slide img{height:60px;object-fit:contain}

/* footer */
footer{background:#0b1b20;color:#cfeefb;padding:40px 18px}
.footer-grid{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;max-width:var(--max-width);margin:0 auto}
.footer-grid .col{flex:1;min-width:220px}
.footer-logo{height:44px}
.socials-footer a{margin-right:10px;color:#cfeefb}

/* whatsapp fab */
.whatsapp-fab{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;z-index:999;animation: bounce 2s infinite;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.whatsapp-fab:hover{transform:translateY(-3px)}

/* responsive */
@media (max-width:1000px){ .cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){
  nav ul{display:none}
  .mobile-menu-toggle{display:inline-block}
  .slide-caption{left:6%;right:6%;top:40%;max-width:unset}
  .slide-caption h2{font-size:22px}
  .slide-caption p{font-size:14px}
}

.footer {
  background: #001f2e;
  color: #d0e7f5;
  padding-top: 40px;
}
.footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
}
.footer-col {
  flex: 1;
  float:left !important;
  min-width: 220px;
}
.col-1 { max-width: 300px; }
.col-4 { max-width: 260px; }
.footer-logo {
  max-height: 50px;
  margin-bottom: 12px;
}
.footer-desc {
  font-size: 14px;
  line-height: 1.6;
}
.footer-col h3 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 12px;
}
.footer-links {
  list-style: none;
  padding: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links li a {
  color: #d0e7f5;
  text-decoration: none;
  transition: color .25s;
}
.footer-links li a:hover {
  color: #7fc241;
}
.footer-socials a {
  color: #d0e7f5;
  font-size: 18px;
  margin-right: 12px;
  transition: color .25s;
}
.footer-socials a:hover {
  color: #7fc241;
}
.footer-phone {
  margin-top: 10px;
  font-size: 14px;
}
.footer-bottom {
  border-top: 1px solid #0b2c3c;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  margin-top: 20px;
}
@media (max-width: 900px) {
  .footer-container {
    flex-wrap: wrap;
  }
}

/* Bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}