@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --clr-blue: #1074c0;
    --clr-light-blue: #bdd9f0;
    --connector-line: var(--clr-light-blue);
}
*:focus-visible {
    outline: yellow solid 3px;
    outline-offset: 4px;
}
.hotspot:focus-visible,
.hotspot[data-hotspot="mobile"]:focus-visible {
    outline: 3px solid yellow;
    outline-offset: 4px;
    background-color: rgba(4, 248, 81, 0.356);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body {
    font-family: Helvetica, sans-serif;
    height: 100%;
    width: 100%;
    margin: 0 auto; /* overflow: hidden; */
}
body main {
    position: relative;
    display: block;
}
body main img {
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
}
body main section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hotspot-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    pointer-events: none;
}
.hotspot {
    position: absolute;
    background: transparent;
    outline: 3px solid white;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.3s ease-in;
    z-index: 5;
}
.hotspot:after {
    content: "";
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background: var(--clr-blue);
    transition: all 0.3s ease-in;
    z-index: 5;
}
.hotspot:before {
    content: "";
    position: absolute;
    background: var(--clr-blue);
    top: 50%;
    left: 50%;
    height: 50px;
    width: 50px;
    opacity: 0;
    border-radius: 50%;
    transition: all 0.3s ease-in;
    z-index: 4;
}
.hotspot[data-hotspot="mobile"] {
    left: 2.5%;
    bottom: 5.05%;
    top: unset;
    right: unset;
    background: linear-gradient(90deg, rgb(1, 58, 190), var(--clr-blue));
    height: 100px;
    width: 100px;
    outline: none;
    margin: 0;
    transition: all 0.3s ease-in;
}
.hotspot[data-hotspot="mobile"]:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    height: 85px;
    width: 85px;
    border: 2px solid white;
    transition: all 0.3s ease-in;
}
.hotspot[data-hotspot="mobile"] img {
    position: absolute;
    height: 60px;
    width: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.hotspot:hover:after,
.hotspot.is-active:after {
    background: rgba(4, 248, 81, 0.356);
} 
.hotspot-container {
    .hotspot[data-hotspot="1"] {
        top: 11.15%;
        right: 42.5%;
    }
    .hotspot[data-hotspot="2"] {
        top: 17.03%;
        right: 49.38%;
    }
    .hotspot[data-hotspot="3"] {
        top: 35.54%;
        right: 43.75%;
    }
    .hotspot[data-hotspot="4"] {
        top: 44.8%;
        right: 50%;
    }
    .hotspot[data-hotspot="5"] {
        top: 59.95%;
        right: 45%;
    }
    .hotspot[data-hotspot="6"] {
        top: 69.2%;
        right: 55%;
    }
    .hotspot[data-hotspot="7"] {
        top: 21.24%;
        right: 35%;
    }
    .hotspot[data-hotspot="8"] {
        top: 55.74%;
        right: 53.75%;
    }
}
.modal {
    position: absolute;
    background: var(--clr-light-blue);
    border-radius: 10px;
    padding: 0.75em;
    max-width: min(300px, 37.5%);
    z-index: 10;
    pointer-events: all;
    color: rgb(0, 47, 113);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}
.modal.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
} /* ── Connector line ────────────────────────────────────── */
.connector-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}
.connector {
    fill: none;
    stroke: var(--connector-line, white);
    stroke-width: 4;
    stroke-dasharray: 0.1 10;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.connector.is-active {
    opacity: 1;
} 

[data-modal="1"] {
    top: 2.52%;
    right: 1.88%;
}
[data-modal="2"] {
    top: 20.19%;
    left: 1.88%;
}
[data-modal="3"] {
    top: 42.07%;
    right: 1.88%;
}
[data-modal="4"] {
    top: 43.75%;
    left: 3.75%;
}
[data-modal="5"] {
    bottom: 41.94%;
    right: 3.75%;
}
[data-modal="6"] {
    bottom: 39.43%;
    left: 1.88%;
}
[data-modal="mobile"] {
    bottom: 5.05%;
    left: 18.75%;
}
[data-modal="7"] {
    top: 33.65%;
    right: 1.88%;
}
[data-modal="8"] {
    bottom: 32.69%;
    left: 1.88%;
} 
@media (max-width: 480px) {
    .modal {
        font-size: 12px;
        padding: 0.5em;
        border-radius: 6px;
    }
    .hotspot {
        height: 20px;
        width: 20px;
    }
    .hotspot:after {
        height: 17px;
        width: 17px;
    }
    .hotspot:before {
        height: 36px;
        width: 36px;
    }
    .hotspot[data-hotspot="mobile"] {
        height: 60px;
        width: 60px;
    }
    .hotspot[data-hotspot="mobile"]:after {
        height: 52px;
        width: 52px;
    }
    .hotspot[data-hotspot="mobile"] img {
        height: 36px;
        width: 36px;
    }
}