/* mobile-small-style.css - Comprehensive small mobile styles for Allengual website */

/* Small mobile devices (less than 720px) */
@media (max-width: 720px) {
    .section-container {
        padding: 0 10px; /* Отступы по бокам */
    }

    .crm-atp-mobile {
        display: flex;
        width: 100%;
    }

    .course-subtitle-mobile {
        display: flex;
        width: 100%;
    }

    .div {
        font-size: 32px; /* Even smaller font on tiny screens */
    }

    .frame-section-3-image {
        display: none;
    }

    .frame-solution-row2 {
        display: none;
        transition: all 0.3s ease;
    }
    .frame-solution-row2-vertical {
        display: flex;
        transition: all 0.3s ease;
    }

    .frame-solution-row2 {
        flex-direction: column;
        grid-template-columns: 1fr 24px 1fr;
        grid-auto-rows: auto;
        transition: all 0.3s ease;
    }
    /* show cards */
    .frame-solution-row2 > :nth-child(1) {
        grid-column: 1/3;
        grid-row: 1;
        background-color: #4a90e2;
    } /* 1-st block */
    .frame-solution-row2 > :nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    } /* 1-st row */
    .frame-solution-row2 > .arrow-1 {
        grid-column: 2;
        grid-row: 2 !important;
        background-color: #1B7A41;
    } /* 1-st row repeated */
    .frame-solution-row2 > :nth-child(3) {
        grid-column: 1/3;
        grid-row: 3 !important;
        background-color: #faff2d;
    }
    .frame-solution-row2 > :nth-child(4) {
        grid-column: 2;
        grid-row: 4;
    }

    /*.frame-solution-row2 > :nth-child(2) { grid-column: 1; grid-row: 2; }*/
    /*.frame-solution-row2 > :nth-child(3) { grid-column: 1; grid-row: 3; margin-bottom: 16px; }*/
    /*.frame-solution-row2 > :nth-child(4) { grid-column: 1; grid-row: 4; }*/
    /*.frame-solution-row2 > :nth-child(5) { grid-column: 1; grid-row: 5; }*/

    /*.frame-solution-row2 > :nth-child(1) { grid-column: 2; grid-row: 1; }*/
    /*.frame-solution-row2 > :nth-child(2) { grid-column: 2; grid-row: 2; }*/
    /*.frame-solution-row2 > :nth-child(3) { grid-column: 2; grid-row: 3; }*/
    /*.frame-solution-row2 > :nth-child(4) { grid-column: 2; grid-row: 4; }*/

    /*.frame-solution-row2 {*/
    /*    grid-template-columns: repeat(1, 1fr);*/
    /*}*/
    /*.frame-solution-row2 > :nth-child(1),*/
    /*.frame-solution-row2 > :nth-child(2),*/
    /*.frame-solution-row2 > :nth-child(3),*/
    /*.frame-solution-row2 > :nth-child(4),*/
    /*.frame-solution-row2 > :nth-child(5) {*/
    /*    grid-column: span 1;*/
    /*}*/

    .frame-solution-column2-description {
        flex-direction: row;
        gap: 16px;
    }
    .frame-solution-column-description-item-text-center {
        text-align: start;
    }

    .curs-structure-cards {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
    }

    .image-item {
        flex: 0 0 175px; /* Fixed width, prevents wrapping */
        border-radius: 30px;
    }

    .frame-whom-card {
        padding: 20px;
    }

    .frame-crm-image {
        display: none;
    }

    .frame-crm-image-mobile {
        display: flex;
        padding-left: 0;
    }

    .frame-solution-texts-title {
        font-size: 24px;
    }

    /* App Section */
    .no_english_title {
        line-height: 120%
    }

    .title-input-text,
    .title-input-text-dark {
        font-size: 16px;
    }

    .input-field,
    .input-field-dark,
    .input-area-dark {
        font-size: 16px;
    }

    .scroll-container {
        /*padding: 0 20px; !* Space for buttons *!*/
    }
    .scroll-btn {
        /*display: none;*/
    }

    .scroll-video-container {
        /*padding: 0 20px; !* Space for buttons *!*/
    }
}


