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

.contact-hero{
height:350px;
background:url('../images/contact-banner.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

.contact-hero-overlay{
background:rgba(0,0,0,0.45);
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.contact-hero h1{
font-size:48px;
font-weight:600;
margin-bottom:10px;
}

.contact-hero p{
font-size:18px;
opacity:0.9;
}


/* =========================
CONTACT SECTION
========================= */

.contact-section{
padding:80px 60px;
background:#ffffff;
}

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


/* =========================
CONTACT INFO
========================= */
.contact-info{
padding:30px 45px;
}
.contact-info h2{
font-size:32px;
margin-bottom:20px;
color:#1F2A36;
}

.contact-info p{
font-size:16px;
line-height:1.7;
color:#555;
margin-bottom:30px;
}

.contact-item{
margin-bottom:25px;
}
/* ICON IMAGE */

.contact-item img{
width:38px;
height:38px;
object-fit:contain;
padding:8px;
background:#f2b705;
border-radius:50%;
}

.contact-item h4{
font-size:18px;
margin-bottom:6px;
color:#1F2A36;
}

.contact-item p{
font-size:15px;
color:#555;
}


/* =========================
CONTACT FORM
========================= */

.contact-form{
background:#f8f8f8;
padding:40px;
border-radius:8px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.contact-form h2{
font-size:28px;
margin-bottom:10px;
color:#1F2A36;
}

.contact-form p{
font-size:15px;
margin-bottom:25px;
color:#555;
}


/* FORM GROUP */

.form-group{
display:flex;
flex-direction:column;
margin-bottom:20px;
}

.form-group label{
font-size:14px;
margin-bottom:6px;
color:#444;
}

.form-group input,
.form-group textarea{
padding:12px;
border:1px solid #ddd;
border-radius:4px;
font-size:14px;
outline:none;
transition:0.3s;
}

.form-group input:focus,
.form-group textarea:focus{
border-color:#f2b705;
}


/* BUTTON */

.contact-btn{
background:#f2b705;
color:white;
border:none;
padding:14px 28px;
font-size:15px;
cursor:pointer;
border-radius:4px;
transition:0.3s;
}

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


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

@media (max-width:992px){

.contact-wrapper{
grid-template-columns:1fr;
gap:40px;
}

.contact-section{
padding:70px 40px;
}

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

}


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

@media (max-width:768px){

.contact-section{
padding:60px 20px;
}

.contact-hero{
height:280px;
}

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

.contact-hero p{
font-size:16px;
}

.contact-form{
padding:30px 20px;
}

}


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

@media (max-width:480px){

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

.contact-form h2{
font-size:24px;
}

.contact-info h2{
font-size:26px;
}

}