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

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:#081520;
  color:#fff;
  overflow-x:hidden;
}

a{
  text-decoration:none;
}

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

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

.section{
  padding:100px 20px;
  position:relative;
  z-index:2;
}

.dark{
  background:#06131d;
}

.section h2{
  text-align:center;
  font-size:42px;
  margin-bottom:20px;
}

p{
  color:rgba(255,255,255,0.82);
  line-height:1.8;
}

.scroll-bar{
  position:fixed;
  top:0;
  left:0;
  width:0%;
  height:3px;
  background:#00c2ff;
  z-index:99999;
}

/* =========================================
   PREMIUM NAVBAR
========================================= */
/* =========================================
   PREMIUM FLOATING NAVBAR — FIXED
========================================= */

.navbar{
  position:fixed;
  top:22px;
  left:50%;
  transform:translateX(-50%);

  width:calc(100% - 60px);
  max-width:1280px;

  z-index:9999;

  background:rgba(10,15,25,0.58);

  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:28px;

  overflow:hidden;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    0 0 30px rgba(0,194,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);

  transition:0.35s ease;
}

/* glowing edge */

.navbar::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:28px;
  padding:1px;

  background:
    linear-gradient(
      135deg,
      rgba(0,194,255,0.8),
      rgba(255,255,255,0.15),
      rgba(0,119,255,0.8)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  pointer-events:none;
}

/* =========================================
   INNER WRAPPER
========================================= */

.nav-wrapper{
  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:40px;

  padding:0 34px;

  position:relative;
  z-index:2;
}

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

.logo{
  display:flex;
  align-items:center;

  flex-shrink:0;
}

.logo img{
  height:75px;
  width:auto;
  object-fit:contain;
}

/* =========================================
   NAV MENU
========================================= */

.nav-menu{
  flex:1;

  display:flex;
  justify-content:center;
}

.nav-menu ul{
  display:flex;
  align-items:center;

  gap:42px;

  list-style:none;
}

.nav-menu a{
  position:relative;

  color:rgba(255,255,255,0.82);

  font-size:15px;
  font-weight:500;

  transition:0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active{
  color:#fff;
}

/* animated underline */

.nav-menu a::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-10px;

  width:0%;
  height:2px;

  background:#00c2ff;

  border-radius:10px;

  transform:translateX(-50%);

  transition:0.3s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after{
  width:100%;
}

/* =========================================
   BUTTON
========================================= */

.btn-quote{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  flex-shrink:0;

  padding:14px 26px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #00c2ff,
      #0077ff
    );

  color:#fff;

  font-size:14px;
  font-weight:600;

  white-space:nowrap;

  box-shadow:
    0 0 20px rgba(0,194,255,0.45),
    0 10px 30px rgba(0,194,255,0.28);

  transition:0.35s ease;
}

.btn-quote:hover{
  transform:translateY(-3px);

  box-shadow:
    0 0 30px rgba(0,194,255,0.7),
    0 18px 40px rgba(0,194,255,0.38);
}


/* =========================================
   MOBILE
========================================= */

/* =========================
   MOBILE NAVBAR
========================= */

/* =========================
   MOBILE NAVBAR FIX
========================= */

.hamburger{
  display:none;
}

@media(max-width:992px){

  .hamburger{
    display:flex;
    flex-direction:column;
    gap:5px;
    cursor:pointer;

    position:relative;
    z-index:10002;
  }

  .hamburger span{
    width:24px;
    height:2px;
    background:#fff;
    border-radius:20px;
    transition:0.3s ease;
  }

  /* HAMBURGER ANIMATION */

.hamburger.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

  .nav-menu{
    position:fixed;

    top:95px;
    left:20px;
    right:20px;

    padding:30px;

    background:rgba(8,15,25,0.96);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);

    pointer-events:none;

    transition:all 0.35s ease;

    z-index:10001;
  }

  .nav-menu.active{
    opacity:1;
    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;
  }

  .nav-menu ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
  }

  .nav-menu a{
    font-size:17px;
  }

  .btn-quote{
    display:none;
  }

}




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

/* =========================================
   PREMIUM HERO SECTION
========================================= */

/* =========================================
   PREMIUM HERO SECTION
========================================= */


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

.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;

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

  background:#081520;
}

/* VIDEO */

.bg-video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:1;

  transform:scale(1.05);

  filter:
  brightness(0.45)
  contrast(1.05)
  saturate(1.1);
}

/* OVERLAY */

