* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'DAMN';
  src: url('fonts/DAMN-Regular.woff') format('woff2'),
    url('fonts/DAMN-Regular.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



body {
  font-family: 'Damn', sans-serif;
  font-family: "Manrope", sans-serif;
  line-height: 1.6;
  background: url('images/all.bg.jpg') no-repeat center center fixed;
  /* Указываем фон-картину */
  background-size: cover;
  /* Растягиваем изображение на весь экран */
  height: 100%;
  overflow-x: hidden;
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}


header {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  

  .nav {
      max-width: 1400px;
    margin: auto;
    margin-top: 20px;
    width: 80%;
    display: flex;
  justify-content: space-between;
  /* Разделение элементов */
  align-items: center;
  /* Выравнивание элементов по вертикали */
  padding: 20px 40px;
  /* Отступы */
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid #ddd;
  transition: height 0.3s ease, padding 0.3s ease;
  /* Анимация */
  height: 80px;
  border-radius: 20px;

    @media (max-width: 760px) {
    width: 90%;
  }
  }
}

/* Логотип и текстовая секция */
.logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Контейнер для логотипа */
.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
    height: 100%;
    width: 46px;
  background-color: #ffffff00;
  border-radius: 10px;
  position: relative;
  transition: transform 1.5s ease-in-out;
  transform-origin: left;
  z-index: 1;
}

.logo-box img {
  width: 100%;
  height: 100%;
}

/* Название академии */
.logo-name {
  font-family: "Manrope", sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: #5cb1e0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.logo-name.animate {
  opacity: 1;
}


.content {
  position: relative;
  /* Для управления положением */
  left: -100px;
  /* Смещает содержимое влево */
}

/* Контейнер */
.text-section {
  position: relative;
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: bold;
  background-color: #ffffff00;
  color: #064066;
  padding: 5px 10px;
  border-radius: 15px;
  overflow: hidden;
}

/* Название Академии */
.academy-name {
  opacity: 0;
  /* Изначально текст невидим */
  transform: translateY(-20px);
  /* Начальное положение немного выше */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.academy-name::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: #064066;
  margin-top: -5px;
  opacity: 0;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Эффект при наведении */
.academy-name:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Хайлайтер */
.text-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #064066;
  transform: scaleY(0);
  /* Изначально хайлайтер невидим */
  transform-origin: top;
  /* Начало анимации сверху */
  transition: transform 1.2s ease, opacity 0.5s ease 1.2s;
  z-index: 1;
  /* Хайлайтер выше текста */
}

/* Появление хайлайтера */
.text-section.active::before {
  transform: scaleY(1);
  /* Заполнение блока сверху вниз */
  z-index: 1;
}

/* Исчезновение хайлайтера */
.text-section.done::before {
  transform: scaleY(0);
  /* Исчезновение вниз */
  transform-origin: bottom;
  /* Исчезает снизу */
}

/* Появление текста */
.text-section.done .academy-name {
  opacity: 1;
  /* Текст становится видимым */
  transform: translateY(0);
  /* Становится на место */
  z-index: 2;
  /* Выше хайлайтера */
}

/* Текст изначально невидим */
.text-bottom {
  opacity: 0;
  /* Текст изначально прозрачный */
  transition: opacity 2s ease;
  /* Плавный переход для появления */
  font-size: 24px;
  /* Размер текста */
  color: #000000;
  /* Белый текст */
  margin-top: 20px;
  /* Отступ сверху */
  text-align: left;
  /* Выравнивание текста по левому краю */
  max-width: 800px;
  /* Ограничиваем ширину текста, если нужно */
}

@media (max-width: 1280px) {
  .text-section {
    font-size: 18px;
  }


}

/* Навигация */
.nav-links {
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  /* Позволяет перенос ссылок */
  gap: 17px;
  justify-content: space-between;
  /* Равномерное распределение */

  @media (max-width: 1360px) {
gap: 10px;
  }
}

.nav-links a {
  position: relative;
  text-decoration: none;
  color: #444;
  font-weight: 300;
  padding: 10px 15px;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* Ссылки не будут переноситься */
}

.nav-links a:hover {
  color: #5cb1e0;
}

/* Текст кнопки Home */
.nav-links .nav-text {
  margin-left: 5px;
  /* Отступ от значка */
}

/* Эффект для активной ссылки */
.nav-links a.active::after {
  width: 90%;
  /* Линия полностью появляется */
}

.nav-links a.active {
  color: #5cb1e0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 7px;
  background-color: #5cb1e0;
  transition: width 0.3s ease;
  transform: translateX(-50%);
}

.nav-links a:hover::after {
  width: 80%;
}

/* Медиазапросы для уменьшения текста навигации на планшетах */
@media (max-width: 1280px) {
  .nav-links {
    gap: 3px;
    /* Уменьшаем расстояние между ссылками */
  }

  .nav-links a {
    font-size: 13px;
    /* Уменьшаем размер текста */
  }
}

@media (max-width: 970px) {
  .nav-links a {
    display: none;
    /* Скрываем все ссылки */
  }
}



header.nav {

  background-color: rgb(255, 255, 255);
  height: 60px;
  padding: 10px 25px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 30;
}

