body {
  font-family: 'Segoe UI', sans-serif;
  margin:0; padding:0;
  background:#e0e5ec; color:#333; line-height:1.6;
}

/* Fixed header/footer */
header, footer {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 1000;
}
header { top: 0; }
footer { bottom: 0; }
body { padding-top: 100px; padding-bottom: 80px; }

/* Header & Footer styling */
header, footer {
  background:#e0e5ec;
  box-shadow: inset 5px 5px 10px #babec4, inset -5px -5px 10px #ffffff;
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  max-width:1400px;
  margin:auto;
}
footer { text-align:center; padding:20px; }

/* Logo area */
.logo-area {
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-img {
  width:50px; height:50px; border-radius:50%;
}
.logo-text {
  font-size:24px; font-weight:bold; letter-spacing:2px; color:#222;
}

/* Hamburger icon */
.menu-toggle {
  display:none;
  font-size:26px;
  cursor:pointer;
  color:#333;
}

/* Nav */
nav {
  display:flex;
  gap:25px;
  align-items:center;
  justify-content:flex-end;
}
nav a, .dropdown > a {
  color:#333; text-decoration:none; font-weight:500;
  padding:8px 12px; border-radius:10px;
  box-shadow: 5px 5px 10px #babec4, -5px -5px 10px #ffffff;
  transition: background 0.3s ease, color 0.3s ease;
}
nav a:hover, .dropdown > a:hover { background:#0077cc; color:#fff; }

/* Dropdown */
.dropdown { position:relative; }
.dropdown-content {
  display:none; position:absolute; background:#f9f9f9;
  min-width:180px; box-shadow:0px 8px 16px rgba(0,0,0,0.2); z-index:999;
}
.dropdown-content a { color:#333; padding:10px; text-decoration:none; display:block; }
.dropdown:hover .dropdown-content { display:block; }

/* Sections */
section { padding:60px 40px; max-width:1200px; margin:auto; }
h1,h2,h3 { color:#222; }

/* Buttons */
.cta {
  display:inline-block; padding:12px 24px;
  background:#0077cc; color:#fff; text-decoration:none; border-radius:20px;
  box-shadow: 5px 5px 10px #babec4, -5px -5px 10px #ffffff;
  transition: all 0.3s ease;
}
.cta:hover { background:#28a745; color:#fff; }

/* Neomorphic cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.card {
  background:#e0e5ec; padding:30px; border-radius:20px;
  box-shadow: 8px 8px 16px #babec4, -8px -8px 16px #ffffff;
  transition: transform 0.3s ease, background 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  background: linear-gradient(145deg, #f0f4fa, #d1d9e6);
}
.card img {
  max-width:100%; border-radius:20px;
  box-shadow: 8px 8px 16px #babec4, -8px -8px 16px #ffffff;
}

/* Animations */
.fade-in { animation: fadeIn 1.5s ease forwards; opacity:0; }
.slide-up { animation: slideUp 1.5s ease forwards; opacity:0; }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes slideUp { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }

/* Responsive Fixes with Hamburger */
@media (max-width: 768px) {
  .menu-toggle { display:block; }
  nav {
    position:fixed;
    top:80px;
    right:-100%;
    flex-direction:column;
    background:#e0e5ec;
    width:70%;
    height:100%;
    padding:20px;
    gap:15px;
    transition:right 0.3s ease;
    box-shadow:-5px 0 10px rgba(0,0,0,0.2);
  }
  nav.active { right:0; }
  nav a, .dropdown > a {
    width:100%;
    text-align:left;
    box-shadow:none;
    padding:12px;
  }
  .dropdown-content {
    position:static;
    box-shadow:none;
    background:#f0f0f0;
  }
  .dropdown:hover .dropdown-content { display:block; }
}