.hero-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(4,10,20,0.55),
    rgba(4,10,20,0.72)
  );

  z-index:2;
}

/* BLUE GLOW */

.hero-glow{
  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(0,194,255,0.18),
    transparent 70%
  );

  filter:blur(40px);

  z-index:2;
}

/* HERO CONTENT */

.hero-content{
  position:relative;
  z-index:5;

  text-align:center;

  max-width:900px;

  padding:0 20px;

  margin-top:40px;
}

/* BADGE */

.hero-badge{
  display:inline-block;

  padding:10px 18px;

  border-radius:50px;

  background:
  rgba(255,255,255,0.08);

  border:
  1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(10px);

  font-size:13px;
  font-weight:600;

  letter-spacing:1px;

  color:#00c2ff;

  margin-bottom:28px;
}

/* TITLE */

.hero-content h1{
  font-size:72px;
  line-height:1.05;
  font-weight:800;

  letter-spacing:-2px;

  margin-bottom:24px;

  color:#fff;

  text-shadow:
  0 10px 40px rgba(0,0,0,0.4);
}

/* SUBTITLE */

.hero-content p{
  font-size:22px;
  line-height:1.7;

  color:rgba(255,255,255,0.82);

  max-width:760px;

  margin:auto auto 40px;
}

/* BUTTONS */

.hero-buttons{
  display:flex;
  gap:18px;

  justify-content:center;
  flex-wrap:wrap;
}

/* BUTTON */

.hero-btn{
  padding:16px 32px;

  border-radius:16px;

  font-size:15px;
  font-weight:600;

  transition:0.35s ease;
}

/* PRIMARY */

.hero-btn.primary{
  background:
  linear-gradient(
    135deg,
    #00c2ff,
    #0066ff
  );

  color:#fff;

  box-shadow:
  0 15px 35px rgba(0,194,255,0.35);
}

.hero-btn.primary:hover{
  transform:translateY(-4px);

  box-shadow:
  0 20px 45px rgba(0,194,255,0.45);
}

/* SECONDARY */

.hero-btn.secondary{
  background:
  rgba(255,255,255,0.08);

  border:
  1px solid rgba(255,255,255,0.12);

  color:#fff;

  backdrop-filter:blur(12px);
}

.hero-btn.secondary:hover{
  background:
  rgba(255,255,255,0.14);

  transform:translateY(-4px);
}

/* FEATURE BAR */

.hero-features{
  position:absolute;

  bottom:45px;
  left:50%;

  transform:translateX(-50%);

  width:90%;
  max-width:1100px;

  z-index:5;

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

  gap:1px;

  background:
  rgba(255,255,255,0.08);

  border:
  1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  border-radius:24px;

  overflow:hidden;
}

/* FEATURE ITEM */

.feature-item{
  display:flex;
  align-items:center;
  gap:16px;

  padding:24px;

  background:
  rgba(8,15,25,0.45);
}

.feature-icon{
  font-size:26px;
}

.feature-item h4{
  font-size:15px;
  margin-bottom:4px;
}

.feature-item span{
  font-size:13px;
  color:rgba(255,255,255,0.65);
}



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

.stats{
  display:flex;
  justify-content:center;
  gap:80px;

  padding:70px 20px;

  background:#06131d;
}

.stats h3{
  font-size:48px;
  color:#00c2ff;
}

.stats p{
  margin-top:8px;
}

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

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;

  max-width:1150px;
  margin:50px auto 0;
}

.card{
  padding:38px;

  border-radius:22px;

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(12px);

  transition:0.3s ease;
}

.card:hover{
  transform:translateY(-8px);

  box-shadow:
  0 18px 40px rgba(0,194,255,0.15);
}

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

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

  gap:25px;

  max-width:1200px;
  margin:50px auto 0;
}

.about-block{
  padding:30px;

  border-radius:22px;

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(12px);

  transition:0.3s ease;
}

.about-block:hover{
  transform:translateY(-8px);

  box-shadow:
  0 18px 40px rgba(0,194,255,0.15);
}

.about-block h3{
  color:#00c2ff;
  margin-bottom:16px;
}

.about-block ul{
  padding-left:20px;
}

/* =========================================
   QUOTE FORM
========================================= */

.quote-form{
  max-width:650px;
  margin:50px auto 0;
}

.form-group{
  position:relative;
  margin-bottom:35px;
}