.logo-box {
  transition: all 0.3s ease;
  /* Плавное уменьшение */
}

header.shrink-header .logo-box {
  width: 40px;
}

.academy-name {
  transition: font-size 0.3s ease;
  /* Плавное изменение шрифта */
}

header.shrink-header .academy-name {
  font-size: 18px;
  /* Уменьшаем шрифт у названия */
}

.nav-links {
  transition: gap 0.3s ease;
  /* Плавное уменьшение расстояния между ссылками */
}

header.shrink-header .nav-links {
  gap: 8px;
  /* Уменьшаем расстояние между ссылками */
}

.nav-links a {
  transition: font-size 0.3s ease;
  /* Плавное уменьшение шрифта у ссылок */
}

header.shrink-header .nav-links a {
  font-size: 12px;
  /* Уменьшенный шрифт у ссылок */
}

.white-text {
  font-size: 1.3em;
}



.background-image {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden; /* Скрывает края картинки при увеличении */
  background: #000; /* Цвет подложки, пока грузится фото */
}

/* Создаем отдельный слой для картинки */
.background-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Переносим сюда все настройки фона */
  background: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)),
    url('images/header2.jpg') no-repeat top  / cover;

  

  z-index: 1; /* Картинка на заднем плане */
}



@media (max-width: 1160px) {
  .background-image {
    display: none;
  }
}

.overlay {
  z-index: 10; /* Поднимаем контент над фоном */
  position: relative;
  width: 100%;
  height: 100%;
}

/* Остальной ваш код без изменений */
/* 1. Появление всей карточки через clip-path */
.overlay .content {
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1400px;
display: flex;
flex-direction: column;
align-items: center;

.cta-button {
  margin-top: 20px;
  font-size: 1.25rem;
  padding: 20px 40px;
}
}



/* 2. Эффект печатающегося текста для заголовка */
.main-title {
  width: 100%;
  margin: auto;
    text-shadow: none;
 
    font-family: 'Inter', sans-serif;
            text-shadow: 0px 0px 10px black;
    line-height: 0.7;
    font-weight: 600;
    color: #ffffff;

  .line-1 {
    
      /* font-family: "Manrope", sans-serif; */

    font-size: 34px ;
     text-transform: uppercase; 
    }
    @media (max-width: 1400px) {
      .line-1 {

        font-size: 29px;
      }
    }
        @media (max-width: 1200px) {
      .line-1 {

        font-size: 27px;
      }
    }
  .line-2 {
            font-weight: 400;
    font-family: "Manrope", sans-serif;
    margin-top: 10px;
        display: block;  
         line-height: 1;    
     font-size: 1.5rem ;
  }
}



/* каждая строка */
/* .main-title .line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
} */

/* .main-title .line-1 {
  animation: typing 1.5s steps(30, end) forwards;
}


.main-title .line-2 {
  color: #0056b3;
  animation: typing 2.5s steps(30, end) forwards;
  animation-delay: 1.6s;
} */

/* 3. Эффект появления подзаголовка (плавное всплытие после заголовка) */
.subtitle {
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  margin-bottom: 30px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  
  /* Начальное состояние */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInSubtitle 1s ease-out forwards 4.5s; /* После печати текста */
}

