@media(max-width: 991px){
    header nav{
        position: absolute;
        height: 100vh;
        width: 300px;
        right: 0;
        top: 0;
        background: #fff;
        border-left: 5px solid var(--yellow--);
        transform: translateX(100%);
        padding: 20px 20px;
        display: block;
    }
    header nav ul{
        flex-direction: column;
        gap: 10px;
    }
    header nav ul li{
        /* margin-bottom: 10px; */
    }
    header nav .nav_close_btn{
        text-align: end;
        display: block;
    }
    header .menu-button {
        display: grid;
    }
    header nav ul li a{
        color: #000;
    }
    .banner .slide .content{
        width: 50%;
        top: 65%;
    }
    .banner .slide .content p {
        font-size: 20px;
    }
}

@media(max-width: 768px){
    header{
        position: sticky;
        top: 0;
        background: #000;
    }
    .banner .slide .content{
        width: 50%;
        top: 50%;
    }
    .counter{
        text-align: center;
    }
    .copy_right{
        flex-direction: column;
        align-items: center;
    }
    .values_card .content{
        position: relative;
        padding: 10px;
        background: #000;
        transform: translateY(0);
        bottom: 0;
    }
}