/* // Устройства XX-Large (большие настольные компьютеры, 1400 пикселей и выше) */
@media (min-width: 1400px) {}

/* Устройства X-Large (большие настольные компьютеры, 1200 пикселей и выше) */
@media (max-width: 1200px) {
    .banner-title {
        font-size: 48px;
    }

    .banner-statistic-item-number {
        font-size: 34px;
    }

    #circle-1 {
        top: -30px;
        right: 180px;
        width: 268px;
        height: 268px;
    }

    #circle-2 {
        top: 276px;
        left: -30px;
        width: 245px;
        height: 245px;
    }

    #circle-3 {
        top: 200px;
        right: 60px;
        width: 189px;
        height: 189px;
    }

    .why-choose-us-block-title {
        font-size: 38px;
    }

    #circle-4 {
        width: 288px;
        height: 288px;
        top: 120px;
        left: 80px;
        background: #6FDBF5;
    }

    #circle-5 {
        width: 245px;
        height: 245px;
        top: 420px;
        left: 1px;
        background: #B8D0E0;
    }

    #circle-6 {
        width: 149px;
        height: 149px;
        top: 420px;
        left: 280px;
        background: #D92946;
    }

    .our-expert-teachers-body-item {
        margin-bottom: 30px;
    }

    .our-expert-teachers-body-item.active {
        width: 100%;
    }

    .our-expert-teachers-body {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .testimoinals-main {
        flex-direction: column;
    }

    .testimonials-block-left {
        width: 100%;
    }

    .testimoinals-block-right {
        width: 100%;
        margin-top: 40px;
    }

    .testimoinals-block-right-bottom {
        justify-content: space-around;
    }

    .testimonial-block-right-bottom-image {
        text-align: center;
        width: auto;
    }

    .banner-bottom {
        margin-top: 120px;
    }

    .banner-bottom-text {
        width: 43%;
    }

    .banner-bottom-title {
        font-size: 48px;
    }

    .maps {
        width: 100%;
    }

    .maps-icons {
        margin-top: 40px;
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }

    .maps-wrap {
        flex-direction: column;
    }

    .modal-window {
        width: 70%;
    }
}

@media (max-width: 1100px) {
    .banner-bottom-text {
        width: 38%;
    }

    .banner-bottom-title {
        font-size: 44px;
    }
}

/* Устройства Large (настольные компьютеры, 992 пикселей и выше) */
@media (max-width: 992px) {
    .banner-title {
        font-size: 36px;
    }

    .banner-statistic-item-number {
        font-size: 20px;
    }

    #circle-1 {
        top: 20px;
        right: 180px;
        width: 230px;
        height: 230px;
    }

    #circle-2 {
        top: 256px;
        left: -30px;
        width: 225px;
        height: 225px;
    }

    #circle-3 {
        top: 200px;
        right: 60px;
    }

    #circle-6 {
        display: none;
    }

    .why-choose-us-block {
        flex-direction: column;
    }

    .why-choose-us-block-left-side {
        justify-content: center;
    }

    .why-choose-us-block-right-side {
        margin-top: 40px;
    }

    .why-choose-us-block-left-side, .why-choose-us-block-right-side {
        width: 100%;
    }

    .why-choose-us-block-title {
        font-size: 34px;
    }

    .course-categories-prices-block {
        flex-direction: column;
    }

    .course-categories-prices-block-left {
        width: 100%;
    }

    .course-categories-prices-block-right {
        width: 100%;
    }

    .banner-bottom {
        margin-top: 80px;
    }

    .banner-bottom-text {
        width: 30%;
    }

    .banner-bottom-title {
        font-size: 38px;
    }

    .modal-window {
        width: 80%;
    }
}

@media (max-width: 952px) {
    #circle-1 {
        top: 20px;
        right: 180px;
        width: 230px;
        height: 230px;
    }

    #circle-2 {
        top: 256px;
        left: -30px;
        width: 165px;
        height: 165px;
    }

    #circle-3 {
        top: 200px;
        right: 60px;
    }

    .testimonial-block-right-bottom-image {
        text-align: center;
        width: 32%;
    }

    .banner-bottom {
        background-position: center -130px;
        flex-direction: column;
        padding-top: 700px;
    }

    .banner-bottom-text {
        width: 100%;
        align-items: center;
    }
}

