/* General styles */

/* Example positioning for callouts */
.callout-one {
    top: 310px;
    left: -219px;
}

.callout-two {
    top: 110px;
    left: -225px;
}

.callout-three {
    top: -100px;
    left: -124px;
}

.callout-four {
    top: 110px;
    right: -981px;
}

.callout-five {
    top: 140px;
    right: -700px;
}

.callout-six {
    top: 70px;
    right: -781px;
}

.callout-seven {
    top: 330px;
    right: -852px;
}

.callout-eight {
    top: 30px;
    right: -100px;
}

.callout-nine {
    top: 140px;
    right: -846px;
}

.small_infographic_geo_lab .callout-one {
    top: 310px;
    left: -290px;
}

.small_infographic_geo_lab .callout-two {
    top: 130px;
    left: -280px;
}

.small_infographic_geo_lab .callout-three {
    top: -110px;
    left: -74px;
}

.small_infographic_geo_lab .callout-four {
    top: 50px;
    right: -820px;
}

.small_infographic_geo_lab .callout-five {
    top: 140px;
    right: -700px;
}

.small_infographic_geo_lab .callout-six {
    top: 70px;
    right: -781px;
}

.small_infographic_geo_lab .callout-seven {
    top: 330px;
    right: -852px;
}

.small_infographic_geo_lab .callout-eight {
    top: 30px;
    right: -100px;
}

.small_infographic_geo_lab .callout-nine {
    top: 140px;
    right: -846px;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Familjen Grotesk', sans-serif;
    background-color: #000;
}

/* Section styles */
section {
    position: relative;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-transform: uppercase;
    overflow: hidden;
}

.kenji_x1_image-container {
    position: relative;
    width: 600px;
    height: 420px;
    margin: 130px auto;
}

