/* ==========================================================
   FORCAEB.COM.BR
   FORÇA EXPEDICIONÁRIA BRASILEIRA
   STYLE.CSS
========================================================== */


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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#0b0b0b;

    color:#ffffff;

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

    overflow-x:hidden;

}


/* ==========================
   VARIÁVEIS
========================== */

:root{

    --black:#080808;

    --black2:#111111;

    --black3:#1a1a1a;

    --green:#556B2F;

    --green2:#697c3f;

    --gold:#c8a542;

    --gold2:#e5c468;

    --gray:#444;

    --light:#f4f4f4;

    --transition:.35s;

    --shadow:0 20px 45px rgba(0,0,0,.55);

}


/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

}

::-webkit-scrollbar-thumb:hover{

    background:#f2d279;

}


/* ==========================
   LINKS
========================== */

a{

    text-decoration:none;

    color:white;

    transition:.3s;

}

a:hover{

    color:var(--gold);

}


/* ==========================
   IMAGENS
========================== */

img{

    max-width:100%;

    display:block;

}


/* ==========================
   LISTAS
========================== */

ul{

    list-style:none;

}


/* ==========================
   BOTÕES
========================== */

.btn{

    display:inline-block;

    padding:16px 38px;

    border:2px solid var(--gold);

    color:white;

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

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;

    background:transparent;

    cursor:pointer;

}

.btn:hover{

    background:var(--gold);

    color:#000;

    transform:translateY(-3px);

}


/* ==========================
   LOADER
========================== */

#loader{

    position:fixed;

    inset:0;

    background:#000;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

}

.loader-logo{

    text-align:center;

}

.loader-logo img{

    width:180px;

    margin:auto;

    margin-bottom:25px;

}

.loader-logo h1{

    font-family:'Cinzel',serif;

    font-size:38px;

    letter-spacing:3px;

    color:white;

}

.loader-logo p{

    margin-top:20px;

    color:#bbb;

    letter-spacing:4px;

}

#enterButton{

    margin-top:50px;

    padding:18px 45px;

    background:transparent;

    color:white;

    border:2px solid var(--gold);

    font-size:18px;

    cursor:pointer;

    transition:.35s;

}

#enterButton:hover{

    background:var(--gold);

    color:black;

}


/* ==========================
   VÍDEO
========================== */

#bgVideo{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-3;

}

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.60);

    backdrop-filter:blur(2px);

    z-index:-2;

}


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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    transition:.4s;

    padding:20px 60px;

}

header.scrolled{

    background:rgba(0,0,0,.92);

    backdrop-filter:blur(12px);

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

}


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

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    width:70px;

}

nav ul{

    display:flex;

    gap:35px;

}

nav li{

    position:relative;

}

nav li a{

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

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:15px;

}

nav li::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

}

nav li:hover::after{

    width:100%;

}


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

.hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:0 20px;

}

.hero-content{

    max-width:900px;

}

.hero h2{

    font-family:'Cinzel',serif;

    font-size:68px;

    line-height:1.2;

    text-shadow:0 5px 25px rgba(0,0,0,.7);

}

.hero h3{

    margin-top:30px;

    font-size:26px;

    color:#ddd;

    font-weight:300;

    letter-spacing:3px;

}

.hero .btn{

    margin-top:50px;

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

.stats{

    width:90%;

    max-width:1300px;

    margin:-80px auto 100px;

    display:grid;

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

    gap:25px;

    position:relative;

    z-index:10;

}


.stats .box{

    background:rgba(15,15,15,.85);

    border:1px solid rgba(200,165,66,.35);

    padding:45px 20px;

    text-align:center;

    backdrop-filter:blur(10px);

    transition:.35s;

    box-shadow:var(--shadow);

}


.stats .box:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}


.stats h2{

    font-family:'Cinzel',serif;

    font-size:55px;

    color:var(--gold);

}


.stats p{

    margin-top:15px;

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

    text-transform:uppercase;

    letter-spacing:3px;

    color:#ccc;

}



/* ==========================================================
   SEÇÕES GERAIS
========================================================== */


section{

    position:relative;

    padding:100px 8%;

}


