body{font-family:Arial,sans-serif;background:#f5f5f5;padding:20px}
.calculator{
	max-width:500px;margin:0 auto;background:#fff;
	padding:20px;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,0.1);
		margin-top:20px;
	}

h1{text-align:center;margin-bottom:20px}
.input-section label{display:block;margin-bottom:10px;font-size:14px}
.input-section input,.input-section select{width:100%;padding:8px;margin-top:4px;border-radius:6px;border:1px solid #ccc;box-sizing:border-box}
button{padding:10px 15px;margin:5px;border:none;border-radius:6px;background:#18cb96;color:#fff;cursor:pointer;width:48%}
button:hover{background:#028484}
.results{margin-top:15px}
.results p{margin:5px 0;font-weight:bold}
.breakdown{margin-top:10px}
.breakdown ul{padding-left:20px}
.toggle-container{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.switch{position:relative;display:inline-block;width:50px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background:white;transition:.4s;border-radius:50%}
input:checked + .slider{background:#0ea5a4}
input:checked + .slider:before{transform:translateX(26px)}

.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;
  }