/* Style for the map container */
#map {
    height: 400px;
    width: 100%;
    border-radius: 1rem; /* Rounded corners for the map */
    border: 2px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
/* Utility for 3D shadow effect */
.shadow-3xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Styles for the stacked image effect in the Hero section */
.stacked-image-container {
    position: relative;
    width: 100%; /* Or fixed width */
    padding-bottom: 75%; /* Aspect ratio 4:3 (height is 75% of width) */
    /* You can adjust padding-bottom to match the aspect ratio of your images */
}
.stacked-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%; /* Adjusted width */
    height: 80%; /* Adjusted height */
    object-fit: cover;
    border-radius: 0rem; /* rounded-3xl */
    border: 7px solid white; /* Adjusted border width */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* shadow-2xl */
    transition: all 0.3s ease-in-out; /* Smooth transitions */
}
/* Individual stack positions and rotations */
.stacked-image:nth-child(1) { /* Corresponds to images/hero1.jpg - Backmost image (z-index 5) */
    transform: translate(25%, 6%) rotate(-4deg);
    z-index: 5; /* Lower z-index to be far back */
    opacity: 1; 
}
.stacked-image:nth-child(2) { /* Corresponds to images/hero3.jpg - Middle back (z-index 10) */
    transform: translate(05%, -26%) rotate(-5deg);
    z-index: 30;
    opacity: 1; 
}
.stacked-image:nth-child(3) { /* Corresponds to images/hero2.jpg - Main image (z-index 30) */
    transform: translate(0, 0) rotate(-10deg);
    z-index: 40;
    opacity: 1;
}
.stacked-image:nth-child(4) { /* Corresponds to images/hero4.jpg - Middle front (z-index 20) */
    transform: translate(-10%, 27%) rotate(7deg);
    z-index: 20;
    opacity: 1;
}
.stacked-image:nth-child(5) { /* Corresponds to images/hero5.jpg - Frontmost (z-index 40) - Adjusting z-index for front-most visual */
    transform: translate(-34%, -12%) rotate(-10deg);
    z-index: 10; 
    opacity: 1; /* Keeping it opaque for better visibility */
}

/* Hover effect for the entire container to subtly shift the stack (Speard a little more) */
.stacked-image-container:hover .stacked-image:nth-child(1) {
    transform: translate(30%, 8%) rotate(-6deg); /* More exaggerated shift */
}
.stacked-image-container:hover .stacked-image:nth-child(2) {
    transform: translate(10%, -30%) rotate(-10deg);
}
.stacked-image-container:hover .stacked-image:nth-child(3) {
    transform: translate(0, 0) rotate(0deg); 
}
.stacked-image-container:hover .stacked-image:nth-child(4) {
    transform: translate(-15%, 35%) rotate(10deg); /* More exaggerated shift */
}
.stacked-image-container:hover .stacked-image:nth-child(5) {
    transform: translate(-40%, -18%) rotate(0deg); /* More exaggerated shift */
}