@media (max-width: 1200px) {
    html {
        font-size: 14px;
    }

    #order-process-cards {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 12px;
    }

    #open-app-button-in-menu,#logo-wrapper,#language-dropdown-in-menu {
        display: none;
    }

    #open-app-button-out-menu-wrapper {
        display: inline-flex;
    }

    #logo-out-menu-wrapper {
        display: inline-flex;
    }

    #blog-button:hover #blog-wrapper {
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
    }

    #article-group1 {
        -ms-grid-columns: auto 42rem 19rem auto;
        grid-template-columns: auto 42rem 19rem auto;
    }

    #how-it-works-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .pricing-card-header h1 {
        font-size: 2.5rem;
    }

    .phone-app-section {
        margin-bottom: 0.5rem;
    }


}

@media (max-width: 768px) {
    html {
        font-size: 9px;
    }

    #phone-mockup {
        display: none;
    }

    #contact-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 15px;
        padding-right: 15px;
    }

    .ntb-content {
        width: 100%;
    }

    #other-info {
        margin-top: 6rem;
    }

    .about-us-article-cards {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .about-us-card {
        width: 100%;
    }

    #medial-partners-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    #wocabee-footer {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        row-gap: 0.5rem;
        padding-left: 15px;
        padding-right: 15px;
    }

}

@media (max-width: 576px) {
    html {
        font-size: 12px;
    }

    #mobile-title-dash {
        display: none;
    }

    .mobile-title-new-line {
        display: inline;
    }

    .navbar-toggler {
        width: 100%;
    }

    #mode-nav-item {
        width: 100%;
    }

    #mode-nav-item .dropdown {
        width: 100%;
    }

    .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #open-app-button-out-menu-wrapper {
        width: 100%;
    }

    #logo-out-menu {
        width: 16rem;
    }

    #logo-out-menu-wrapper {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    #mode-button {
        width: 100%;
    }

    .country-flag {
        width: 2.5rem;
    }

    .ntb-app-screen .btn {
        font-size: 0.8rem !important;
    }

    #article-group1 {
        -ms-grid-rows: auto auto auto auto 10rem auto;
        grid-template-rows: auto auto auto auto 10rem auto;
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
    }

    #logo-wrapper {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / 2;
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    #news {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        grid-row: 2 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / 2;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    #logo {
        width: 17rem;
    }

    #main-article {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / 2;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-row: 3 / 4;
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
    }

    #main-title {
        text-align: center;
    }

    #main-description {
        width: 100%;
    }

    #version-buttons button {
        width: 100%;
    }

    #iphone-mockup-article {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / 2;
        -ms-grid-row: 4;
        -ms-grid-row-span: 2;
        grid-row: 4 / 6;
        z-index: 20;
        padding-left: 15px;
        padding-right: 15px;
    }

    #iphone-mockup {
        width: 100%;
        margin: 0;
    }

    #iphone-mockup .btn {
        height: 13vw;
        font-size: 5vw;
    }

    .phone-app-method h6 {
        margin-bottom: 6vw;
        font-size: 5vw;
    }

    #ntb-mockup {
        width: 100%;
    }

    .device-wrapper {
        max-width: none;
    }

    .btn {
        font-size: 1.8rem;
        border-radius: 0.3rem;
        padding: 0.5rem 1rem;
    }

    .phone-app-screen.standard .speaker {
        font-size: 2.3rem;
        margin-top: 0.5rem;
    }

    h6 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    #findPair-header {
        margin-bottom: 1rem;
    }

    .phone-app-header {
        font-size: 2.5rem;
        padding: 0.5rem 1rem;
    }

    .phone-app-buttons {
        font-size: 1.7rem;
    }

    .phone-app-section {
        margin-bottom: 2rem;
    }

    .phone-app-section-kids {
        margin-bottom: 4rem;
        margin-top: 3rem;
    }

    .phone-app-input {
        height: calc(1.5em + 1rem + 2px);
        padding: 0.5rem 1rem;
        font-size: 5vw;
        line-height: 1.5;
        border-radius: 0.3rem;
    }

    .phone-app-screen label {
        width: 100%
    }

    .phone-app-image {
        width: 41vw;
    }

    .progress {
        height: 1.8rem;
        font-size: 1.6rem;
    }

    .phone-app-screen.kids .speaker{
        font-size: 4rem;
    }

    #revolution-in-learning-article {
        -ms-grid-row: 5;
        -ms-grid-row-span: 2;
        grid-row: 5 / 7;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / 2;
        background-image: url('../img/honeycomb-bg.svg');
        background-repeat: repeat;
        background-size: cover;
        text-align: center;
        color: #FFFFFF;
        z-index: 0;
    }

    #revolution-in-learning-article-header {
        margin-top: 15rem;
    }

    #how-it-works-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    #how-it-works-button {
        width: 100%;
    }

    .iframe-video {
        width: 100%;
        height: inherit;
    }

    #price-country-select {
        -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
        justify-content: stretch;
    }

    #price-country-select-dropdown {
        width: 100%;
    }

    #pricing-cards {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .pricing-button {
        width: 100%;
    }

    #order-process-cards {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
    }

    .order-process-card {
        width: 100%;
    }

    #reviews-article .slick-arrow {
        font-size: 4em;
    }

    #star-ratings {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .reviews-carousel {
        width: 80%;
    }

    #switch-reviews-buttons {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .switch-reviews-button.active {
        width: 100%;
    }

    #message {
        background-size: auto;
    }
}


@media (max-width: 376px) {
    html {
        font-size: 10px;
    }

    #reviews-article .slick-arrow {
        font-size: 3em;
    }

    .reviews-carousel {
        width: 75%;
    }

    .phone-app-image {
        width: 11rem;
    }

    .review-card {
        aspect-ratio: 1 / 1.5;
    }

    #findPair .phone-app-section {
        margin-bottom: 1rem;
    }
}