#map {
    width: 100%;
    height: 70vh;
    margin-top: var(--spacing-unit);
    border-radius: 15px; /* Add slight rounded borders */
    overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

#map2 {
    width: 100%;
    height: 60vh;
    border-radius: 15px;
    margin-top: var(--spacing-unit);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
} 

    .zoom-out-button, .cycle-markers-button {
        width: clamp(100px, 18vw, 100px) !important;
        height: clamp(100px, 18vw, 100px) !important;
        padding: clamp(12px, 2vw, 18px) !important;
        border-radius: 50% !important; /* Fully rounded corners */
        font-size: clamp(16px, 2vw, 20px) !important;
        background: rgba(255, 255, 255, 0.6) !important; /* Increased transparency */
        border: 2px solid rgba(51, 51, 51, 0.6) !important; /* More transparent border */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Softer shadow */
        cursor: pointer !important;
        font-weight: bold !important;
        color: #333333 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        word-wrap: break-word !important;
        line-height: 1.3 !important;
        position: absolute !important;
        bottom: clamp(10px, 2vh, 20px) !important;
        z-index: 999 !important;
        backdrop-filter: blur(2px) !important; /* Add blur effect */
    }
    
    .zoom-out-button {
        left: clamp(10px, 2vw, 20px) !important;
    }
    
    .cycle-markers-button {
        right: clamp(10px, 2vw, 20px) !important;
    }
    
    .zoom-out-button:hover, .cycle-markers-button:hover {
        background: rgba(245, 245, 245, 0.7) !important; /* Increased transparency on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    @media (max-width: 768px) {
        .zoom-out-button, .cycle-markers-button {
            width: clamp(100px, 20vw, 150px) !important;
            height: clamp(100px, 20vw, 150px) !important;
            font-size: clamp(14px, 2vw, 18px) !important;
            padding: clamp(10px, 2vw, 15px) !important;
        }
    }
    
    .zoom-out-button {
        left: clamp(10px, 2vw, 20px) !important;
    }
    
    .cycle-markers-button {
        right: clamp(10px, 2vw, 20px) !important;
    }
    
    .zoom-out-button:hover, .cycle-markers-button:hover {
        background: rgba(245, 245, 245, 0.7) !important; /* Increased transparency on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    @media (max-width: 768px) {
        .zoom-out-button, .cycle-markers-button {
            width: clamp(60px, 10vw, 100px) !important;
            height: clamp(60px, 10vw, 100px) !important;
            font-size: clamp(10px, 1vw, 14px) !important;
            padding: clamp(6px, 1vw, 10px) !important;
        }
    }

    .marker {
        width: 30px;
        height: 30px;
        background-size: contain;
        cursor: pointer;
    background-image: url('');

    }

    .marker_castle {
        background-image: url('/main_page/images/map/castle.svg');
    }
    
    .marker_met_first {
        background-image: url('/main_page/images/map/met_first.svg');
    }

    .marker_popped_the_question {
        background-image: url('/main_page/images/map/popped_the_question.svg');
    }

    .marker_first_date {
        background-image: url('/main_page/images/map/first_date.svg');
    }

    .first_holiday {
        background-image: url('/main_page/images/map/first_holiday.svg');
    }

    .marker_grooms_place_of_birth {
        background-image: url('/main_page/images/map/groom_place_of_birth.svg');
    }
    .marker_bride_place_of_birth {
        background-image: url('/main_page/images/map/bride_place_of_birth.svg');
    }

    .car_parking {
        background-image: url('/main_page/images/map/parking.svg');
    }

    .ceremony {
        background-image: url('/main_page/images/map/wedding-couple.svg');
    }

    .across_the_pond {
        background-image: url('/main_page/images/map/across_the_pond.svg');
    }

    .cottages {
        background-image: url('/main_page/images/map/cottages.svg');
    }

    .gate {
        background-image: url('/main_page/images/map/gate.svg');
    }
    .courtyard {
        background-image: url('/main_page/images/map/courtyard_room.svg');
    }
    
    .cocktail_hour {
        background-image: url('/main_page/images/map/cocktail_hour.svg');
    }

    .dinner {
        background-image: url('/main_page/images/map/dinner.svg');
    }

    .gate_lodge {
        background-image: url('/main_page/images/map/gate_lodge.svg');
    }

    .holiday{
        background-image: url('/main_page/images/map/holidays.svg');
    }

    .scotland {
        background-image: url('/main_page/images/map/scotland.svg');
    }

    .palma {
        background-image: url('/main_page/images/map/balearic-islands-spain.svg');
    }

    .milan {
        background-image: url('/main_page/images/map/duomo-di-milano-church.svg');
    }

    .big_ben {
        background-image: url('/main_page/images/map/bigben.svg');
    }

    .london_eye {
        background-image: url('/main_page/images/map/london-eye-monument.svg');
    }

    .disney {
        background-image: url('/main_page/images/map/disney.svg');
    }

    .forest {
        background-image: url('/main_page/images/map/forest.svg');
    }
    

    .mapboxgl-popup {
        max-width: 200px;
    }

    /* Style map popups with black text */
.mapboxgl-popup-content {
    color: black;
}

/* Ensure popup close button is visible */
.mapboxgl-popup-close-button {
    color: black;
}