/* ===================================
   CONTACT PAGE
=================================== */

.contact-hero{
padding:100px 0;
text-align:center;
background:#050505;
}

.contact-hero h1{
font-size:60px;
font-weight:800;
color:#ffffff;
margin-bottom:15px;
}

.contact-hero p{
max-width:700px;
margin:auto;
color:#bbb;
line-height:1.8;
}

/* CONTACT SECTION */

.contact-section{
padding:80px 0;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:start;
}

.contact-info h2,
.contact-form-box h2{
font-size:34px;
margin-bottom:30px;
}

.info-box{
display:flex;
gap:20px;
margin-bottom:25px;
padding:20px;
background:#111;
border:1px solid rgba(255,255,255,.08);
}

.info-box i{
font-size:24px;
color:#ffffff;
margin-top:4px;
}

.info-box h4{
font-size:16px;
margin-bottom:6px;
}

.info-box p{
color:#bbb;
line-height:1.7;
}

.contact-info .whatsapp-btn{
margin-top:15px;
}

/* FORM */

.contact-form-box{
background:#111;
padding:35px;
border:1px solid rgba(255,255,255,.08);
}

.contact-form-box form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form-box input,
.contact-form-box textarea{
width:100%;
padding:15px;
background:#000;
border:1px solid #333;
color:#fff;
font-size:14px;
outline:none;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus{
border-color:#ffffff;
}

.contact-btn{
padding:15px;
background:#ffffff;
border:none;
color:#fff;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.contact-btn:hover{
background:#e0e0e0;
}

/* CTA */

.contact-cta{
padding:90px 0;
background:#070707;
text-align:center;
}

.contact-cta h2{
font-size:42px;
margin-bottom:15px;
}

.contact-cta p{
max-width:700px;
margin:auto;
color:#bbb;
line-height:1.8;
margin-bottom:30px;
}

/* ACTIVE NAV LINK */

.nav-links a.active{
color:#ffffff;
}

/* RESPONSIVE */

@media(max-width:991px){

.contact-grid{
grid-template-columns:1fr;
}

.contact-form-box{
margin-top:20px;
}

}

@media(max-width:768px){

.contact-hero{
padding:80px 0;
}

.contact-hero h1{
font-size:42px;
}

.contact-info h2,
.contact-form-box h2{
font-size:28px;
}

.contact-cta h2{
font-size:32px;
}

.contact-cta{
padding:70px 0;
}

}