/*=========================================
    LOCATIONS
=========================================*/

.locations{

    position:relative;

    overflow:hidden;

    padding:100px 20px;

    background:
        linear-gradient(
            180deg,
            #08111c 0%,
            #0b1623 50%,
            #08111c 100%
        );

}

.locations::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 15% 20%,
        rgba(0,170,255,.10),
        transparent 30%),

        radial-gradient(circle at 85% 80%,
        rgba(255,193,7,.08),
        transparent 35%);

    pointer-events:none;

}

.locations-container{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:auto;

}

/*****************************************/

.locations-header{

    max-width:760px;

    margin:auto auto 60px;

    text-align:center;

}

.locations-tag{

    display:inline-block;

    color:#FFD54A;

    letter-spacing:3px;

    font-size:.8rem;

    text-transform:uppercase;

}

.locations-header h2{

    margin:18px 0;

    color:#FFF;

    line-height:1.1;

    font-size:clamp(2rem,6vw,3.7rem);

}

.locations-header p{

    color:#BFC8D3;

    line-height:1.8;

}

/*****************************************/

.locations-panel{

    position:relative;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

    padding:35px;

    border-radius:34px;

    overflow:hidden;

    background:

        linear-gradient(
            160deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.04)
        );

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.10);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.15),

        0 25px 70px rgba(0,0,0,.35);

}

.locations-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(255,255,255,.08),
        transparent 45%);

    pointer-events:none;

}

/*****************************************/

.location-pill{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border-radius:999px;

    overflow:hidden;

    text-decoration:none;

    color:white;

    background:

        rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.location-pill::before{

    content:"";

    position:absolute;

    left:-150%;

    top:0;

    width:120%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.22),

            transparent

        );

    transition:.7s;

}

.location-pill:hover::before{

    left:130%;

}

.location-pill span{

    font-size:18px;

}

.location-pill:hover{

    transform:translateY(-4px);

    border-color:#FFD54A;

    background:

        rgba(255,255,255,.12);

    box-shadow:

        0 15px 35px rgba(0,0,0,.30);

}

/*****************************************/

@media(max-width:768px){

.locations{

padding:80px 16px;

}

.locations-panel{

padding:22px;

gap:12px;

}

.location-pill{

width:100%;

justify-content:center;

padding:16px;

}

}