section h2{

    font-family:'Cinzel',serif;

    text-align:center;

    font-size:45px;

    margin-bottom:60px;

    color:white;

    position:relative;

}


section h2::after{

    content:"";

    display:block;

    width:90px;

    height:3px;

    background:var(--gold);

    margin:20px auto;

}



/* ==========================================================
   SOBRE O ESQUADRÃO
========================================================== */


#sobre{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    background:

    linear-gradient(

    rgba(0,0,0,.85),

    rgba(0,0,0,.85)

    );

}



#sobre .left{

    position:relative;

}


#sobre .left img{

    width:100%;

    border:2px solid rgba(200,165,66,.4);

    box-shadow:var(--shadow);

}


#sobre .left::before{

    content:"";

    position:absolute;

    inset:-15px;

    border:1px solid var(--gold);

    z-index:-1;

}


#sobre .right{

    color:#ddd;

}


#sobre .right h2{

    text-align:left;

    margin-bottom:35px;

}


#sobre .right h2::after{

    margin-left:0;

}


#sobre p{

    font-size:18px;

    line-height:1.9;

    color:#cfcfcf;

}



/* ==========================================================
   CAMPANHAS
========================================================== */


#campanhas{

    background:#111;

}


.cards{

    display:grid;

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

    gap:35px;

}



.card{

    position:relative;

    overflow:hidden;

    background:#000;

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

    transition:.5s;

    box-shadow:var(--shadow);

}



.card img{

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.6s;

}



.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.9)

    );

    z-index:1;

}



.card h3{

    position:absolute;

    bottom:25px;

    left:25px;

    z-index:2;

    font-family:'Cinzel',serif;

    font-size:28px;

    color:white;

}



.card:hover{

    transform:translateY(-15px);

    border-color:var(--gold);

}



.card:hover img{

    transform:scale(1.15);

}



/* ==========================================================
   MEMBROS
========================================================== */


#membros{

    background:

    radial-gradient(

    circle,

    rgba(85,107,47,.25),

    transparent 60%

    );

}


.members{

    display:grid;

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

    gap:30px;

}



.member{

    background:rgba(20,20,20,.9);

    padding:30px;

    text-align:center;

    border:1px solid rgba(200,165,66,.25);

    transition:.4s;

}



.member:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}



.member img{

    width:150px;

    height:150px;

    object-fit:cover;

    border-radius:50%;

    margin:0 auto 25px;

    border:3px solid var(--gold);

}



.member h3{

    font-family:'Cinzel',serif;

    font-size:25px;

}



.member p{

    color:var(--gold);

    margin-top:10px;

    text-transform:uppercase;

    letter-spacing:2px;

}



/* ==========================================================
   GALERIA
========================================================== */


#galeria{

    background:#080808;

}



.gallery{

    display:grid;

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

    gap:20px;

}



.gallery img{

    height:230px;

    width:100%;

    object-fit:cover;

    cursor:pointer;

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

    transition:.4s;

}



.gallery img:hover{

    transform:scale(1.05);

    border-color:var(--gold);

    box-shadow:0 0 30px rgba(200,165,66,.35);

}
/* ==========================================================
   DOWNLOADS
========================================================== */

#downloads{

    background:#111;

}


.download-grid{

    display:grid;

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

    gap:30px;

}



.download-card{

    background:

    linear-gradient(

    145deg,

    #191919,

    #080808

    );

    border:1px solid rgba(200,165,66,.25);

    padding:40px 25px;

    text-align:center;

    transition:.4s;

}



.download-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:

    0 15px 40px rgba(0,0,0,.8);

}



.download-card i{

    font-size:45px;

    color:var(--gold);

    margin-bottom:25px;

}



.download-card h3{

    font-family:'Cinzel',serif;

    font-size:25px;

    margin-bottom:20px;

}



.download-card p{

    color:#bbb;

    line-height:1.7;

    margin-bottom:25px;

}



/* ==========================================================
   RECRUTAMENTO
========================================================== */


#recrutamento{

    background:

    linear-gradient(

    rgba(0,0,0,.9),

    rgba(0,0,0,.95)

    ),

    url('../img/backgrounds/recruit.jpg');

    background-size:cover;

    background-position:center;

}