@media (max-width: 892px) {
    .banner-title {
        font-size: 30px;
    }

    .btn-banner-left {
        font-size: 14px;
    }

    .btn-banner-right {
        font-size: 14px;
    }
}

@media (max-width: 820px) {
    .banner-title {
        font-size: 48px;
    }

    .banner {
        flex-direction: column;
    }

    .banner-left-side {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .banner-right-side {
        max-width: 100%;
        flex-direction: column;
        position: relative;
    }

    .banner-image {
        align-self: end;
    }

    .banner-statistic {
        display: flex;
        flex-direction: row;
        order: -1;
        position: absolute;
        bottom: 0;
        left: 24px;
        right: 24px;
        justify-content: space-around;
        align-items: center;
    }

    .banner-statistic-item {
        margin: 0;
        padding: 20px;
    }

    .btn-banner-left {
        font-size: 18px;
    }

    .btn-banner-right {
        font-size: 18px;
    }
}

@media (max-width: 800px) {
    .menu-list {
        flex-direction: column;
    }

    .logo {
        align-self: flex-start;
    }

    .nav-btn {
        display: block;
        align-self: flex-end;
    }

    .main-nav {
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    .menu {
        text-align: right;
        visibility: hidden; /* Скрыто по умолчанию на маленьких экранах */
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: scaleY(0);
        transform-origin: top;
        transition: visibility 0.5s, opacity 0.5s, max-height 0.5s, transform 0.5s;
    }

    .menu.open {
        visibility: visible;
        opacity: 1;
        max-height: 500px; /* Достаточное значение для меню */
        transform: scaleY(1);
        margin: 20px 0 10px;
    }

    .menu-list-item {
        font-size: 26px;
        margin-right: 0;
    }

    .appointment {
        display: none;
    }
}

/* Устройства Medium (планшеты, 768 пикселей и выше) */
@media (max-width: 768px) {

    .banner-title {
        font-size: 38px;
    }

    .banner-statistic {
        left: 16px;
        right: 16px;
    }

    .banner-bottom {
        padding-top: 800px;
    }

    #company {
        display: none;
    }

    .our-expert-teachers-content-wrapper {
        position: relative;
        flex-direction: column;
        padding-bottom: 20px;
        padding-right: 20px;
    }

    .our-expert-teachers-body-item-title-block {
        align-self: flex-start;
    }

    .our-expert-teachers-body-item.active .our-expert-teachers-body-item-content-block {
        width: 100%;
    }

    .our-expert-teachers-body-item.active .our-expert-teachers-body-item-title-block {
        width: 100%;
    }

    .our-expert-teachers-body-item.active {
        text-align: center;
    }

    .fill-form-top-title {
        font-size: 32px;
    }

    .fill-form-body-middle {
        flex-direction: column;
    }

    .fill-form-body-left {
        width: 100%;
    }

    .fill-form-body-right {
        width: 100%;
    }

    .typedata {
        padding: 10px;
        border-radius: 5px;
    }

    .our-expert-teachers-body-item-name, .our-expert-teachers-body-description {
        color: #2F4A50;
    }

    .our-expert-teachers-body-item.active .our-expert-teachers-body-item-name {
        color: #FFFFFF;
    }

    .our-expert-teachers-body-item.active .our-expert-teachers-body-description {
        color: #FFFFFF;
    }

    .our-expert-teachers-head-btn {
        font-size: 14px;
        padding: 10px 16px;
    }
}

/* Устройства X-Small (портретные телефоны, менее 576 пикселей) */
/* Нет медиа-запроса для `xs`, так как это значение по умолчанию в Bootstrap */

 /* Устройства Small (телефоны с горизонтальной ориентацией, 576 пикселей и выше) */
 @media (max-width: 576px) {
     .banner-title {
         font-size: 28px;
     }

     .why-choose-us-block {
         margin-top: 0;
     }

     .banner-statistic {
         left: 10px;
         right: 10px;
     }

     .why-choose-us-list-item {
         width: 100%;
     }

     .course-categories-prices-block-right {
         width: 100%;
         flex-direction: column;
     }

     .course-categories-prices-block-description {
         width: 100%;
     }

    .fill-form-top-title {
        font-size: 24px;
    }

    .fill-form-body-middle {
        display: block;
    }

    .fill-form-body-left {
        width: 100%;
    }

    .fill-form-body-right {
        width: 100%;
    }

    .typedata {
        padding: 10px;
        border-radius: 5px;
        font-size: 12px;
        width: 100%;
    }

     .banner-bottom {
         padding-top: 840px;
     }

     #company, #support {
         display: none;
     }

     .our-expert-teachers-head-btn {
         font-size: 12px;
     }

     .footer-top {
        flex-direction: column;
     }

 }