/* Ключевые кадры для печати */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Ключевые кадры для мигающего курсора */
@keyframes blinkCursor {
  from, to { border-color: transparent; }
  50% { border-color: #0056b3; }
}

/* Ключевые кадры для подзаголовка */
@keyframes fadeInSubtitle {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Кнопка */
.cta-button {
  width: max-content;
  background: #00aced;
  /* Цвет из вашего скриншота */
  color: white;
  border: none;
  padding: 15px 40px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50px;
  /* Полностью круглая кнопка */
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 5px 15px rgba(0, 172, 237, 0.4);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 172, 237, 0.5);
}

/* Блок справа сверху */
.content-top-right {
  position: absolute;
  top: 120px;
  /* Чуть выше, если нужно */
  right: 40px;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: #333;
}

.content-top-right img {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}



/* Адаптив для мобильных (чтобы не перекрывало всё) */
@media (max-width: 768px) {
  .content {
    top: 60%;
    width: 95%;
  }

  .card-style {
    padding: 25px 20px;
  }

  .main-title {
    font-size: 20px;
  }

  .content-top-right {
    display: none;
    /* На мобильных часто лучше скрыть лишние плашки */
  }
}

/* Преимущества */
.section-advantages {
  margin: auto 20px;
  /* background: url(images/all.bg.white.jpg) no-repeat center center fixed; */
  background-size: cover;
  height: 100%;
}

.advantages {
  padding: 80px 0;
  max-width: 1200px;
  margin: auto;
  width: 100%;
  /* height: 550px; */
  display: flex;
  gap: 25px;

  p {
    line-height: 120%;
  }

  .advantages-main-card {
    width: 35%;
    border-radius: 20px;
    padding: 20px;
    background: linear-gradient(45deg, #003366, #5cb1e0);

    p {

      font-size: 40px;
      font-weight: 500;

      span:nth-child(1) {
        color: #ffffff;
      }

      span {
        color: #88c4e9;
      }
    }

    button {
      margin-top: 100px;
    }
  }

  .advantages-extra-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    flex-wrap: wrap;
    width: 65%;

  }

  .advantages-card {
    padding: 20px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #003366;
    position: relative;
    width: 100%;

    .title {
      font-weight: 800;
      font-size: 23px;
      width: 57%;
    }

    .text {
      margin-top: 10px;
      width: 62%;
    }
  }

  .advantages-card:nth-child(1) {
    color: white;
    background: #000;

    .text {
      color: gainsboro;
    }
  }

  .advantages-card:nth-child(2) {
    background: white;

    .title {
      color: #003366;
    }

    .text {
      color: black;
    }

  }

  .advantages-card:nth-child(3) {
    background: white;

    .title {
      color: #003366;
    }
  }

  .advantages-card:nth-child(4) {
    background: #003366;

    .title {
      color: #ffffff;
    }

    .text {
      color: gainsboro;
    }

    .advantages-img {
      border: 1px solid #ffffff;
    }
  }

  .advantages-img {
    transform: rotate(-23deg);
    border-radius: 20px;
    width: 160px;
    height: 160px;
    object-fit: cover;
    position: absolute;
    top: -17px;
    right: -20px;
    border: 1px solid #003366;
    box-shadow: 0px 17px 10px 0px #00000073;
  }

}

@media (max-width: 1111px) {
  .advantages {
    flex-direction: column;

    .advantages-main-card {
      width: 100%;
    }

    .advantages-extra-info {
      width: 100%;
    }
  }
}

@media (max-width: 750px) {
  .advantages {
    margin-top: 50px;

    .advantages-extra-info {
      grid-template-columns: repeat(1, minmax(0, 1fr));

    }
  }
}




.form-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #003366;
  color: white;
  width: 90%;
  max-width: 400px;
  padding: 20px;
  border: solid 2px white;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  z-index: 1000;
}

.form-container h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5;
}

.form-container input {
  width: 80%;
  margin-bottom: 15px;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 2px solid white;
  background-color: transparent;
  color: white;
}

.form-container input::placeholder {
  color: #cccccc;
}

.form-container input:focus {
  outline: none;
  border-bottom: 2px solid #87CEEB;
}

.form-container button {
  background-color: #5cb1e0;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.form-container button:hover {
  transform: scale(1.1);
  background-color: #5cb1e0;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.495);
}

/* Затенение фона при открытии формы */
.overlay-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.548);
  z-index: 1000;
}

.close-button {
  display: none;
      font-family: 'FontAwesome';
  /* Скрыть кнопку по умолчанию */
  position: absolute;
  /* Разместить относительно контейнера */
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 1001;
}

.close-button:hover {
  color: #87CEEB;
}

/* Когда форма активна, показать кнопку */
.form-container.active .close-button {
  display: block;
}


.reviews-section {
  padding: 60px 20px;
  background: url('images/all.bg.white.jpg') no-repeat center center fixed;
  background-size: cover;
  height: 100%;
}

.reviews-section h1 {
  position: relative;
  top: 15px;
  text-align: center;
  color: #064066;
  margin: 20px 0;
  text-shadow: 0px 0px 20px #064066d1;
}

.reviews-slider {
  padding: 60px 20px;
  /* добавил боковые отступы */
  position: relative;
  overflow: visible;
  /* позволяет теням выходить за границы */
}

.review-item {
  background: #5cb2e06a;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.review-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  object-fit: cover;
  margin-bottom: 15px;
}

.review-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.review-text {
  font-size: 16px;
  color: #0a0a0a;
  margin-bottom: 15px;
}

