:root{
 --primary:#0A3D62;
 --secondary:#1E90FF;
 --accent:#00BFA6;
 --bg:#F5F7FA;
 --dark:#1F2933;
 --light:#fff;
 --border:#E5E7EB;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}

body{
 font-family:Segoe UI,system-ui,sans-serif;
 background:var(--bg);
 color:var(--dark);
 display:flex;
 flex-direction:column;
}

main{flex:1}

/* NAV */
nav{
 background:var(--light);
 padding:16px 48px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:1000;
}

.logo{font-weight:700;font-size:22px;color:var(--primary)}

.menu{display:flex;gap:22px}

.menu a{font-weight:500;position:relative}

.menu a::after{
 content:'';
 position:absolute;
 width:0;
 height:2px;
 background:var(--accent);
 bottom:-6px;
 left:0;
 transition:.3s;
}

.menu a:hover::after,
.menu a.active::after{width:100%}

.menu a.active{color:var(--secondary)}

/* HERO */
.hero{
 background:
 radial-gradient(circle at top left,#1E90FF55,transparent 60%),
 radial-gradient(circle at bottom right,#00BFA655,transparent 60%),
 linear-gradient(135deg,#0A3D62,#1E90FF);
 color:#fff;
 padding:120px 40px;
 text-align:center;
}

.hero h1{font-size:52px;margin-bottom:18px}
.hero p{font-size:20px;max-width:760px;margin:auto}

.btn{
 display:inline-block;
 margin-top:30px;
 padding:14px 34px;
 background:var(--accent);
 color:#fff;
 border-radius:30px;
 font-weight:600;
}

/* SECTIONS */
.section{padding:70px 40px;max-width:1200px;margin:auto}
.section h2{text-align:center;font-size:34px;color:var(--primary)}
.section p{text-align:center;margin:20px auto;color:#4B5563}

.section.gradient{
 background:linear-gradient(135deg,#fff,#f0f9ff);
 border-radius:28px;
 padding:80px 50px;
}

/* CARDS */
.cards{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:30px;
 margin-top:45px;
}

.card{
 background:#fff;
 padding:28px;
 border-radius:16px;
 box-shadow:0 12px 30px rgba(0,0,0,.06);
}

/* FOOTER */
footer{
 background:#0B1F33;
 color:#CBD5E1;
 text-align:center;
 padding:28px;
}

/* HAMBURGER */
.hamburger{
 display:none;
 flex-direction:column;
 cursor:pointer;
}

.hamburger span{
 width:26px;
 height:3px;
 background:#000;
 margin:4px 0;
 transition:.3s;
}

.hamburger.active span:nth-child(1){
 transform:rotate(45deg) translate(5px,5px)
}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){
 transform:rotate(-45deg) translate(6px,-6px)
}

/* MOBILE MENU */
.menu-overlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.45);
 opacity:0;
 visibility:hidden;
 transition:.3s;
 z-index:998;
}

.menu-overlay.show{
 opacity:1;
 visibility:visible;
}

@media(max-width:768px){
 .hamburger{display:flex}
 .menu{
  position:fixed;
  top:0;
  right:-40%;
  height:100vh;
  width:40%;
  background:#fff;
  flex-direction:column;
  padding:90px 30px;
  gap:24px;
  transition:.35s;
  z-index:999;
 }
 .menu.show{right:0}
}

/* ---------- CONTACT PAGE ---------- */

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

.contact-subtitle {
    margin-top: 10px;
    color: #4B5563;
    font-size: 16px;
}

/* Form wrapper */
.contact-form {
    max-width: 700px;
    margin: 40px auto 0;
    background: #ffffff;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    text-align: left;
}

/* Grid layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Full-width row */
.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    font-size: 15px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary);
}

/* Button alignment */
.contact-btn {
    margin-top: 30px;
    width: 100%;
    text-align: center;
}

/* ---------- MOBILE FIX ---------- */
@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .contact-form {
        padding: 30px 22px;
    }
}