body {
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f8f9fa;
      color: #333;
    }
    .container {
      max-width: 900px;
      margin: 60px auto;
      background: #fff;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    h1, h2 {
      color: #222;
    }
    h1 {
      text-align: center;
      margin-bottom: 15px;
    }
    p {
      line-height: 1.7;
      margin-bottom: 15px;
    }
    ul {
      margin-left: 20px;
      line-height: 1.7;
    }
	
	.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;
  }