html {
  height: 100%;
  width: 100%;
}
  .intro {
      padding: 20px;
      background-color: #fff;
      max-width:1000px;
      margin: 10px auto;
  }

  .intro h1 {
      color: #333;
      font-size: 2em;
  }

  .intro p {
      color: #555;
      font-size: 1.2em;
  }

  .content {
      padding: 20px;
      background-color: #f4f4f4;
      max-width: 1000px;
      margin: 20px auto;
  }

  .content h2 {
      color: #333;
      font-size: 1.8em;
  }

  .content ul {
      margin-top: 15px;
      padding-left: 20px;
  }

  .content ul li {
      margin-bottom: 10px;
      font-size: 1.1em;
  }

  .hero-image, .content-image {
      width: 100%;
      border-radius: 8px;
      margin: 20px 0;
  }
  /* General section styling for consistency */
  section {
    padding: 20px;
    background-color: #fff;
    max-width: 1000px;
    margin: 20px auto;

  }

  section h2 {
      font-size: 2rem;
      color: #333; /* Dark text for headings */
      margin-bottom: 20px;
      border-bottom: 2px solid #ddd; /* Underline effect for headings */
      padding-bottom: 10px;
  }

  section p {
      font-size: 1rem;
      color: #555; /* Medium gray for body text */
      line-height: 1.8;
      margin-bottom: 20px;
  }

  section ul {
      list-style: disc;
      padding-left: 20px;
  }

  section li {
      margin-bottom: 10px;
      color: #444;
  }

  /* Specific section styling */

  /* Preparation Section */
  .preparation {
      background-color: #eef3f9; /* Light blue background for distinction */
  }

  /* Itinerary Section */
  .itinerary {
      background-color: #f9f9f9;
  }
.why-trek{
    background-color: ;
}
  /* Costs Section */
  .costs {
      background-color: #f1f4f9;
  }

  .costs ul {
      list-style: none;
      padding-left: 0;
  }

  .costs li {
      margin-bottom: 15px;
      background-color: #fff;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
  }

  /* Best Time Section */
  .best-time {
      background-color: #f9f7f2;
  }

  /* Conclusion Section */
  .conclusion {
      background-color: #fff;
      padding: 50px;
      text-align: center;
      border-top: 3px solid #ddd;
  }

  .conclusion p {
      font-size: 1.2rem;
      color: #333;
      margin-top: 20px;
  }

    .map-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px; /* Optional: space between the map and image */
    }
    iframe {
        border: none;
        overflow-y: hidden;
        background-color: white;
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        height: 420px;
    }
/* FAQ Styles */
.faq ul {
  list-style-type: none;
  padding: 0;
}
.faq ul li {
  background-color: #ecf0f1;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.faq ul li strong {
  font-size: 20px;
  color: #2980b9;
}
.faq ul li p {
  font-size: 16px;
  color: #2c3e50;
}
#whatsapp-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

#whatsapp-widget img {
  width: 80px;
  height: 80px;
  transition: transform 0.2s;
}

#whatsapp-widget img:hover {
  transform: scale(1.1);
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
  #whatsapp-widget img {
    width: 40px;
    height: 40px;
  }
}

/* Center the entire video section on the screen */
.video-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  padding: 0 20px; /* Add padding to prevent spilling */
}

/* Video grid layout */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  gap: 10px; /* Increase gap for better spacing */
  max-width: 920px; /* Limit maximum width for larger screens */
  width: 100%;
}

/* Video container styling */
.video-container {
  position: relative;
  padding-bottom: 60%; /* Increase vertical height */
  height: 350px;
  overflow: hidden;
  border-radius: 10px; /* Optional: Rounded corners */
  background: #000; /* Black background for better video visibility */
}

/* Iframe styling */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
  }
}

@media (max-width: 380px) {
  .video-grid {
    grid-template-columns: 1fr; /* One column on mobile */
  }

  .video-container {
    padding-bottom: 56.25%; /* Reset to 16:9 aspect ratio for mobile */
  }
}
/* Add this to your CSS */
.hero-banner {
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

.hero-banner section {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
 .nav-link {
    @apply text-gray-600 hover:text-gray-900 font-medium transition-colors duration-300 relative;
  }

  .nav-link::before {
    @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-gray-900 transition-all duration-300;
    content: '';
  }

  .nav-link:hover::before {
    @apply w-full;
  }

  .nav-link-mobile {
    @apply text-gray-600 hover:text-gray-900 font-medium py-2 border-b border-gray-100;
  }

/* Side Navigation Styles */
#sideNav {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #6c42cb;
    padding: 10px;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-family: Arial, sans-serif;
    width: auto;
    display: block;
}

/* Navigation List */
#navLinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Navigation Links */
.nav-item {
    text-decoration: none;
    color: #ffffff;
    padding: 8px 12px;
    display: block;
    border-radius: 4px;
    text-align: center;
    transition: background 0.3s ease;
}

/* Hover Effect */
.nav-item:hover {
    background-color: #605e62;
}

@font-face {
  font-family: 'YourFont';
  src: url('/fonts/your-font.woff2') format('woff2');
  font-display: swap; /* Optional: shows system font first */
  font-weight: 700;
}