.read-more {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.read-more:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.swiper-button-prev,
.swiper-button-next {
  width: 70px;
  height: 70px;
  padding: 30px;
  background: #ffffff;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  transform: scale(1.1);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 30px;
  font-weight: bold;

  /* Применяем градиент только к тексту иконки */
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Убираем стандартную тень текста, если она мешает градиенту */
  text-shadow: none;
}

@media (max-width: 768px) {
  .reviews-section {
    padding: 40px 15px;
  }

  .reviews-section h1 {
    font-size: 3em;
    margin: 10px 0;
    top: 10px;
  }

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

  .review-text {
    font-size: 15px;
  }

  .read-more {
    font-size: 14px;
    padding: 8px 16px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 50px;
    height: 50px;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px;
  }
}


.section {
  background: url('images/all.bg.white.jpg') no-repeat center center fixed;
  /* Указываем фон-картину */
  background-size: cover;
  /* Растягиваем изображение на весь экран */
  height: 100%;
  min-height: 130vh;
}

section h1 {
  max-width: 80%;
  margin: 20px auto !important;
  position: relative;
  top: 15px;
  text-align: center;
  color: #064066;
  /* font-family: "Damn", sans-serif; */
  font-size: 5em;
  font-weight: 900;
  text-shadow: 0px 0px 20px #06406699;
}


.info-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.info-item {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 15px 20px;
  border-radius: 20px;
  width: 90%;
  max-width: 50%;
  position: relative;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Добавляем плавный переход для увеличения и тени */
  box-shadow: 0 4px 8px #064066b1;
  /* Начальная тень */
}

.info-item:hover {
  transform: scale(1.05);
  /* Легкое увеличение при наведении */
  box-shadow: 0 2px 30px #064066dc;
  /* Более выраженная тень при наведении */
}

.tag {
  font-size: 1.5rem;
  color: #064066;
  font-weight: bold;
  margin-bottom: 10px;
  /* Отступ снизу, чтобы отделить от текста */
}

.info-item p {
  text-align: center;
  padding: 0 40px;
  font-size: 1.125rem;
  color: #333;
  margin-top: 10px;
  /* Отступ сверху, чтобы отделить от tag */
}

.info-item img {
  position: relative;
  width: 100px;
  height: auto;
  margin-left: 150px;
}

@media (max-width: 768px) {
  .section {
    min-height: auto;
    /* убрали фиксированную высоту */
    padding: 20px 0 10px 0;
    /* верх 20px, низ 10px */
  }

  .section h1 {
    background: url('images/mobile-wht-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    font-size: 2.5em;
    text-shadow: 0px 0px 10px #06406699;
    color: #064066;
    /* Синий цвет текста */
  }

  .info-block {
    gap: 10px;
    padding: 0 10px;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    /* Размещаем элементы вертикально */
    align-items: flex-start;
    /* Выравнивание по левому краю */
    text-align: left;
    /* Текст тоже выравниваем по левому краю */
    width: 90%;
    /* Сделает блок шире */
    max-width: 800px;
    /* Ограничит максимальную ширину */
    padding: 15px;
    box-shadow: 0 2px 8px #06406699;
    margin-bottom: 10px;
  }

  .info-text {
    font-size: 0.9em;
  }

  .tag {
    font-size: 1em;
    font-weight: bold;
    color: #064066;
    margin-bottom: 5px;
    /* Отступ после тега */
  }

  .info-item p {
    font-size: 0.8em;
    margin: 0;
  }
}





.carousel-container {
  background: url('images/all.bg.jpg') no-repeat center center fixed;
  /* Указываем фон-картину */
  background-size: cover;
  /* Растягиваем изображение на весь экран */
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  max-height: 160vh;
}

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

.carousel h1 {
  position: relative;
  top: 15px;
  text-align: center;
  color: white;
  margin: 20px 0;
  text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.892);
}

.section2 h1 {
  position: relative;
  top: 15px;
  text-align: center;
  color: white;
  margin: 20px 0;
  text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.892);
}

.univers h2 {
  position: relative;
  text-align: center;
  color: azure;
  font-size: 1em;
}

.univers h4 {
  position: relative;
  text-align: center;
  color: azure;
  font-size: 1em;
}

.card {
  min-width: 300px;
  min-height: 80px;
  margin: 10px;
  padding: 20px;
  border-radius: 20px;
  border: 2px solid rgba(230, 230, 230, 0.911);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.64);
  text-align: center;
  color: rgb(72, 72, 72);
  transition: transform 0.3s ease;
  /* Плавное увеличение */
  text-decoration: none;
}

/* Эффект увеличения карточки при наведении */
.card:hover {
  transform: scale(1.05);
  /* Увеличиваем карточку на 5% */
}

/* Стиль для кнопок */
.card .btn {
  background-color: #5cb1e0;
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 30px;
  padding: 15px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card .btn:hover {
  background-color: #000011;
  transform: scale(1.01);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.card .btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.nav-button {
  position: absolute;
  top: 50%;
  background-color: #ffffffdd;
  border: none;
  color: rgb(0, 0, 0);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 5;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.711);
}

/* Эффект увеличения кнопки при наведении */
.nav-button:hover {
  background-color: #ffffffdd;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.792);
}

/* Эффект при нажатии */
.nav-button:active {
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.711);
}

.nav-button.left {
  left: 10px;
}

.nav-button.right {
  right: 10px;
}

.nav-button.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .carousel-container {
    background: url('images/mobile-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: auto;
    /* убрали фиксированную высоту */
    padding: 20px 0 10px 0;
    /* верх 20px, низ 10px */
  }

  .carousel h1,
  .section2 h1 {
    font-size: 3em;
    /* Уменьшаем заголовки */
    margin: 10px 0;
  }

  .univers h2,
  .univers h4 {
    font-size: 0.8em;
    /* Чуть увеличиваем, чтобы не были слишком маленькими */
  }

  .card {
    min-width: 90%;
    /* Растягиваем карточки */
    padding: 15px;
    margin: 30px auto;
    /* Увеличенный отступ между карточками */
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
  }


  .card img {
    height: 150px;
    /* Фиксируем высоту изображений */
  }

  .card .btn {
    padding: 10px 15px;
    font-size: 16px;
  }

  .nav-button {
    width: 40px;
    height: 40px;
    font-size: 18px;
    position: absolute;
    /* Чтобы не улетали вниз */
    top: 50%;
    /* Центрируем */
    transform: translateY(-50%);
  }

  .nav-button.left {
    left: 10px;
  }

  .nav-button.right {
    right: 10px;
  }
}



