/* Custom styles for the side menu */
        #sideMenu {
            position: fixed;
            top: 0;
            right: -300px; /* Hidden by default */
            width: 300px;
            height: 100%;
            background-color: #1a202c; /* gray-900 */
            z-index: 50;
            display: flex;
            flex-direction: column;
            padding: 1.5rem;
            box-shadow: -4px 0 10px rgba(0, 0, 0, 0.3);
            transition: right 0.3s ease-in-out;
        }

        #sideMenu.open {
            right: 0;
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 45;
            display: none; /* Hidden by default */
        }

        #overlay.active {
            display: block;
        }

        /* Carousel styles */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .carousel-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .carousel-item.active {
            opacity: 1;
        }

        .carousel-dot.active {
            opacity: 1;
        }

        /* Gallery Slider Styles */
        .gallery-slider {
            position: relative;
            overflow: hidden;
            height: 250px; /* Fixed height for image consistency */
        }

        .gallery-slides {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease-in-out;
        }

        .gallery-slide {
            min-width: 100%;
            height: 100%;
            flex-shrink: 0;
        }

        .gallery-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures images cover the area without distortion */
        }

        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            cursor: pointer;
            z-index: 10;
            border-radius: 9999px; /* Full rounded */
            font-size: 1.5rem;
        }

        .slider-arrow.prev {
            left: 10px;
        }

        .slider-arrow.next {
            right: 10px;
        }

        .slider-nav {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
            z-index: 10;
        }

        .slider-dot {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .slider-dot.active {
            background-color: white;
        }

        /* Modal styles */
        #scheduleModal, #privacyPolicyModal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #1a202c; /* gray-900 */
            color: white;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            z-index: 100;
            max-width: 90%;
            max-height: 90%;
            overflow-y: auto;
            display: none; /* Hidden by default */
        }

        #modalOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 90;
            display: none; /* Hidden by default */
        }

        .schedule-route-image {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
            margin-top: 1rem;
        }

        /* Ensure smooth scrolling for anchor links */
        html {
            scroll-behavior: smooth;
        }