.recruit-box{

    max-width:900px;

    margin:auto;

    background:rgba(10,10,10,.85);

    padding:50px;

    border:1px solid rgba(200,165,66,.35);

    backdrop-filter:blur(8px);

}



.form-group{

    margin-bottom:25px;

}



.form-group label{

    display:block;

    margin-bottom:10px;

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

    text-transform:uppercase;

    letter-spacing:2px;

    color:#ddd;

}



.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    padding:16px;

    background:#111;

    border:1px solid #444;

    color:white;

    font-size:16px;

    outline:none;

    transition:.3s;

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:var(--gold);

}



.form-group textarea{

    height:160px;

    resize:none;

}



.submit-btn{

    width:100%;

    padding:18px;

    background:transparent;

    border:2px solid var(--gold);

    color:white;

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

    letter-spacing:3px;

    font-size:18px;

    cursor:pointer;

    transition:.4s;

}



.submit-btn:hover{

    background:var(--gold);

    color:black;

}



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


#contato{

    background:#080808;

}



.contact-grid{

    display:grid;

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

    gap:25px;

}



.contact-box{

    background:#151515;

    padding:35px 20px;

    text-align:center;

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

    transition:.35s;

}



.contact-box:hover{

    border-color:var(--gold);

    transform:translateY(-8px);

}



.contact-box h3{

    font-family:'Cinzel',serif;

    margin-bottom:15px;

}



.contact-box p{

    color:#bbb;

}



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


footer{

    background:#050505;

    padding:60px 20px;

    text-align:center;

    border-top:1px solid rgba(200,165,66,.25);

}



footer img{

    width:90px;

    margin:auto;

    margin-bottom:25px;

}



footer p{

    color:#888;

    letter-spacing:2px;

}



/* ==========================================================
   EFEITOS DE TÍTULOS MILITARES
========================================================== */


.military-title{

    font-family:'Cinzel',serif;

    text-transform:uppercase;

    letter-spacing:5px;

}



.gold{

    color:var(--gold);

}



.separator{

    width:120px;

    height:3px;

    background:var(--gold);

    margin:30px auto;

}



/* ==========================================================
   EFEITO DE FUMAÇA
========================================================== */


.smoke{

    position:absolute;

    width:300px;

    height:300px;

    background:

    radial-gradient(

    circle,

    rgba(255,255,255,.15),

    transparent 70%

    );

    filter:blur(40px);

    animation:smokeMove 12s infinite alternate;

}



@keyframes smokeMove{


    from{

        transform:

        translate(-50px,20px)

        scale(1);

    }


    to{

        transform:

        translate(80px,-40px)

        scale(1.4);

    }


}



/* ==========================================================
   BRILHO DOURADO
========================================================== */


.gold-glow{

    animation:goldPulse 3s infinite;

}



@keyframes goldPulse{


    0%{

        box-shadow:

        0 0 0 rgba(200,165,66,0);

    }


    50%{

        box-shadow:

        0 0 35px rgba(200,165,66,.5);

    }


    100%{

        box-shadow:

        0 0 0 rgba(200,165,66,0);

    }


}



/* ==========================================================
   REVELAÇÃO AO SCROLL
========================================================== */


.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}



.reveal.active{

    opacity:1;

    transform:translateY(0);

}
/* ==========================================================
   ANIMAÇÕES GERAIS
========================================================== */


.fade-in{

    animation:fadeIn 1.5s ease forwards;

}



@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



.slide-up{

    animation:slideUp 1s ease forwards;

}



@keyframes slideUp{


    from{

        opacity:0;

        transform:translateY(60px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}



.zoom-in{

    animation:zoomIn 1s ease forwards;

}



@keyframes zoomIn{


    from{

        opacity:0;

        transform:scale(.8);

    }


    to{

        opacity:1;

        transform:scale(1);

    }


}



/* ==========================================================
   EFEITO DE CHUVA / POEIRA
========================================================== */


.particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}



.particles span{

    position:absolute;

    width:3px;

    height:3px;

    background:#fff;

    opacity:.25;

    border-radius:50%;

    animation:fall 8s linear infinite;

}



@keyframes fall{


    from{

        transform:translateY(-100px);

    }


    to{

        transform:translateY(110vh);

    }


}



/* ==========================================================
   BOTÃO MILITAR
========================================================== */


.btn-military{

    position:relative;

    overflow:hidden;

}



.btn-military::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.3),

    transparent

    );

    transition:.6s;

}



