*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#f7fbff;
  color:#222;
}

/* Loader */

#loader{
  position:fixed;
  width:100%;
  height:100%;
  background:white;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.spinner{
  width:60px;
  height:60px;
  border:6px solid #ddd;
  border-top:6px solid #00aaff;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  100%{
    transform:rotate(360deg);
  }
}

/* Navbar */

header{
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  background:rgba(0,170,255,0.68);
  backdrop-filter:blur(8px);
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:116px;
  padding:12px 8%;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  color:white;
  text-decoration:none;
  font-size:clamp(20px, 3vw, 28px);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.logo-mark{
  width:clamp(62px, 8vw, 98px);
  height:clamp(62px, 8vw, 98px);
  object-fit:contain;
  flex:0 0 auto;
  display:block;
  border-radius:6px;
}

.nav-links{
  display:flex;
  list-style:none;
  gap:25px;
}

.nav-links a{
  color:white;
  text-decoration:none;
  transition:0.3s;
}

.nav-links a:hover{
  color:#00c3ff;
}

.menu-toggle{
  display:none;
  color:white;
  font-size:28px;
  cursor:pointer;
}

/* Hero */

.hero{
  height:100vh;
  background:url('https://images.unsplash.com/photo-1488459716781-31db52582fe9') center/cover no-repeat;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
}

.hero-content{
  position:relative;
  z-index:2;
  width:90%;
  max-width:800px;
}

.hero h1{
  font-size:60px;
  margin-bottom:20px;
}

.hero p{
  font-size:18px;
  margin-bottom:30px;
}

.btn{
  padding:14px 30px;
  background:#00aaff;
  color:white;
  text-decoration:none;
  border-radius:30px;
  margin:10px;
  display:inline-block;
  transition:0.3s;
}

.btn:hover{
  background:#008ecc;
}

.btn-secondary{
  background:white;
  color:#222;
}

/* Sections */

.section{
  padding:100px 8%;
}

.section-title{
  text-align:center;
  margin-bottom:50px;
}

.section-title h2{
  font-size:40px;
}

/* Categories */

.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.category-card{
  background:white;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  transition:0.3s;
}

.category-card:hover{
  transform:translateY(-10px);
}

.category-card img{
  width:100%;
  height:220px;
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:14px;
  cursor:zoom-in;
}

.category-card h3{
  padding:15px;
}

.category-card p{
  padding:0 15px 20px;
}

/* Products */

.filter-buttons{
  text-align:center;
  margin-bottom:30px;
}

.filter-buttons button{
  padding:10px 20px;
  margin:5px;
  border:none;
  background:#00aaff;
  color:white;
  cursor:pointer;
  border-radius:20px;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.product-card{
  background:white;
  border-radius:15px;
  overflow:hidden;
  text-align:center;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  transition:0.3s;
}

.product-card:hover{
  transform:translateY(-10px);
}

.product-card img{
  width:100%;
  height:250px;
  object-fit:cover;
}

.product-card h3{
  margin-top:15px;
}

.product-card button{
  margin:15px;
  padding:10px 20px;
  border:none;
  background:#00aaff;
  color:white;
  border-radius:20px;
  cursor:pointer;
}

/* Why */

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}

.why-card{
  background:white;
  padding:40px 20px;
  text-align:center;
  border-radius:15px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.why-icon{
  width:58px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,170,255,0.12);
  color:#00aaff;
  margin-bottom:18px;
}

.why-icon svg{
  width:32px;
  height:32px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.why-card h3{
  font-size:20px;
}

/* About */

.about{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
  align-items:center;
}

.about img{
  width:100%;
  border-radius:15px;
}

.about-link{
  margin-left:0;
  margin-top:14px;
}

/* About Page */

.about-page{
  padding-top:116px;
}

.about-hero{
  min-height:420px;
  display:flex;
  align-items:center;
  color:white;
  background:linear-gradient(rgba(0,170,255,0.82),rgba(0,170,255,0.82)), url('https://images.unsplash.com/photo-1601593768793-5755873175f9') center/cover no-repeat;
  padding:90px 8%;
}

.about-hero-content{
  max-width:780px;
}

.about-hero span{
  display:inline-block;
  margin-bottom:14px;
  font-weight:700;
  text-transform:uppercase;
}

.about-hero h1{
  font-size:clamp(34px,5vw,58px);
  line-height:1.12;
  margin-bottom:18px;
}

.about-hero p{
  max-width:680px;
  font-size:18px;
}

.about-story-grid,
.about-network-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}

.about-story-image{
  background:white;
  border-radius:8px;
  padding:28px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.about-story-image img{
  width:100%;
  height:360px;
  object-fit:contain;
  display:block;
}

.about-story-content h2,
.quality-content h2,
.about-network h2{
  font-size:36px;
  margin-bottom:18px;
}

.about-story-content p,
.about-info-card p,
.quality-content p,
.about-network p{
  margin-bottom:14px;
  line-height:1.75;
}

.about-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px;
}

.about-info-card{
  background:white;
  border-top:4px solid #00aaff;
  border-radius:8px;
  padding:28px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.about-info-card h3{
  margin-bottom:12px;
}

.quality-band{
  background:#00aaff;
  color:white;
  padding:90px 8%;
}

.quality-content{
  max-width:980px;
  margin:auto;
}

.about-network a{
  color:#008ecc;
  font-weight:600;
}

.about-stat-panel{
  display:grid;
  gap:16px;
}

.about-stat-panel div{
  background:white;
  border-radius:8px;
  padding:24px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.about-stat-panel strong{
  display:block;
  color:#00aaff;
  font-size:38px;
  line-height:1;
  margin-bottom:8px;
}

/* Clients */

.clients{
  overflow:hidden;
}

.client-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
}

.client-marquee::before,
.client-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:90px;
  z-index:2;
  pointer-events:none;
}

.client-marquee::before{
  left:0;
  background:linear-gradient(to right,#f7fbff,rgba(247,251,255,0));
}

.client-marquee::after{
  right:0;
  background:linear-gradient(to left,#f7fbff,rgba(247,251,255,0));
}

.client-track{
  display:flex;
  width:max-content;
  gap:26px;
  animation:clientScroll 38s linear infinite;
}

.client-logo{
  width:220px;
  height:146px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:16px;
  background:white;
  border-radius:8px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.client-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

@keyframes clientScroll{
  from{
    transform:translateX(-50%);
  }

  to{
    transform:translateX(0);
  }
}

/* Newsletter */

.newsletter{
  background:#00aaff;
  color:white;
  text-align:center;
  padding:80px 20px;
}

.newsletter form{
  margin-top:20px;
}

.newsletter input{
  padding:14px;
  width:300px;
  max-width:90%;
  border:none;
}

.newsletter button{
  padding:14px 25px;
  border:none;
  background:#222;
  color:white;
}

/* Contact */

.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:15px;
  margin-bottom:15px;
  border:1px solid #ccc;
}

.contact-form button{
  padding:14px 25px;
  border:none;
  background:#00aaff;
  color:white;
}

.social-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border-radius:6px;
  background:#00aaff;
  color:white;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.social-links a:hover,
.social-links a:focus{
  background:#008ecc;
  outline:none;
  transform:translateY(-2px);
}

.social-links svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

.social-links a:nth-child(2) svg{
  fill:currentColor;
  stroke:none;
}

footer{
  background:#111;
  color:white;
  text-align:center;
  padding:20px;
}

/* WhatsApp Button */

#whatsappBtn{
  position:fixed;
  bottom:20px;
  right:20px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25d366;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.22);
  cursor:pointer;
  z-index:1001;
  transition:0.3s;
}

#whatsappBtn:hover,
#whatsappBtn:focus{
  background:#1ebe5d;
  outline:none;
  transform:translateY(-3px);
}

