@media screen and (max-width: 767px) {
    #top {
        padding-top: 7rem;
        min-height: 30rem;
    }

    #offer {
        min-height: 56.3rem;
    }

    h1,
    .h1 {
        font-size: 2rem;
    }

    h2,
    .h2 {
        font-size: 1.5rem;
    }

    .navigation {
        background: #e60f71;
    }

    .navigation__items-wrap {
        display: block;
        height: 0px;
        background: #e60f71;
        width: 100%;
        left: 0;
        top: 47px;
        position: absolute;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        overflow: hidden;
    }

    .navigation__lnk.mPS2id-highlight,
    .navigation__lnk:hover {
        color: #fff;
    }

    /* .navigation__items-wrap.is-active {
    height: 180px;
  } */
    .navigation__item {
        width: 60%;
        margin: auto;
        padding: 5px 0;
    }

    .navigation__lnk {
        display: block;
        text-align: center;
        color: #fff;
    }

    .main {
        z-index: 1;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        margin: 0 auto;
        padding: 2rem;
        max-width: 1120px;
        height: 100%;
    }

    #offer .main {
        display: block;
    }

    .form {
        width: 100%;
    }

    .site-footer > div {
        padding: 0.5rem;
    }

    #portfolio .glide__arrow--right {
        right: 0;
    }

    #portfolio .glide__arrow--left {
        left: 0;
    }

    #contact,
    #portfolio,
    #offer,
    #benefits {
        background: #fff;
    }

    #portfolio {
        background: #ececec;
    }

    footer {
        background: #828b90;
        height: auto;
    }
}

@media screen and (min-width: 768px) {
    .navigation {
        padding: 1rem 0;
    }

    .main {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 4rem;
    }

    #top {
        min-height: 1080px;
        padding-top: 7rem;
    }

    #top .paint {
        background: url(/themes/petrojet/assets/images/top-paint.png) no-repeat;
        position: absolute;
        background-size: cover;
        background-position: right bottom;
        bottom: 0rem;
        left: 0rem;
        height: 931px;
        width: 21vw;
        max-width: 405px;
        max-height: 931px;
    }

    #top .social {
        position: absolute;
        bottom: 2rem;
        left: 12rem;
    }

    section {
        height: 1045px;
    }

    #contact {
        min-height: 1094px;
    }

    #contact .paint {
        background: url(/themes/petrojet/assets/images/contact-paint.png)
            no-repeat;
        position: absolute;
        background-size: cover;
        background-position: right bottom;
        bottom: 0rem;
        left: 0rem;
        height: 1100px;
        width: 27.9vw;
        max-width: 524px;
        max-height: 1100px;
    }

    #contact h1 {
        text-align: left;
    }

    #contact label {
        text-align: left;
    }

    #about {
        height: 1053px;
    }

    #about h1 {
        text-align: left;
    }

    .navigation__content-wrap {
        max-width: 103rem;
    }

    .navigation__items-wrap {
        height: auto !important;
    }

    #portfolio .glide__arrow--right {
        right: 50%;
        margin-right: -25vh;
    }

    #portfolio .glide__arrow--left {
        left: 50%;
        margin-left: -25vh;
    }

    .form {
        width: 46rem;
        padding-left: 0rem;
    }

    .hamburger {
        display: none !important;
    }

    #about .body {
        max-width: 57rem;
        font-size: 1.6rem;
        line-height: 2.5rem;
        text-align: justify;
    }

    #benefits .md\:grid > div {
        max-width: 360px;
        margin: 0 1.2rem 2.5rem;
        background-color: #fff;
        padding: 3rem 1rem 0.2rem;
        border-radius: 0.8rem;
        box-shadow: 0px 0px 19px -11px #989696;
    }

    #benefits .body {
        min-width: 38rem;
        max-width: 50rem;
    }

    #contact .logoicon {
        background: url(/themes/petrojet/assets/images/contact-logoicon.png)
            no-repeat;
        position: absolute;
        background-size: cover;
        background-position: right top;
        bottom: 12rem;
        left: 0px;
        height: 386px;
        width: 23vw;
        max-height: 386px;
    }

    footer .site-footer {
        max-width: 52rem;
    }
}

@media screen and (max-width: 1599px) {
    #contact .paint {
        width: 17.9vw;
    }
}
@media screen and (min-width: 1600px) {
    #benefits .body {
        width: 50%;
    }
}
@media screen and (max-width: 1259px) {
    #benefits .body {
        width: 100%;
    }

    #top,
    #top h1 {
        text-align: center;
    }

    #top img {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 1260px) {
    #top {
        padding-left: 27rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    #offer #packets {
        grid-template-columns: none;
    }
}

@media screen and (min-width: 992px) {
    #offer .main {
        min-height: 865px;
    }
}
@media screen and (max-width: 1023px) {
    #offer {
        height: auto;
    }
    #benefits {
        height: auto;
    }
}
@media screen and (min-width: 1024px) {
    #offer #packets > div {
        margin: 0 2rem;
    }
}