/*==============================================
    Office Location
===============================================*/

.office-location {
    position: relative;
    display: block;
    padding: 0 0 120px;
    z-index: 2;
    font-family: 'Poppins', sans-serif;
}

.office-location__inner {
    position: relative;
    display: block;
    background-color: var(--tanspot-black);
    border-radius: 20px;
    z-index: 1;
}

.office-location__location {
    position: relative;
    display: block;
    max-width: 1030px;
    min-height: 470px;
    margin: 0 auto 0;
    z-index: 1;
}

.office-location__map {
    position: absolute;
    top: 35px;
    left: 25px;
    opacity: .15;
    z-index: -1;
}

.office-location__map img {
    width: auto;
}

/* Marker posisi */
.office-location__location-single.style1 {
    top: 118px;
    left: 123px;
    position: absolute;
}

.office-location__location-single.style2 {
    top: 175px;
    left: 205px;
    position: absolute;
}

.office-location__location-single.style3 {
    top: 183px;
    left: 500px;
    position: absolute;
}

.office-location__location-single.style4 {
    bottom: 40px;
    left: 280px;
    position: absolute;
}

.office-location__location-single.style5 {
    bottom: 193px;
    left: 595px;
    position: absolute;
}

.office-location__location-single.style6 {
    top: 240px;
    right: 208px;
    position: absolute;
}

.office-location__location-single.style7 {
    bottom: 67px;
    right: 152px;
    position: absolute;
}

.office-location__location-single.style8 {
    top: 117px;
    right: 65px;
    position: absolute;
}

.office-location__location-single.style9 {
    top: 139px;
    right: 220px;
    position: absolute;
}

/* Wrapper marker dan teks */
.office-location__location-single {
    text-align: center;
    /* Agar <h4> center di bawah marker */
}

/* Marker bulat */
.office-location__location-single .round-box {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background: var(--tanspot-base);
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
}

.office-location__location-single .round-box::before,
.office-location__location-single .round-box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 60%);
    animation: ripple 3s infinite;
}

.office-location__location-single .round-box::after {
    animation-delay: .6s;
}

.office-location__location-single .round-box .bdr {
    position: absolute;
    top: -7px;
    left: -7px;
    right: -7px;
    bottom: -7px;
    border: 2px solid var(--tanspot-base);
    border-radius: 50%;
}

/* Content box – hanya menampilkan H4 */
.office-location__location-single .content-box {
    position: static;
    background: transparent;
    padding: 5px 0 0;
    border: none;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1;
    transition: none !important;
}

/* Hilangkan semua elemen lain */
.office-location__location-single .content-box .img-box,
.office-location__location-single .content-box .text-box p,
.office-location__location-single .content-box::before,
.office-location__location-single .content-box::after {
    display: none !important;
}

/* H4 label lokasi */
.office-location__location-single .content-box .text-box h4 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 10px 0 0;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Poppins', sans-serif;
}

/* Ripple animation keyframes */
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }

    100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}