/* Small devices  */

@media (max-width: 376px) {
    .main__bg {
        min-height: 22rem;
    }

    .main__subtitle {
        font-size: 1.2rem;
    }

    .main__btn {
        margin-bottom: 1rem;
    }


}


@media (max-width: 767px ) {
    .hamburgerMenu {
        display: block;
    }

    .nav {
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 80px;
        left: 0;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

        .nav.active {
            max-height: 300px;
            opacity: 1;
        }

    .nav__list {
        flex-direction: column;
        gap: 0;
        padding: 1rem;
    }

        .nav__list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #ddd;
        }

            .nav__list li:last-child {
                border-bottom: none;
            }

    .header__logo img {
        width: 50px;
    }


    .main__bg {
        min-height: 20rem;
        aspect-ratio: 1 / 1;
        max-width: 100%;
        position: relative;
        overflow: hidden;
        align-items: flex-start;
        padding: 0;
    }

    .main__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.5rem 1.5rem 0;
        flex-direction: column;
    }

    .main__title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        text-align: center;
    }

    .main__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1rem;
    }

    .main__subtitle {
        text-align: center;
        margin-bottom: 2rem;
    }

    .main__star {
        display: none;
    }

    .main__underline {
        display: none;
    }

    .main__btn {
        margin: 0;
        width: 50%;
        align-self: flex-start;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .main__image {
        position: absolute;
        width: 50%;
        height: 50%;
        right: 0;
        bottom: 0;
        padding: 0;
    }

        .main__image img {
            position: relative;
            right: 0;
            bottom: 0;
            max-width: 100%;
            max-height: 100%;
            width: auto;
        }

    .cta-section {
        background-position: center;
        background-image: url(../img/stop-background-mobile.svg);
        min-height: 17rem;
    }

    .cta-block {
        align-items: center;
        text-align: center;
    }

    .cta-frog {
        left: 75%;
        width: 40%;
        max-width: 200px;
        bottom: -70%;
        transform: scaleX(-1);
    }

    .cta-btn {
        margin: 0 auto;
        font-size: 1rem;
    }

    .cta-wave {
        height: 3rem;
    }

    .info-text {
        text-align: left;
    }

    .container--why {
        padding: 0;
    }

    .why-us__cards {
        grid-template-columns: 1fr;
    }

    why-us_card {
        padding: 1.1rem;
    }

    .why-us__card--interest,
    .why-us__card--school,
    .why-us__card--exam,
    .why-us__card--benefit {
        grid-column: 1;
    }

    .why-us__card p {
        max-width: 85%;
    }

    .why-us__image {
        max-width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

    .why-us__card--interest .why-us__image {
        bottom: -5.5rem;
        max-width: 40%;
        right: 0px;
    }

    .why-us__card--school .why-us__image {
        bottom: -1rem;
        max-width: 25%;
    }

    .infographic {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 25rem;
        margin: 5rem 0;
    }

        .infographic::after {
            content: '';
            position: absolute;
            top: 30%;
            right: 0;
            width: 5px;
            height: calc(90% - 30%);
            background-color: var(--clr-purple);
            display: none;
        }

    .top-line, .bottom-line {
        position: absolute;
        background-color: var(--clr-purple);
        height: 6px;
        display: none;
    }

    .vertical-line {
        position: absolute;
        background-color: var(--clr-purple);
        width: 5px;
        height: 2rem;
        display: none;
    }

    .point {
        position: absolute;
        width: 25px;
        height: 25px;
        background-color: var(--clr-purple);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .infographic-icon {
        width: 100%;
        max-width: 180px;
        height: auto;
        position: relative;
        margin: 0 auto 1.5rem;
    }

    .info-text {
        background-color: var(--clr-pink);
        padding: 0.5rem;
        border-radius: var(--border-radius-sm);
        font-size: clamp(1rem, 1.5vw, 1.5rem);
        line-height: 1.4;
        text-align: center;
        margin-bottom: 3rem;
    }

    .infographic {
        min-height: auto;
        margin: 2rem 0;
        position: relative;
        padding: 2rem 1rem;
        overflow: visible;
    }

    .top-line, .bottom-line, .vertical-line, .point {
        display: none;
    }

    .infographic::before {
        content: '';
        position: absolute;
        left: 1rem;
        top: 3rem;
        bottom: 3rem;
        width: 5px;
        background-color: var(--clr-purple);
        z-index: 1;
    }

    .info-container {
        position: relative;
        margin-bottom: 4rem;
        min-height: 70px;
    }

    .info-text {
        background-color: var(--clr-pink);
        padding: 0.5rem 0.5rem;
        border-radius: var(--border-radius-sm);
        font-size: 1.2rem;
        line-height: 1.4;
        margin: 0;
        position: relative;
        z-index: 4;
        display: inline-block;
        width: auto;
        max-width: calc(100% - 2rem);
    }

    .infographic-icon {
        width: 100px;
        height: 100px;
        position: absolute;
        z-index: 5;
    }

    .info-container-ar {
        margin-left: 3rem;
    }

        .info-container-ar::before {
            content: '';
            position: absolute;
            left: -3rem;
            top: 20%;
            transform: translateY(-50%);
            width: 2.5rem;
            height: 5px;
            background-color: var(--clr-purple);
            z-index: 2;
        }

        .info-container-ar::after {
            content: '';
            position: absolute;
            left: -0.5rem;
            top: 20%;
            transform: translate(-50%, -50%);
            width: 15px;
            height: 15px;
            background-color: var(--clr-purple);
            border-radius: 50%;
            z-index: 3;
        }

        .info-container-ar .info-text {
            margin-left: 0;
        }

        .info-container-ar .infographic-icon {
            top: -60px;
            right: -10px;
        }

    .info-container-quest {
        margin-left: 5rem;
    }

        .info-container-quest::before {
            content: '';
            position: absolute;
            left: -5rem;
            top: 50%;
            transform: translateY(-50%);
            width: 4rem;
            height: 4px;
            background-color: var(--clr-purple);
            z-index: 2;
        }

        .info-container-quest::after {
            content: '';
            position: absolute;
            left: -0.5rem;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 15px;
            height: 15px;
            background-color: var(--clr-purple);
            border-radius: 50%;
            z-index: 3;
        }

        .info-container-quest .info-text {
            margin-left: 0;
        }

        .info-container-quest .infographic-icon {
            top: 50%;
            right: -25%;
            transform: translateY(-50%);
        }

    .info-container-result {
        margin-left: 7rem;
    }

        .info-container-result::before {
            content: '';
            position: absolute;
            left: -7rem;
            top: 50%;
            transform: translateY(-50%);
            width: 6.5rem;
            height: 4px;
            background-color: var(--clr-purple);
            z-index: 2;
        }

        .info-container-result::after {
            content: '';
            position: absolute;
            left: -0.5rem;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 15px;
            height: 15px;
            background-color: var(--clr-purple);
            border-radius: 50%;
            z-index: 3;
        }

        .info-container-result .info-text {
            margin-left: 0;
        }

        .info-container-result .infographic-icon {
            bottom: -80%;
            right: -10%;
        }


    .advantage-number {
        left: 0.3rem;
    }

    .trial-offer__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .trial-characters {
        display: none;
    }

    .trial-bg {
        background-image: url('../img/trial-bg-mobile.png');
    }

    .trial-offer__form {
        padding: clamp(2.5rem, 5vw, 3rem) clamp(1rem, 2vw, 1.25rem);
    }

    .trial-offer__illustration {
        position: relative;
        margin: clamp(-1rem, -1.5vw, -0.75rem) clamp(-2.5rem, -4vw, -3rem) clamp(-2rem, -3vw, -2.5rem) clamp(-2.5rem, -4vw, -3rem);
        height: clamp(25rem, 40vh, 35rem);
    }

    .footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-left {
        align-items: center;
    }

    .footer-right {
        align-items: center;
        margin-top: 1.5rem;
    }

    .footer-links {
        flex-direction: row;
        gap: 1.3rem;
    }

    .footer-links--row1 {
        justify-content: center;
    }

    .footer-links--row2 {
        justify-content: center;
        margin-top: 1rem;
    }

    .footer-requisites {
        font-size: 0.75rem;
    }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .header__logo img {
        width: 50px;
    }

    .why-us__cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(160px, auto);
        gap: 1.5rem;
    }

    .why-us__card--interest {
        grid-column: 1;
        grid-row: 1 / span 2;
        max-height: none;
    }

    .why-us__card--school {
        grid-column: 2;
        grid-row: 1;
    }

    .why-us__card--exam {
        grid-column: 2;
        grid-row: 2;
    }

    .why-us__card--benefit {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .why-us__card--interest .why-us__image {
        width: 25%;
        max-width: none;
        right: -15%;
        bottom: -3%;
        transform: translateX(0);
    }

    .why-us__card--interest .why-us__image {
        width: 335px;
        max-width: 60%;
        right: -25px;
        bottom: -10%;
    }

    .why-us__card--school .why-us__image {
        width: 178px;
        max-width: 30%;
        right: -5px;
        bottom: 0;
    }

    .why-us__card--school .why-us__image {
        content: url("../img/school.png");
    }


    .why-us__image {
        position: absolute;
        max-width: 40%;
        height: auto;
        z-index: 2;
        bottom: 0;
        right: 0;
    }

    .header__inner {
        padding: 0 2rem;
    }

    .cta-title,
    .cta-subtitle {
        text-align: left;
        margin-left: 40%;
    }

    .cta-btn {
        margin-left: 40%;
        margin: 0;
        margin-left: 40%;
    }

    .top-line,
    .bottom-line,
    .vertical-line {
        display: block;
    }

    .top-line {
        top: 30%;
        left: 0;
        width: 100%;
    }

    .bottom-line {
        top: 90%;
        left: 65%;
        width: 35%;
    }

    .infographic::after {
        display: block;
    }

    .left-vertical-line {
        top: 23%;
        left: 25%;
    }

    .right-vertical-line {
        top: 23%;
        left: 70%;
    }

    .top-point-left {
        top: 23%;
        left: 25%;
    }

    .top-point-right {
        top: 23%;
        left: 70%;
    }

    .bottom-point {
        top: 90%;
        left: 65%;
    }

    .vr-glasses {
        position: absolute;
        top: -10%;
        left: 25%;
        transform: translateX(-50%);
    }

    .map {
        position: absolute;
        top: -10%;
        left: 70%;
        transform: translateX(-50%);
    }

    .phone {
        position: absolute;
        top: 70%;
        left: 57%;
        transform: translateX(-50%);
    }

    .info-ar {
        position: absolute;
        top: 35%;
    }

    .info-quest {
        position: absolute;
        top: 35%;
        left: 60%;
    }

    .info-result {
        position: absolute;
        top: 80%;
    }

    .advantages__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 5rem;
    }

    #custom-controls .prev,
    #custom-controls .next {
        margin: 0 3rem;
    }

    .trial-offer {
        padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2rem);
    }

    .trial-offer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .trial-bg {
        background-image: url('../img/trial-bg.jpg');
    }

    .trial-characters {
        display: block;
    }

    .trial-offer__illustration {
        height: 150%;
    }
}

    /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .header__logo img {
        width: 60px;
     }

    #custom-controls .prev,
    #custom-controls .next {
        margin: 0 5rem;
    }

    .trial-offer {
        padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
    }

    .trial-offer__form {
        padding: clamp(2rem, 4vw, 2.5rem);
    }

    .info-ar {
        left: 5%;
    }


    .info-result {
        left: 10%;
    }
}

    /* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .header__logo img {
        width: 70px;
    }

    .advantage-card.has-long-content {
        min-height: 280px;
    }

    #custom-controls .prev,
    #custom-controls .next {
        margin: 0 10rem;
    }

    .info-result {
        left: 20%;
    }

    .trial-offer {
        padding: clamp(5rem, 8vw, 6rem) clamp(5rem, 10vw, 10rem);
    }

    .trial-offer__form {
        padding: clamp(2rem, 4vw, 2.5rem);
    }  
}