@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;700;800&display=swap');


#who-carousel{
    margin-top: 17%;
}
.who{
    text-align: center;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2% 5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
html, body {
    position: fixed;
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0;
    font-family: "Fira Sans Condensed", sans-serif;
    box-sizing: border-box;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-container_img {
    width: 80px;
    margin-right: 20px;
}

.font_1 {
    font-size: 2rem;
    font-weight: 800;
}

.contact-container {
    display: flex;
    align-items: left;
    gap: 20px;
}

.button {
    padding: 10px 20px;
    background: linear-gradient(45deg, #00c3ff, #1900ff);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 2.3rem;
    transition: transform 0.3s ease;
}

.button:hover {
    transform: scale(1.1);
}

.main {
    position: relative;
    display: flex;
    width: 100%;
    text-align: center;

}

.photo_main {
    width: 100%;
    height: auto;
    filter: blur(3px);
}

.main_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* это точно центрирует блок по вертикали и горизонтали */
    color: white;
    text-align: center;


}

.heading_1 {
    font-size: 4rem;

}

.heading_1_text {
    font-size: 3rem;
    
}

.about {
    margin-top: 10%;
}
#who-carousel{
    margin-top: 20%;
}



.who_text_div {
    margin-left: 15%;
    width: 30%;
    padding-bottom: 40%;
}


.groups {
    margin-top: -30%;
}

.heading_2 {
    padding-top: 10%;
    padding-bottom: 11%;
    color: rgb(0, 0, 0);
    margin-top: -5%;
    height: 0.5%;


}

.groups_butt {
    display: flex;
    justify-content: center;
    /* Центрирование по горизонтали */
    align-items: center;
    /* Центрирование по вертикали */
    gap: 20px;
    /* Расстояние между кнопками */
    flex-wrap: wrap;
    /* Чтобы кнопки не выходили за пределы экрана */
   margin-top: -5%;
    /* Отступ сверху, можно настроить */
}

.btn {

    border: none;
    background: linear-gradient(145deg, #1976D2, #2196F3);
    color: white;
    font-size: 1.2rem;
    padding: 14px 28px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 4%;
    margin-top: 10%;
}

.btn:hover {
    background: linear-gradient(145deg, #64b5f6, #42a5f5);
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}

.buttons {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;

}

.image-container img {
    width: 70%;
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    margin-left: 15%;
}

.btn:active {
    transform: translateY(2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.who_text,
.ol_groups li,
.trainers_inf {
    font-size: 1.5rem;
}

.groups_head_div {
    position: flex;

    text-align: center;
}


.map_head_div{
    
    /* Максимально влево и по центру вертикали */
    background-repeat: no-repeat;
    width: 100%;
    color: rgb(0, 0, 0);
    display: block;
    margin-bottom: 6%;}
    .map_head_div p{
    
        
       text-align: center;
        font-size: 2rem;
        margin-left: 10%;
    width: 80%;}
.timeTable {
    margin-top: 50%;
    text-align: center;
}



.timeTable_img {
    width: 70%;
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    margin-left: -35%;
    margin-top: 5%;
}

.trainers {

    margin-top: 70%;
}

.trainers_head {
    padding-top: 0%;
    padding-bottom: 0%;
    color: rgb(0, 0, 0);
    margin-top: 15%;
    height: 0.5%;
    text-align: center;

}
.crystall_under{

    text-align: center;
    font-size: 2.5rem;
}
.trainers_head_text {
   
    width: 100%;
    color: rgb(0, 0, 0);
    margin-top: 15%;
}

.trainers_inf {
    width: 20%;
    margin-left: 15%;
    margin-top: 18%;
}

.trainers_img {
    position: absolute;
    left: 5%;
    width: 40%;
    height: auto;
    border-radius: 20px;
    z-index: 1;
    margin-top: -15%;

}


.under {
    background-color: rgb(24, 24, 24);
    width: 100%;
    height: 10%;
}

.map {
    margin-top: 70%;
    width: 100%;
    flex-direction: column;
    text-align: center;
    display: flex;
    justify-content: center;
    /* Центрирует по горизонтали */

}

.map_head {
   
    margin-left: 0;
    /* Отступ между заголовком и картой */
}
.map_head_div{text-align: center;}
.map_item {
    margin: 0 auto;
    /* Центрируем блок */
    width: 100%;
    max-width: 400px;
    /* Ограничиваем ширину карты */
}

.under_text {
    text-align: center;
    font-size: 140%;
    color: white;
    padding-top: 2.5%;
}

.advantages_head {
    text-align: center;
    margin-top: 10%;
    margin-bottom: 10%;
}

.advantagePlanText {
    margin-bottom: 40%;
}

.advantageColumns {

    display: flex;
    justify-content: space-between;
    /* Равномерное распределение колонок */
    width: 100%;
    box-sizing: border-box;
    padding: 0 5%;
    /* Отступы слева и справа */

}

.advantageColumn1,
.advantageColumn2,
.advantageColumn3 {
    width: 27%;
    /* Уменьшенная ширина колонок */
    box-sizing: border-box;
    /* Учитываем padding и border */
    text-align: center;
    /* Центрируем текст */
    display: flex;
    flex-direction: column;
    /* Размещаем элементы вертикально */
    align-items: center;
    /* Центрируем содержимое */
}

.advantageColumns h1 {
    font-size: 1.2em;
    /* Уменьшает размер заголовка */
    word-break: break-word;
    /* Переносит длинные слова */
}


.column1_under,
.column2_under,
.column3_under{
    height: 250px;
    align-self: flex-start;
    /* Прижимаем вторые картинки вверх */
    margin-top: auto
}


/* Дополнительно для картинок внутри третьей колонки */


.advantageColumn1 img,
.advantageColumn2 img,
.advantageColumn3 img {
    max-width: 100%;
    /* Предотвращаем выход изображений за границы */
    height: auto;
    /* Сохраняем пропорции */
}


.carousel-container {
    position: absolute;
    width: 40%;
    max-width: 300px;
    margin: 20px auto;
    overflow: hidden;
    margin-left: 50%;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    /* Фиксируем ширину слайдов */
    box-sizing: border-box;
}

.carousel-slide img {
    width: 100%;
    display: block;
}
.form {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 33%;  /* ← ДОБАВЬТЕ ЭТО */
    margin-bottom: 40px;
    background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    text-align: center;
}

.form_head h1 {
    color: white;
    text-align: center;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* Крупная надпись */
.contact-info {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.big-message {
    font-size: 42px;
    font-weight: 900;
    color: #1a1a2e;
    margin-bottom: 30px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.phone-number {
    margin: 25px 0 15px;
    padding: 20px;
    background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
    border-radius: 60px;
    transition: transform 0.3s ease;
}

.phone-number:hover {
    transform: scale(1.02);
}

.phone-label {
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    margin-right: 10px;
}

.phone-link {
    font-size: 36px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.phone-link:hover {
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    text-decoration: underline;
}

.small-hint {
    font-size: 16px;
    color: #666;
    margin-top: 20px;
    font-style: italic;
}
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}

#trainers-carousel {
    width: 40%;
    max-width: 600px;
    margin-left: 45%;
    overflow: hidden;
    position: relative;
   margin-top: -48%;
    /* Или другое значение */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.carousel-slide img {
    display: block;      /* Убираем зазор снизу */
    width: 100%;        /* Подстраиваем под ширину */
    height: auto;       /* Сохраняем пропорции */
  }

#trainers-carousel .carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

#trainers-carousel .carousel-slide {
    min-width: 100%;
    height: auto;
    object-fit: cover;
}
#feedback-carousel{
margin-left: 30%;

}
.trainers_img {
    width: 100%;
    display: block;
    border-radius: 12px;
}
.feedback{
    margin-top: 20%;
}
.feedback_head{
    text-align: center;
}

@media (min-width: 1200px) {
    #feedback-carousel{
margin-left: 40%;

}
.advantages h1{
    font-size: 1.7rem;
}
.advantages p{
    font-size: 1.3rem;
}
.font_1 {
        font-size: 1.5rem;
        width: 200;
    }
   .carousel-slide img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    }

#who-carousel{
    margin-top: 16%;
    margin-left: 70%;
}
   .trainers{
    position: relative;
   }
  .groups_butt {
  
    gap: 10px;
   
}
.carousel-container {

    width: 100%;
    overflow: hidden;
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
    .button {
    padding: 13px 20px;
    margin-left: -30%;
    background: linear-gradient(45deg, #00c3ff, #1900ff);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.3rem;
    transition: transform 0.3s ease;
    }
    .button_1 {
    padding: 13px 20px;
    background: linear-gradient(45deg, #00c3ff, #1900ff);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 2rem;
    transition: transform 0.3s ease;
    }
    .logo-container_img{

        width: 50px;
    }
    .heading_1 {
        font-size: 4.0rem;
    }

    .heading_1_text {
        font-size: 2.0rem;
    }

    .button {
        font-size: 1.5rem;
        padding: 6px 14px;
    }

   .who_text{
    font-size: 1.3rem;
   }

   
    .btn {
        height: 20%;
        width: 13%;
        font-size: 1.4rem;
        padding: 1px;
         border-radius: 5px;
    }

    .map_head_div p {
        font-size: 1.5rem;
    }

    .trainers_img {
        width: 100%;
        
    }
#trainers-carousel {
    position: relative;
    width: 400px; /* Сделаем ширину карусели 100% */
    max-width: 600px; /* Установим максимальную ширину */
  margin-left: 60%;
  margin-top: -30%;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Скрываем любые элементы, выходящие за пределы */
}

#trainers-carousel .carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

#trainers-carousel .carousel-slide {
    flex: 0 0 100%; /* Каждый слайд будет занимать 100% ширины */
    display: flex;
    justify-content: center;
    align-items: center;
}

#trainers-carousel .carousel-slide img {
    width: 100%; /* Изображение будет растягиваться на всю ширину контейнера */
    height: 100%; /* Высота изображения также будет 100% */
    object-fit: cover; /* Изображение заполняет контейнер без искажения пропорций */
    display: block; /* Убираем лишние пробелы */
}
    .trainers_inf {
    font-size: 1.3rem;
    }

    .advantageColumn1,
    .advantageColumn2,
    .advantageColumn3
    {
        width: 25%;
        margin-bottom: 20px;
        font-size: 0.4rem;
    }
    .column1_under {
        width: 100%;
    }
    
    .column2_under img,
    .column3_under img {
        width: 100%;
    }
   
    .column1_under img{
        width: 180%;
    }
    .form {
        width: 100%;
        font-size: 1.5rem;
    }
   
    .form input {
        font-size: 1.5rem;
        padding: 10px;
    }

    .form button {
        font-size: 2rem;
        padding: 10px;
    }

    .under_text {
        font-size: 1rem;
    }

}
@media (max-width: 720px) {
    .font_1 {
        font-size: 0.8rem;
        width: 200;
    }
    #who-carousel{
    margin-top: 25%;
    }
   /* Уменьшаем блок с телефоном на мобилках */
.form {
    max-width: 90% !important;
    padding: 15px !important;
    margin: 0 auto !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.form_head h1 {
    font-size: 18px !important;
    margin-bottom: 20px !important;
}

.contact-info {
    padding: 15px !important;
}

.big-message {
    font-size: 20px !important;
    margin-bottom: 15px !important;
}

.phone-number {
    margin: 15px 0 10px !important;
    padding: 12px !important;
}

.phone-label {
    font-size: 14px !important;
}

.phone-link {
    font-size: 18px !important;
    letter-spacing: 1px !important;
}

.small-hint {
    font-size: 12px !important;
    margin-top: 10px !important;
}
  .groups_butt {
  
    gap: 10px;
   
}
    .button {
    padding: 13px 20px;
    margin-left: -30%;
    background: linear-gradient(45deg, #00c3ff, #1900ff);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.3rem;
    transition: transform 0.3s ease;
    }
    .button_1 {
    padding: 13px 20px;
    background: linear-gradient(45deg, #00c3ff, #1900ff);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.6rem;
    transition: transform 0.3s ease;
    }
    .logo-container_img{

        width: 15px;
    }
    .heading_1 {
        font-size: 2.0rem;
    }

    .heading_1_text {
        font-size: 1.0rem;
    }

    .button {
        font-size: 0.4rem;
        padding: 6px 14px;
    }

   .who_text{
    font-size: 0.5rem;
   }

    

    .btn {
        height: 15%;
        width: 13%;
        font-size: 0.5rem;
        padding: 1px;
         border-radius: 5px;
    }

    .map_head_div p {
        font-size: 1.5rem;
    }

    .trainers_img {
        width: 100%;
        margin-top: 10%;
    }

   
    .trainers_inf {
    font-size: 0.5rem;
    }

    .advantageColumn1,
    .advantageColumn2,
    .advantageColumn3
    {
        width: 25%;
        margin-bottom: 20px;
        font-size: 0.4rem;
    }
    .column1_under {
        width: 100%;
    }
    
    .column2_under img,
    .column3_under img {
        width: 100%;
    }
   
    .column1_under img{
        width: 180%;
    }
    .form {
        width: 100%;
        font-size: 1.5rem;
    }
    .form {
            padding: 20px;
        }
        
        .big-message {
            font-size: 28px;
        }
        
        .phone-link {
            font-size: 24px;
        }
        
        .form_head h1 {
            font-size: 22px;
        }
    .form input {
        font-size: 1.5rem;
        padding: 10px;
    }

    .form button {
        font-size: 2rem;
        padding: 10px;
    }

    .under_text {
        font-size: 1rem;
    }
    
}