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

.contact{
    position:relative;
}

.contact-wrapper{

    margin-top:70px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;

    overflow:hidden;

    background:rgba(18,25,45,.92);

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

    border-radius:24px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

/*==========================
LADO ESQUERDO
==========================*/

.contact-info{

    padding:55px;
}

.contact-info h2{

    font-size:42px;

    line-height:1.15;

    margin:18px 0;

    color:#fff;
}

.contact-info h2 span{

    color:var(--primary);
}

.contact-info p{

    font-size:16px;

    line-height:1.8;

    color:#AEB9D3;

    margin-bottom:35px;
}

.contact-benefits{

    display:flex;

    flex-direction:column;

    gap:18px;

    list-style:none;
}

.contact-benefits li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#D7E0F2;

    font-size:15px;
}

.contact-benefits i{

    color:var(--primary);

    font-size:18px;
}

/*==========================
LADO DIREITO
==========================*/

.contact-form-box{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:55px;

    background:rgba(255,255,255,.02);
}

.contact-form{

    width:100%;
}

.input-group{

    margin-bottom:22px;
}

.input-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    color:#C5D0E5;
}

.input-group label small{

    color:#8895B2;
}

.input-group input{

    width:100%;

    height:56px;

    padding:0 18px;

    border-radius:14px;

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

    background:#182036;

    color:#fff;

    font-size:15px;

    transition:.3s;
}

.input-group input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(58,174,255,.12);
}

.contact-btn{

    width:100%;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:15px;
}

.contact-note{

    margin-top:16px;

    text-align:center;

    color:#8F9CB7;

    font-size:13px;

    line-height:1.6;
}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.contact-info,
.contact-form-box{

    padding:40px;
}

.contact-info h2{

    font-size:34px;
}

}

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

@media(max-width:768px){

.contact-wrapper{

    grid-template-columns:1fr;

    max-width:560px;

    margin:60px auto 0;
}

.contact-info{

    padding:35px 28px 20px;

    text-align:center;
}

.contact-info h2{

    font-size:30px;

    margin:15px 0;
}

.contact-info p{

    font-size:15px;

    margin-bottom:25px;
}

.contact-benefits{

    gap:14px;

    align-items:flex-start;

    display:inline-flex;

    text-align:left;
}

.contact-form-box{

    padding:20px 28px 35px;

    background:none;
}

}

/*==================================================
CELULAR PEQUENO
==================================================*/

@media(max-width:480px){

.contact-info{

    padding:28px 22px 18px;
}

.contact-form-box{

    padding:18px 22px 28px;
}

.contact-info h2{

    font-size:26px;
}

.contact-info p{

    font-size:14px;
}

.contact-benefits li{

    font-size:14px;
}

.input-group input{

    height:52px;

    font-size:14px;
}

.contact-btn{

    height:52px;

    font-size:14px;
}

}