/* Scope styles to batches-box specifically */
    .batches-box {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      max-width: 400px;
      box-sizing: border-box;
      margin: 20px auto; /* Added margin for spacing */
    }

    .batches-box h2 {
      margin: 0 0 10px;
      padding-bottom: 5px;
      border-bottom: 2px solid #4CAF50;
      font-size: 20px;
      color: #333;
    }

    .month-buttons {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 14px;
    }

    .month-buttons a {
      text-decoration: none;
      color: white;
      background-color: #FF007F;
      border-radius: 3px;
      padding: 6px 11px;
      margin-left: 4px;
      font-weight: bold;
      transition: background-color 0.3s;
    }

    .month-buttons a:hover {
      background-color: #f2b6b6;
    }

    .dates {
      display: none; /* Hide all dates by default */
      flex-wrap: wrap;
    }

    .date-item {
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      margin: 5px;
      text-align: center;
      width: calc(25% - 10px); /* Ensures 4 items per row with space between them */
      box-sizing: border-box;
      font-size: 16px;
      color: #333;
    }

    /* Ensure dates are visible when their month is selected */
    .dates.active {
      display: flex;
    }
    /* WhatsApp Button Style */
        #whatsappButton {
            position: fixed;
            bottom: 80px;
            left: 20px;
            background-color: #25D366;
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 1000;
            animation: flip 4s infinite;
        }

        #whatsappButton img {
            width: 30px;
            height: 30px;
        }

        /* Flip Animation */
        @keyframes flip {
            0% { transform: rotateY(0deg); }
            50% { transform: rotateY(180deg); }
            100% { transform: rotateY(360deg); }
        }

        body {
            
        .form-container {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .form-group .form-check {
            display: flex;
            align-items: center;
        }
        .form-group .form-check input {
            width: auto;
            margin-right: 10px;
        }
        .btn-submit {
            display: block;
            width: 100%;
            padding: 15px;
            background-color: #FF007F;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1.2em;
            cursor: pointer;
            text-align: center;
            margin-top: 10px;
        }
        .result {
            margin-top: 20px;
            font-size: 1.2em;
            font-weight: bold;
        }
        .calendar-container {
            display: none;
            margin-top: 15px;
        }
   
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    /* Menu container */
    .menu-container {
      background-color: #FF007F; /* White background */
      position: relative;
      width: 100%;
      overflow: hidden; /* Hide overflow for scroll effect */
      
    }

    /* Menu */
    .menu {
      display: flex;
      overflow: hidden; /* Hide overflow of the menu */
      width: 100%;
    }

    /* Menu items */
    .menu-items {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .menu-item {
      flex: 1 0 33.33%; /* 3 items visible at a time */
      text-align: center;
      padding: 10px;
      background-color: #FF007F; /* Pink background */
      color: white; /* White text */
      text-decoration: none;
      border-right: 1px solid #ddd;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 16px; /* Font size defined */
      font-weight: bold; /* Bold text */
}


    .menu-item:last-child {
      border-right: none;
    }

    /* Navigation buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  background-color: pink; /* Pink background */
  border: none;
  color: black; /* Black arrows */
  padding: 5px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  transform: translateY(-50%);
  z-index: 10;
  animation: bounce 2s infinite;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.prev:hover, .next:hover {
  transform: translateY(-50%) scale(1.1); /* Slightly enlarge on hover */
  background-color: lightpink; /* Change color on hover */
}

/* Bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(-50%);
  }
  40% {
    transform: translateY(-60%);
  }
  60% {
    transform: translateY(-55%);
  }
}


    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }

    /* Content section */
    .content-container {
      padding: 20px;
      background-color: #ffffff;
    }

    .content {
      display: none; /* Hide all contents by default */
    }

    .content.active {
      display: block; /* Show active content */
    }

    /* Ensure menu items are properly sized on mobile */
    @media (max-width: 768px) {
      .menu-item {
        flex: 1 0 33.33%;
      }
    }
     /* Make iframe responsive */
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            width: 100%;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
 
        .custom-trip-button-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0px;
            margin-bottom: 20px;
        }

        .custom-trip-button {
            display: inline-block;
            padding: 15px 30px;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            background-color: #FF007F; /* Pink Color */
            border: none;
            border-radius: 30px;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            animation: custom-bounce 2s infinite;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .custom-trip-button:hover {
            background-color: #FFFF00;
            transform: scale(1.05);
        }

        @keyframes custom-bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }
 
        /* Your CSS styles */
        .popup-container {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 70px;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
            display: flex; /* Use flexbox to center content */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
        }

        .popup-content {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 12px;
            width: 75%; /* Reduced width of the form */
            max-width: 500px;
            max-height: 80vh; /* Max height for the form */
            overflow-y: auto; /* Add vertical scrollbar if content exceeds height */
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            box-sizing: border-box; /* Ensure padding does not affect width */
        }

        .form-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-header img {
            width: 100px; /* Thumbnail size */
            height: auto;
            border-radius: 8px;
        }

        .form-header h2 {
            margin-top: 10px;
            font-size: 1.2em;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }

        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #FF007F; /* Pink Colour */
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .form-group button:hover {
            background-color: #FFFF00; /* Darker orange on hover */
        }

        .confirmation-message {
            display: none;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #FFA500; /* Orange background */
            color: white;
            border-radius: 5px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            text-align: center;
        }
         .custom-image-section .row {
            display: flex;
            gap: 15px; /* Adjust the gap between images as needed */
            margin: 35px; /* Margin around the entire flex container */
        }

        .custom-image-section .image-container {
            /* Optional: Add additional styles if needed */
        }

        .custom-image-section .zoom-image {
            width: 100px; /* Adjust the size of the images if needed */
            height: auto;
            transition: transform 0.2s ease-in-out;
        }

        .custom-image-section .zoom-image:hover {
            transform: scale(2.5); /* Zoom effect on hover */
        }