/*
========================================

FORÇA EXPEDICIONÁRIA BRASILEIRA
HOME PAGE STYLE

========================================
*/



/* HERO PRINCIPAL */


.home-hero{


height:700px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

overflow:hidden;



background:

linear-gradient(

rgba(0,0,0,.45),

rgba(0,0,0,.85)

),

url("../assets/images/home-hero.jpg");



background-size:cover;

background-position:center;


}





.home-hero::before{


content:"";

position:absolute;

inset:0;


background:

radial-gradient(

circle,

transparent 20%,

rgba(0,0,0,.8)

);


}





.hero-content{


position:relative;

z-index:2;

max-width:1000px;

padding:20px;


}





.hero-content h1{


font-size:70px;

letter-spacing:5px;

text-transform:uppercase;

color:#d4b35a;

text-shadow:

3px 3px 10px #000;


animation:

fadeDown 1.5s;


}





.hero-content h2{


font-size:30px;

color:white;

margin-top:20px;

font-weight:normal;


animation:

fadeUp 2s;


}





.hero-content p{


font-size:20px;

margin:30px auto;

max-width:750px;


}





/* BOTÃO ALISTAMENTO */


.btn-recrutar{


display:inline-block;

padding:18px 45px;

background:#556b2f;

border:

2px solid #d4b35a;

color:white;

font-size:20px;

font-weight:bold;

letter-spacing:2px;

border-radius:5px;


transition:.4s;


}




.btn-recrutar:hover{


background:#d4b35a;

color:#111;

transform:scale(1.05);


}







/* EFEITO DE ENTRADA */


@keyframes fadeDown{


from{


opacity:0;

transform:translateY(-50px);


}


to{


opacity:1;

transform:translateY(0);


}


}





@keyframes fadeUp{


from{


opacity:0;

transform:translateY(50px);


}


to{


opacity:1;

transform:translateY(0);


}


}

/* ========================================
   BLOCO HISTÓRICO HOME
======================================== */


.home-history{


padding:80px 0;

background:

linear-gradient(

90deg,

#111510,

#1b2119,

#111510

);


}





.home-history h2{


text-align:center;

font-size:42px;

color:#d4b35a;

margin-bottom:30px;


}





.home-history p{


max-width:900px;

margin:auto;

text-align:center;

font-size:19px;

color:#ddd;


}







/* ========================================
   CARDS DE VALORES FEB
======================================== */


.values-grid{


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:50px;


}





.value-card{


background:

linear-gradient(

145deg,

#222b22,

#151a15

);


padding:30px;

text-align:center;

border:

1px solid #46523d;

border-radius:8px;


transition:.4s;


}





.value-card:hover{


transform:translateY(-10px);

border-color:#d4b35a;


}





.value-card h3{


color:#d4b35a;

font-size:25px;

margin-bottom:15px;


}





.value-card p{


font-size:16px;


}







/* ========================================
   ESTATÍSTICAS EM DESTAQUE
======================================== */


.home-stats{


padding:70px 0;


background:

url("../assets/images/paper-texture.jpg");


background-size:cover;


}





.home-stats-grid{


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(200px,1fr));

gap:25px;


}





.home-stat{


background:

rgba(20,25,18,.9);


padding:35px;

text-align:center;

border:

2px solid #8c7a3d;


}





.home-stat strong{


display:block;

font-size:55px;

color:#d4b35a;


}





.home-stat span{


font-size:18px;

color:#fff;


}







/* ========================================
   OPERAÇÕES DESTAQUE
======================================== */


.featured-operations{


padding:80px 0;


}





.featured-operations h2{


text-align:center;

font-size:40px;

color:#d4b35a;

margin-bottom:40px;


}





.operation-card{


position:relative;

overflow:hidden;

border-radius:8px;


}





.operation-card img{


width:100%;

height:300px;

object-fit:cover;


}





.operation-card .overlay{


position:absolute;

bottom:0;

left:0;

right:0;


padding:25px;


background:

linear-gradient(

transparent,

rgba(0,0,0,.9)

);


}





.operation-card h3{


color:#d4b35a;

font-size:28px;


}





.operation-card p{


color:white;


}
/* ========================================
   BANNER DE RECRUTAMENTO
======================================== */


.recruit-banner{


margin:80px auto;

padding:70px 30px;

max-width:1200px;

text-align:center;


background:


linear-gradient(

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

rgba(0,0,0,.9)

),

url("../assets/images/recruit-bg.jpg");



background-size:cover;

background-position:center;


border:

2px solid #8c7a3d;


}




.recruit-banner h2{


font-size:45px;

color:#d4b35a;

text-transform:uppercase;


}





.recruit-banner p{


font-size:20px;

max-width:800px;

margin:25px auto;


}






/* ========================================
   BRASÃO FEB
======================================== */


.feb-emblem{


width:220px;

height:220px;

margin:0 auto 30px;


background:

url("../assets/images/feb-logo.png");


background-size:contain;

background-repeat:no-repeat;

background-position:center;



filter:

drop-shadow(

0 0 15px #000

);



animation:

floatLogo 5s infinite;


}





@keyframes floatLogo{


0%,100%{


transform:translateY(0);


}



50%{


transform:translateY(-12px);


}


}







/* ========================================
   EFEITO HISTÓRICO / FUMAÇA
======================================== */


.smoke-effect{


position:absolute;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;


}



.smoke-effect::before{


content:"";


position:absolute;

width:400px;

height:400px;


background:

radial-gradient(

circle,

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

transparent

);



filter:blur(40px);



animation:

smokeMove 12s infinite alternate;


}




@keyframes smokeMove{


from{


transform:

translate(-100px,100px);


}



to{


transform:

translate(300px,-50px);


}


}







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


.home-footer{


background:#080a08;

padding:50px 20px;

text-align:center;


border-top:

2px solid #d4b35a;


}





.home-footer h3{


color:#d4b35a;

font-size:28px;


}





.home-footer p{


color:#aaa;

margin-top:15px;


}







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


@media(max-width:768px){



.home-hero{


height:550px;


}



.hero-content h1{


font-size:38px;

letter-spacing:2px;


}



.hero-content h2{


font-size:22px;


}



.recruit-banner h2{


font-size:32px;


}



.home-history h2,


.featured-operations h2{


font-size:32px;


}



.feb-emblem{


width:150px;

height:150px;


}


}