@media (max-width: 500px) {
    .emoji {
        display: none;
    }

    .top-menu {
        font-size: 26px;
    }

    #circle-1 {
        top: 60px;
        right: 180px;
        width: 160px;
        height: 160px;
    }

    #circle-2 {
        top: 256px;
        left: -30px;
        width: 105px;
        height: 105px;
    }

    #circle-3 {
        top: 200px;
        right: 10px;
        width: 139px;
        height: 139px;
    }

    #circle-4 {
        width: 208px;
        height: 208px;
        top: 200px;
        left: 25px;
    }

    #circle-5 {
        width: 195px;
        height: 189px;
        top: 450px;
        left: 0;
    }
}

@media (max-width: 460px) {
    #circle-6 {
        width: 139px;
        height: 139px;
        top: 320px;
    }
}

@media (max-width: 430px) {

    .fill-form-top-title {
        font-size: 16px;
        margin: 10px;
    }

    .fill-form-body-middle {
        margin: 10px;
    }

    .fill-form-body-left {
        width: 100%;
    }

    .fill-form-body-right {
        width: 100%;
    }

    .typedata {
        border-radius: 5px;
        font-size: 10px;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

    .fill-form-fields {
        margin: 10px 0;
    }

    .fill-form-fields-bottom {
        margin: 0 10px 10px;
        padding-bottom: 0;
    }

    .fill-form-fields-button {
        padding: 0 0 10px 0;
    }

    .btn-primary {
        background-color: #2F4A50;
        color: #6FDBF5;
        font-size: 12px;
    }

    .banner-statistic-item {
        padding: 5px;
    }

    .banner-statistic-item-number {
        font-size: 16px;
    }

    .banner-statistic-item-title {
        font-size: 14px;
    }

    .btn {
        padding: 8px 14px;
        border-radius: 7px;
    }

    .btn-banner-left {
        font-size: 14px;
        padding-top: 12px;
    }

    .btn-banner-right {
        padding-right: 48px;
        background-position: 90% center;
    }
}

@media (max-width: 430px) {
    #circle-1 {
        top: 50px;
        right: 100px;
    }

    #circle-3 {
        right: 0;
    }

    .banner {
        padding: 38px 27px 38px 38px;
    }

    .banner-title {
        font-size: 18px;
    }

    .banner-text {
        font-size: 14px;
    }

    .btn {
        padding: 8px 12px;
        border-radius: 7px;
        font-size: 12px;
    }

    .btn-banner-left {
        padding-top: 12px;
    }

    .btn-banner-right {
        padding-right: 48px;
        background-position: 90% center;
    }

    .banner-image {
        bottom: -38px;
    }
}

@media (max-width: 375px) {
    #circle-1 {
        top: 60px;
        right: 80px;
    }

    #circle-2 {
        top: 226px;
    }

    #circle-3 {
        top: 180px;
        right: -10px;
    }

    .banner-statistic-item-title {
        font-size: 12px;
    }

    .btn {
        padding: 8px 10px;
    }

    .btn-banner-left {
        padding-top: 12px;
    }

    .btn-banner-right {
        padding-right: 38px;
        background-position: 92% center;
    }
}