/* ===================================================== */
/* RESET */
/* ===================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

:root{

  --primary:#071A2F;
  --secondary:#1E90FF;
  --secondary-light:#38BDF8;

  --light:#ffffff;

  --gray:#eef3f9;

  --dark:#111111;

  --text:#64748B;

}

body{

  font-family:'Montserrat', sans-serif;

  overflow-x:hidden;

  background:
  linear-gradient(
    to bottom,
    #ffffff,
    #f8fbff
  );

  color:var(--dark);

}

/* ===================================================== */
/* GLOBAL */
/* ===================================================== */

img{
  width:100%;
  display:block;
}

a{
  text-decoration:none;
}

ul{
  list-style:none;
}

.container{
  width:90%;
  max-width:1400px;
  margin:auto;
}

section{
  padding:120px 0;
}

/* ===================================================== */
/* HEADER */
/* ===================================================== */

/* ===================================================== */
/* HEADER PREMIUM */
/* ===================================================== */

header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:9999;

  background:
  linear-gradient(
    90deg,
    rgba(7,26,47,.96),
    rgba(10,35,60,.94)
  );

  backdrop-filter:blur(12px);

  border-bottom:
  1px solid rgba(255,255,255,.05);

  transition:.3s;

}

/* NAVBAR */

.navbar{

  display:flex;

  justify-content:space-between;

  align-items:center;

  min-height:72px;

  padding:8px 0;

}


/* ===================================================== */
/* LOGO */
/* ===================================================== */

.logo{

  display:flex;
  align-items:center;

}

.logo img{

  width:165px;

  object-fit:contain;

  transition:.3s;

  filter:
  drop-shadow(
    0 5px 15px rgba(0,0,0,.25)
  );

}

.logo img:hover{

  transform:scale(1.03);

}

/* ===================================================== */
/* NAVIGATION */
/* ===================================================== */

.nav-links{

  display:flex;

  gap:35px;

}

.nav-links a{

  color:white;

  font-weight:600;

  font-size:15px;

  letter-spacing:.3px;

  transition:.3s;

  position:relative;

}

.nav-links a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-8px;

  width:0;
  height:2px;

  background:
  linear-gradient(
    90deg,
    #1E90FF,
    #38BDF8
  );

  transition:.3s;

}

.nav-links a:hover{

  color:#38BDF8;

}

.nav-links a:hover::after{

  width:100%;

}

.menu-btn{
  display:none;
}

/* ===================================================== */
/* HERO */
/* ===================================================== */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;

  align-items:center;

  overflow:hidden;

  color:white;

}

.hero video{

  position:absolute;

  width:100%;
  height:100%;

  object-fit:cover;

  top:0;
  left:0;

  z-index:-2;

}

.overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(7,26,47,.88),
    rgba(7,26,47,.72),
    rgba(30,144,255,.22)
  );

  z-index:-1;

}

/* LIGHT EFFECT */

.hero::before{

  content:'';

  position:absolute;

  width:700px;
  height:700px;

  background:
  radial-gradient(
    circle,
    rgba(30,144,255,.22),
    transparent 70%
  );

  top:-250px;
  right:-200px;

  z-index:-1;

}

.hero-content{

  max-width:780px;

  animation:
  fadeUp 1.2s ease;

}

.hero-content h1{

  font-size:82px;

  line-height:1.05;

  margin-bottom:28px;

  font-weight:900;

  letter-spacing:-2px;

  text-shadow:
  0 0 20px rgba(255,255,255,.12),
  0 0 40px rgba(30,144,255,.22);

}

.hero-content p{

  font-size:20px;

  line-height:1.9;

  margin-bottom:45px;

  color:#d8e2ef;

}

.hero-buttons{

  display:flex;

  gap:20px;

  flex-wrap:wrap;

}

/* ===================================================== */
/* BUTTONS */
/* ===================================================== */

.btn{

  display:inline-block;

  padding:17px 40px;

  border-radius:12px;

  transition:.35s;

  font-weight:700;

  font-size:16px;

}

.btn-primary{

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;

  border:none;

  box-shadow:
  0 12px 30px rgba(30,144,255,.35);

}

.btn-primary:hover{

  transform:translateY(-5px);

  box-shadow:
  0 20px 40px rgba(30,144,255,.45);

}

.btn-outline{

  border:2px solid rgba(255,255,255,.65);

  color:white;

  background:transparent;

}

.btn-outline:hover{

  background:white;

  color:#071A2F;

}

.btn-outline-dark{

  border:2px solid #071A2F;

  color:#071A2F;

  padding:16px 38px;

  border-radius:10px;

  font-weight:700;

  transition:.3s;

}

.btn-outline-dark:hover{

  background:#071A2F;

  color:white;

}

