/* ==========================================================
   FORCAEB.COM.BR
   CONTATO.CSS
   CENTRAL DE COMUNICAÇÃO
========================================================== */


/* ==========================================================
   BANNER
========================================================== */


.contact-banner{


    background:


    linear-gradient(

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

    rgba(0,0,0,.9)

    ),


    url("../../img/backgrounds/hero.jpg");


    background-size:cover;


    background-position:center;


}



/* ==========================================================
   INFORMAÇÕES
========================================================== */


.contact-info{


    background:#080808;


    text-align:center;


}



.contact-info h2,


.contact-form h2,


.command h2{


    font-family:'Cinzel',serif;


    color:var(--gold);


    font-size:45px;


    margin-bottom:50px;


}




.contact-grid{


    max-width:1200px;


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:40px;


}



/* ==========================================================
   CARTÕES DE CONTATO
========================================================== */


.contact-card{


    padding:40px 25px;


    background:


    linear-gradient(

    145deg,

    #1c1c1c,

    #050505

    );


    border:


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


    transition:.4s;


}



.contact-card:hover{


    transform:


    translateY(-12px);


    border-color:


    var(--gold);


    box-shadow:


    0 0 40px rgba(200,165,66,.25);


}



.contact-card img{


    width:70px;


    height:70px;


    margin-bottom:20px;


}



.contact-card h3{


    font-family:'Cinzel',serif;


    color:white;


    font-size:28px;


}



.contact-card p{


    color:#ccc;


    margin:20px 0;


}



.contact-card a{


    display:inline-block;


    padding:12px 35px;


    background:


    var(--gold);


    color:#111;


    text-decoration:none;


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


    letter-spacing:3px;


}
/* ==========================================================
   FORMULÁRIO DE CONTATO
========================================================== */


.contact-form{


    background:


    linear-gradient(

    rgba(0,0,0,.8),

    rgba(0,0,0,.95)

    ),


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


    background-size:cover;


}



.contact-box{


    max-width:800px;


    margin:auto;


    padding:50px;


    background:


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


    border:


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


}



.contact-box label{


    display:block;


    color:white;


    margin-top:20px;


    margin-bottom:8px;


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


    letter-spacing:2px;


}



.contact-box input,

.contact-box textarea{


    width:100%;


    padding:15px;


    background:#111;


    color:white;


    border:


    1px solid rgba(200,165,66,.5);


}



.contact-box textarea{


    height:160px;


}



.contact-box input:focus,

.contact-box textarea:focus{


    outline:none;


    border-color:


    var(--gold);


}



.contact-box button{


    margin-top:30px;


    width:100%;


    padding:18px;


    background:


    var(--gold);


    border:none;


    cursor:pointer;


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


    font-weight:bold;


    letter-spacing:4px;


    transition:.3s;


}



.contact-box button:hover{


    background:white;


}
/* ==========================================================
   QUARTEL GENERAL
========================================================== */


.command{


    text-align:center;


    background:#080808;


}



.command > p{


    color:#ccc;


    font-size:20px;


}



.command-box{


    max-width:700px;


    margin:40px auto;


    padding:35px;


    border:


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


    background:


    rgba(255,255,255,.03);


}



.command-box p{


    color:white;


    font-size:18px;


    margin:20px;


}



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


@media(max-width:1000px){



.contact-grid{


grid-template-columns:


1fr;


}



}



@media(max-width:700px){



.contact-info h2,

.contact-form h2,

.command h2{


font-size:32px;


}



.contact-box{


padding:25px;


}



}