* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
}

/* Navigation Bar */
header {
  background-color: #fff;
  padding: 20px 40px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
}

nav .logo h1 {
  
  color: #ff9900;
  display: inline-block;
  margin-left: 10px;
}

nav ul {
  display: flex;
  list-style-type: none;
}

nav ul li {
  margin-left: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style-type: none;
  margin-right: auto; /* To push the download button to the right */
}

.nav-links li {
  margin-left: 50px;
}

.nav-links li:hover {
  transform: scale(1.5);
  transition: transform 0.3s ease;
}


.btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  transition: background-color 0.3s ease;
  right: 30px; /* Ensures the download button stays at the far right */
}

.btn:hover {
  transform: scale(1.5);
  transition: transform 0.3s ease;
  background-color: #23ab35;
}

/* Hero Section */
.hero {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(135deg, #5b86e5, #36d1dc);
  color: #fff;
  padding: 60px 80px;
  height: 120vh;
}

.hero-content {
  max-width: 600px;
}

.hero-content h2 {
  font-size: 3rem;
}

.hero-content span {
  color: #ff9900;
}

.hero-content p {
  margin: 20px 0;
  font-size: 1.2rem;
}

.app-buttons a img {
  width: 150px;
  margin-right: 20px;
}

.hero-image img {
  width: 300px;
  border-radius: 40px;
}

.btn_2 {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn_2:hover {
  transform: scale(1.5);
  transition: transform 0.3s ease;
  background-color: #b39e00;
}

/* Features Section */
#features {
  padding: 60px 40px;
  background-color: #fff;
}

.features-container h3 {
  text-align: center;
  margin-bottom: 40px;
}

.features {
  display: flex;
  justify-content: space-between;
}

.feature-item {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 30%;
}

.feature-item img {
  width: 80px;
  margin-bottom: 20px;
}

/* Comparison Section */
#benefits {
  padding: 60px;
  background-color: #f1f1f1;
  text-align: center;
}

.comparison {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.nutriInfo-features, .other-apps {
  width: 45%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.nutriInfo-features ul {
  list-style-type: none;
}

.nutriInfo-features li{
  margin: 10px 0;
}

.nutriInfo-features:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

footer {
  background-color: #007bff;
  color: #fff;
  text-align: center;
  padding: 20px;
}

.feature-item:hover {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}

.download-btn:hover {
  background-color: #ff6600;
}

#faq {
  padding: 60px 40px;
  background-color: #fff;
}

.faq-img {
  max-width: 100px;
  height: auto;
}

/* @media (max-width: 768px) {
  .hero {
      flex-direction: column;
      text-align: center;
  }

  .hero-image img {
      width: 200px;
      margin-top: 5px;
  }

  .features {
      flex-direction: column;
  }

  .feature-item {
      width: 100%;
      margin-bottom: 20px;
  }

  .comparison {
      flex-direction: column;
  }

  .paypulse-features, .other-apps {
      width: 100%;
      margin-bottom: 20px;
  }
} */
 /* General settings to avoid overflow */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;  /* Prevent horizontal scrolling */
}

 .logo:hover {
  transform: scale(1.5);
  transition: transform 0.3s ease;
} 

/* Ensure the hero section and other large sections use full width */
.hero, .features-container, #benefits, footer {
  width: 100%vw;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
  /* Stack the nav elements vertically */
  nav ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
  }

  .nav-links {
    display: none;
  }

  nav ul li {
      margin: 10px 0;
  }

  /* Adjust the hero section for mobile */
  .hero {
      flex-direction: column;
      text-align: center;
      padding: 30px 20px;
  }

  .hero-content h2 {
      font-size: 2rem;
  }

  .hero-image img {
      width: 250px;
      margin-top: 20px;
  }

  /* App buttons alignment */
  .app-buttons a img {
      width: 120px;
      margin: 10px 0;
  }

  /* Features section responsive design */
  .features {
      flex-direction: column;
      align-items: center;
  }

  .feature-item {
      width: 90%; /* Take most of the width on mobile */
      margin-bottom: 20px;
  }

  /* Comparison section adjustments */
  .comparison {
      flex-direction: column;
      margin-top: 20px;
  }

  .nutriInfo-features {
      width: 90%;
      margin: 20px auto;
  }
  
  /* Footer responsiveness */
  footer {
      padding: 20px;
      text-align: center;
  }
}