/* колледжи */
.carousel-container {
  min-height: 108vh;
  background-color: #000011;
  width: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
}

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

.carousel h1 {
  position: relative;
  top: 15px;
  text-align: center;
  color: white;
  margin: 20px 0;
  text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.892);
}

.section3 h1 {
  position: relative;
  top: 15px;
  text-align: center;
  color: white;
  margin: 20px 0;
  text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.892);
}


.card {
  display: flex;
  flex-direction: column;
  /* Разделение на верхнюю и нижнюю части */
  justify-content: space-between;
  /* Кнопка уходит вниз */
  align-items: center;
  /* Центрирует содержимое по горизонтали */
  min-width: 300px;
  min-height: 80px;
  margin: 10px;
  padding: 20px;
  border-radius: 20px;
  border: 2px solid rgba(230, 230, 230, 0.911);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.64);
  text-align: center;
  font-family: "Manrope", sans-serif;
  color: rgb(72, 72, 72);
  transition: transform 0.3s ease;
  /* Плавное увеличение */
  text-decoration: none;
  position: relative;
}

/* Эффект увеличения карточки при наведении */
.card:hover {
  transform: scale(1.05);
  /* Увеличиваем карточку на 5% */
}

/* Стиль для кнопок */
.card .btn {
  margin-top: auto;
  /* Отталкивает кнопку вниз */
  display: flex;
  justify-content: center;
  background-color: #5cb1e0;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 15px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card .btn:hover {
  background-color: #0056b3;
  transform: scale(1.01);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.card .btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.nav-button {
  position: absolute;
  top: 50%;
  background-color: #ffffffdd;
  border: none;
  color: rgb(0, 0, 0);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.711);
}

/* Эффект увеличения кнопки при наведении */
.nav-button:hover {
  background-color: #ffffffdd;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.711);
}

.nav-button.left {
  left: 10px;
}

.nav-button.right {
  right: 10px;
}

.nav-button.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

@media (max-width: 768px) {
  .carousel-container {
    background: url('images/mobile-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: auto;
    /* убрали фиксированную высоту */
    padding: 20px 0 10px 0;
    /* верх 20px, низ 10px */
  }

  .carousel h1,
  .section3 h1 {
    font-size: 3.5em;
    /* Уменьшаем заголовки */
    margin: 10px 0;
  }

  .card {
    min-width: 50%;
    /* Делаем карточки шире на мобильных */
    padding: 15px;
    margin: 15px 0;
    /* Увеличиваем расстояние между карточками */
    font-size: 14px;
    /* Уменьшаем текст */
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
  }

  .card img {
    height: 150px;
    /* Уменьшаем размер изображения */
  }

  .card .btn {
    padding: 10px 15px;
    font-size: 16px;
    /* Уменьшаем кнопку */
  }

  .nav-button {
    width: 40px;
    height: 40px;
    font-size: 18px;
    /* Уменьшаем кнопки */
  }

  .nav-button.left {
    left: 5px;
  }

  .nav-button.right {
    right: 5px;
  }
}



/* Общие стили для секции */
.programs {
  background: url('images/all.bg.white.jpg') no-repeat center center fixed;
  /* Указываем фон-картину */
  background-size: cover;
  /* Растягиваем изображение на весь экран */
  height: 100%;
  padding: 80px 20px;
  text-align: center;
  font-family: "Manrope", sans-serif;
  color: #fff;
  overflow: hidden;
}

/* Заголовок секции */
.programs h1 {
  position: relative;
  top: 15px;
  text-align: center;
  color: #064066;
  font-family: "Damn", sans-serif;
  font-size: 7em;
  margin: 20px 0;
  font-weight: 95;
  text-shadow: 0px 0px 20px #064066d1;
}

.programs-container {
  display: flex;
  flex-wrap: wrap;
  /* Разрешить перенос на новую строку */
  justify-content: center;
  /* Центровка карточек */
  gap: 20px;
  /* Отступы между карточками */
}


/* Карточка программы */
.program-item {
  background-color: #ffffffd1;
  border: 3px solid #0640669a;
  border-radius: 20px;
  width: 300px;
  padding: 20px;
  box-shadow: 0 0px 20px rgba(51, 0, 181, 0.5);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 0px 20px rgba(255, 255, 255, 0.468);
}

.program-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0px 20px rgba(255, 255, 255, 0.826);
  z-index: 1;
}

