@media only screen and (max-width: 1024px) {

    .container {
        padding: 0 15px;
    }

    header .the_logo {
        width: 75px;
    }

    header .warp {
        flex-direction: row-reverse;
        align-items: center;
    }

    header #hamburger_menu {
        display: flex;
        gap: 3px;
        flex-direction: column;
    }

    header #hamburger_menu div {
        height: 3px;
        width: 18px;
        background: #000;
        
    }

    header #top_menu {
        display: none;
    }
}