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


.contact-hero{

padding:10rem 0 6rem;

background:
linear-gradient(
rgba(0,34,68,.85),
rgba(0,34,68,.85)
),
url("../assets/images/hero.jpg");

background-size:cover;

background-position:center;

text-align:center;

color:white;

}



.contact-hero h1{

color:white;

font-size:clamp(2.5rem,5vw,4rem);

max-width:900px;

margin:1rem auto;

line-height:1.2;

}



.contact-hero p{

max-width:650px;

margin:auto;

font-size:1.15rem;

color:rgba(255,255,255,.85);

}





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


.contact-section{

padding:6rem 0;

background:white;

}



.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:4rem;

align-items:start;

}





/* =====================================
CONTACT INFORMATION
===================================== */


.contact-info h2,

.contact-form h2{

font-size:2.3rem;

margin-bottom:1rem;

}



.contact-info > p{

line-height:1.8;

margin-bottom:2rem;

}





.contact-item{

display:flex;

gap:1.2rem;

align-items:flex-start;

margin-bottom:2rem;

}



.contact-item i{

width:50px;

height:50px;

border-radius:50%;

background:rgba(0,34,68,.1);

color:var(--clr-primary);

display:flex;

align-items:center;

justify-content:center;

font-size:1.2rem;

flex-shrink:0;

}



.contact-item h3{

font-size:1.1rem;

margin-bottom:.5rem;

}



.contact-item p{

line-height:1.7;

}





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


.contact-form{

background:#f7f9fc;

padding:3rem;

border-radius:25px;

box-shadow:
0 10px 35px rgba(0,0,0,.08);

}



.form-group{

margin-bottom:1.2rem;

}



.form-group input,

.form-group textarea{

width:100%;

padding:1rem 1.2rem;

border:1px solid #ddd;

border-radius:12px;

font-size:1rem;

font-family:inherit;

outline:none;

transition:.3s ease;

background:white;

}



.form-group input:focus,

.form-group textarea:focus{

border-color:var(--clr-primary);

box-shadow:
0 0 0 3px rgba(0,34,68,.1);

}



.form-group textarea{

resize:none;

}





/* =====================================
SERVICE TIMES
===================================== */


.service-times{

padding:6rem 0;

background:#f7f9fc;

}



.times-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:2rem;

margin-top:3rem;

}



.time-card{

background:white;

padding:2.5rem 1.5rem;

text-align:center;

border-radius:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.35s ease;

}



.time-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 45px rgba(0,0,0,.14);

}



.time-card i{

font-size:2rem;

color:var(--clr-secondary);

margin-bottom:1rem;

}



.time-card h3{

margin-bottom:.8rem;

font-size:1.3rem;

}



.time-card p{

font-weight:500;

}





/* =====================================
MAP
===================================== */


.map-section{

height:450px;

overflow:hidden;

}



.map-section iframe{

width:100%;

height:100%;

border:0;

}





/* =====================================
RESPONSIVE
===================================== */


@media(max-width:1000px){


.contact-grid{

grid-template-columns:1fr;

}



.times-grid{

grid-template-columns:1fr;

}


}




@media(max-width:600px){


.contact-hero{

padding:8rem 0 4rem;

}



.contact-form{

padding:2rem 1.5rem;

}



.contact-info h2,

.contact-form h2{

font-size:1.9rem;

}



.map-section{

height:350px;

}


}