/* Head Offices Info cards — shown/hidden by map-script.js via .active */
.office-info-card {
    display: none;
    position: relative;
    max-width: 340px;
    padding: 22px 26px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(4, 22, 62, 0.35);
    color: #0c2461;
}
.office-info-card.active {
    display: block;
    animation: office-card-in 0.3s ease;
}
@keyframes office-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.office-info-card .card-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #0c2461;
    cursor: pointer;
    opacity: 0.55;
}
.office-info-card .card-close:hover {
    opacity: 1;
}
.office-info-card .office-country {
    margin: 0 0 4px;
    font-size: 20px;
    color: #0c2461;
}
.office-info-card .office-company {
    font-weight: 600;
    margin-bottom: 10px;
    color: #4995F4;
}
.office-info-card .office-address {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 10px;
}
.office-info-card .office-phone {
    display: inline-block;
    font-weight: 600;
    color: #0c2461;
    margin-bottom: 14px;
}
.office-info-card .office-maps {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 24px;
    background: #4995F4;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.office-info-card .office-maps:hover {
    background: #FEC845;
    color: #0c2461;
}
.office-info-card .office-apps {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(12, 36, 97, 0.12);
    font-size: 14px;
}
.office-info-card .office-apps-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}
.office-info-card .office-apps a {
    display: inline-block;
    margin-right: 8px;
    padding: 6px 14px;
    border: 1px solid #4995F4;
    border-radius: 24px;
    color: #4995F4;
    font-weight: 600;
}
.office-info-card .office-apps a:hover {
    background: #4995F4;
    color: #fff;
}
.office-info-card .office-apps a {
    margin-bottom: 6px;
}

/* Desktop / laptop: float the card over the globe */
@media (min-width: 992px) {
    .elementor.elementor .e-con.map-head-offices {
        position: relative;
    }
    .map-head-offices .office-info-card {
        position: absolute;
        left: 5%;
        bottom: 8%;
        z-index: 10;
        max-width: min(300px, 42vw);
        max-height: 80%;
        overflow-y: auto;
    }
}

/* Short laptop screens: section is taller than the viewport, so anchor the
   card level with the country list (the area the user is looking at) */
@media (min-width: 992px) and (max-height: 899px) {
    .map-head-offices .office-info-card {
        bottom: auto;
        top: 22%;
        max-height: 62vh;
    }
}

/* Mobile / tablet: card overlays the top of the globe, below the country list */
@media (max-width: 991px) {
    .elementor.elementor .e-con.map-head-offices {
        position: relative;
    }
    .map-head-offices .office-info-card.active {
        position: absolute;
        left: 12px;
        right: 12px;
        max-width: 420px;
        max-height: 60vh;
        overflow-y: auto;
        z-index: 20;
        padding: 20px 22px;
    }
    .office-info-card .card-close {
        padding: 6px 10px; /* bigger tap target */
    }
}