@media only screen and (max-width: 1600px) {
    #what-we-do .section::after {
        display: none;
    }

    #what-we-do .section.left,
    #what-we-do .section {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        max-width: 700px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        overflow: hidden;
    }

    #what-we-do .section.left .promo,
    #what-we-do .section .promo {
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }

    #what-we-do .section .promo {
        width: 100%;
        max-height: 400px;
    }

    #what-we-do .section .content {
        padding: 0 50px 50px;
    }
}

@media only screen and (max-width: 1345px) {
    #hero {}

    #hero .content {
        padding-right: 40px;
    }
}

@media only screen and (max-width: 1240px) {
    header .navigation {
        gap: 20px;
    }

    #promo .items {
        gap: 20px;
    }

    footer .pre-footer .container.row {
        gap: 20px;
    }

    #hero .hero-image {
        position: absolute;
        z-index: -1;
        opacity: 0.1;
        width: auto;
        height: 70vh;
        min-height: 600px;
    }

    #hero .content {
        padding-right: 0;
        max-width: 550px;
        text-align: center;
        align-items: center;
        gap: 40px;
    }

    #hero .decorator {
        display: none;
    }

    #hero .ctas {
        justify-content: center;
    }
}

@media only screen and (max-width: 1100px) {
    header .container.row {}

    header .nav-bar.row {
        flex: 1;
    }

    header .navigation-container {
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0px;
        right: 0px;
        background-color: #fff;
        align-items: center;
        pointer-events: none;
        transform: translateY(500px);
        transition: all 0.3s ease;
        opacity: 0;
    }

    header .navigation li::after {
        top: 30px;
        bottom: auto;
    }

    header .navigation-container .navigation.row {
        gap: 40px;
        flex-direction: column;
    }

    header .hamburger-button-wrapper {
        display: block;
    }

    #promo .items .col {
        height: 270px;
        min-width: 200px;
    }

    #promo .items .col img {
        height: 150px;
    }

    footer .content .col {
        width: 90%;
    }

    body,
    #what-we-do,
    footer {
        background-attachment: scroll;
    }

    .mission-image {
        display: none;
    }

    .alternating-content .part {
        gap: 20px;
    }

    #our-mission .brief {
        flex-direction: column;
        align-items: center;
    }

    #our-mission .brief .container-decorator {
        display: none;
    }

    #our-mission .brief .left {
        margin-right: 0;
        margin-bottom: -30px;
    }

    #our-mission .brief .right .row {
        padding: 60px;
    }

    #our-mission .brief ul {
        padding: 40px 40px 60px;
    }

    #our-mission .brief ul::after {
        display: none;
    }
}

@media only screen and (max-width: 850px) {
    footer .main-footer .content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer .main-footer .logo {
        margin-top: 0;
    }

    .container {
        width: 86vw;
    }

    .grouped-section .items {
        gap: 30px;
    }
}

@media only screen and (max-width: 700px) {
    #hero .hero-image {
        display: none;
    }

    #what-we-do .section .content {
        padding: 0 30px 30px;
    }

    header .navigation-container .navigation.row {
        gap: 0px;
    }

    header .navigation li {
        flex: 1;
    }

    header .navigation-container .navigation.row {
        gap: 0px;
        padding: 160px 0 100px;
    }

    .alternating-content {
        gap: 60px;
    }

    .alternating-content .part {
        flex-direction: column;
    }

    .alternating-content .part.reverse {
        flex-direction: column-reverse;
    }

    .alternating-content .image {
        position: static;
    }

    .alternating-content .image img {
        position: static;
        height: 250px;
    }
}

@media only screen and (max-width: 500px) {
    #our-mission .brief {
        transform: scale(0.9);
    }

    #our-mission .brief ul {
        padding: 20px 20px 60px;
    }

    #our-mission .brief .right .row {
        padding: 40px;
    }
}

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

    #hero {
        min-height: 650px;
        height: 83vh;
    }

    header .logo {
        width: 225px;
        margin-bottom: -5px;
    }

    #hero h1 {
        font-size: 40px;
    }

    #hero h2 {
        font-size: 18px;
    }

    #promo p {
        margin: 50px auto;
    }

    #what-we-do .container {
        gap: 30px;
    }

    #what-we-do .section {
        gap: 25px;
    }

    #what-we-do .section .content h5 {
        font-size: 25px;
    }

    .quote-box {
        font-size: 20px;
        margin-left: 20px;
    }

    .quote-box i {
        font-size: 15px;
    }

    #what-we-do .section .content {
        padding: 0 20px 20px;
    }

    .cta.xl {
        font-size: 20px;
        padding: 10px 20px !important;
    }
}