.kenji_x1_background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.kenji_x1_image-container.small_infographic_kenji {
    background-image: url('../images/geo-lab/Geo_Lab_Platform_v2_A1.png');
}
/* Kenji dot positions */
.small_infographic_kenji .kenjix1_point_dot.left-1 { display: block; top: 85%; left: 40%; }
.small_infographic_kenji .kenjix1_point_dot.left-2 { display: block; top: 45%; left: 35%; }
.small_infographic_kenji .kenjix1_point_dot.left-3 { display: block; top: 15%; left: 55%; }
.small_infographic_kenji .kenjix1_point_dot.left-4 { display: block; top: 33%; right: 37%; }
.small_infographic_kenji .kenjix1_point_dot.right-1 { display: block; top: 46%; left: 93%; }
.small_infographic_kenji .kenjix1_point_dot.right-2 { display: block; top: 34%; right: 51%; }
.small_infographic_kenji .kenjix1_point_dot.right-3 { display: block; bottom: 18.17%; right: 32.5%; }
.small_infographic_kenji .kenjix1_point_dot.right-4 { display: block; top: 25%; left: 40%; }
.small_infographic_kenji .kenjix1_point_dot.right-5 { display: block; top: 50%; right: 28.8%; }

    
/* Callout styles */
.kenjix1_point_dot {
    display: none;
    position: absolute;
    cursor: pointer;
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #eedc34;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pulse-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: inherit;
    z-index: 2; 
    animation: pulse 3s linear infinite;
    pointer-events: none;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

.kenjix1_point_dots_callouts {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.kenjix1_point_dot_callout {
    width: 250px;
    max-height: 250px;
    overflow-y: auto; 
    display: none;
    padding: 20px;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    position: absolute;
}

.kenjix1_point_dot_callout h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.kenjix1_point_dot_callout p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;
}

.kenjix1-callout.is-active, .dot.is-active:hover + .kenjix1-callout {
    display: block;
}

.kenjix1_point_dot_callout h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.kenjix1_point_dot_callout p {
    margin: 0;
    font-size: 12px;
    font-weight: 200;
    text-transform: none;
    text-align: justify;
}

/* Dot styles */
.kenjix1_point_dot_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.kenjix1_point_dot {
    position: absolute;
    cursor: pointer;
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #eedc34;
    animation: pulse 3s infinite alternate;
    z-index: 3;
}

/* Left side dots */
.kenjix1_point_dot.left-1 {
    left: 170px;
    animation: none;
}

.kenjix1_point_dot.left-2 {
    top: 210px;
    left: 155px;
    animation: none;
}

.kenjix1_point_dot.left-3 {
    top: 50px;
    left: 380px;
    animation: none;
}

.kenjix1_point_dot.left-4 {
    top: 135px;
    right: 220px;
    animation: none;
}

/* Right side dots */
.kenjix1_point_dot.right-1 {
    top: 195px;
    left: 280px;
    animation: none;
}

.kenjix1_point_dot.right-2 {
    top: 145px;
    left: 275px;
    animation: none;
}

.kenjix1_point_dot.right-3 {
    bottom: 18.17%;
    right: 32.5%;
    animation: none;
}

.kenjix1_point_dot.right-4 {
    top: 110px;
    right: 340px;
    animation: none;
}

.kenjix1_point_dot.right-5 {
    top: 200px;
    right: 173px;
    animation: none;
}

.kenjix1_point_dot:hover, .kenjix1_point_dot.is-active {
    background-color: #56ffda;
    transform: scale(1.2);
    border: 1px solid #ADD8E6;
}

.kenjix1_point_dot::before, .kenjix1_point_dot::after {
    content: '';
    position: absolute;
    background-color: #fff;
    z-index: -1;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease;
}

/* Show lines on hover and when active */
.kenjix1_point_dot:hover::before, .kenjix1_point_dot:hover::after,
.kenjix1_point_dot.is-active::before, .kenjix1_point_dot.is-active::after {
    opacity: 1;
}

/* Change line color on click */
.kenjix1_point_dot.is-clicked::before, .kenjix1_point_dot.is-clicked::after {
    background-color: rgb(173, 216, 230);
}

/* Connect left dots to respective callouts */
.kenjix1_point_dot.left-1::before {
    width: 40px;
    height: 1px;
    top: 30px;
    right: 3px;
    transform: rotate(-45deg);
}

.kenjix1_point_dot.left-1::after {
    width: 150px;
    height: 1px;
    top: 44px;
    right: 37px;
    transform: rotate(0deg);
}

.kenjix1_point_dot.left-2::before {
    width: 152px; 
    height: 1px;
    top: 8px; 
    right: 15px; 
    transform: rotate(0deg);
}

.kenjix1_point_dot.left-3::before {
    width: 100px; 
    height: 1px; 
    top: -34px;
    left: -84px;
    transform: rotate(45deg); 
}

.kenjix1_point_dot.left-3::after {
    width: 100px; 
    height: 1px; 
    top: 10px; 
    left: 100px;
    transform: rotate(45deg); 
}

/* Straight portion */
.kenjix1_point_dot.left-3::after {
    width: 100px;
    height: 1px; 
    top: -69px;
    left: -169px;
    transform: rotate(0deg);
}

/* Connect right dots to respective callouts */
.kenjix1_point_dot.right-1::before {
    width: 130px; 
    height: 1px; 
    top: 7px;
    left: 14px;
    transform: rotate(0deg);
}

.kenjix1_point_dot.right-2::before {
    width: 200px;
    height: 1px;
    top: 7px;
    left: 14px;
    transform: rotate(0deg);
}

.kenjix1_point_dot.right-3::before {
    width: 100px; 
    height: 1px; 
    top: 53px;
    left: 77px;
    transform: rotate(0deg);
}

.kenjix1_point_dot.right-3::after {
    width: 70px;
    height: 1px; 
    top: 36px;
    left: 12px;
    transform: rotate(30deg);
}

.kenjix1_point_dot.right-4::before {
    width: 120px;
    height: 1px;
    top: 7px;
    left: -120px;
    transform: rotate(0deg);
}

.kenjix1_point_dot.right-5::before {
    width: 140px;
    height: 1px;
    top: 7px;
    left: 14px;
    transform: rotate(0deg);
}

.kenjix1_point_dot.left-4::before {
    width: 160px;
    height: 1px;
    top: 7px;
    left: 14px;
    transform: rotate(0deg);
}

/* Media query for screens below 960px */
@media (max-width: 960px) {
    .kenji_x1_image-container {
        width: 100%;
        max-width: 600px;
        height: auto;
        min-height: 550px;
        background-size: contain;
        background-repeat: no-repeat;
        padding-bottom: 50%; /* Adjust this value to match your image aspect ratio */
        margin: 20px auto;
    }

    .kenjix1_point_dots_callouts {
        position: static;
        margin-top: 20px;
    }

    .kenjix1_point_dot_callout {
        position: static;
        width: 100%;
        max-width: 600px;
        max-height: none;
        display: none;
        margin: 20px auto;
        border: 1px solid #fff;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        top: auto;
        z-index: 1;
        left: 0;
        margin: 0;
    }

    .kenjix1_point_dot_callout.default-active {
        display: block;
    }

    /* Reset callout positions */
    /* .callout-one, .callout-two, .callout-three, .callout-four, .callout-five, .callout-six {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    } */

    /* Adjust dot positions for responsiveness */
    .kenjix1_point_dot {
        width: 12px;
        height: 12px;
    }

    .pulse-animation {
        display: block;
    }

    .kenjix1_point_dot.left-1 { top: 65%; left: 30%; }
    .kenjix1_point_dot.left-2 { top: 50%; left: 25.83%; }
    .kenjix1_point_dot.left-3 { top: 11.9%; left: 63.33%; }
    .kenjix1_point_dot.left-4 { top: 15.9%; right: 67.77%; }
    .kenjix1_point_dot.right-1 { top: 50.24%; left: 68.33%; }
    .kenjix1_point_dot.right-2 { top: 34.52%; left: 45.83%; }
    .kenjix1_point_dot.right-3 { bottom: 36.95%; right: 32.33%; }
    .kenjix1_point_dot.right-4 { top: 70%; left: 28.83%; }
    .kenjix1_point_dot.right-5 { bottom: 42.95%; right: 32.33%; }

    /* Hide connection lines on mobile */
    .kenjix1_point_dot::before, .kenjix1_point_dot::after {
        display: none;
    }

    /* Hide white callouts on mobile */
    .kenjix1_point_dot_callout {
        display: none;
    }
}

/* Media query for screens below 960px */
@media (max-width: 960px) {
    .kenji_x1_image-container {
        width: 100%;
        max-width: 600px;
        height: auto;
        min-height: 550px;
        background-size: contain;
        background-repeat: no-repeat;
        padding-bottom: 50%;
        margin: 20px auto;
    }

    .kenjix1_point_dots_callouts {
        position: static;
        margin-top: 20px;
    }

    .kenjix1_point_dot_callout {
        position: static;
        width: 100%;
        max-width: 600px;
        max-height: none;
        display: none;
        margin: 20px auto;
        border: 1px solid #fff;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        top: auto;
        z-index: 1;
        left: 0;
        margin: 0;
    }

    .kenjix1_point_dot_callout.default-active {
        display: block;
    }

    /* Reset callout positions */
    /* .callout-one, .callout-two, .callout-three, .callout-four, .callout-five, .callout-six {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    } */

    /* Adjust dot positions for responsiveness */
    .kenjix1_point_dot {
        width: 12px;
        height: 12px;
    }

    /*.kenjix1_point_dot.left-1 { top: 65% !important; left: 30% !important; }
    .kenjix1_point_dot.left-2 { top: 50%; left: 25.83%; }
    .kenjix1_point_dot.left-3 { top: 11.9%; left: 63.33%; }
    .kenjix1_point_dot.right-1 { top: 50.24%; left: 68.33%; }
    .kenjix1_point_dot.right-2 { top: 34.52%; left: 45.83%; }
    .kenjix1_point_dot.right-3 { bottom: 36.95% !important; right: 32.33% !important; }*/

    /* Hide connection lines on mobile */
    .kenjix1_point_dot::before, .kenjix1_point_dot::after {
        display: none;
    }

    /* Hide white callouts on mobile */
    .kenjix1_point_dot_callout {
        display: none;
    }
}

@media (min-width: 375px) and (max-width: 480px) {
    .small_infographic_kenji .kenjix1_point_dot.left-1 { top: 33% !important; left: 30% !important; }
    .small_infographic_kenji .kenjix1_point_dot.left-2 { top: 18% !important; left: 28% !important; }
    .small_infographic_kenji .kenjix1_point_dot.left-3 { top: 5% !important; left: 42% !important; }
    .small_infographic_kenji .kenjix1_point_dot.right-1 { top: 17% !important; left: 90% !important; }
    }
}

@media (min-width: 480px) and (max-width: 600px) {
    .small_infographic_kenji .kenjix1_point_dot.left-1 { top: 42% !important; left: 32% !important; }
    .small_infographic_kenji .kenjix1_point_dot.left-2 { top: 18% !important; left: 28% !important; }
    .small_infographic_kenji .kenjix1_point_dot.left-3 { top: 5% !important; left: 42% !important; }
    .small_infographic_kenji .kenjix1_point_dot.right-1 { top: 17% !important; left: 90% !important; }
    }
}

@media (min-width: 600px) and (max-width: 960px) {
    .small_infographic_kenji .kenjix1_point_dot.left-1 { top: 33% !important; left: 30% !important; }
    .small_infographic_kenji .kenjix1_point_dot.left-2 { top: 18% !important; left: 28% !important; }
    .small_infographic_kenji .kenjix1_point_dot.left-3 { top: 5% !important; left: 42% !important; }
    .small_infographic_kenji .kenjix1_point_dot.right-1 { top: 17% !important; left: 90% !important; }
    }
}