:root{--accent:#d63384;--muted:#6b6b6b;--maxw:980px}
    body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;line-height:1.6;margin:0;color:#222;background:#fff}
    .wrap{max-width:var(--maxw);margin:36px auto;padding:24px}
    header h1{margin:0 0 8px;font-size:28px}
    .lead{color:var(--muted);margin-bottom:18px}
    .cta{display:inline-block;background:#18cb96;color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
    section{margin-top:26px}
    h2{margin:18px 0 8px}
    ul{margin:8px 0 8px 20px}
    .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:10px}
    .card{border:1px solid #eee;padding:12px;border-radius:8px;background:#fafafa}
    footer{margin-top:28px;padding-top:18px;border-top:1px solid #f0f0f0;color:var(--muted);font-size:14px}
    @media (max-width:520px){header h1{font-size:22px}}
	
	.page-content {
  max-width: 1200px;
  margin: 20px auto; /* gives some space below nav */
  padding: 0 20px;
}

.page-content {
  max-width: 1200px;
  margin: 20px auto; /* gives some space below nav */
  padding: 0 20px;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.nav-bar {
  background-color: #fff;
  box-shadow: 0 2px 5px #18cb96;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.nav-logo {
  font-weight: bold;
  font-size: 1.5em;
  color: #FF4081;
  text-decoration: none;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
    position: absolute;
  top: 100%;           /* right below the navbar */
  right: 0;            /* align with toggle */
  width: 100%;         /* take full width if needed */
  background: white;
  text-align: center;
  transform: translateY(-20px);  /* slightly up (hidden) */
  opacity: 0;           /* invisible */
  pointer-events: none; /* not clickable when hidden */
  transition: all 0.3s ease;
  z-index: 999;
}

.nav-links li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: #FF4081;
}

/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #FF4081;
  transition: all 0.3s;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 60px;
    left: -100%;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    transition: left 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  .nav-links.active {
    left: 0;
	  transform: translateY(0);  /* slide down smoothly */
  opacity: 1;
  pointer-events: auto;
  }

  .hamburger {
    display: flex;
  }
}

.logo img {
  height: 50px; /* adjust as needed */
  width: auto;
}

/* Desktop view fix */
@media (min-width: 768px) {
  .nav-links {
    position: static;        /* back to normal flow */
    transform: none;         /* reset slide */
    opacity: 1;              /* visible */
    pointer-events: auto;    /* clickable */
    display: flex;           /* horizontal layout */
    justify-content: center; /* or space-between depending on your style */
    background: none;        /* remove white box */
  }

  .nav-links a {
    color: white;            /* adjust text color for navbar background */
    padding: 8px 15px;
  }
}