body{
font-family:'Poppins',sans-serif;
margin:0;
background:#f9fafc;
}


/* HERO */

.contact-hero{

height:45vh;

background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
url('../../assets/image/photo/oss.jpeg');

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;

color:white;
text-align:center;

}

.contact-hero h1{
font-size:48px;
font-weight:700;
}

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



/* CONTACT INFO */

.contact-info{
padding:70px 0;
background:white;
}

.info-card{

background:white;

padding:35px;

text-align:center;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

transition:0.3s;

}

.info-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,0.15);

}

.info-card i{

font-size:35px;

color:#ff7a00;

margin-bottom:15px;

}



/* CONTACT FORM */

.contact-form-section{

padding:80px 0;

}

.contact-form-box{

background:white;

padding:40px;

border-radius:12px;

box-shadow:0 12px 30px rgba(0,0,0,0.1);

}

.contact-form-box h2{

margin-bottom:10px;

}

.contact-form-box p{

margin-bottom:25px;

color:#555;

}

.form-control{

border-radius:8px;

padding:12px;

}



.send-btn{

background:linear-gradient(135deg,#ff7a00,#ffb347);

border:none;

color:white;

padding:12px 30px;

border-radius:30px;

font-weight:600;

transition:0.3s;

}

.send-btn:hover{

background:#111;

}



/* MAP */

.map-box{

background:white;

padding:30px;

border-radius:12px;

box-shadow:0 12px 30px rgba(0,0,0,0.1);

}

.map-box h3{

margin-bottom:15px;

}



/* SOCIAL */
/* SOCIAL MEDIA SECTION */

.social-section{
padding:70px 0;
background:#f4f8ff;   /* light blue background */
text-align:center;
}

.social-section h3{
font-size:32px;
font-weight:600;
margin-bottom:10px;
}

.social-section p{
color:#666;
margin-bottom:30px;
}

.social-icons a{
display:inline-flex;
align-items:center;
justify-content:center;

width:50px;
height:50px;

background:white;
color:#ff7a00;

border-radius:50%;

margin:10px;

font-size:20px;

transition:0.3s;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.social-icons a:hover{
background:#ff7a00;
color:white;
transform:translateY(-5px);
}


/* RESPONSIVE */

@media(max-width:768px){

.contact-hero h1{

font-size:32px;

}

}