.contact-hero{

padding:100px 8%;

background:
linear-gradient(
135deg,
#0d47a1,
#2a6fe3
);

color:white;

text-align:center;

}

.contact-hero h1{

font-size:55px;

margin-bottom:20px;

}

.contact-hero p{

font-size:18px;

opacity:.9;

}



.contact-container{

padding:80px 8%;

display:grid;

grid-template-columns:
1fr 1fr;

gap:50px;

}



.contact-info{

display:grid;

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

gap:20px;

}



.info-card{

background:white;

padding:30px;

text-align:center;

border-radius:20px;

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

}


.icon{

font-size:40px;

margin-bottom:15px;

}



.contact-form-container{

background:white;

padding:40px;

border-radius:25px;

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

}


.contact-form-container h2{

margin-bottom:25px;

}


form{

display:flex;

flex-direction:column;

gap:15px;

}



form input,
form textarea{

padding:15px;

border:1px solid #ddd;

border-radius:12px;

outline:none;

}


form button{

padding:16px;

background:#0d47a1;

color:white;

border:none;

border-radius:12px;

cursor:pointer;

font-size:16px;

font-weight:bold;

}



.business-hours{

padding:90px 8%;

background:#f8fafc;

text-align:center;

}


.hours-box{

background:white;

padding:40px;

border-radius:25px;

max-width:500px;

margin:auto;

box-shadow:
0 6px 25px rgba(0,0,0,.08);

}



.map-section{

padding:90px 8%;

text-align:center;

}


.map-placeholder{

height:350px;

background:#e8ecf4;

border-radius:25px;

display:flex;

justify-content:center;

align-items:center;

font-size:25px;

font-weight:bold;

color:#777;

}



.social-section{

padding:90px 8%;

text-align:center;

}



.social-links{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:30px;

}


.social-links a{

background:#0d47a1;

color:white;

padding:15px 25px;

text-decoration:none;

border-radius:12px;

}

@media(max-width:960px){

.contact-hero{

padding:76px 6%;

}

.contact-hero h1{

font-size:42px;

}

.contact-container{

grid-template-columns:1fr;

padding:64px 6%;

}

.business-hours,
.map-section,
.social-section{

padding:70px 6%;

}

}

@media(max-width:620px){

.contact-hero{

padding:62px 6%;

}

.contact-hero h1{

font-size:34px;

}

.contact-hero p{

font-size:16px;

}

.contact-info{

grid-template-columns:1fr;

}

.contact-form-container,
.hours-box{

padding:26px;

border-radius:18px;

}

.map-placeholder{

height:260px;

font-size:20px;

}

.social-links{

align-items:stretch;

}

.social-links a{

width:100%;

}

}