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

.contact-page{
padding:60px 0;
background:#f8f9fa;
}

.contact-header{
text-align:center;
margin-bottom:40px;
}

.contact-header h2{
font-size:40px;
font-weight:700;
margin-bottom:10px;
}

.contact-header p{
color:#777;
font-size:16px;
}

/*====================================
INFO
====================================*/

.contact-info{
display:flex;
flex-direction:column;
gap:20px;
}

.info-box{
display:flex;
gap:18px;
background:#fff;
padding:22px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}

.info-box:hover{
transform:translateY(-5px);
}

.info-box .icon{
width:60px;
height:60px;
background:#D10024;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:22px;
}

.info-box h4{
font-size:18px;
margin-bottom:8px;
}

.info-box p{
margin:0;
color:#666;
line-height:1.7;
}

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

.contact-form{
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.contact-form h3{
margin-bottom:25px;
font-weight:700;
}

.contact-form label{
font-weight:600;
margin-bottom:8px;
display:block;
}

.contact-form .form-control{
height:50px;
margin-bottom:20px;
border-radius:8px;
}

.contact-form textarea.form-control{
height:auto;
resize:none;
}

.contact-form .btn{
padding:12px 30px;
border-radius:8px;
}

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

.contact-map iframe{
width:100%;
height:420px;
border:0;
border-radius:12px;
}

/*====================================
SOCIAL
====================================*/

.contact-social{
text-align:center;
}

.contact-social h4{
margin-bottom:20px;
font-weight:700;
}

.social-links{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.social-links a{
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#D10024;
color:#fff;
font-size:20px;
text-decoration:none;
transition:.3s;
}

.social-links a:hover{
transform:translateY(-5px);
background:#111;
}

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

@media(max-width:991px){

.contact-info{
margin-bottom:30px;
}

}

@media(max-width:768px){

.contact-header h2{
font-size:30px;
}

.contact-form{
padding:20px;
}

.info-box{
padding:18px;
}

}

@media(max-width:576px){

.info-box{
flex-direction:column;
text-align:center;
align-items:center;
}

.contact-map iframe{
height:300px;
}

.social-links a{
width:45px;
height:45px;
font-size:18px;
}

}