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

@media(max-width:768px){

    header .main{
        width: 90%;
    }

    .menu{
        display: flex;
    }

    header ul{
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #111827;
        flex-direction: column;
        display: none;
        padding: 20px 0;
        gap: 10px;
        box-shadow: 0 10px 20px rgba(0,0,0,.3);
    }

    header ul.show{
        display: flex;
    }

    header ul li{
        width: 100%;
        text-align: center;
    }

}