/*==================================================
PPA AIRPORT INFORMATION
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Poppins,sans-serif;
    background:#071827;
    color:#fff;
}

.airport-hero{

    position:relative;

    width:100vw;

    margin-left:calc(50% - 50vw);

    min-height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    radial-gradient(circle at 50% 0%,
    rgba(28,102,199,.30),
    transparent 45%),

    linear-gradient(
    180deg,
    #061522,
    #081d30,
    #061522);

}

/*==========================
WORLD MAP
==========================*/

.airport-map{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

    animation:mapFloat 28s ease-in-out infinite;

}
@keyframes mapZoom{

    0%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.08);

    }

    100%{

        transform:translate(-50%,-50%) scale(1);

    }

}


.airport-map svg *{

    fill:none !important;

    stroke:#D4AF37 !important;

    stroke-width:.9 !important;

    stroke-linecap:round;

    stroke-linejoin:round;

}

/*==========================
OVERLAY
==========================*/

.airport-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(7,24,39,.05),

    rgba(7,24,39,.45) 65%,

    rgba(7,24,39,.88) 100%);

    z-index:2;

}

/*==========================
CONTENT
==========================*/

.airport-container{

    position:relative;

    z-index:10;

    width:min(1000px,92%);

    text-align:center;

}

.airport-container:before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:50%;

    top:-120px;

    transform:translateX(-50%);

    background:#1e63c5;

    border-radius:50%;

    filter:blur(170px);

    opacity:.12;

    z-index:-1;

}

/*==========================
BADGE
==========================*/

.airport-badge{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

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

    backdrop-filter:blur(12px);

    color:#FFD54F;

    letter-spacing:2px;

    font-size:12px;

    font-weight:600;

    margin-bottom:35px;

}

/*==========================
TITLE
==========================*/

.airport-container h1{

    font-size:88px;

    font-weight:800;

    line-height:.95;

    letter-spacing:-2px;

    margin-bottom:28px;

    color:#ffffff;

    text-shadow:

        0 2px 8px rgba(0,0,0,.35),

        0 0 18px rgba(255,215,0,.08);

}

/*==========================
SUBTITLE
==========================*/

.airport-container p{

    max-width:760px;

    margin:auto;

    font-size:21px;

    line-height:1.9;

    color:#9FB3C8;

}

/*==========================
SEARCH
==========================*/

.airport-search{

    width:760px;

    max-width:100%;

    margin:55px auto 0;

    display:flex;

    align-items:center;

    height:74px;

    padding:0 28px;

    background:#fff;

    border-radius:18px;

    box-shadow:

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

    transition:.35s;

}

.airport-search:hover,

.airport-search:focus-within{

    box-shadow:

    0 0 0 1px rgba(98,175,255,.30),

    0 35px 90px rgba(0,0,0,.45),

    0 0 40px rgba(98,175,255,.15);

}

.airport-search svg{

    width:22px;

    height:22px;

    stroke:#7e8794;

    stroke-width:2;

    fill:none;

}

.airport-search input{

    flex:1;

    border:none;

    outline:none;

    padding-left:18px;

    font-size:18px;

    font-family:inherit;

    background:none;

}

.airport-search input::placeholder{

    color:#9ca3af;

}

/*==========================
POPULAR
==========================*/

.airport-popular{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;

}

.airport-popular a{

    color:#90A9C1;

    text-decoration:none;

    transition:.3s;

    font-size:15px;

    cursor:pointer;

}

.airport-popular a:hover{

    color:#FFD54F;

}
/*==========================
ANIMATIONS
==========================*/

@keyframes mapFloat{

    0%{

        transform:scale(1) translateY(0px);

    }

    50%{

        transform:scale(1.02) translateY(-10px);

    }

    100%{

        transform:scale(1) translateY(0px);

    }

}
@keyframes mapZoom{

    0%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.08);

    }

    100%{

        transform:translate(-50%,-50%) scale(1);

    }

}
@keyframes glowPulse{

    0%{

        filter:
        drop-shadow(0 0 4px rgba(98,175,255,.15))
        drop-shadow(0 0 10px rgba(98,175,255,.10));

    }

    50%{

        filter:
        drop-shadow(0 0 8px rgba(98,175,255,.35))
        drop-shadow(0 0 20px rgba(98,175,255,.25))
        drop-shadow(0 0 35px rgba(98,175,255,.15));

    }

    100%{

        filter:
        drop-shadow(0 0 4px rgba(98,175,255,.15))
        drop-shadow(0 0 10px rgba(98,175,255,.10));

    }

}

/*==========================
SVG GLOW
==========================*/

.airport-map svg{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:135%;

    height:135%;

    max-width:none;

    opacity:.32;

    filter:
        drop-shadow(0 0 4px rgba(255,215,0,.18))
        drop-shadow(0 0 12px rgba(255,215,0,.10));

    animation:mapZoom 15s ease-in-out infinite;

}

/*==========================
DRAW EFFECT
==========================*/



@keyframes drawMap{

    to{

        stroke-dashoffset:0;

    }

}

/*==========================
BOTTOM FADE
==========================*/

.airport-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    background:linear-gradient(

        transparent,

        #071827

    );

    z-index:3;

}

/*==========================
SCROLL INDICATOR
==========================*/

.airport-hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:28px;

    height:48px;

    border:2px solid rgba(255,255,255,.25);

    border-radius:30px;

    z-index:15;

}

.airport-hero-scroll::before{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#FFD54F;

    left:50%;

    transform:translateX(-50%);

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        top:8px;

        opacity:0;

    }

    30%{

        opacity:1;

    }

    100%{

        top:26px;

        opacity:0;

    }

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:1200px){

    .airport-container h1{

        font-size:72px;

    }

}

@media(max-width:992px){

    .airport-container h1{

        font-size:60px;

    }

    .airport-container p{

        font-size:18px;

    }

    .airport-search{

        width:100%;

    }

}

@media (max-width:768px){

    .airport-hero{

        min-height:100vh;

    }

    .airport-map{

        display:flex;
        justify-content:center;
        align-items:center;

    }

    .airport-map svg{

        position:absolute;

        left:20%;

        top:50%;

        transform:translate(-50%,-50%);

        width:500%;

        height:auto;

        max-width:none;

        opacity:.40;
        animation:mapZoom 12s ease-in-out infinite;

    }

    .airport-container{

        width:92%;
        padding:0 18px;

    }

    .airport-container h1{

        font-size:44px;

    }

    .airport-container p{

        font-size:16px;

    }

}

@media(max-width:480px){

    .airport-container h1{

        font-size:34px;

    }

    .airport-container p{

        font-size:15px;

    }

}

@media(min-width:769px) and (max-width:1024px){

    .airport-map svg{

        width:180%;

    }

}