#whatsappBtn svg{
  width:34px;
  height:34px;
  fill:currentColor;
  display:block;
}

/* Product Image Preview */

.image-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:82px 7%;
  background:rgba(5,15,24,0.86);
  z-index:2000;
}

.image-lightbox.active{
  display:flex;
}

body.lightbox-open{
  overflow:hidden;
}

.lightbox-content{
  width:min(920px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.lightbox-image-wrap{
  width:100%;
  height:min(72vh,680px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  border-radius:8px;
  background:white;
  padding:22px;
}

.lightbox-image-wrap img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transform:scale(1);
  transform-origin:center;
  transition:transform 0.2s;
}

.lightbox-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:10px 14px;
  border-radius:8px;
  background:white;
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
}

.lightbox-toolbar button,
.lightbox-close,
.lightbox-nav{
  border:none;
  background:white;
  color:#111;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.2s;
}

.lightbox-toolbar button{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#f1f7fb;
}

.lightbox-toolbar span{
  min-width:56px;
  text-align:center;
  font-weight:600;
}

.lightbox-close{
  position:absolute;
  top:22px;
  right:24px;
  width:46px;
  height:46px;
  border-radius:50%;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  transform:translateY(-50%);
}

.lightbox-prev{
  left:24px;
}

.lightbox-next{
  right:24px;
}

.lightbox-toolbar button:hover,
.lightbox-toolbar button:focus,
.lightbox-close:hover,
.lightbox-close:focus,
.lightbox-nav:hover,
.lightbox-nav:focus{
  background:#00aaff;
  color:white;
  outline:none;
}

.lightbox-toolbar svg,
.lightbox-close svg,
.lightbox-nav svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Responsive */

@media(max-width:768px){

  .hero h1{
    font-size:38px;
  }

  .navbar{
    min-height:88px;
    padding:10px 6%;
  }

  .about-page{
    padding-top:88px;
  }

  .about-hero{
    min-height:360px;
    padding:70px 6%;
  }

  .about-hero p{
    font-size:16px;
  }

  .about-story-grid,
  .about-network-grid{
    grid-template-columns:1fr;
  }

  .about-story-image img{
    height:260px;
  }

  .logo{
    gap:9px;
  }

  .logo-mark{
    width:62px;
    height:62px;
  }

  .client-marquee::before,
  .client-marquee::after{
    width:36px;
  }

  .client-track{
    gap:16px;
    animation-duration:32s;
  }

  .client-logo{
    width:162px;
    height:106px;
    padding:12px;
  }

  .nav-links{
    position:absolute;
    top:88px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:center;
    gap:0;
    background:rgba(0,170,255,0.92);
    backdrop-filter:blur(8px);
    width:100%;
    height:auto;
    padding:12px 6%;
    transform:translateY(-140%);
    transition:0.3s;
  }

  .nav-links li{
    width:100%;
  }

  .nav-links a{
    display:block;
    width:100%;
    padding:12px 0;
    text-align:center;
  }

  .nav-links.active{
    transform:translateY(0);
  }

  .menu-toggle{
    display:block;
  }

  .image-lightbox{
    padding:76px 4% 34px;
  }

  .lightbox-image-wrap{
    height:62vh;
    padding:14px;
  }

  .lightbox-close{
    top:14px;
    right:14px;
  }

  .lightbox-nav{
    top:auto;
    bottom:28px;
    transform:none;
  }

  .lightbox-prev{
    left:22px;
  }

  .lightbox-next{
    right:22px;
  }
}