@media (max-width: 429px) {
    .footer-divider {
        bottom: 131px;
    }
}

/* Mobile: до 768px */
@media (max-width: 767px) {
    h1 {
        font-size: 26px;
        font-weight: 400;
        margin: 0;
    }

    h2 {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
    }

    h3 {
        font-size: 15px;
        font-weight: 500;
        margin: 0;
    }

    body {
        padding: 0 16px;
        font-size: 14px;
        background-size: 640px;
        background-position: top center;
    }

    .header {
        justify-content: center;
        padding: 26px 0px 23px;

        & .navigation {
            display: none;
        }

        & .logo {
            z-index: 10;
        }

        & .menu-toggle {
            display: block;
            position: absolute;
            width: 24px;
            height: 24px;
            top: 20px;
            right: 0px;
            z-index: 10;

            & span {
                position: absolute;
                display: block;
                height: 1.5px;
                width: 15.5px;
                background-color: #7b7b7b;
                transition: 0.3s ease all;

                &.top {
                    left: 4.25px;
                    top: 8.75px; /* 11.25 - 2.5 */
                }

                &.bottom {
                    right: 4.25px;
                    bottom: 8.75px; /* 11.25 + 2.5 */
                }
            }

            &.active {
                & span {
                    &.top {
                        transform: rotate(45deg) translate(1.5px, 1.75px);
                    }

                    &.bottom {
                        transform: rotate(-45deg) translate(1.8px, -2px);
                    }
                }
            }
        }
    }

    .mobile-menu {
        top: -100vh;
        background-color: var(--black);
        transition: var(--transition-short);
        display: flex;
        background-image: url("../assets/images/ellipse-bg.svg");
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain;
        left: 0px;
        right: 0px;
        bottom: 0px;
        flex-direction: column;
        opacity: 0;
        position:fixed;

        & .mob-nav {
            display: flex;
            flex-direction: column;
            gap: 40px;
            align-items: center;
            flex: 1 1 auto;
            justify-content: center;

            & div[js-scroll-to] {
                color: var(--wh-transperent-60);
                font-weight: 400;
                font-size: 20px;
            }
        }

        & .mob-contacts {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 40px;

            & a {
                color: var(--wh-transperent-60);
                font-weight: 500;
                font-size: 16px;
                line-height: 120%;
                display: flex;
                align-items: center;
                flex-direction: row;
                gap: 8px;
                justify-content: center;
            }
        }
    }

    .mobile-menu.active {
        opacity: 1;
        top: 0px;
    }

    .hero {
        padding: 40px 0px 0px;

        & h1 {
            font-size: 26px;
        }

        & .subtitle .content {
            gap: 44px;

            & .headline {
                display: flex;

                &::before {
                    content: "";
                    padding-left: 57px;
                }
            }
        }

        & .subtitle .info {
            flex-direction: column;
            gap: 44px;

            & img {
                width: 200px;
                height: 200px;
                align-self: center;
            }
        }
    }

    .hero + .section {
        padding-top: 64px;
    }

    .section + .section {
        padding-top: 64px;
    }

    .gradient {
        left: -20%;
        top: -20px;

        & svg {
            width: 100%;
            height: 100%;
        }
    }

    .hero-bg {
        left: 0;
        top: 70px;

        & svg {
            width: 100%;
            height: 100%;
        }
    }

    .section h2 {
        margin-bottom: 20px;
    }

    .about {
        flex-direction: column;

        & .headline {
            font-size: 15px;
            text-indent: 0;
        }

        & .content {
            gap: 44px;
        }

        & .images {
            & :first-child {
                width: 222px;
                height: 222px;
            }

            & :last-child {
                width: 113px;
                height: 113px;
            }
        }

        & .quote {
            padding-left: 43px;
        }

        & .quote::before {
            left: 0;
            top: 14.5px;
        }

        & .description {
            & .row {
                gap: 44px;
            }
        }
    }

    button.primary {
        font-size: 16px;
    }

    .services {
        gap: 0px;

        & .content {
            grid-template-columns: 1fr;
            gap: 20px;

            & .description {
                display: none;
            }

            & .list {
                border-right: none;

                & svg {
                    display: none;
                }

                & .item {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    padding: 16px 18px 16px 0px;

                    & h3 {
                        color: var(--wh-transperent-93);
                    }

                    & .text {
                        color: var(--wh-transperent-60);
                        font-weight: 400;
                        display: block;
                    }
                }
            }
        }
    }

    .desktop-hidden {
        display: flex !important;
    }

    .faq {
        grid-template-columns: 1fr;

        & .content {
            border-left: none;
        }

        & .content {
            & .item {
                padding: 16px 0px 0px 0px;
                margin-bottom: 16px;

                & svg {
                    width: 24px;
                    height: 24px;
                }

                & .question {
                }

                & .answer {
                }

                &.active {
                    & .question {
                    }

                    & .answer {
                        max-height: 150px;
                    }
                }
            }
        }
    }

    .contacts {
        grid-template-columns: 1fr;
        gap: 64px;

        & .info {
            & .list {
                & .item {
                    font-size: 16px;
                    gap: 8px;
                    width: fit-content;
                }
            }
        }
    }

    .footer {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 0px 32px 0px;

        & .copyright {
            font-size: 16px;
        }

        & .label {
            font-size: 12px;
        }
    }

    .footer-divider {
        bottom: 112px;
    }

    .footer-bg {
        overflow: hidden;
        width: 100%;
        & svg {
            display: flex;
        }
    }

    .request-form {
        & .title {
            font-size: 15px;
            margin-bottom: 20px;
        }

        & form {
            & .inputs {
                flex-direction: column;
            }
        }
    }

    .modal {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: -1;
        padding: 0px 18px;

        &.active {
            opacity: 1;
            z-index: 100;
        }
    }

    .request-form {
        & .result {
            font-size: 14px;

            &[result="success"] {
                top: 56px;
            }

            &[result="error"] {
                margin-top: 4px;
            }
        }
    }

    .section.footer {
        padding: 20px 0px 32px;
        margin-top: 64px;
    }
}

@media (max-width: 429px) {
    .footer-divider {
        bottom: 131px;
    }
}