:root{
  --mint:#98FF98;
  --lavender:#E6E6FA;
  --skyblue:#87CEEB;
  --cerulean:#006989;
  --dark:#222;
  --bg:#f7f8fb;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Quicksand",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--dark);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  background:var(--lavender);
  border-bottom:2px solid var(--cerulean);
}
.nav-logo img{
  width:8%;
  max-width:120px;
  min-width:48px;
  height:auto;
  display:block;
}
.nav-menu{
  list-style:none;
  display:flex;
  gap:14px;
}
.nav-menu a{
  text-decoration:none;
  color:var(--dark);
  font-weight:600;
}
.nav-menu a:hover{color:var(--cerulean)}

/* HERO */
.hero{
  text-align:center;
  padding:56px 18px;
  background:linear-gradient(135deg,var(--cerulean),var(--skyblue));
  color:#fff;
}
.hero h1{font-size:2rem;margin-bottom:6px}
.hero p{opacity:.95;margin-bottom:14px}
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  background:#fff;
  color:var(--cerulean);
}
.btn:hover{background:var(--cerulean);color:#fff}

/* Layout container & sections */
.container{max-width:980px;margin:22px auto;padding:0 18px}
.section{
  background:#fff;
  border-radius:10px;
  padding:22px;
  margin-bottom:18px;
  box-shadow:0 6px 20px rgba(2,6,23,0.04);
}
.section.light{background:#fafafa}
h2{color:var(--cerulean);text-align:center;margin-bottom:10px;font-size:1.5rem}

/* Images: percentage-based with pixel fallbacks */
img{max-width:100%;height:auto;display:block;object-fit:cover}

/* Nav logo */

/* Social icons base */
.social-link {
  color: #0A66C2;
  margin-right: 12px;
  font-size: 20px;
  display: inline-block;
  text-decoration: none;
  transition: opacity 150ms ease, transform 120ms ease;
}

/* Hover / focus states */
.social-link:hover,
.social-link:focus {
  opacity: 0.9;
  transform: translateY(-2px);
  outline: none;
}

/* Accessible focus ring */
.social-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(10,102,194,0.18);
  border-radius: 4px;
}

/* If you want the icons slightly larger on mobile */
@media (max-width: 600px) {
  .social-link { font-size: 22px; margin-right: 10px; }
}