@media only screen and (max-width: 1320px) {
    header {
        padding: 0 50px;
    }
}

@media only screen and (max-width: 1100px) {
    header {
        padding: 0 30px;
    }
}

@media only screen and (max-width: 800px) {
    .hamburger {
        display: block;
        cursor: pointer;
    }

    .hamburger .line {
        width: 20px;
        height: 3px;
        background: #4682B4;
        margin: 6px 0;
    }

    .nav-bar {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        width: 100vw;
        height: 0;
        background: #f5f5f5;
        transition: 0.5s ease-in-out;
        z-index: 10;
        overflow: hidden;
    }

    .nav-bar ul {
        display: block;
        width: fit-content;
        padding: 40px;
        transition: 0.5s ease-in-out;
        opacity: 0;
    }

    .nav-bar ul li a {
        margin-bottom: 24px;
    }
}