/*==================================================
    NAVBAR - SMAR
==================================================*/

/*=========================================
    HEADER
=========================================*/

.header-modern{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:999;

    background:rgba(8,25,45,.72);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

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

    box-shadow:0 8px 25px rgba(0,0,0,.18);

    transition:all .35s ease;
}

.header-modern.scrolled{

    background:rgba(6,18,35,.94);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.header-container{

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

    height:95px;

    transition:.35s;

}

.header-modern.scrolled .header-container{

    height:78px;

}

/*=========================================
    LOGO
=========================================*/

.logo{

    height:65px;
    width:auto;

    transition:.35s;

    filter:drop-shadow(0 0 4px rgba(79,195,255,.30));

}

.header-modern.scrolled .logo{

    height:55px;

}

.logo:hover{

    transform:scale(1.05);

    filter:
    drop-shadow(0 0 8px rgba(79,195,255,.55))
    drop-shadow(0 0 16px rgba(79,195,255,.30));

}

/*=========================================
    MENÚ
=========================================*/

.nav-modern{

    display:flex;
    align-items:center;
    gap:30px;

}

.nav-modern a{

    position:relative;

    color:#F5F7FA;

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

    text-decoration:none;

    transition:.35s;

}

.nav-modern a:hover{

    color:#D96B3B;

}

.nav-modern a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#D96B3B;

    transition:.35s;

}

.nav-modern a:hover::after{

    width:100%;

}

/*=========================================
    HAMBURGER
=========================================*/

.hamburger{

    display:none;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

}

.hamburger span{

    width:25px;

    height:3px;

    background:#ffffff;

    transition:.3s;

}

.hamburger.is-active span:nth-child(1){

    transform:rotate(45deg) translate(5px,5px);

}

.hamburger.is-active span:nth-child(2){

    opacity:0;

}

.hamburger.is-active span:nth-child(3){

    transform:rotate(-45deg) translate(5px,-5px);

}