/* ===================================================== */
/* SECTION TITLE */
/* ===================================================== */

.section-title{

  text-align:center;

  margin-bottom:70px;

}

.section-title h2{

  font-size:56px;

  color:#071A2F;

  margin-bottom:20px;

  font-weight:900;

  letter-spacing:-1px;

}

.section-title p{

  max-width:850px;

  margin:auto;

  line-height:1.9;

  color:var(--text);

  font-size:18px;

}

/* ===================================================== */
/* STATS */
/* ===================================================== */

.stats{

  background:
  linear-gradient(
    135deg,
    #071A2F,
    #0F2C4C
  );

  color:white;

}

.stats-grid{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:35px;

}

.stat{

  background:
  rgba(255,255,255,.05);

  padding:45px 30px;

  border-radius:24px;

  text-align:center;

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(10px);

}

.stat h2{

  font-size:62px;

  color:#38BDF8;

  margin-bottom:15px;

  font-weight:900;

}

.stat p{

  font-size:18px;

  color:#dbe8f5;

}

/* ===================================================== */
/* ABOUT */
/* ===================================================== */

.about{

  background:var(--gray);

}

.about-grid{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:70px;

  align-items:center;

}

.about h2{

  font-size:56px;

  color:#071A2F;

  margin-bottom:25px;

  font-weight:900;

}

.about p{

  line-height:1.95;

  color:var(--text);

  margin-bottom:20px;

  font-size:17px;

}

.about img{

  border-radius:25px;

  box-shadow:
  0 25px 60px rgba(0,0,0,.12);

}

/* ===================================================== */
/* SERVICES */
/* ===================================================== */

.services{

  background:white;

}

.services-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:35px;

}

.card{

  background:white;

  border-radius:24px;

  overflow:hidden;

  transition:.4s;

  border:
  1px solid rgba(255,255,255,.05);

  box-shadow:
  0 15px 40px rgba(0,0,0,.08);

}

.card:hover{

  transform:translateY(-12px);

  box-shadow:
  0 25px 60px rgba(30,144,255,.18);

}

.card img{

  height:260px;

  object-fit:cover;

}

.card-content{

  padding:35px;

}

.card-content i{

  width:78px;
  height:78px;

  border-radius:50%;

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  display:flex;

  align-items:center;
  justify-content:center;

  color:white;

  font-size:30px;

  margin-bottom:25px;

}

.card-content h3{

  font-size:30px;

  color:#071A2F;

  margin-bottom:18px;

  font-weight:800;

}

.card-content p{

  line-height:1.9;

  color:var(--text);

}

/* ===================================================== */
/* PRODUCTS */
/* ===================================================== */

.products,
.products-page{

  background:var(--gray);

}

.products-page{

  padding:150px 0;

}

.filters{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:18px;

  flex-wrap:wrap;

  margin-bottom:70px;

}

.filter-btn{

  border:none;

  background:white;

  color:#071A2F;

  padding:15px 30px;

  border-radius:50px;

  font-weight:700;

  cursor:pointer;

  transition:.3s;

  box-shadow:
  0 10px 25px rgba(0,0,0,.08);

}

.filter-btn:hover{

  background:#1E90FF;

  color:white;

}

.filter-btn.active{

  background:#071A2F;

  color:white;

}

.products-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(340px,1fr));

  gap:40px;

}

.product-card{

  background:white;

  border-radius:24px;

  overflow:hidden;

  transition:.4s;

  box-shadow:
  0 15px 40px rgba(0,0,0,.08);

  display:flex;

  flex-direction:column;

}

.product-card:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 25px 60px rgba(30,144,255,.18);

}

.product-image{

  position:relative;

  height:260px;

  overflow:hidden;

}

.product-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:.5s;

}

.product-card:hover .product-image img{

  transform:scale(1.06);

}

.product-category{

  position:absolute;

  top:20px;
  left:20px;

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;

  padding:12px 22px;

  border-radius:50px;

  font-size:13px;

  font-weight:700;

}

.product-content{

  padding:35px;

  display:flex;

  flex-direction:column;

  flex:1;

}

.product-content h3{

  font-size:32px;

  color:#071A2F;

  margin-bottom:18px;

  font-weight:900;

}

.product-content p{

  line-height:1.9;

  color:var(--text);

  margin-bottom:25px;

}

.product-features{

  margin-bottom:30px;

}

.product-features li{

  margin-bottom:12px;

  display:flex;

  align-items:center;

  gap:10px;

}

.product-features i{

  color:#1E90FF;

}

.product-btn{

  margin-top:auto;

  background:#071A2F;

  color:white;

  padding:16px 30px;

  border-radius:12px;

  font-weight:700;

  transition:.3s;

  width:max-content;

}

.product-btn:hover{

  background:#1E90FF;

}

