/* Container for the images */
.image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 900px;
}

/* Base Image */
.main-image {
    width: 100%;
    display: block;
}

/* Hover Image Layer (Handles smooth transitions) */
.fade-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0; /* Starts fully transparent */
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in */
}

/* Define multiple hover areas */
.hover-area {
    position: absolute;
    cursor: pointer;
}

/* Example positioning for hover areas (adjust as needed) */
#hover-1 {
    top: 41%;
    left: 5%;
    width: 7%;
    height: 7%;
    background: rgba(255, 0, 0, 0.3); /* Red for visualization */
}
#hover-2 {
    top: 82.5%;
    left: 6%;
    width: 7%;
    height: 7%;
    background: rgba(0, 255, 0, 0.3); /* Green for visualization */
}
#hover-1a {
    top: 14%;
    left: 85%;
    width: 7%;
    height: 7%;
    background: rgba(0, 0, 255, 0.3); /* Blue */
}
#hover-1b {
    top: 26%;
    left: 85%;
    width: 7%;
    height: 7%;
    background: rgba(255, 255, 0, 0.3); /* Yellow */
}
#hover-1c {
    top: 41%;
    left: 85%;
    width: 7%;
    height: 7%;
    background: rgba(255, 0, 255, 0.3); /* Purple */
}
#hover-1d {
    top: 57.5%;
    left: 85%;
    width: 7%;
    height: 7%;
    background: rgba(0, 255, 255, 0.3); /* Cyan */
}
#hover-1e {
    top: 67%;
    left: 85%;
    width: 7%;
    height: 7%;
    background: rgba(255, 128, 0, 0.3); /* Orange */
}
#hover-1f {
    top: 74%;
    left: 85%;
    width: 7%;
    height: 7%;
    background: rgba(128, 0, 255, 0.3); /* Violet */
}

/* Hide hover highlights once mouse enters any hover zone */
.hover-zones:hover .hover-area {
    background: transparent;
}