*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:#f5f7fb;
  color:#222;
  animation:fade .8s ease;
}

@keyframes fade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

:root{
  --primary:#0b3c8c;
  --secondary:#f4b400;
  --dark:#0b1c2d;
  --gray:#6b7280;
}

/* COMMON */
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:auto;padding:0 16px}

/* HEADER */
header{
  background:linear-gradient(135deg,#0b3c8c,#061f4a);
  position:sticky;top:0;z-index:99
}
.nav{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{color:#fff;font-weight:700}

nav{display:flex;align-items:center}
nav a{color:#fff;margin-left:22px;position:relative}
nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:0;height:2px;background:var(--secondary);
  transition:.3s
}
nav a:hover::after{width:100%}

.menu-btn{display:none;background:none;border:none;font-size:28px;color:#fff}

/* DROPDOWN */
.login-dropdown{position:relative}
.dropdown{
  display:none;position:absolute;right:0;top:30px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-radius:14px;overflow:hidden;
}
.login-dropdown:hover .dropdown{display:block}
.dropdown a{display:block;padding:12px 16px}

/* HERO */
.hero{
  background:linear-gradient(rgba(11,60,140,.85),rgba(11,60,140,.85)),
  url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1');
  background-size:cover;
  padding:100px 0;
  color:#fff;
  text-align:center;
}
.hero h1{font-size:2.6rem}

/* BUTTON */
.btn{
  display:inline-block;
  padding:12px 30px;
  border-radius:30px;
  font-weight:600;
  margin:6px;
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";position:absolute;left:-100%;top:0;
  width:100%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transition:.5s
}
.btn:hover::after{left:100%}
.btn.primary{background:var(--secondary)}
.btn.outline{border:2px solid #fff;color:#fff}

/* SECTIONS */
section{padding:70px 0}
.white{background:#fff}

.title{text-align:center;margin-bottom:40px}
.title h2{position:relative;display:inline-block}
.title h2::after{
  content:"";position:absolute;left:50%;bottom:-10px;
  transform:translateX(-50%);
  width:60px;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  border-radius:6px
}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{
  background:#fff;
  padding:26px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:.3s;
}
.card:hover{
  transform:translateY(-10px);
  box-shadow:0 18px 40px rgba(0,0,0,.15);
}

/* CTA */
.cta{
  background:linear-gradient(120deg,var(--primary),#061f4a);
  color:#fff;
  padding:50px;
  border-radius:22px;
  text-align:center;
}

/* FOOTER */
footer{
  background:var(--dark);
  color:#ccc;
  text-align:center;
  padding:24px;
}

/* RESPONSIVE */
@media(max-width:992px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  nav{
    display:none;
    position:absolute;
    top:72px;left:0;
    width:100%;
    background:#061f4a;
    flex-direction:column;
  }
  nav a{margin:14px 0}
  .menu-btn{display:block}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
}