/* =========================
COMMON RESET
========================= */


* {

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;

}



body {

color:#0B1F33;

}



/* =========================
NAVIGATION
========================= */


nav {

display:flex;
justify-content:space-between;
align-items:center;
padding:15px 6% 15px 8%;
background:white;

}



.logo img {

width:95px;
height:70px;
object-fit:contain;

}



nav ul {

display:flex;
list-style:none;
gap:42px;
margin-left:auto;
margin-right:35px;

}



nav ul li a {

text-decoration:none;
color:#0B1F33;
font-size:17px;
font-weight:600;

}



.nav-btn {

background:linear-gradient(135deg,#4A90C2,#2f6f9e);
color:white;
padding:12px 28px;
border-radius:30px;
text-decoration:none;
font-weight:bold;

}





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


.contact-hero {


padding:60px 8%;

text-align:center;

background:

linear-gradient(

135deg,

#eef6fc,

#ffffff

);


}



.contact-hero h1 {


font-size:40px;

color:#102A43;

margin-bottom:15px;


}



.contact-hero p {


font-size:18px;

color:#555;

line-height:1.7;

max-width:750px;

margin:auto;


}






/* =========================
CONTACT MAIN
========================= */


.contact-section {


padding:60px 8%;

background:#eef6fc;


}



.contact-container {


display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

max-width:1200px;

margin:auto;


}





.location-side,
.message-box {


background:white;

padding:40px;

border-radius:30px;

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


}



.location-side h2,
.message-box h2 {


color:#102A43;

margin-bottom:25px;


}




.branch-card {


background:#eef6fc;

padding:25px;

border-radius:20px;

margin-bottom:20px;


}



.branch-card h3 {


color:#4A90C2;

margin-bottom:12px;


}



.branch-card p {


color:#555;

line-height:1.7;

margin-bottom:8px;


}




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


.message-box p {


color:#555;

margin-bottom:25px;

line-height:1.6;


}



form input,
form select {


width:100%;

padding:15px;

margin-bottom:18px;

border-radius:15px;

border:1px solid #ddd;

font-size:15px;


}



form button {


width:100%;

padding:15px;

background:#4A90C2;

color:white;

border:none;

border-radius:30px;

font-weight:bold;

font-size:16px;

cursor:pointer;


}



form button:hover {


background:#2f6f9e;


}






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


.map-section {


padding:55px 8%;

text-align:center;


}



.map-section h2 {


font-size:36px;

color:#102A43;

margin-bottom:30px;


}



.map-section iframe {


width:100%;

height:350px;

border:0;

border-radius:30px;

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


}




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


.social-links {


display:flex;

justify-content:center;

gap:15px;

margin-top:30px;


}



.social-links a {


width:45px;

height:45px;

border-radius:50%;

background:#4A90C2;

color:white;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:20px;

font-weight:bold;


}



.social-links a:hover {


background:#2f6f9e;


}





/* =========================
FOOTER
========================= */


.simple-footer {


background:#081724;

color:#d5e3ef;

text-align:center;

padding:20px;

font-size:14px;

margin-top:50px;

border-radius:40px 40px 0 0;


}






/* =========================
MOBILE
========================= */


@media(max-width:900px){


nav ul {

display:none;

}



.contact-container {


grid-template-columns:1fr;


}



.contact-hero h1 {


font-size:32px;


}



}

* =========================
   FOOTER SOCIAL MEDIA ICONS
========================= */


.social-links {

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:15px;

    margin-top:30px;

}



.social-links a {

    width:45px;

    height:45px;

    border-radius:50%;

    background:#4A90C2;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:20px;

    transition:0.3s ease;

}



.social-links a:hover {

    background:white;

    color:#0b0f33;

    transform:translateY(-3px);

}