@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root{--primary:#0b3d91;--accent:#ffb400;--bg:#f8f9fc}
*{box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior: smooth;}
body { font-family: 'Poppins', sans-serif; color: #222; background-color: var(--bg); overflow-x: hidden; scroll-behavior: smooth; }

    /* Header */
header { position: fixed; top: 0; width: 100%; transition: background-color 0.4s ease, padding 0.3s ease, backdrop-filter 0.3s; background-color: transparent; color: white; padding: 22px 60px; display: flex; align-items: center; justify-content: space-between; z-index: 1200; }
header.scrolled { background-color: rgba(11,61,145,0.95); padding: 12px 40px; box-shadow: 0 6px 24px rgba(11,61,145,0.12); }

.logo img{height:48px;width:auto;}

nav{display:flex;gap:18px;align-items:center}
nav a { color: white; text-decoration: none; font-weight: 600; position: relative; transition: color 0.25s; }
nav a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 3px; background: var(--accent); transition: width 0.25s; border-radius:2px }
nav a:hover::after { width: 100%; }

.cta { background-color: var(--accent); border: none; padding: 10px 20px; border-radius: 28px; cursor: pointer; font-weight: 700; color: var(--primary); transition: transform .18s ease, box-shadow .18s ease; }
.cta:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.12)}

/* Hero */
.hero { background-image: url('./bg.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white; position: relative; overflow: hidden; }
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.6));mix-blend-mode:normal;}

.hero-inner{position:relative;z-index:2;max-width:1100px;padding:0 20px}
.eyebrow{display:inline-block;background:rgba(255,255,255,0.08);padding:8px 14px;border-radius:999px;margin-bottom:18px;font-weight:600;font-size:.95rem}
.hero h1{font-size:3rem;margin:0 0 14px;line-height:1.05;letter-spacing:-0.5px;animation:fadeInUp .7s ease both .2s}
.hero p{font-size:1.05rem;max-width:900px;margin:0 auto;color:rgba(255,255,255,0.92);line-height:1.7;animation:fadeInUp .7s ease both .45s}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;pointer-events:none;transition:opacity .25s ease}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:12px;padding:22px;width:520px;max-width:94%;box-shadow:0 20px 50px rgba(2,6,23,0.3);transform:translateY(12px);transition:transform .25s ease,opacity .25s ease}
.modal h3{margin:0 0 8px;font-size:1.25rem;color:#0b3d91}
.modal p.small{margin:0 0 12px;color:#475569;font-size:.95rem}
.field{margin-bottom:12px}
.field label{display:block;font-size:.86rem;color:#344155;margin-bottom:6px}
.field input,.field textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e6e9ef;font-size:.95rem}
.field textarea{min-height:110px;resize:vertical}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.btn{padding:9px 14px;border-radius:8px;border:none;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{background:transparent;border:1px solid #d1d5db;color:#0b3d91}
.form-success{background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46;padding:12px;border-radius:8px;margin-top:12px;display:none}

/* Sections */
section{padding:80px 0 0 0;max-width:1100px;margin:0 auto;transition: all 1s}
h2{color:var(--primary);font-size:1.9rem;margin-bottom:20px;display:inline-block;position:relative}
h2::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-12px;width:64px;height:4px;background:var(--accent);border-radius:3px}

#about p{font-size:1rem;color:#2e3a4a;line-height:1.8;text-align:justify}

.clients{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.client{background:#fff;border-radius:14px;padding:10px;width:220px;box-shadow:0 10px 30px rgba(16,24,40,0.06);text-align:center;transition:transform .28s,box-shadow .28s}
.client:hover{transform:translateY(-10px);box-shadow:0 18px 40px rgba(16,24,40,0.12)}
.client img{width:100%;}
.client p{margin:0;color:#475569;font-weight:600}

footer{background:linear-gradient(90deg,var(--primary),#05306e);color:#fff;padding:40px 60px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top: 40px}
footer p{margin:0;max-width:800px}
p{margin-bottom: 20px}
.client-logo{width: 200px;height: 200px;display: block;align-content: center;justify-content: center}
@media (max-width:900px){
    header{padding:14px 20px;display: block;text-align: center}
    .hero h1{font-size:26px}
    nav{justify-content: center}
}

@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}