/* Small mobile adjustments */
@media screen and (max-width: 630px) {
    .header {
        padding: 10px 15px;
        top: 10px;
    }

    .language-switcher {
        margin-right: 10px;
    }

    .button-header2 {
        width: 40px;
        height: 40px;
        /*padding: 8px;*/
    }

    .button-header-form {
        display: none;
    }

    html[lang="ru"] .crm-atp-logo {
        font-size: 48px;
    }

    .crm-atp {
        font-size: 28px;
        line-height: 140%;
    }
    /* Russian specific */
    html[lang="ru"] .crm-atp {
        font-size: 22px; /* Adjust as needed */
        line-height: 140%;
    }

    .course-subtitle {
        font-size: 28px;
        line-height: 150%;
    }

    .image-item {
        flex: 0 0 150px; /* Fixed width, prevents wrapping */
        border-radius: 20px;
    }

    .frame-footer-contact-us-row {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    .frame-section-3-title {
        text-align: center;
        font-size: 32px;
    }
    .highlight-middle-text {
        font-size: 38px;
    }

    .no-english-icon {
        width: 90px;
        height: 90px;
        border-radius: 45px;
        transition: all 0.3s ease;
    }
    .no-english-icon-svg {
        height: 45px;
        width: 45px;
        transition: all 0.3s ease;
    }
}


/* Small mobile adjustments */
@media screen and (max-width: 590px) {

    .frame-section-course-box-content {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .button-do-test,
    .button-do-reservation {
        width: calc(100% - 120px);
        padding: 16px 16px 16px 16px;
    }

    .curs-structure-card-button {
        width: calc(100%);
        padding: 16px 16px;
        transition: all 0.3s ease;
    }

    .no-english-icon {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        transition: all 0.3s ease;
    }
    .no-english-icon-svg {
        height: 40px;
        width: 40px;
        transition: all 0.3s ease;
    }

    .video-item {
        flex: 0 0 400px;
        transition: all 0.3s ease;
    }

}


/* Small mobile adjustments */
@media screen and (max-width: 560px) {

    .section-container {
        /* ширина с учетом отступов слева и справа по 40px */
        width: calc(100% - 20px);
        transition: all 0.3s ease;
    }
    .frame-crm {
        /* ширина с учетом отступов слева и справа по 40px */
        width: calc(100% - 20px);
        transition: all 0.3s ease;
    }

    .frame-whom {
        gap: 24px;
    }

    .crm-atp-logo {
        font-size: 48px;
    }
    html[lang="ru"] .crm-atp-logo {
        font-size: 42px;
    }

    .crm-atp {
        font-size: 26px;
        line-height: 140%;
    }
    /* Russian specific */
    html[lang="ru"] .crm-atp {
        font-size: 22px; /* Adjust as needed */
        line-height: 140%;
    }

    .no_english_title {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 30px;
        transition: all 0.3s ease;
    }
    .no_english_subtitle {
        font-size: 18px;
        line-height: 140%;
        transition: all 0.3s ease;
    }

    .video-item {
        flex: 0 0 380px;
        transition: all 0.3s ease;
    }

}


/* Small mobile adjustments */
@media screen and (max-width: 510px) {

    .section-container {
        /* ширина с учетом отступов слева и справа по 40px */
        width: calc(100%);
        transition: all 0.3s ease;
    }
    .frame-crm {
        /* ширина с учетом отступов слева и справа по 40px */
        width: calc(100%);
        transition: all 0.3s ease;
    }

    .frame-whom {
        padding: 0 10px;
    }

    .frame-section-3-title,
    .highlight-middle-text {
        line-height: 140%;
    }
    .no-english-item-text {
        line-height: 140%;
    }
    .frame-solution-column-description-item-text {
        font-size: 16px;
        line-height: 140%;
    }
    .frame-solution-column-description-item-text-center {
        font-size: 16px;
        line-height: 140%;
    }
    .frame-whom-card-item-text {
        line-height: 140%;
    }

    .no-english-card-texts {
        border-radius: 24px;
        padding: 16px;
        gap: 24px;
    }

    .frame-solution-box {
        border-radius: 24px;
    }
    .frame-solution-rows,
    .frame-solution-row {
        gap: 16px;
    }
    .frame-solution-column {
        padding: 16px;
    }
    .frame-solution-column-description {
        gap: 12px;
    }

    .frame-solution-column2 {
        padding: 16px;
    }
    .frame-solution-column2-description {
        gap: 12px;
    }

    .frame-whom-card {
        border-radius: 24px;
    }
    .frame-whom-card-items {
        gap: 16px;
    }
    .text-list-benefits {
        gap: 16px;
    }
    .custom-slider {
        max-width: 100%;
    }

    .curs-structure-card-texts {
        border-radius: 24px;
        gap: 16px;
        padding: 16px;
    }

    .video-item {
        border-radius: 28px;
        border-width: 18px;
        flex: 0 0 330px;
        transition: all 0.3s ease;
    }

}


/* Small mobile adjustments */
@media screen and (max-width: 480px) {

    .video-item {
        border-radius: 24px;
        border-width: 14px;
        flex: 0 0 300px;
        transition: all 0.3s ease;
    }
}


/* Small mobile adjustments */
@media screen and (max-width: 450px) {

    .course-subtitle {
        font-size: 26px;
    }

    .video-item {
        border-radius: 20px;
        border-width: 12px;
        flex: 0 0 175px;
        transition: all 0.3s ease;
    }
}


/* Small mobile adjustments */
@media screen and (max-width: 420px) {

    .course-subtitle {
        font-size: 24px;
    }

    .video-item {
        flex: 0 0 150px;
        transition: all 0.3s ease;
    }
}