.btn-military:hover::before{

    left:100%;

}



/* ==========================================================
   MAPA / PAPEL ANTIGO
========================================================== */


.old-paper{

    background:

    linear-gradient(

    rgba(255,255,255,.04),

    rgba(0,0,0,.3)

    ),

    url('../img/backgrounds/paper.jpg');

    background-size:cover;

    border:1px solid rgba(200,165,66,.4);

}



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


@media(max-width:1100px){


header{

    padding:20px 30px;

}



nav ul{

    gap:18px;

}



.hero h2{

    font-size:50px;

}



.stats{

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

}



.cards{

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

}



.members{

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

}



.gallery{

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

}



.contact-grid{

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

}


#sobre{

    grid-template-columns:1fr;

}


}



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


.menu-toggle{

    display:none;

    cursor:pointer;

}



.menu-toggle span{

    display:block;

    width:35px;

    height:3px;

    background:white;

    margin:7px;

    transition:.3s;

}



/* ==========================================================
   CELULARES
========================================================== */


@media(max-width:768px){



header{

    padding:15px 20px;

}



.logo img{

    width:55px;

}



.menu-toggle{

    display:block;

}



nav ul{

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:rgba(0,0,0,.95);

    flex-direction:column;

    align-items:center;

    padding:30px 0;

    transform:translateY(-150%);

    transition:.4s;

}



nav ul.active{

    transform:translateY(0);

}



.hero h2{

    font-size:36px;

}



.hero h3{

    font-size:18px;

}



.stats{

    width:95%;

    margin:-40px auto 50px;

    grid-template-columns:1fr;

}



section{

    padding:70px 5%;

}



section h2{

    font-size:34px;

}



.cards,

.members,

.gallery,

.download-grid,

.contact-grid{

    grid-template-columns:1fr;

}



.recruit-box{

    padding:25px;

}



}



/* ==========================================================
   TELAS GRANDES
========================================================== */


@media(min-width:1800px){


.hero h2{

    font-size:90px;

}


section{

    padding-left:12%;

    padding-right:12%;

}


}

/* ==========================================================
   LIGHTBOX GALERIA
========================================================== */


.lightbox{


position:fixed;


inset:0;


background:

rgba(0,0,0,.95);


z-index:99999;


display:flex;


align-items:center;


justify-content:center;


opacity:0;


visibility:hidden;


transition:.4s;



}



.lightbox.active{


opacity:1;


visibility:visible;


}



.lightbox-content{


position:relative;


max-width:90%;


max-height:90%;


display:flex;


align-items:center;


}



.lightbox-image{


max-width:90vw;


max-height:85vh;


border:

2px solid var(--gold);


box-shadow:

0 0 50px rgba(0,0,0,.8);


animation:

galleryZoom .4s ease;


}



@keyframes galleryZoom{


from{


transform:scale(.7);


opacity:0;


}



to{


transform:scale(1);


opacity:1;


}



}



.close-lightbox,

.prev-lightbox,

.next-lightbox{


position:absolute;


background:

rgba(0,0,0,.7);


color:white;


border:

1px solid var(--gold);


font-size:35px;


width:55px;


height:55px;


cursor:pointer;


transition:.3s;


}



.close-lightbox{


top:-70px;


right:0;


}



.prev-lightbox{


left:-80px;


}



.next-lightbox{


right:-80px;


}



.close-lightbox:hover,

.prev-lightbox:hover,

.next-lightbox:hover{


background:var(--gold);


color:black;


}



@media(max-width:768px){


.prev-lightbox{


left:10px;


}



.next-lightbox{


right:10px;


}



.close-lightbox{


top:10px;


right:10px;


}


}