header ul.show {
    right: 0;
}

@media (max-width: 1380px) {
    :root {
        --Wrapper: 90%;
    }
}

@media (max-width: 1310px) {
    .technology .benefit div {
        border-radius: var(--BorderRadius);
    }
}

@media (max-width: 1180px) {
    header p {
        width: 25px;
        display: block;
    }

    header svg {
        margin-top: 8px;
        transition: var(--Transition);
    }

    header svg:hover {
        fill: var(--RedColor);
    }

    header ul {
        position: absolute;
        top: 89px;
        right: -275px;
        width: 275px;
        padding: var(--MarginSmall) var(--MarginMedium);
        flex-direction: column;
        text-align: center;
        border-bottom: var(--Border6) var(--GrayLightColor);
        background-color: var(--WhiteColor);
        z-index: 0;
    }

    header li {
        padding: var(--MarginSmall) 0;
        font-size: var(--BigSize);
        border-right: 0;
        border-bottom: 2px solid var(--GrayLightColor);
    }

    header li:last-child {
        padding: var(--MarginSmall) 0 0 0;
        border-bottom: none;
    }

    header li:last-child a {
        display: block;
    }
}

@media (max-width: 900px) {
    .home {
        padding: 170px 0 80px 0;
    }

    .pricing .weeks {
        gap: var(--MarginMedium);
    }

    .pricing .weeks .column {
        width: 47%;
    }
}

@media (max-width: 820px) {
    .home h2 br {
        display: none;
    }

    .home p.big {
        width: 100%;
    }

    .problem .cases, .solution .cases {
        flex-direction: column;
        gap: var(--MarginMedium);
    }

    .problem .cases div, .solution .cases div {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .home {
        background-image: none;
    }

    .solution .step .number::after {
        height: 100px;
        margin-top: 140px;
    }

    .deliverables .spec, .technology .connect, .technology .benefit {
        flex-direction: column;
    }

    .deliverables .spec ul, .technology .connect div, .technology .benefit div, .technology p, .technology .benefit a, .pricing .get a, .contact form, .contact input[type=submit] {
        width: 100%;
    }

    .technology {
        background: var(--BlueDarkColor) url(../images/circles-mobile.webp) no-repeat right 75px;
    }

    .technology .connect {
        gap: var(--MarginMedium);
    }

    .technology .connect div {
        padding: var(--MarginMedium);
    }
}

@media (max-width: 600px) {
    h2 br {
        display: none;
    }
    
    p.big, .pricing .weeks .column {
        width: 100%;
    }

    .home {
        padding: 130px 0 60px 0;
    }

    .solution .platforms {
        gap: var(--MarginXSmall);
    }

    .solution .platforms figure {
        width: 33%;
    }

    .solution .platforms figure:first-child {
        width: 10%;
    }

    .solution .platforms figure:nth-child(4) {
        width: 28%;
        margin-top: -10px;
    }

    footer figure {
        margin: 0 auto var(--MarginSmall) auto;
    }

    footer div {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 500px) {
    .solution .step .number::after {
        height: 120px;
        margin-top: 150px;
    }

    .contact form {
        padding: var(--MarginMedium);
    }

    .contact input[type=text], .contact input[type=email], .contact textarea {
        padding: var(--MarginXSmall) var(--MarginSmall);
    }
}