@media (max-width: 1360px) {
    header .qr-box {
        left: auto;
        right: 0;
    }
    header .qr-box::before {
        left: auto;
        right: var(--space_xlarge);
    }
    
}

@media (max-width: 1023px) {
    section.hero {
        padding: 0 !important;
    }
    .hero .max-container {
        flex-direction: column !important;
        gap: var(--space_xlarge);
    }
    .hero .lottie {
        position: relative;
        right: -7vw;
        bottom: 0;
        width: 100%;
        height: 60vw;
        overflow: hidden
    }
    .hero .lottie lottie-player {
        width: 140% !important;
        height: 110vw !important;
    }
    .qr {
        display: none !important;
    }
}

@media (max-width: 960px) {
    header .nav {
        display: none !important;
    }
    .hero .max-container > *:first-child {
        gap: var(--space_large);
    }
    section,
    footer {
        padding: var(--space_xxxxxlarge) 0 !important;
    }
    section.partner,
    section.features {
        padding: var(--space_xxxxxlarge) var(--space_large) !important;
    }
    .free .items {
        flex-direction: column !important;
    }

    .free .items .item {
        width: unset;
        flex-grow: unset;
    }
}

@media (max-width: 768px) {
    .how-slick .slick-dots {
        bottom: 0;
    }

    .contact .max-container {
        gap: var(--space_large) !important;
    }
}

@media (max-width: 767px) {
    :root {
        /* text styles */
        --h1: 32px;
        --h1line: 48px;
        --h2: 24px;
        --h2line: 40px;
        --h3: 20px;
        --h3line: 32px;
        --h4: 16px;
        --h4line: 24px;

        --b1: 20px;
        --b1line: 32px;
        --b2: 16px;
        --b2line: 24px;
        --b3: 14px;
        --b3line: 20px;
        --b4: 12px;
        --b4line: 20px;
        /* text styles */
    }

    .desktop {
        display: none !important;
    }

    .mobile {
        display: unset !important;
    }

    .contact .max-container {
        flex-direction: column !important;
        gap: var(--space_xxlarge) !important;
    }

    .contact .max-container > * {
        width: 100%;
        flex-grow: unset;
        box-sizing: border-box;
    }

    .contact .max-container > *:first-child {
        text-align: center;
        align-items: center;
    }

    .how .item {
        flex-direction: column !important;
        gap: var(--space_xlarge);
    }

    .how .item > *:first-child {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .how .item > *:first-child .b2 {
        display: none;
    }

    .how-slick .slick-dots,
    .features-content-slick .slick-dots {
        position: static;
        justify-content: center;
        margin-top: var(--space_small);
    }

    .partner .item {
        padding-top: var(--spaceBig_xxsmall);
    }

    footer .footer-top,
    footer .footer-bottom {
        flex-direction: column !important;
    }

    footer .footer-top {
        padding-bottom: var(--space_large);
    }

    footer .footer-top > *:first-child {
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    .button {
        padding: 0 var(--space_medium);
    }

    .features-nav-slick .slick-list {
        padding: 0 var(--space_large) !important;
        transform: none !important;
    }

    .lottie-container {
        width: 720px;
        flex-shrink: 0;
    }

    .lottie-container > * {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .features-nav-slick {
        display: none !important;
    }

    .slick-slide img {
        max-width: 100%;
    }

    .partner img {
        max-width: 100%;
    }

    .popup .pop-content {
        height: auto;
    }

    .lottie-container {
        width: 560px;
        flex-shrink: 0;
    }
}

@media (max-width: 400px) {
    .lottie-container {
        width: 520px;
        flex-shrink: 0;
    }
}

@media (max-width: 374px) {
    .lottie-container {
        width: 480px;
        flex-shrink: 0;
    }
}