/* Заголовок программы */
.program-header h2 {
  font-size: 1.6em;
  font-family: 'Manrope', sans-serif;
  background-color: #064066d4;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Стили для нумерованного списка */
.program-item ol {
  padding-left: 20px;
  list-style-type: decimal;
  color: #fff;
}

.program-item ol li {
  font-size: 1.1em;
  margin-bottom: 15px;
  color: #000000;
  line-height: 1.8;
  text-align: left;
}

@media (max-width: 768px) {
  .programs {
    min-height: auto;
    /* убрали фиксированную высоту */
    padding: 20px 0 10px 0;
    /* верх 20px, низ 10px */
  }

  .programs h1 {
    background: url('images/mobile-wht-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    font-size: 3em;
    /* Уменьшаем заголовок для мобильных */
    text-shadow: 0px 0px 10px #064066d1;
  }

  .programs-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 колонки */
    padding-inline: 10px;
    gap: 15px;
    /* Отступы между карточками */
  }

  .program-item {
    width: 100%;
    /* Растягиваем карточку на всю ширину колонки */
    padding: 15px;
    /* Делаем отступы компактнее */
    border-radius: 15px;
  }

  .program-header h2 {
    font-size: 1.4em;
    /* Немного уменьшаем заголовок */
    padding: 8px;
  }

  .program-item ol li {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .programs-container {
    grid-template-columns: 1fr;
    /* Для маленьких экранов — одна колонка */
    padding: 0 10px
  }
}


/* Основной контейнер секции */
.accreditation-section {
  background: url('images/all.bg.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 80px 20px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
}

/* Ограничение ширины 1200px */
.container-1200 {
  max-width: 1200px;
  margin: 0 auto;
}

/* Флекс-сетка для контента */
.accreditation-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/* Текстовый блок */
.acc-text-block {
  flex: 1;
}

.label-orange {
  color: #f39c12;
  /* Оранжевый акцент "О нас" */
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}

.acc-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 25px;
}

.acc-list {
  list-style: none;
  padding: 0;
  margin-bottom: 35px;
}

.acc-list li {
  font-size: 20px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

/* Маленький штрих перед пунктами списка */
.acc-list li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: #f39c12;
}

/* Блок с картинкой */
.acc-image-block {
  flex: 1;
  display: flex;
  justify-content: center;
}

.qr-image {
  max-width: 400px;
  /* Размер как на фото */
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Кнопка-заглушка без оформления */
.custom-button-placeholder {
  /* Стили по умолчанию сброшены, настраивайте под себя */
  cursor: pointer;
}

/* Адаптивность для мобилок */
@media (max-width: 768px) {
  .accreditation-content {
    flex-direction: column;
    text-align: center;
  }

  .acc-list li {
    padding-left: 0;
  }

  .acc-list li::before {
    display: none;
  }

  .acc-title {
    font-size: 30px;
  }
}



.section4 {
  background: url('images/all.bg.jpg') no-repeat center center fixed;
  /* Указываем фон-картину */
  background-size: cover;
  /* Растягиваем изображение на весь экран */
  height: 100%;
  color: white;
  text-align: center;
  padding: 50px 20px;
}

.section4 h1 {
  text-transform: uppercase;
  position: relative;
  top: 15px;
  text-align: center;
  color: white;
  margin: 20px 0;
  text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.892);
}

.section4 h2 {
  font-size: 1.5em;
  margin-bottom: 40px;
  color: #dcdcdc;
  text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.892);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 450px;
  /* фиксированная высота */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, #ffffff00, #000000);
  color: white;
  padding: 20px;
  text-align: left;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 100%;
}

.gallery-item:hover .overlay {
  transform: translateY(0);
  opacity: 1;
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.hidden {
  display: none;
}

.show-more,
.hide-more {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: #5cb1e0;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.show-more:hover,
.hide-more:hover {
  transform: scale(1.2);
  background-color: #5cb1e0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.593);
}

@media (max-width: 930px) {
  .gallery {
    background: url('images/mobile-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    grid-template-columns: repeat(3, 1fr);
    /* 2 колонки для телефонов */
    gap: 10px;
    /* Уменьшаем расстояние между элементами */
  }

  .gallery-item {
    border-radius: 15px;
    /* Делаем углы чуть менее округлыми */
  }

  .gallery-item .overlay {
    padding: 10px;
    /* Меньше отступов для лучшего отображения */
  }
}

@media (max-width: 768px) {
  .gallery {
    background-attachment: scroll;
    background-position: center top;
    grid-template-columns: repeat(2, 1fr);
    /* 2 колонки для телефонов */
    gap: 10px;
    /* Уменьшаем расстояние между элементами */

  }

  .gallery-item {
    border-radius: 15px;
    /* Делаем углы чуть менее округлыми */
  }

  .gallery-item .overlay {
    padding: 10px;
    /* Меньше отступов для лучшего отображения */
  }

  .section4 h1 {
    font-size: 3em;
    /* Уменьшаем размер заголовка */
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
    /* Делаем тень мягче */
  }

  .section4 h2 {
    font-size: 1.1em;
    /* Уменьшаем подзаголовок */
    margin-bottom: 20px;
    /* Делаем отступы меньше */
  }
}




/* Общие настройки для футера */
.site-footer {
  font-family: "Manrope", "Arial", sans-serif;
  width: 100%;
  background-color: #f4f6f8;
  color: #333333;
}


.footer-top {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Сетка из 4 колонок */
.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  align-items: start;

}

/* Заголовки колонок */
.footer-column h3 {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


.footer-logo .logo-text {
  font-size: 28px;
  font-weight: 900;
  color: #0f173b;
  /* Темно-синий цвет лого */
  margin: 0 0 15px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-slogan {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin-bottom: 25px;
  max-width: 250px;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #064066;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.social-icon:hover {
  background-color: #5cb1e0;
  /* Синий при наведении */
  transform: translateY(-3px);
}

.social-icon:hover img {
  filter: none;
  opacity: 1;
}



.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 15px;
  color: #555;
}

.floor-highlight {
  display: block;
  font-size: 13px;
  color: #888;
  /* Чуть светлее основного текста */
  margin-top: 4px;
  font-weight: 400;
}


.contact-item i {
  margin-right: 10px;
  font-style: normal;
}

.contact-item a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}


.map-wrapper {
  min-width: 300px;
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

/* Растягиваем карту внутри и уменьшаем её масштаб */
.map-wrapper iframe {
  width: 200% !important;
  /* Делаем карту в 2 раза шире */
  height: 200% !important;
  /* И в 2 раза выше */
  transform: scale(0.5);
  /* Сжимаем обратно в 2 раза */
  transform-origin: 0 0;
  /* Точка сжатия — верхний левый угол */
  border: none;
}

/* --- Нижняя полоса --- */
.footer-bottom {
  background-color: #0f173b;
  /* Темно-синий цвет полосы */
  color: #ffffff;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  font-weight: 300;
}

/* --- Адаптив (Мобильная версия) --- */
@media (max-width: 900px) {}

@media (max-width: 600px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .footer-logo,
  .footer-slogan,
  .address-text {
    margin-left: auto;
    margin-right: auto;
  }

  .social-icons {
    justify-content: center;
  }

  .contact-item {
    justify-content: center;
  }
}


/* Основная секция */
.students-in-usa {
  padding: 40px;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
}

.section-header h1 {
  font-size: 3em;
  color: #000;
  margin-bottom: 10px;
}

.section-header h2 {
  font-size: 1.5em;
  color: #555;
}







.admission-steps {
  font-family: "Manrope", sans-serif;
  margin: 0;
  padding: 0;
  background: url('images/all.bg.white.jpg') no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  max-width: 100%;
  padding: 20px;
  text-align: center;
}

.admission-header {
  position: relative;
  top: 15px;
  text-align: center;
  color: #064066;
  font-family: "Damn", sans-serif;
  font-size: 7em;
  margin: 20px 0;
  font-weight: 95;
  text-shadow: 0px 0px 20px #064066af;
}

.admission-step {
  position: relative;
  display: none;
  width: 800px;
  margin: 0 auto;
  border: solid 5px #0640666a;
  border-radius: 35px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.719);
}

.admission-step.active {
  display: block;
}

.admission-step-background {
  background-size: cover;
  background-position: center;
  height: 400px;
}

.admission-step-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgb(0, 15, 48), rgba(255, 255, 255, 0));
}

.admission-step-title {
  position: relative;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  font-size: 34px;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.admission-step-number {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: rgb(255, 255, 255);
  color: #064066;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  z-index: 2;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.admission-step-description {
  position: relative;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  line-height: 1.6;
}

.admission-navigation {
  margin-top: 20px;
}

.admission-navigation button {
  padding: 10px 20px;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  background-color: #064066;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin: 0 10px;
}

.admission-navigation button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.admission-navigation button:hover:enabled {
  transform: scale(1.1);
  background-color: #064066;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.593);
}

.admission-indicators {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.admission-indicator {
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #ccccccaf;
  border-radius: 50%;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
}

.admission-indicator.active {
  background-color: #5cb1e0;
  border: solid 1px white;
  transform: scale(1.3);
}

.admission-indicator:hover {
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .admission-header {
    background: url('images/mobile-wht-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    font-size: 3em;
    /* Уменьшаем размер заголовка */
    text-shadow: 0px 0px 10px #064066af;
    /* Смягчаем тень */
  }

  .admission-step {
    width: 90%;
    /* Делаем блок шире на мобильных, чтобы он занимал почти весь экран */
    border-radius: 20px;
    /* Скругляем углы */
  }

  .admission-step-background {
    height: 250px;
    /* Уменьшаем высоту изображения */
  }

  .admission-step-title {
    font-size: 24px;
    /* Уменьшаем заголовок шага */
  }

  .admission-step-description {
    font-size: 14px;
    /* Уменьшаем текст описания */
    line-height: 1.4;
  }

  .admission-step-number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    /* Уменьшаем нумерацию */
  }

  .admission-navigation button {
    padding: 14px 24px;
    /* Делаем кнопки больше */
    font-size: 18px;
    /* Увеличиваем шрифт кнопок */
    border-radius: 50px;
    /* Оставляем округлые */
  }

  .admission-indicator {
    width: 12px;
    height: 12px;
    margin: 0 4px;
  }

  .admission-indicator.active {
    transform: scale(1.5);
  }
}




/* блоки с университетами */
.university-btn {
  margin-top: auto;
  /* Отталкивает кнопку вниз */
  display: flex;
  justify-content: center;
  background-color: #5cb1e0;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 15px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.university-btn:hover {
  background-color: #0056b3;
}

.info-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.info-popup {
  background: white;
  width: 60%;
  max-width: 1000px;
  height: max-content;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow: hidden;

  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.info-popup.active {
  transform: scale(1);
  opacity: 1;
}

.popup-body {
  display: flex;
  flex-direction: row;
  /* Ряд для изображения и текста */
  gap: 20px;
  /* Увеличьте расстояние между картинкой и текстом */
  align-items: center;
  /* Центровка контента по вертикали */
}

.image-container {

  width: 330px;
  height: 300px;
  position: relative;
  border-radius: 10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), white);
  /* Градиент */
  overflow: hidden;
  transition: background 0.5s ease;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.popup-body .content {

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  left: 0;
}

.popup-body .content p {
  font-size: 16px;
  line-height: 1.5;
}

.popup-body .content ul {
  list-style: disc;
  margin-left: 20px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 25px;
  background: none;
  color: #ff0000;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.close-btn:hover {
  color: #570000;
}

.official-site-btn {
  background-color: #075183;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  align-self: flex-end;
  white-space: nowrap;
}

.official-site-btn:hover {
  background-color: #064066;
}


@media (max-width: 768px) {
  .info-popup {
    width: 90%;
    flex-direction: column;
    height: auto;
  }
  .popup-body {
    display: flex;
    flex-direction: column;
    /* Элементы располагаются вертикально */
    height: auto;
    /* Блок должен занимать всю доступную высоту */
    gap: 20px;
    /* Расстояние между элементами */
    padding: 20px;
    /* Отступы */
  }

  .image-container {
    width: 100%;
    /* Картинка займет всю ширину */
    height: 60%;
    /* Картинка занимает 60% высоты блока */
    object-fit: cover;
    /* Картинка будет покрывать контейнер */
  }

  .popup-body .content {
    /* Текст будет растягиваться, чтобы заполнить оставшуюся часть */
   padding: 0;
    text-align: left;
    /* Текст выравнивается по левому краю */
  }

  .official-site-btn {
    background-color: #075183;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 15px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    align-self: center;
    /* Центрирование кнопки */
    margin-top: 20px;
    /* Отступ сверху от текста */
  }

  .official-site-btn:hover {
    background-color: #064066;
  }
}







/* Общий фон для интро */
.intro-overlay {
  position: fixed;
  /* Поверх всего содержимого */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('images/all.bg.jpg') no-repeat center center fixed;
  /* Указываем фон-картину */
  background-size: cover;
  /* Растягиваем изображение на весь экран */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Очень высокий z-index */
  overflow: hidden;
  /* Убираем влияние на края */
  transition: opacity 1s ease, visibility 1s ease;
}

/* Логотип */
.logo {
  width: 300px;
  /* Начальный размер */
  height: auto;
  transition: transform 2s ease, opacity 1s ease;
}






/* Общий стиль для загрузочного экрана */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #002f5d;
  /* Синий фон */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Поверх всего */
  overflow: hidden;
}

/* Контейнер для контента в загрузке */
.loading-content {
  text-align: center;
}

.loading-content img {
  width: 100px;
  height: auto;
  margin-bottom: 20px;
}

.loading-content p {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}





.lang-container {
  position: fixed;
  top: 70px;
  /* Расстояние от верхнего края экрана (чтобы кнопки не перекрывали хедер) */
  right: 20px;
  /* Расстояние от правого края экрана */
  display: flex;
  gap: 10px;
  z-index: 9998;
}

.lang-switcher {
  background-color: transparent;
  border-radius: 10px;
  border: 1px solid #5cb1e0;
  color: #5cb1e0;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.lang-switcher:hover {
  background-color: #5cb1e0;
  color: #fff;
}

.lang-switcher:focus {
  outline: none;
}

@media (max-width: 1180px) {
  .lang-container {
    font-size: 12;
    gap: 8px;
    /* Уменьшаем расстояние между ссылками */
  }
}





.popup {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  background: rgba(255, 255, 255, 0.819);
  border: 1px solid #ccc;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width: 300px;
  z-index: 1000;
  font-family: sans-serif;
}

.popup p {
  margin-bottom: 16px;
  font-size: 15px;
  color: #333;
}

.cta-button {
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(45deg, #5cb1e0, #29b4ff);
  /* градиент Instagram-style */
  color: white;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease, background 0.6s ease;
}

.cta-button:hover {
  transform: scale(1.1);
  background: linear-gradient(45deg, #29b4ff, #5cb1e0);
  /* меняем направление градиента */
}


.close-btn {
      font-family: 'FontAwesome';
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}






.consult-section {
  background-color: rgba(255, 255, 255, 0.819);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  padding: 40px 20px;
  text-align: center;
  border-radius: 20px;
  max-width: 800px;
  margin: 40px auto;
  box-shadow: 0 4px 25px rgba(255, 255, 255, 0.832);
}

.consult-section h2 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #222;
  font-weight: 700;
  background: linear-gradient(90deg, #2c769e, #006399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInDown 0.8s ease forwards;
}

.consult-section p {
  font-size: 18px;
  margin-bottom: 24px;
  color: #555;
  line-height: 1.6;
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 600px) {
  .consult-section {
    background-attachment: scroll;
    background-position: center top;
    margin: 120px 16px 40px 16px;
    /* верхний отступ увеличен */
    padding: 32px 16px;
    font-size: 15px;
  }

  .consult-section h2 {
    font-size: 20px;
  }

  .consult-section p {
    font-size: 15px;
  }
}