@media screen and (max-width: 1600px) {
    #portfolio-desktop {
        background: #fff;
    }
}
@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-color: #1566ae;
    }
    .navigation__items-wrap {
        display: block;
        height: 0px;
        background: #06457d;
        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__items-wrap.is-active {
    height: 180px;
  } */
    .navigation__item {
        width: 40%;
        margin: auto;
        padding: 5px 0;
    }

    .navigation__items-wrap .navigation__item:first-child {
        margin-top: 10px;
    }

    .navigation__lnk {
        text-align: center;
        display: block;
        padding-top: 5px;
    }
    .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: 1rem;
        max-width: 1120px;
        height: 100%;
    }
    .main > div {
        width: 100%;
    }
    .form {
        width: 100%;
    }
    .site-footer > div {
        padding: 0.5rem;
    }
    #portfolio .glide__arrow--right {
        right: 0;
    }
    #portfolio .glide__arrow--left {
        left: 0;
    }
    #portfolio-desktop .glide__arrow--right {
        right: 0;
    }
    #portfolio-desktop .glide__arrow--left {
        left: 0;
    }
    #portfolio-desktop .glide__slide > div {
        height: 75vw;
    }
    #contact,
    #portfolio,
    #offer,
    #portfolio-desktop,
    #subpage,
    #apps {
        background: #fff;
    }
    #portfolio {
        background: #ececec;
    }
    #about, #top {
        background: #2556a0;
    }

    #top {
        padding-top: 5rem;
        min-height: 18rem;
    }

    #about .icon {
        margin-right: unset;
        margin: auto;
        display: block;
    }
    #about .content {
        width: 100%;
        display: block;
        text-align: center;
    }
    #about .content .desc {
        text-align: center;
    }

    #subpage {
        padding-top: 3rem;
    }

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

    .dropdown-content {
        position: relative;
        text-align: center;
    }

    .dropdown.navigation__item {
    }

    .subpage h1 {
        color: #25559f;
    }
    .splide,
    .splide__slide {
        max-width: 100%;
    }
    .splide__slide {
        width: 80%;
        margin: auto;
    }

    .splide__slide.is-active {
        background-size: contain;
    }



}

@media screen and (min-width: 768px) {
    #top {
        min-height: 768px;
        padding-top: 11rem;
        padding-left: 10rem;
    }
    #subpage-top {
        min-height: 381px;
        padding-top: 8rem;
    }
    section {
        min-height: 900px;
    }
    .navigation__content-wrap {
        max-width: 70rem;
    }
    .navigation__items-wrap {
        height: auto !important;
    }
    #portfolio .glide__arrow--right {
        right: 50%;
        margin-right: -25vh;
    }
    #portfolio .glide__arrow--left {
        left: 50%;
        margin-left: -25vh;
    }
    #portfolio-desktop {
        min-height: 1200px;
    }
    #portfolio-desktop .glide__arrow--right {
        right: 25%;
        margin-right: -25vh;
    }
    #portfolio-desktop .glide__arrow--left {
        left: 25%;
        margin-left: -25vh;
    }
    .form {
        width: 34rem;
    }
    .hamburger {
        display: none !important;
    }
    #about .body {
        width: 540px;
    }
    #apps .md\:grid > div {
        width: 263px;
        margin: 0 auto 2rem;
    }
    #apps .md\:w-1\/2 {
        background-image: url("../images/apps-man.webp");
        background-position: top right;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #apps .body {
        min-width: 38rem;
    }
    #apps .main > div {
        min-height: 900px;
    }
    #contact .logoicon {
        background: url(/themes/dev64/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;
    }
    .dropdown:hover .dropdown-wrapper,
    .dropdown:hover .dropdown-content {
        display: block !important;
    }
    .splide__slide {
        width: 313px;
        height: 791px;
        padding: 40px 20px;

    }
}
@media screen and (min-width: 1160px) {
    #portfolio-desktop .glide__arrow {
        top: 40% !important;
    }
    #subpage .main {
        max-width: 70rem;
        margin: 0 auto;
        width: 100%;
        flex-direction: column;
    }
    #subpage-content {
        /* min-height: 1883px; */
    }
    .subpage h1 {
        max-width: 62%;
    }
    .splide__arrow--prev {
        left: 12em !important;
    }
    .splide__arrow--next {
        right: 12em !important;
    }
}
@media screen and (max-width: 1159px) {
    #apps .md\:w-1\/2 {
        display: none;
    }
    #apps .body {
        width: 100%;
    }
    #portfolio-desktop .glide__slide.is-active > div {
        background-size: contain;
    }
    #portfolio-desktop .glide__arrow {
        top: 27vw !important;
    }
    #subpage .main {
        margin: 0 auto;
        width: 100%;
        flex-direction: column;
        padding: 2rem;
    }
    #subpage h1,
    #subpage h2,
    #subpage h3 {
        text-align: center;
    }
    #subpage-bottom, #subpage-content {
        background: unset;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    #offer .md\:grid-cols-3 {
        grid-template-columns: none;
    }
    #portfolio-desktop .glide__arrow--right {
        right: 20px;
        margin-right: unset;
    }
    #portfolio-desktop .glide__arrow--left {
        left: 20px;
        margin-left: unset;
    }
}

@media screen and (min-width: 992px) {
    #offer .main {
        background-image: url("../images/offer-phone.webp");
        background-repeat: no-repeat;
        background-position: 50% 0;
        min-height: auto;
    }
}

@media screen and (min-width: 1870px) {
    #portfolio-desktop .glide__arrow--right {
        right: 22%;
        margin-right: 0;
    }
    #portfolio-desktop .glide__arrow--left {
        left: 22%;
        margin-left: 0;
    }
}