:root {
  --blue-dark: #3674B5;
  --blue-medium: #578FCA;
  --blue-light: #A1E3F9;
  --mint: #D1F8EF;
  --white: #fff;
  --text-dark: #1a1a1a;
  --text-light: #666;
  --shadow: rgba(0,0,0,0.08);
  --radius: 14px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family: 'Poppins', sans-serif;}
body {background:#f9fbff; color:var(--text-dark);}
.container {width:90%; max-width:1250px; margin:auto;}

/* NAVBAR */
.navbar {background:var(--blue-dark); padding:14px 0; position:sticky; top:0; z-index:100;}
.nav-container {display:flex; justify-content:space-between; align-items:center;}
.nav-container .logo {display:flex; align-items:center; gap:10px; color:var(--white); text-decoration:none; font-weight:600;}
.nav-container .logo img {height:45px;}
.nav-links {list-style:none; display:flex; gap:26px;}
.nav-links li a {color:var(--white); text-decoration:none; font-weight:500; padding-bottom:4px; transition:0.3s;}
.nav-links li a.active, .nav-links li a:hover {border-bottom:2px solid var(--mint);}
.hamburger {display:none; cursor:pointer; flex-direction:column; gap:4px;}
.hamburger span {display:block; width:25px; height:3px; background:#fff; border-radius:2px;}

/* HERO */
.hero-contact {background:linear-gradient(135deg,var(--blue-dark),var(--blue-medium)); padding:80px 0; text-align:center; color:var(--white);}
.hero-contact h1 {font-size:3rem; font-weight:700;}
.hero-contact p {margin-top:12px; font-size:1.15rem; opacity:0.9;}

/* CONTACT FORM */
.contact-section {display:flex; justify-content:center; margin:60px 0;}
.contact-card {background:var(--white); padding:40px 30px; border-radius:var(--radius); box-shadow:0 12px 35px var(--shadow); width:100%; max-width:500px; transition:0.3s;}
.contact-card:hover {transform:translateY(-5px);}
.contact-card h2 {margin-bottom:20px; color:var(--blue-dark);}
.contact-card input, .contact-card textarea {width:100%; padding:12px 15px; margin-bottom:15px; border-radius:var(--radius); border:1px solid #ccc; font-size:1rem; transition:0.3s;}
.contact-card input:focus, .contact-card textarea:focus {outline:none; border-color:var(--blue-medium);}
.contact-card button.btn {width:100%; padding:12px; border:none; border-radius:var(--radius); background:var(--blue-dark); color:#fff; font-size:1rem; cursor:pointer; transition:0.3s;}
.contact-card button.btn:hover {background:var(--blue-medium);}

/* FOOTER */
.site-footer {background:var(--blue-dark); color:var(--white); padding:60px 0 20px; margin-top:60px; border-top-left-radius:40px; border-top-right-radius:40px;}
.footer-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:35px;}
.footer-grid img.logo.small {height:50px;}
.footer-grid h5 {margin-bottom:15px; font-size:1.1rem; font-weight:600; color:var(--mint);}
.footer-grid ul {list-style:none;}
.footer-grid ul li {margin-bottom:8px; color:var(--mint);}
.footer-grid ul li a {color:var(--mint); text-decoration:none;}
.footer-bottom {text-align:center; margin-top:25px; font-size:0.9rem; opacity:0.8;}
.footer-bottom .socials a {color:#fff; margin:0 10px; transition:0.3s;}
.footer-bottom .socials a:hover {color:var(--blue-light);}

/* RESPONSIVE */
@media(max-width: 900px){
  .nav-links {display:none; flex-direction:column; gap:15px; background:var(--blue-dark); position:absolute; top:64px; right:0; padding:20px; border-radius:10px;}
  .nav-links.active {display:flex;}
  .hamburger {display:flex;}
}