@media (max-width: 768px) {

    body {
        font-size: 14px;
    }

    h1 {
        font-size: 7em;
        line-height: 60px;
    }

    .intro-slider {
        flex-direction: column;
        height: auto;
    }

    .side-image {
        width: 100%;
        height: 270px;
    }

    .side-content {
        width: 100%;
        margin-top: 20px;
    }

    .cocktails {
        flex-wrap: wrap;
        justify-content: center;
    }

    .form-row {
        flex-direction: column;
    }

    footer {
        padding: 10px 0;
    }

    /* --------------------------------NAV------------------------------- */
    .hamburger {
        display: block;
        margin-right: 80px;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        left: 0;
        top: -400px;
        flex-direction: column;
        background-color: #000;
        width: 100%;
        opacity: 0;
    }

    .nav-menu.active {
        top: 80px;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: center;
        padding-top: 80px;
        height: 100vh;
        opacity: 100;
    }

    .nav-list,
    .nav-buttons {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .nav-list {
        margin: 0 auto 20px;
        gap: 50px;
    }

    .nav-button {
        margin-left: 0;
        margin-top: 20px;
    }
}

@media (max-width: 425px) {
    
    

    .hamburger {
        margin-right: 40px;
    }

    header {
        height: 550px;
    }

    h2 {
        margin-bottom: 1em;
        font-size: 3.5em;
        line-height: 40px;
    }

    nav {
        padding: 10px 20px;
    }


    .contact-section {
        flex-direction: column;

    }

    .contact-image {
        width: 100%;
        height: 200px;
    }

    .contact-form {
        width: 90%;
        margin: 4em auto 2em;
    }

    .form-item {
        margin: 0;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }


}