.map-container {
    width: 1000px; 
    height: 500px;
    perspective: 2000px;
    opacity: 0.9;
    /* background: black; */
}

.isometric-group {
    position: absolute;
    transform: rotateX(60deg) rotateY(-0deg) rotate(40deg);
    transform-style: preserve-3d;
}

.hexagon {
    width: 400px;
    height: 346.41px;
    background-color: #FFF;
    clip-path: polygon(
        25% 0%, 
        75% 0%, 
        100% 50%, 
        75% 100%, 
        25% 100%, 
        0% 50%
    );
    position: relative;
}

.rectangle {
    width: 200px;
    height: 250px;
    background-color: #FFF;
    position: absolute;
    transform-origin: center;
}

.black-bg {
    background-color: black;
}

.red-background {
    background-color: var(--dark-red);
}

.rectangle.top {
    top: calc(50% - 172px);
    left: 50%;
    transform: translate(-50%, -100%);
}

.rectangle.top-right {
    top: calc(50% - 23px);
    left: calc(50% + 258px);
    transform: translate(-50%, -100%) rotate(60deg);
}

.rectangle.bottom-right {
    top: calc(50% + 24px);
    left: calc(50% + 257px);
    transform: translate(-50%, 0) rotate(-60deg);
}

.rectangle.bottom {
    top: calc(50% + 172px);
    left: 50%;
    transform: translate(-50%, 0);
}

.rectangle.bottom-left {
    top: calc(50% + 23px);
    left: calc(50% - 258px);
    transform: translate(-50%, 0) rotate(60deg);
}

.rectangle.top-left {
    top: calc(50% - 24px);
    left: calc(50% - 258px);
    transform: translate(-50%, -100%) rotate(-60deg);
}

.layer-1{
    left: 300px;
    bottom: 120px;
    z-index: 20;
}
/* .layer-2{
    left: 300px;
    bottom: 119px;
    z-index: 19;
}
.layer-3{
    left: 300px;
    bottom: 118px;
    z-index: 18;
}
.layer-4{
    left: 299px;
    bottom: 117px;
    z-index: 17;
}
.layer-5{
    left: 299px;
    bottom: 116px;
    z-index: 16;
}
.layer-6{
    left: 299px;
    bottom: 115px;
    z-index: 15;
}
.layer-7{
    left: 298px;
    bottom: 114px;
    z-index: 14;
}
.layer-8{
    left: 298px;
    bottom: 113px;
    z-index: 13;
}
.layer-9{
    left: 298px;
    bottom: 112px;
    z-index: 12;
}
.layer-10{
    left: 297px;
    bottom: 111px;
    z-index: 11;
}
.layer-11{
    left: 297px;
    bottom: 110px;
    z-index: 10;
}
.layer-12{
    left: 297px;
    bottom: 109px;
    z-index: 9;
}
.layer-13{
    left: 296px;
    bottom: 108px;
    z-index: 8;
}
.layer-14{
    left: 296px;
    bottom: 107px;
    z-index: 7;
}
.layer-15{
    left: 296px;
    bottom: 106px;
    z-index: 6;
}
.layer-16{
    left: 295px;
    bottom: 105px;
    z-index: 5;
}
.layer-17{
    left: 295px;
    bottom: 104px;
    z-index: 4;
}
.layer-18{
    left: 295px;
    bottom: 103px;
    z-index: 3;
}
.layer-19{
    left: 294px;
    bottom: 102px;
    z-index: 2;
} */
.layer-20{
    left: 295px;
    bottom: 100px;
    z-index: 2;
    /* transform: translateZ(100px); */
}

.layer-shadow{
    left: 292.5px;
    bottom: 80px;
    z-index: 1;
    filter: blur(50px);
}

.circle {
    border-radius: 50%;
    width: 190px;
    height: 240px;
    background-color: var(--light-red);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.opaque {
    opacity: 1 !important;
}

.hover-zone {
    border-radius: 50%;
    width: 190px;
    height: 240px;
    background-color: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}