/* ===================================================== */
/* CTA */
/* ===================================================== */

.cta{

  background:
  linear-gradient(
    135deg,
    #071A2F,
    #0F2C4C
  );

  color:white;

  text-align:center;

}

.cta h2{

  font-size:60px;

  margin-bottom:20px;

  font-weight:900;

}

.cta p{

  margin-bottom:35px;

  font-size:18px;

  color:#d8e2ef;

}

/* ===================================================== */
/* FOOTER */
/* ===================================================== */

footer{

  background:#04111f;

  color:white;

  padding:90px 0 30px;

}

.footer-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:40px;

  margin-bottom:50px;

}

.footer-grid h3,
.footer-grid h4{

  margin-bottom:20px;

}

.footer-grid p,
.footer-grid li{

  color:#bbb;

  line-height:1.9;

}

.footer-bottom{

  border-top:
  1px solid rgba(255,255,255,.1);

  padding-top:25px;

  text-align:center;

  color:#aaa;

}

/* ===================================================== */
/* WHATSAPP */
/* ===================================================== */

.whatsapp{

  position:fixed;

  right:25px;
  bottom:25px;

  width:72px;
  height:72px;

  border-radius:50%;

  background:#25D366;

  display:flex;

  align-items:center;
  justify-content:center;

  color:white;

  font-size:34px;

  z-index:9999;

  box-shadow:
  0 12px 30px rgba(0,0,0,.25);

  animation:pulse 2s infinite;

}

@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }

}

/* ===================================================== */
/* ANIMATIONS */
/* ===================================================== */

@keyframes fadeUp{

  from{

    opacity:0;

    transform:
    translateY(40px);

  }

  to{

    opacity:1;

    transform:
    translateY(0);

  }

}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:1200px){

  .services-grid,
  .stats-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

}

@media(max-width:992px){

  .about-grid{

    grid-template-columns:1fr;

  }

  .hero-content h1{

    font-size:58px;

  }

}

@media(max-width:768px){

  section{
    padding:90px 0;
  }

  .container{
    width:92%;
  }

  header{
    background:#071A2F;
  }

  .menu-btn{

    display:flex;

    align-items:center;
    justify-content:center;

    width:50px;
    height:50px;

    background:#1E90FF;

    border-radius:10px;

    cursor:pointer;

    z-index:99999;

  }

  .menu-btn i{

    color:white;

    font-size:24px;

  }

  .nav-links{

    position:fixed;

    top:0;
    right:-100%;

    width:100%;
    height:100vh;

    background:#071A2F;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:35px;

    transition:.4s;

    z-index:9999;

  }

  .nav-links.active{
    right:0;
  }

  .hero{

    text-align:center;

    padding:180px 0 120px;

  }

  .hero-content{

    max-width:100%;

  }

  .hero-content h1{

    font-size:46px;

  }

  .hero-buttons{

    flex-direction:column;

  }

  .btn{

    width:100%;

    text-align:center;

  }

  .services-grid,
  .products-grid,
  .stats-grid,
  .footer-grid{

    grid-template-columns:1fr;

  }

  .section-title h2,
  .about h2,
  .cta h2{

    font-size:38px;

  }

  .filters{

    flex-direction:column;

  }

  .filter-btn{

    width:100%;

  }

  .product-btn{

    width:100%;

    text-align:center;

  }

  .logo img{

    width:180px;

  }

}

@media(max-width:480px){

  .hero-content h1{

    font-size:36px;

  }

  .section-title h2{

    font-size:30px;

  }

  .logo img{

    width:150px;

  }

}

/* ===================================================== */
/* INTERNAL PAGES SPACING */
/* ===================================================== */

.page-hero{

  padding-top:180px;

  padding-bottom:80px;

}

/* ===================================================== */
/* HERO BIG LOGO */
/* ===================================================== */

.hero-logo-bg{

  position:absolute;

  width:900px;

  opacity:.08;

  right:-120px;

  top:50%;

  transform:
  translateY(-50%);

  z-index:-1;

  filter:
  blur(1px)
  drop-shadow(
    0 0 40px rgba(30,144,255,.35)
  );

  pointer-events:none;

  animation:
  floatLogo 7s ease-in-out infinite;

}

/* FLOAT */

@keyframes floatLogo{

  0%{

    transform:
    translateY(-50%)
    translateX(0);

  }

  50%{

    transform:
    translateY(-52%)
    translateX(-10px);

  }

  100%{

    transform:
    translateY(-50%)
    translateX(0);

  }

}

@media(max-width:992px){

  .hero-logo-bg{

    width:650px;

    right:-180px;

    opacity:.05;

  }

}

@media(max-width:768px){

  .hero-logo-bg{

    width:500px;

    right:-180px;

    opacity:.04;

  }

}