/* HERO (TEAL + DARK) */
.contact-hero{
background:linear-gradient(135deg,#0f2027,#2c5364,#16a085);
color:#fff;
padding:80px 0;
text-align:center;
}

/* SECTION */
.contact-section{
padding:70px 0;
background:#eef3f7;
}

/* CARD */
.contact-card{
background:#ffffff;
border-radius:14px;
padding:30px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.3s;
border-top:4px solid #16a085;
}

.contact-card:hover{
transform:translateY(-8px);
}

/* ICON */
.contact-icon{
font-size:32px;
color:#16a085;
margin-bottom:12px;
}

/* FORM */
.contact-form{
background:#ffffff;
padding:35px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
border-top:4px solid #2c5364;
}

/* INPUT */
.form-control{
padding:12px;
border-radius:8px;
border:1px solid #ddd;
}

.form-control:focus{
border-color:#16a085;
box-shadow:none;
}

/* BUTTON */
.contact-btn{
background:linear-gradient(45deg,#16a085,#1abc9c);
color:#fff;
font-weight:600;
padding:12px;
border-radius:8px;
border:none;
}

.contact-btn:hover{
background:#138d75;
}

/* MAP */
.map-box{
background:#ffffff;
padding:20px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
border-top:4px solid #16a085;
}