body{font-family:Segoe UI, Roboto, Arial, sans-serif;background:#f4f7fb;display:flex;justify-content:center;padding:28px}
 
  .card{background:#fff;padding:24px;border-radius:10px;width:480px;box-shadow:0 6px 20px rgba(11,99,214,0.06)}
  
  h2{text-align:center;margin:0 0 14px;color:#222}
  
  label{display:block;margin-top:10px;font-weight:600}
  
  input[type=number]{width:100%;padding:9px;border-radius:6px;border:1px solid #d7dde8;margin-top:6px}
  
  .row{display:flex;gap:8px}
  
  .row input{flex:1}
  
  .small{font-size:13px;color:#666;margin-top:6px}
   
  button{width:100%;margin-top:18px;padding:11px;border-radius:8px;border:0;background:#18cb96 !important;
  color:#fff;font-weight:700;cursor:pointer}
  
  button:hover{opacity:.95}
  
  .result{display:none;margin-top:18px;background:#f9fbff;border-left:4px solid #0b63d6;padding:14px;border-radius:6px}
  
  .big{font-weight:700;font-size:16px;margin-bottom:6px}
  
  .details{font-size:14px;color:#444;margin-top:8px;border-top:1px dashed #e6e9ef;padding-top:8px}
  
  .muted{color:#666;font-size:13px}
  
  .calculator-section {
    width: 100%;
    display: block;   /* ensures each section takes full width */
    margin-top: 20px; /* space between sections */
	display: flex;
	
}
.seo-section {
    width: 100%;
    display: block;   /* ensures each section takes full width */
    margin-top: 20px; /* space between sections */
	display: flex;
}

button{padding:10px 15px;margin:5px;border:none;border-radius:6px;background:#0ea5a4;color:#fff;cursor:pointer;width:48%}
button:hover{background:#028484}

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

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

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