.map-section{
    width:100%;
    height:100vh;
    position:relative;
    background:
        radial-gradient(circle at top,#12355e 0%,#07111f 70%);
    overflow:hidden;
}

/* WORLD MAP */

.world-map{
    position:absolute;
    inset:0;
    background:url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg') center center no-repeat;
    background-size:88%;
    opacity:0.18;
    animation:mapFloat 12s ease-in-out infinite;
    filter:drop-shadow(0px 0px 20px rgba(0,255,255,0.12));
}

@keyframes mapFloat{
    0%{transform:scale(1) translateY(0px);}
    50%{transform:scale(1.02) translateY(-8px);}
    100%{transform:scale(1) translateY(0px);}
}

/* TITLE */

.heading{
    position:absolute;
    top:40px;
    width:100%;
    text-align:center;
    color:#fff;
    z-index:5;
	font-family: 'Work Sans', sans-serif;
}

.heading h1{
    font-size:40px;
    font-weight:700;
    letter-spacing:2px;
	font-family: 'Work Sans', sans-serif;
}

.heading p{
    margin-top:5px;
    color:#9db7d2;
    font-size:18px;
	font-family: 'Work Sans', sans-serif;
	text-align:center;
}

/* LEGEND */

.legend{
    position:absolute;
    left:50px;
    bottom:50px;
    z-index:10;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(14px);
    padding:24px 28px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.08);
}

.legend-item{
    display:flex;
    align-items:center;
    margin:16px 0;
    color:#fff;
    font-size:16px;
    font-weight:500;
}

.legend-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    margin-right:12px;
}

.manufacturing{
    background:#00d084;
    box-shadow:0 0 15px #00d084;
}

.client{
    background:#ff7b00;
    box-shadow:0 0 15px #ff7b00;
}

/* COUNTRY POINTS */

.point{
    position:absolute;
    width:18px;
    height:18px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    opacity:0;
    animation:showPoint 1s forwards;
}

.point::before{
    content:'';
    position:absolute;
    inset:-12px;
    border-radius:50%;
    border:2px solid currentColor;
    animation:ripple 2s infinite;
    opacity:0.8;
}

.point.client-point{
    background:#ff7b00;
    color:#ff7b00;
    box-shadow:0 0 18px #ff7b00;
}

.point.manufacturing-point{
    background:#00d084;
    color:#00d084;
    box-shadow:0 0 18px #00d084;
}

@keyframes ripple{
    0%{
        transform:scale(0.5);
        opacity:1;
    }
    100%{
        transform:scale(2);
        opacity:0;
    }
}

@keyframes showPoint{
    from{
        opacity:0;
        transform:translate(-50%,-50%) scale(0.2);
    }
    to{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
}

/* LABEL */

.label{
    position:absolute;
    top:-58px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 16px;
    border-radius:30px;
    white-space:nowrap;
    font-size:14px;
    font-weight:600;
    color:#fff;
    backdrop-filter:blur(10px);
    letter-spacing:0.4px;
    animation:floatLabel 3s ease-in-out infinite;
	font-family: 'Work Sans', sans-serif;
}

.client-label{
    background:rgba(255,123,0,0.2);
    border:1px solid rgba(255,123,0,0.6);
	font-family: 'Work Sans', sans-serif;
}

.manufacturing-label{
    background:rgba(0,208,132,0.2);
    border:1px solid rgba(0,208,132,0.6);
}

@keyframes floatLabel{
    0%{transform:translateX(-50%) translateY(0px);}
    50%{transform:translateX(-50%) translateY(-8px);}
    100%{transform:translateX(-50%) translateY(0px);}
}

/* COUNTRY ANIMATION */

.country{
    opacity:0;
}

.country.active{
    opacity:1;
    transition:1s ease;
}

/* RESPONSIVE */

@media(max-width:768px){

    .heading h1{
        font-size:34px;
    }

    .heading p{
        font-size:14px;
        padding:0 20px;
    }

    .legend{
        left:20px;
        bottom:20px;
        padding:18px;
    }

    .world-map{
        background-size:120%;
    }
}