.form-group input,
.form-group textarea{
  width:100%;

  background:transparent;

  border:none;
  border-bottom:1px solid rgba(255,255,255,0.3);

  padding:12px 5px;

  color:#fff;
  font-size:15px;

  outline:none;
}

.form-group textarea{
  min-height:120px;
  resize:none;
}

.form-group label{
  position:absolute;
  left:5px;
  top:12px;

  color:rgba(255,255,255,0.6);

  pointer-events:none;

  transition:0.3s ease;
}

.form-group input:focus ~ label,
.form-group input:valid ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:valid ~ label{
  top:-12px;
  font-size:12px;
  color:#00c2ff;
}

.form-group input:focus,
.form-group textarea:focus{
  border-bottom:1px solid #00c2ff;
}

.btn-submit{
  width:100%;
  padding:16px;

  border:none;
  border-radius:50px;

  background:#00c2ff;

  color:#fff;

  font-size:16px;
  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;
}

.btn-submit:hover{
  background:#00a8db;
  transform:translateY(-2px);
}

/* =========================================
   LOCATION
========================================= */

.location-container{
  display:grid;
  grid-template-columns:1fr 1.2fr;

  gap:40px;

  align-items:center;

  max-width:1200px;
  margin:50px auto 0;
}

.location-info h3{
  color:#00c2ff;
  margin-bottom:18px;
}

.location-map iframe{
  width:100%;
  height:360px;

  border:none;
  border-radius:22px;
}

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

.whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;

  width:58px;
  height:58px;

  border-radius:50%;

  background:#25D366;

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

  font-size:28px;

  z-index:999;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.35);
}

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

.footer{
  background:#06131d;
  padding:70px 20px 25px;
}

.footer-container{
  max-width:1200px;
  margin:auto;

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

  gap:40px;
}

.footer-col h3,
.footer-col h4{
  color:#00c2ff;
  margin-bottom:18px;
}

.footer-col p,
.footer-col li,
.footer-col a{
  color:rgba(255,255,255,0.75);
  line-height:1.8;
  font-size:14px;
}

.footer-col ul{
  list-style:none;
}

.footer-col a:hover{
  color:#00c2ff;
}

.footer-bottom{
  margin-top:50px;
  padding-top:20px;

  text-align:center;

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

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

.animate{
  opacity:0;
  transform:translateY(40px);
}

.animate.show{
  opacity:1;
  transform:translateY(0);
  transition:all 1s ease;
}

.delay{
  transition-delay:0.3s;
}

.delay2{
  transition-delay:0.6s;
}

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:1s;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:992px){

  .navbar{
    width:calc(100% - 20px);
    top:12px;
    border-radius:20px;
  }

  .nav-wrapper{
    height:72px;
    padding:0 18px;
  }

  .logo img{
    height:48px;
  }

  .btn-quote{
    display:none;
  }

  /* MOBILE MENU */

  .nav-menu{
    position:fixed;

    top:92px;
    left:20px;
    right:20px;

    width:auto;

    display:flex;
    justify-content:center;

    padding:30px;

    background:rgba(10,15,25,0.96);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-radius:24px;

    border:1px solid rgba(255,255,255,0.08);

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);

    pointer-events:none;

    transition:all 0.35s ease;

    z-index:9999;
  }

  .nav-menu.active{
    opacity:1;
    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;
  }

  .nav-menu ul{
    flex-direction:column;
    gap:28px;
  }

  .nav-menu a{
    font-size:17px;
  }

  /* HERO */

  .hero{
    min-height:100vh;
    height:auto;

    padding:140px 0 240px;
  }

  .hero-content{
    margin-top:0;
  }

  .hero-content h1{
    font-size:48px;
    line-height:1.1;
  }

  .hero-content p{
    font-size:18px;
  }

  .hero-buttons{
    flex-direction:column;
    width:100%;
  }

  .hero-btn{
    width:100%;
  }

  .hero-features{
    grid-template-columns:1fr;

    width:calc(100% - 24px);

    bottom:20px;
  }

  .feature-item{
    padding:18px;
  }

  /* STATS */

  .stats{
    flex-direction:column;
    gap:35px;
  }

  /* SERVICES */

  .grid{
    grid-template-columns:1fr;
  }

  /* LOCATION */

  .location-container{
    grid-template-columns:1fr;
  }

  .location-info{
    text-align:center;
  }

}

@media(max-width:600px){

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

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

  .section h2{
    font-size:30px;
  }

  .stats h3{
    font-size:36px;
  }

}