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

.header{

    width: 95%;

    height: 90px;

    margin: 15px auto;

    background: #163f73;

    border-radius: 0 0 25px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 40px;

    position: sticky;

    top: 0;

    z-index: 999;

    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

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

.logo{

    height: 45px;

    width: auto;

    object-fit: contain;
}

/* ===== NAV ===== */

#nav{

    display: flex;

    align-items: center;

    gap: 45px;
}

/* ===== LINKS ===== */

#nav a{

    text-decoration: none;

    color: white;

    font-size: 18px;

    font-weight: 600;

    transition: 0.3s;

    position: relative;

    padding: 8px 0;
}

/* ===== LINEA ===== */

#nav a::after{

    content: "";

    position: absolute;

    left: 0;

    bottom: -4px;

    width: 0%;

    height: 3px;

    background: #4db5ff;

    border-radius: 10px;

    transition: 0.3s;
}

/* ===== HOVER ===== */

#nav a:hover{

    color: #4db5ff;
}

#nav a:hover::after{

    width: 100%;
}

/* ===== ACTIVE ===== */

#nav a.active{

    color: #4db5ff;
}

#nav a.active::after{

    width: 100%;
}

/* ===== BOTON MENU ===== */

#menu-btn{

    display: none;

    border: none;

    background: transparent;

    color: white;

    font-size: 32px;

    cursor: pointer;
}

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

@media(max-width:768px){

    .header{

        padding: 0 20px;
    }

    #menu-btn{

        display: block;
    }

    #nav{

        position: absolute;

        top: 100px;

        right: 20px;

        width: 220px;

        background: #163f73;

        flex-direction: column;

        align-items: flex-start;

        padding: 20px;

        border-radius: 20px;

        display: none;

        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

    #nav.show{

        display: flex;
    }
}
/* ===== ELIMINAR BOTONES AZULES ===== */

#nav a{

    background: transparent !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}

/* ===== ACTIVE ===== */

#nav a.active{

    background: transparent !important;
}