body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
header.banner {
    width: 100%;
    height: 200px; /* Banner height */
    overflow: hidden;
    position: relative;
    background-color: #000;
}
.banner-image {
    width: 100%; /* Full width */
    height: 100%; /* Matches the height of the banner frame */
    object-fit: cover;
}
.separator {
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #8B4513, #F4A460, #8B4513); /* A decorative gradient separator */
    margin: 0;
}
.map-container {
    position: relative;
    width: 100vw;
    height: calc(100vh - 210px); /* Adjust height to account for the banner and separator */
    overflow: hidden;
    top: 0;
}
.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.map-link {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10;
    width: 80px;
    height: 80px;
    background-color: rgba(255, 165, 0, 0.3); /* Semi-transparent orange */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* Hexagon shape */
    border: 2px solid rgba(255, 165, 0, 0.7); /* Visible border */
}
.map-link:hover {
    background-color: rgba(255, 165, 0, 0.6);
    border-color: orange;
}
.hover-text {
    color: black; /* Black font color for better readability */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* Light shadow for slight emphasis */
}

/* Responsive Design */
@media (max-width: 768px) { /* Tablet */
    header.banner {
        height: 150px; /* Smaller banner for tablets */
    }
    .map-link {
        width: 60px; /* Smaller hexagon for tablets */
        height: 60px;
    }
    .separator {
        height: 8px;
    }
    .map-container {
        height: calc(100vh - 158px); /* Adjust for smaller banner and separator */
    }
}
@media (max-width: 480px) { /* Mobile */
    header.banner {
        height: 120px; /* Smaller banner for mobile devices */
    }
    .map-link {
        width: 50px; /* Even smaller hexagon for mobile */
        height: 50px;
    }
    .separator {
        height: 5px;
    }
    .map-container {
        height: calc(100vh - 125px); /* Adjust for mobile */
    }
}
@media (min-width: 1024px) { /* Desktop */
    header.banner {
        height: 200px; /* Standard banner for desktops */
    }
    .map-link {
        width: 80px; /* Larger hexagon for desktops */
        height: 80px;
    }
    .separator {
        height: 10px;
    }
    .map-container {
        height: calc(100vh - 210px); /* Adjust for desktops */
    }
}