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

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

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

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

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

header{
    position:fixed;
    width:100%;
    top:0;
    z-index:999;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(12px);
}

.navbar{

    width:90%;
    margin:auto;

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

    height:85px;

}

.logo img{

    height:280px;

}

.navbar ul{

display:flex;
gap:35px;
list-style:none;

}

.navbar ul a{

color:#fff;
font-weight:500;
transition:.3s;

}

.navbar ul a:hover{

color:#00ff66;

}

.btn-menu{

background:#00ff66;
color:#000;
padding:14px 28px;
border-radius:40px;
font-weight:700;
transition:.3s;

}

.btn-menu:hover{

transform:translateY(-3px);
box-shadow:0 0 25px #00ff66;

}

/* HERO */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Vídeo */

.hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
}

/* Camada escura */

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.65);
    z-index:-1;
}

/* Conteúdo */

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
    max-width:900px;
    padding:20px;
}

.hero h1{
    font-size:64px;
    font-weight:800;
}

.hero h1 span{
    color:#00ff88;
}

.hero p{
    font-size:22px;
    margin:25px 0 35px;
}
.hero-buttons{

margin-top:45px;

display:flex;
justify-content:center;
gap:20px;

flex-wrap:wrap;

}

.btn{

background:#00ff66;
padding:18px 38px;
border-radius:50px;
color:#000;
font-weight:700;
transition:.4s;

}

.btn:hover{

transform:scale(1.05);

box-shadow:0 0 30px #00ff66;

}

.btn-outline{

border:2px solid #00ff66;

padding:18px 38px;

border-radius:50px;

color:#00ff66;

transition:.4s;

}

.btn-outline:hover{

background:#00ff66;

color:#000;

}

/* ===========================
 ESTATÍSTICAS
=========================== */

.stats{

padding:80px 8%;

display:grid;

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

gap:25px;

}

.box{

background:#111;

padding:35px;

text-align:center;

border-radius:15px;

border:1px solid rgba(0,255,102,.25);

transition:.4s;

}

.box:hover{

transform:translateY(-10px);

box-shadow:0 0 25px rgba(0,255,102,.35);

}

.box h2{

font-size:48px;
color:#00ff66;

}

/* ===========================
SERVIÇOS
=========================== */

.services{

padding:110px 8%;

text-align:center;

}

.services h2{

font-size:48px;
margin-bottom:10px;

}

.subtitle{

color:#bfbfbf;

margin-bottom:60px;

}

.cards{

display:grid;

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

gap:30px;

}

.card{

background:#121212;

padding:40px;

border-radius:18px;

transition:.4s;

border:1px solid #1f1f1f;

}

.card:hover{

transform:translateY(-12px);

border-color:#00ff66;

box-shadow:0 0 30px rgba(0,255,102,.30);

}

.card i{

font-size:55px;

color:#00ff66;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

}

/* ===========================
PORTFÓLIO
=========================== */

.portfolio{

padding:110px 8%;

text-align:center;

}

.galeria{

margin-top:50px;

display:grid;

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

gap:20px;

}

.galeria img{

height:260px;

width:100%;

object-fit:cover;

border-radius:15px;

transition:.4s;

cursor:pointer;

}

.galeria img:hover{

transform:scale(1.05);

box-shadow:0 0 25px rgba(0,255,102,.40);

}

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

.cta{

padding:120px 10%;

text-align:center;

background:linear-gradient(135deg,#00ff66,#00b84d);

color:#000;

}

.cta h2{

font-size:48px;

margin-bottom:20px;

}

.cta p{

font-size:22px;

margin-bottom:40px;

}

/* ===========================
CONTATO
=========================== */

.contact{

padding:120px 8%;

text-align:center;

}

.contact form{

max-width:700px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.contact input,
.contact textarea{

background:#111;

border:1px solid #333;

padding:18px;

border-radius:10px;

color:#fff;

font-size:16px;

}

.contact textarea{

height:170px;

resize:none;

}

.contact button{

background:#00ff66;

color:#000;

border:none;

padding:18px;

font-weight:700;

font-size:18px;

border-radius:10px;

cursor:pointer;

transition:.4s;

}

.contact button:hover{

box-shadow:0 0 20px #00ff66;

}

.social{

margin-top:50px;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.social a{

background:#111;

padding:15px 30px;

border-radius:40px;

color:#fff;

transition:.4s;

}

.social a:hover{

background:#00ff66;

color:#000;

}

/* ===========================
RODAPÉ
=========================== */

footer{

padding:40px;

text-align:center;

background:#000;

border-top:1px solid #222;

}

.footer-logo{

height:180px;

margin-bottom:20px;

}

/* ===========================
BOTÃO WHATSAPP
=========================== */

.whatsapp{

position:fixed;

bottom:30px;

right:30px;

width:65px;

height:65px;

background:#00ff66;

color:#000;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

box-shadow:0 0 20px #00ff66;

z-index:999;

transition:.4s;

}

.whatsapp:hover{

transform:scale(1.15);

}

/* ===========================
RESPONSIVO
=========================== */

@media(max-width:900px){

.navbar ul{

display:none;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.cta h2{

font-size:34px;

}

.services h2,
.portfolio h2,
.contact h2{

font-size:34px;

}

}

/*=============================
 GALERIA DE VÍDEOS NEON
=============================*/

/*==================================
      SEÇÃO DE VÍDEOS
==================================*/

.videos-section{

    width:100%;
    padding:60px 20px;

}

/* Cabeçalho */

.videos-header{

    text-align:center;
    margin-bottom:45px;

}

.videos-header h2{

    color:#00ff88;
    font-size:36px;
    margin-bottom:10px;

    text-shadow:
    0 0 10px #00ff88,
    0 0 20px #00ff88;

}

.videos-header p{

    color:#d0d0d0;
    font-size:18px;

}

/* Grid */

.reels-grid{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:25px;

}

/* Card */

.reel{

    width:180px;

    background:#090909;

    border:2px solid #00ff88;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 0 18px rgba(0,255,136,.35);

    transition:.35s;

}

.reel:hover{

    transform:translateY(-8px);

    box-shadow:
    0 0 15px #00ff88,
    0 0 30px #00ff88;

}

/* Área do vídeo */

.video-box{

    position:relative;

    width:100%;

    height:320px;

    background:#000;

}

.video-box video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    cursor:pointer;

}



/* Botão Play */

.play-button{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:70px;

    height:70px;

    border-radius:50%;

    background:#00ff88;

    color:#000;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    cursor:pointer;

    box-shadow:0 0 20px #00ff88;

    transition:.3s;

}

.play-button:hover{

    transform:translate(-50%,-50%) scale(1.10);

    box-shadow:

    0 0 20px #00ff88,

    0 0 40px #00ff88;

}

/* Título */

.reel h3{

    padding:14px;

    color:#00ff88;

    text-align:center;

    font-size:15px;

}

/* Responsivo */

@media(max-width:768px){

    .videos-header h2{

        font-size:28px;

    }

    .videos-header p{

        font-size:16px;

    }

    .reel{

        width:160px;

    }

    .video-box{

        height:285px;

    }

}