@import url('https://fonts.googleapis.com/css?family=Muli:300,700|Nunito');

/* 
   1) Весь сайт ограничен по ширине классом .site-container { max-width: 1140px; margin: 0 auto; }
   2) Шапка, слайдер, контентные блоки, подвал — всё внутри .site-container, 
      поэтому все секции адаптируются к ширине экрана.
*/

* {
  box-sizing: border-box; /* Учитываем padding и border во всех элементах, чтобы ничего не вылезало */
}

:root {
  /* Основные акценты */
  --primary-accent: #29ca8e;   /* Текущий зелёный (основной акцент) */
  --secondary-accent: #ff9900; /* Оранжевый акцент */

  /* Текст */
  --text-dark: #252525; /* Тёмный цвет текста */
  --text-gray: #757575; /* Серый цвет текста */

  /* Фоны */
  --background-light: #ffffff; /* Светлый фон (белый) */
  --background-gray: #f4f4f4;  /* Светло-серый фон */

  /* Дополнительные цвета (пример) */
  --highlight-red: #c00;       /* Красный для выделений */
  --highlight-blue: #2980b9;   /* Синий для выделений */
  --border-color: #ddd;        /* Цвет рамок и границ */
  --hover-green: #2ecc71;      /* Ярко-зелёный для наведения/hover */
}

body {
  background: var(--background-gray); /* Цвет фона страницы */
  font-family: 'Nunito', sans-serif; /* Шрифт для текста */
  overflow-x: hidden; /* Убираем горизонтальную прокрутку */
  margin: 0; /* Убираем внешние отступы */
  padding-top: 70px !important; /* Отступ сверху, чтобы меню не перекрывало контент */
}

/* Обёртка всего сайта */
.site-container {
  max-width: 1140px; /* Максимальная ширина для больших экранов */
  width: 100%; /* Делаем ширину гибкой, чтобы сжималась на узких экранах */
  margin: 0 auto; /* Выравниваем по центру */
  padding: 0 15px; /* Минимальные боковые отступы для компактности */
}

/* При якорных ссылках заголовки не скрываются */
section {
  scroll-margin-top: 70px; /* Для корректной работы якорей в современных браузерах */
  position: relative; /* Относительное позиционирование для дочерних элементов */
  padding: 5px 0; /* Увеличенные внутренние отступы сверху и снизу */
  margin-bottom: 0; /* Убираем нижний отступ */
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Muli', sans-serif; /* Шрифт для заголовков */
  font-weight: bold; /* Жирный шрифт */
  line-height: 1.2; /* Высота строки */
  margin-top: 0; /* Убираем верхний отступ */
  margin-bottom: 15px; /* Увеличенный нижний отступ для читаемости */
  transition: color 0.3s ease; /* Плавное изменение цвета */
}

h1 {
  color: var(--text-dark); /* Цвет текста */
  font-size: 3em; /* Размер шрифта */
}

h2 {
  color: var(--text-dark); /* Цвет текста */
  font-size: 2em; /* Размер шрифта */
  padding-bottom: 5px; /* Уменьшаем отступ снизу для компактности */
}

h2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--secondary-accent);
  transition: width 0.3s ease;
}

h2:hover::after {
  width: 50%;
}

h3 {
  color: #454545; /* Цвет текста */
  font-size: 1.5em; /* Размер шрифта */
  transition: color 0.3s ease;
}

h3:hover {
  color: var(--secondary-accent);
}

/* Абзацы */
p {
  color: var(--text-gray); /* Цвет текста */
  font-size: 14px; /* Размер шрифта */
  line-height: 1.6; /* Увеличенная высота строки для читаемости */
  margin-bottom: 15px; /* Увеличенный нижний отступ для читаемости */
}

/* Ссылки */
a {
  color: var(--text-dark); /* Цвет текста */
  text-decoration: none !important; /* Убираем подчёркивание */
  transition: 0.5s; /* Плавное изменение цвета */
}

a:hover, a:active, a:focus {
  color: var(--primary-accent); /* Цвет при наведении */
  outline: none; /* Убираем обводку при фокусе */
}

/* Контентная "коробка" (белый фон, рамка, тень) */
.content-box {
  background: var(--background-light); /* Белый фон */
  border: 1px solid #ddd; /* Рамка */
  box-shadow: 0 4px 25px rgba(0,0,0,0.1); /* Увеличенная тень для современности */
  padding: 20px 30px; /* Увеличенные боковые отступы для текста */
  margin-bottom: 15px; /* Увеличенный нижний отступ */
  width: 100%; /* Делаем адаптивным */
  max-width: none; /* Убираем лишние ограничения ширины */
}

/* Preloader (загрузка страницы) */
.preloader {
  position: fixed; /* Фиксированное положение */
  width: 100%; /* Полная ширина */
  height: 100%; /* Полная высота */
  top: 0; left: 0; /* Прижато к верхнему левому углу */
  z-index: 99999; /* Поверх всего */
  background: var(--background-light); /* Белый фон */
  display: flex; /* Центрирование содержимого */
  justify-content: center;
  align-items: center;
}

.spinner {
  position: relative; /* Относительное позиционирование */
}

.spinner:before {
  content: ''; /* Пустой контент для псевдоэлемента */
  box-sizing: border-box; /* Учитываем границы */
  position: absolute;
  top: 50%; left: 50%; /* Центрирование */
  width: 45px; height: 45px; /* Размер спиннера */
  margin-top: -22.5px; 
  margin-left: -22.5px;
  border-radius: 50%; /* Круглая форма */
  border: 1px solid #575757; /* Рамка */
  border-top-color: var(--background-light); /* Верхняя часть белая */
  animation: spinner 0.9s linear infinite; /* Анимация вращения */
}

@keyframes spinner {
  to { transform: rotate(360deg); } /* Полный поворот */
}

/* ШАПКА (custom-navbar) */
.custom-navbar {
  background: var(--background-light); /* Белый фон */
  border-top: 5px solid var(--primary-accent); /* Верхняя зелёная полоса */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Увеличенная тень для современности */
  margin-bottom: 0; /* Убираем нижний отступ */
  position: relative; /* Для корректной работы z-index */
}

/* Внутренний блок .header-inner, чтобы всё располагалось в row/col */
.header-inner {
  display: flex; /* Flex для выравнивания */
  flex-wrap: wrap; /* Перенос на маленьких экранах */
  align-items: center; /* Вертикальное выравнивание */
  justify-content: space-between; /* Распределение элементов */
  padding: 0 5px; /* Минимальные боковые отступы */
  width: 100%; /* Адаптивная ширина */
}

/* Логотип */
.custom-navbar .navbar-brand {
  color: #454545; /* Цвет текста */
  font-size: 18px; /* Размер шрифта */
  font-weight: bold; /* Жирный шрифт */
  line-height: 40px; /* Высота строки */
  float: none !important; /* Убираем обтекание слева */
  margin: 0 auto !important; /* Центрируем */
  text-align: center; /* Текст по центру */
}

/* Меню */
.custom-navbar .nav li a {
  font-family: "Muli", sans-serif; /* Шрифт для меню */
  font-size: 16px; /* Размер шрифта */
  font-weight: normal; /* Обычный вес */
  color: #575757; /* Цвет текста */
  padding: 8px 10px; /* Внутренние отступы */
  transition: color 0.3s, background-color 0.3s; /* Плавное изменение */
}

/* Цвет при наведении (hover) */
.custom-navbar .nav li a:hover {
  color: var(--primary-accent); /* Зелёный цвет */
}

/* ================================
   ПРИМЕР: СТИЛИ ДЛЯ КОНКРЕТНЫХ ПУНКТОВ МЕНЮ
   ================================ */
/* 1) "Главная" (если у ссылки href="#home") */
.custom-navbar .nav li a[href="#home"] {
  font-weight: bold; /* Жирный шрифт */
  color: var(--text-dark); /* Тёмный цвет */
}

/* 2) "Обо мне" (если у ссылки href="#about") */
.custom-navbar .nav li a[href="#about"] {
  color: #e74c3c; /* Красноватый цвет */
  font-style: italic; /* Курсив */
}

/* 3) "Ретрит" (если у ссылки href="#team") */
.custom-navbar .nav li a[href="#team"] {
  color: #8e44ad; /* Фиолетовый */
  font-weight: 700; /* Жирный шрифт */
}

/* 4) "Сертификаты" (href="#courses") */
.custom-navbar .nav li a[href="#courses"] {
  color: var(--secondary-accent); /* Оранжевый */
}

/* 5) "Отзывы" (href="#testimonial") */
.custom-navbar .nav li a[href="#testimonial"] {
  color: #16a085; /* Зелёный */
  text-decoration: underline; /* Подчёркивание */
}

/* 6) "Контакты" (href="#contact") */
.custom-navbar .nav li a[href="#contact"] {
  color: #2980b9; /* Синий */
  font-weight: bold; /* Жирный шрифт */
}

.custom-navbar .navbar-toggle {
  border: none; /* Убираем рамку */
  margin-top: 8px; /* Отступ сверху */
}

.custom-navbar .navbar-toggle .icon-bar {
  background: var(--text-dark); /* Цвет полосок бургера */
}

.custom-navbar .nav li a:hover,
.custom-navbar .nav li.active > a {
  background-color: var(--primary-accent); /* Фон при наведении */
  color: #ffffff !important; /* Белый текст */
}

.custom-navbar .navbar-nav.navbar-right li a .fa {
  background: var(--primary-accent); /* Фон иконки */
  border-radius: 50%; /* Круглая форма */
  color: #ffffff; /* Белый цвет */
  width: 25px; height: 25px; /* Размер */
  line-height: 25px; /* Выравнивание текста */
  text-align: center; /* Центрирование */
  margin-right: 5px; /* Отступ справа */
}

/* СЛАЙДЕР (HOME) */
.home-slider-wrap {
  border: 1px solid #ddd; /* Рамка */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Увеличенная тень */
  margin-bottom: 25px; /* Отступ снизу */
  background: var(--background-light); /* Белый фон */
  position: relative; /* Для позиционирования дочерних элементов */
  width: 100%; /* Адаптивная ширина */
  padding: 0; /* Отступы внутри слайдера */
  display: flex;
  align-items: stretch;
}

.home-slider .item {
  background-repeat: no-repeat; /* Фон не повторяется */
  background-size: cover; /* Заполняет блок, сохраняя пропорции */
  background-position: center; /* Центрирование фона */
  height: 400px; /* Высота слайда */
  position: relative; /* Для дочерних элементов */
  width: 100%; /* Убедимся, что каждый слайд занимает всю ширину */
}

.item-first {
  background-image: url('../images/slider-image1.jpg'); /* Первое изображение */
}

.item-second {
  background-image: url('../images/slider-image2.jpg'); /* Второе изображение */
}

.item-third {
  background-image: url('../images/slider-image3.jpg'); /* Третье изображение */
}

/* Текст внизу слайда */
.home-slider .caption {
  display: flex; /* Flex для выравнивания */
  align-items: flex-end; /* Прижимаем вниз */
  justify-content: center; /* Центрируем по горизонтали */
  height: 100%; /* Полная высота */
  background: rgba(0,0,0,0.3); /* Затемнение для контраста */
  color: #fff; /* Белый текст */
  padding: 0 30px; /* Боковые отступы */
}

.slider-text-bottom {
  margin-bottom: 15px; /* Отступ снизу */
  text-align: center; /* Центрирование текста */
  width: 100%; /* Убедимся, что текст занимает всю ширину */
  padding: 0 20px; /* Дополнительные отступы для текста */
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slider-text-bottom h1,
.slider-text-bottom h3 {
  color: #fff !important; /* Белый цвет текста */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Тень текста */
  font-weight: bold;
  transition: color 0.3s ease;
}

.slider-text-bottom h1:hover,
.slider-text-bottom h3:hover {
  color: var(--secondary-accent);
}

.slider-button {
  display: inline-block;
  background-color: var(--secondary-accent);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.slider-button:hover {
  transform: scale(1.05);
  background-color: #e68a00; /* Более тёмный оранжевый для наведения */
  color: #ffffff;
}

/* Блок FEATURE (если используется) */
.feature-thumb {
  border: 1px solid #f0f0f0; /* Рамка */
  padding: 3em 30px; /* Боковые отступы */
  margin-bottom: 15px; /* Отступ снизу */
  text-align: center; /* Центрирование текста */
  width: 100%; /* Адаптивная ширина */
}

.feature-thumb span {
  background: #3f51b5; /* Фон кружка */
  border-radius: 50%; /* Круглая форма */
  color: #fff; /* Белый текст */
  font-size: 22px; /* Размер шрифта */
  font-weight: bold; /* Жирный шрифт */
  display: inline-block; /* Блочно-строчный элемент */
  width: 50px; height: 50px; /* Размер */
  line-height: 50px; /* Выравнивание текста */
  margin-bottom: 15px; /* Отступ снизу */
}

/* ОБО МНЕ (#about) */
.about-info {
  margin-bottom: 15px; /* Отступ снизу */
}

.about-info img {
  margin-top: 15px; /* Отступ сверху */
  max-width: 100%; /* Адаптивная ширина изображения */
  height: auto; /* Автоматическая высота */
}

/* РЕТРИТ (#team) */
#team .section-title {
  margin-bottom: 15px; /* Отступ снизу */
}

/* СЕРТИФИКАТЫ (#courses) */
#courses .section-title {
  margin-bottom: 15px; /* Отступ снизу */
}

#courses .row {
  display: flex; /* Flex для равномерного распределения */
  flex-wrap: wrap; /* Перенос на маленьких экранах */
  justify-content: center; /* Центрирование элементов */
  width: 100%; /* Адаптивная ширина */
  margin: 0 -5px; /* Отступы между колонками */
}

#courses .col-md-4 {
  width: 100%; /* Полная ширина на маленьких экранах */
  padding: 5px; /* Отступы внутри столбцов */
  max-width: 33.333%; /* Максимальная ширина для больших экранов */
}

#courses img {
  max-width: 100%; /* Изображения адаптивны */
  height: auto; /* Автоматическая высота */
  padding: 0; /* Отступы внутри блока */
}

/* ОТЗЫВЫ (#testimonial) */
/* Стили для формы отзывов (обновлённая, красивая версия) */
.add-testimonial {
  margin-top: 30px; /* Отступ сверху */
}

.add-testimonial form {
  width: 100%;
  max-width: 500px; /* Увеличенная максимальная ширина для аккуратного вида */
  margin: 0 auto; /* Центрируем форму */
  padding: 20px; /* Увеличенные внутренние отступы */
  background: var(--background-light); /* Белый фон */
  border: 1px solid #ddd; /* Лёгкая рамка */
  border-radius: 12px; /* Более заметные скруглённые углы */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Тень для глубины */
}

.add-testimonial .heading-h3 {
  color: var(--text-dark);
  font-size: 1.5em;
  margin-bottom: 20px;
  text-align: center;
}

.add-testimonial .form-group {
  margin-bottom: 20px; /* Увеличенный отступ между полями */
}

.add-testimonial .form-label {
  display: block; /* Делаем метку блочной для корректного отображения */
  margin-bottom: 8px; /* Отступ снизу метки */
  color: var(--text-dark); /* Тёмный цвет текста */
  font-weight: bold; /* Жирный шрифт для меток */
  font-size: 14px; /* Размер шрифта меток */
}

.add-testimonial .form-control {
  width: 100%;
  font-size: 16px; /* Увеличенный размер шрифта */
  padding: 12px 15px; /* Увеличенные внутренние отступы */
  border: 1px solid #ddd; /* Лёгкая рамка */
  border-radius: 8px; /* Скруглённые углы */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Лёгкая тень */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.add-testimonial .form-control:focus {
  border-color: var(--primary-accent); /* Зелёный акцент при фокусе */
  box-shadow: 0 0 8px rgba(41, 202, 142, 0.3); /* Тень при фокусе */
  outline: none; /* Убираем стандартную обводку */
}

.add-testimonial .form-control::placeholder {
  color: #999; /* Цвет placeholder */
  opacity: 0.7; /* Прозрачность placeholder */
}

.add-testimonial button.btn-primary {
  width: 100%;
  padding: 12px 15px; /* Увеличенные внутренние отступы */
  background-color: var(--secondary-accent); /* Оранжевый цвет кнопки */
  color: #ffffff;
  border: none;
  border-radius: 8px; /* Скруглённые углы */
  box-shadow: 0 4px 10px rgba(255, 153, 0, 0.3); /* Тень для кнопки */
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 16px; /* Увеличенный размер шрифта */
  font-weight: bold; /* Жирный шрифт */
  cursor: pointer;
}

.add-testimonial button.btn-primary:hover {
  transform: scale(1.05); /* Лёгкое увеличение при наведении */
  background-color: #e68a00; /* Более тёмный оранжевый */
  box-shadow: 0 6px 15px rgba(255, 153, 0, 0.5); /* Увеличенная тень при наведении */
}

.add-testimonial select.form-control {
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
  background-size: 20px;
  padding-right: 30px;
  cursor: pointer;
}

.add-testimonial button {
  width: 100%;
  padding: 10px 15px;
  background-color: var(--secondary-accent);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
  font-size: 16px;
  cursor: pointer;
}

.add-testimonial button:hover {
  transform: scale(1.05);
  background-color: #e68a00;
}

/* Стили для карусели отзывов */
.testimonial-carousel .item {
  background: var(--background-light);
  margin: 15px 0;
  padding: 20px 30px;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border-radius: 8px;
  width: 100%;
}

.testimonial-author {
  margin-top: 15px;
}

.testimonial-author h4 {
  margin: 0;
  color: var(--text-dark);
  font-weight: bold;
}

.testimonial-author span {
  color: var(--primary-accent);
  font-style: italic;
}

/* КОНТАКТЫ (#contact) */
#contact p,
#contact a {
  font-size: 14px; /* Размер шрифта */
  font-weight: bold; /* Жирный шрифт */
}

#contact .fa {
  font-size: 16px; /* Размер иконок */
  margin-right: 5px; /* Отступ справа от иконок */
}

/* Шрифт для подвала текста в contact-intro */
#contact .contact-intro {
  font-weight: bold; /* Жирный шрифт */
  color: #333; /* Тёмно-серый цвет */
  font-size: 14px; /* Размер шрифта */
}

/* Фиксированное меню (шапка) */
.custom-navbar.navbar-fixed-top {
  position: fixed; /* Фиксируем сверху */
  top: 0; /* Прижато к верху */
  width: 100%; /* Полная ширина */
  z-index: 9999; /* Поверх всего */
  margin: 0; /* Убираем отступы */
  padding: 0; /* Убираем внутренние отступы */
}

/* Контейнер, ограничивающий ширину меню */
.header-inner-limited {
  max-width: 1140px; /* Максимальная ширина */
  width: 100%; /* Адаптивная ширина */
  margin: 0 auto; /* Центрирование */
  padding: 0 15px; /* Минимальные боковые отступы */
  display: block; /* Блочный элемент */
}

/* Выделение активного пункта меню (при работе Scrollspy) */
.nav li.active > a {
  background-color: var(--primary-accent); /* Цвет фона активного пункта */
  color: #fff !important; /* Белый текст */
  font-weight: bold; /* Жирный шрифт */
}

/* Заголовки и абзацы внутри content-box */
.content-box h2 {
  font-size: 20px; /* Размер шрифта */
  margin-bottom: 15px; /* Отступ снизу */
}

.content-box h3 {
  font-size: 16px; /* Размер шрифта */
  margin-top: 15px; /* Отступ сверху */
  margin-bottom: 10px; /* Отступ снизу */
}

.content-box p {
  margin-bottom: 15px; /* Отступ между абзацами */
  line-height: 1.6; /* Межстрочный интервал */
}

.content-box ul,
.content-box ol {
  margin-bottom: 15px; /* Отступ снизу */
  margin-left: 20px; /* Отступ слева для пунктов списка */
  list-style: none; /* Убираем стандартные маркеры */
}

.content-box ul li,
.content-box ol li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 10px;
  color: var(--text-gray);
}

.content-box ul li::before,
.content-box ol li::before {
  content: '•';
  color: var(--secondary-accent);
  position: absolute;
  left: 0;
  font-size: 1.2em;
}

/* Специфичные классы для методов и преимуществ */
.content-box ul li.method {
  padding-left: 30px;
}

.content-box ul li.method::before {
  content: '\f00c'; /* Пример иконки (галочка из Font Awesome) */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--secondary-accent);
  position: absolute;
  left: 0;
  font-size: 1em;
}

.content-box .advantage {
  margin-bottom: 20px;
  position: relative;
  padding-left: 30px;
}

.content-box .advantage::before {
  content: counter(advantage) '/';
  counter-increment: advantage;
  color: var(--secondary-accent);
  font-weight: bold;
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--background-light);
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* =======================
   Мои собственные классы
   ======================= */

/* Общий класс для крупного тёмного текста */
.text-large-dark {
  font-size: 18px; /* Размер шрифта */
  color: #333; /* Тёмно-серый цвет */
  line-height: 1.6; /* Межстрочный интервал */
}

/* Заголовок уровня h2 (пример) */
.heading-h2 {
  font-size: 20px; /* Размер шрифта */
  color: var(--text-dark); /* Тёмный цвет */
  margin-bottom: 15px; /* Отступ снизу */
}

/* Заголовок уровня h3 (пример) */
.heading-h3 {
  font-size: 16px; /* Размер шрифта */
  color: var(--text-dark); /* Тёмный цвет */
  margin-top: 15px; /* Отступ сверху */
  margin-bottom: 10px; /* Отступ снизу */
}

/* Заголовок уровня h4 (пример) */
.heading-h4 {
  font-size: 14px; /* Размер шрифта */
  color: var(--text-dark); /* Тёмный цвет */
  margin-top: 12px; /* Отступ сверху */
  margin-bottom: 10px; /* Отступ снизу */
}

/* Если нужно класс для центрирования текста */
.text-center {
  text-align: center; /* Центрирование текста */
}

/* Если нужно класс для центрирования изображения */
.img-center {
  display: block; /* Блочный элемент */
  margin: 0 auto; /* Центрирование */
  padding: 0; /* Убираем боковые отступы */
  max-width: 100%; /* Адаптивная ширина */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--secondary-accent);
}

/* Шрифт поменять цвет */
.highlight {
  font-family: 'Georgia', serif; /* Шрифт */
  color: #c00; /* Красный цвет */
  font-size: 16px; /* Размер шрифта */
  font-weight: bold; /* Жирный шрифт */
}

/* Сплошное подчеркивание */
.highlight-solid {
  text-decoration: none; /* Убираем стандартное подчёркивание */
  border-bottom: 1px solid var(--secondary-accent); /* Оранжевая линия */
  padding-bottom: 2px; /* Отступ снизу */
  transition: border-color 0.3s ease;
}

.highlight-solid:hover {
  border-bottom-color: #e68a00;
}

/* Пунктирное подчеркивание */
.highlight-dotted {
  text-decoration: none; /* Убираем стандартное подчёркивание */
  border-bottom: 1px dotted var(--secondary-accent); /* Оранжевая пунктирная линия */
  padding-bottom: 2px; /* Отступ снизу */
  transition: border-color 0.3s ease;
}

.highlight-dotted:hover {
  border-bottom-color: #e68a00;
}

/* Линия по центру */
.centered-line {
  border-top: 2px solid var(--secondary-accent); /* Увеличенная толщина линии */
  width: 100%; /* Полная ширина блока */
  margin: 20px auto; /* Отступы для читаемости */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Варианты для кастомизации */
.centered-line.thick {
  border-top: 3px solid var(--secondary-accent); /* Более толстая линия */
}

.centered-line.short {
  width: 25%; /* Короткая линия */
}

.centered-line.long {
  width: 75%; /* Длинная линия */
}

.centered-line.red {
  border-top-color: #c00; /* Красный цвет */
}

.centered-line.dashed {
  border-top-style: dashed; /* Пунктирная линия */
}

/* Стиль для центрирования текста внутри li */
.center-text {
  text-align: center; /* Центрируем текст по горизонтали */
  margin: 10px 0; /* Добавляем верхний и нижний отступ для визуального разделения (можно настроить) */
}

/* Стиль для текста с анимацией, сохраняем inline-block для анимации */
.animate-text {
  animation: blink 1.5s infinite, colorChange 3s infinite, pulse 2s infinite; /* Восстанавливаем анимации */
  display: inline-block; /* Необходимо для корректной работы анимации */
  font-weight: bold; /* Сохраняем жирный шрифт */
  transition: all 0.5s ease; /* Плавные переходы */
}

/* Новый стиль для выделения времени и цвета текста */
.time-highlight {
  font-size: 1.1em; /* Увеличиваем размер шрифта, чтобы текст стал шире */
  color: var(--primary-accent) !important; /* Зеленый цвет, используя вашу переменную --primary-accent (#29ca8e) */
  font-weight: bold; /* Делаем текст толще (жирным) */
  transition: color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.time-highlight:hover {
  color: var(--hover-green) !important; /* Более тёмный зелёный при наведении (#2ecc71) */
}

/* Стиль для текста с белым цветом */
.text-highlight {
  font-size: 1.3em !important;
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  text-align: center;
  display: block;
}

/* Специфичное правило для слайдера */
.home-slider .caption a.text-highlight {
  color: #ffffff !important;
}

/* Стиль для анимации реалистичного костра */
.fire-animation {
  display: inline-block;
  position: relative;
  animation: fireFlickerAdvanced 1.5s infinite ease-in-out, fireGlow 2s infinite alternate; /* Сложная анимация мерцания и свечения */
  color: #ff4500; /* Базовый оранжевый цвет огня */
  text-shadow: 
      0 0 10px #ff4500, /* Основное свечение */
      0 0 20px #ff8c00, /* Внешнее свечение */
      0 0 30px #ff8c00,
      0 0 40px #ff8c00;
  font-size: 1.5em; /* Увеличиваем размер эмодзи для большей заметности */
}

/* Псевдоэлемент для имитации искр */
.fire-animation::after {
  content: "✨"; /* Используем символ искры или звёздочки */
  position: absolute;
  top: -10px; /* Смещение вверх от основного эмодзи */
  left: 50%; /* Центрируем по горизонтали */
  transform: translateX(-50%);
  color: #ffd700; /* Золотой цвет для искр */
  font-size: 0.8em; /* Меньший размер для искр */
  opacity: 0; /* Изначально невидимы */
  animation: sparkFly 1s infinite ease-out; /* Анимация полёта искр */
}

/* Стиль для анимации кометы/воздуха (☄) */
.comet-animation {
  display: inline-block;
  animation: cometFly 2s infinite linear;
  color: #ffd700; /* Золотой цвет для финансов */
  text-shadow: 
      0 0 10px #ffd700,
      0 0 20px #ffd700,
      0 0 30px #daa520; /* Тёмно-золотой для свечения */
}

/* Стиль для анимации продвинутого сердца (💖) */
.heart-animation {
  display: inline-block;
  position: relative;
  animation: heartBeat 1.5s infinite ease-in-out, heartGlow 2s infinite alternate; /* Пульсация и свечение */
  color: #ff69b4; /* Яркий розовый цвет сердца */
  text-shadow: 
      0 0 10px #ff69b4, /* Основное свечение */
      0 0 20px #ff69b4,
      0 0 30px #ff1493; /* Более тёмный розовый для внешнего свечения */
  font-size: 1.5em; /* Увеличиваем размер эмодзи для заметности */
}

/* Дополнительная анимация для более сложной пульсации сердца */
.advanced-pulse {
  animation: advancedPulse 2s infinite ease-in-out; /* Сложная пульсация с дополнительным движением */
}

/* Стиль для анимации продвинутой танцующей фигуры (💃🏼) */
.dance-animation {
    display: inline-block;
    animation: danceSwingAdvanced 2s infinite ease-in-out; /* Улучшенная базовая анимация с поворотами */
    color: #ff00ff; /* Яркий пурпурный цвет для фигуры (можно изменить) */
    text-shadow: 
        0 0 5px #ff00ff,
        0 0 10px #ff00ff;
    font-size: 1.5em; /* Увеличиваем размер эмодзи для заметности */
}

/* Дополнительная анимация для более сложного танца с поворотами и наклонами */
.advanced-dance {
    animation: advancedDanceComplex 2.5s infinite ease-in-out; /* Более сложная анимация с дополнительными поворотами и движениями */
}

/* Ключевые кадры для улучшенного базового движения танца с поворотами */
@keyframes danceSwingAdvanced {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1); /* Начальное положение */
    }
    20% {
        transform: translateY(-10px) rotate(10deg) scale(1.1); /* Подскок, поворот вправо и лёгкое увеличение */
    }
    40% {
        transform: translateY(5px) rotate(-5deg) scale(1); /* Лёгкое опускание и поворот влево */
    }
    60% {
        transform: translateY(-15px) rotate(15deg) scale(1.05); /* Выше подскок, больший поворот вправо и лёгкое увеличение */
    }
    80% {
        transform: translateY(0) rotate(-10deg) scale(1); /* Возвращение с поворотом влево */
    }
}

/* Ключевые кадры для сложного движения танца с поворотами, наклонами и растяжением */
@keyframes advancedDanceComplex {
    0%, 100% {
        transform: translateY(0) rotate(0deg) skewX(0deg) scale(1); /* Начальное положение с отсутствием наклона (skew) */
    }
    15% {
        transform: translateY(-15px) rotate(20deg) skewX(-5deg) scale(1.1); /* Подскок, сильный поворот вправо, лёгкий наклон и увеличение */
    }
    30% {
        transform: translateY(10px) rotate(-15deg) skewX(5deg) scale(1); /* Опускание, поворот влево, наклон в другую сторону */
    }
    50% {
        transform: translateY(-20px) rotate(25deg) skewX(-10deg) scale(1.15); /* Выше подскок, больший поворот и наклон, увеличение */
    }
    65% {
        transform: translateY(5px) rotate(-10deg) skewX(5deg) scale(1); /* Лёгкое опускание, поворот влево, коррекция наклона */
    }
    85% {
        transform: translateY(-10px) rotate(15deg) skewX(-5deg) scale(1.05); /* Лёгкий подскок, поворот вправо, наклон и увеличение */
    }
}

/* Ключевые кадры для анимации огня */
@keyframes fireFlickerAdvanced {
  0%, 100% {
    transform: scale(1) rotate(-3deg) translateY(0); /* Лёгкое колебание и нормальный размер */
    opacity: 1;
  }
  25% {
    transform: scale(1.2) rotate(3deg) translateY(-5px); /* Увеличение, наклон и подъем */
    opacity: 0.9;
  }
  50% {
    transform: scale(1) rotate(0deg) translateY(2px); /* Возвращение и лёгкое опускание */
    opacity: 0.8;
  }
  75% {
    transform: scale(1.1) rotate(-2deg) translateY(-3px); /* Лёгкое увеличение, наклон и подъем */
    opacity: 1;
  }
}

/* Ключевые кадры для свечения огня */
@keyframes fireGlow {
  0% {
    text-shadow: 0 0 10px #ff4500, 0 0 20px #ff8c00, 0 0 30px #ff8c00, 0 0 40px #ff8c00;
  }
  50% {
    text-shadow: 0 0 15px #ff4500, 0 0 25px #ff8c00, 0 0 35px #ff8c00, 0 0 50px #ff8c00; /* Усиление свечения */
  }
  100% {
    text-shadow: 0 0 10px #ff4500, 0 0 20px #ff8c00, 0 0 30px #ff8c00, 0 0 40px #ff8c00;
  }
}

/* Ключевые кадры для анимации искр */
@keyframes sparkFly {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-20px) scale(1); /* Полёт вверх */
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px) scale(0.5); /* Исчезновение вверх */
  }
}

/* Ключевые кадры для анимации кометы (воздух отлетает) */
@keyframes cometFly {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(20px) scale(1.2); /* Движение вправо и лёгкое увеличение */
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Ключевые кадры для пульсации сердца */
@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2); /* Лёгкое увеличение */
    opacity: 0.9;
  }
}

/* Ключевые кадры для свечения сердца */
@keyframes heartGlow {
  0% {
    text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 30px #ff1493;
  }
  50% {
    text-shadow: 0 0 15px #ff69b4, 0 0 25px #ff69b4, 0 0 40px #ff1493; /* Усиление свечения */
  }
  100% {
    text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 30px #ff1493;
  }
}

/* Ключевые кадры для сложной пульсации сердца */
@keyframes advancedPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: scale(1.3) rotate(5deg); /* Увеличение и лёгкий поворот */
    opacity: 0.9;
  }
  50% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.2) rotate(-5deg); /* Лёгкое увеличение и поворот в другую сторону */
    opacity: 1;
  }
}

/* Ключевые кадры для базового движения танца */
@keyframes danceSwing {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(10deg); /* Подскок и поворот */
  }
}

/* Ключевые кадры для сложного движения танца */
@keyframes advancedDance {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-15px) rotate(15deg) scale(1.1); /* Выше подскок, больший поворот, лёгкое увеличение */
  }
  50% {
    transform: translateY(5px) rotate(-10deg) scale(1);
  }
  75% {
    transform: translateY(-10px) rotate(10deg) scale(1.05); /* Подскок и лёгкое увеличение */
  }
}

/* Ключевые кадры для мерцания свечения сердца */
@keyframes heartSparkle {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
  }
  100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.8);
  }
}

/* Анимация мигания текста */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Анимация изменения цвета */
@keyframes colorChange {
  0% { color: var(--highlight-red); } /* Оранжевый цвет */
  50% { color: var(--primary-accent); } /* Зелёный цвет */
  100% { color: var(--highlight-red); } /* Возвращение к оранжевому */
}

/* Анимация пульсации (увеличение/уменьшение размера) */
@keyframes pulse {
  0%, 100% { transform: scale(1); } /* Нормальный размер */
  50% { transform: scale(1.1); } /* Увеличение на 10% */
}

/* Адаптивность */
@media only screen and (max-width: 1200px) {
  .site-container {
    max-width: 960px; /* Уменьшаем максимальную ширину */
    width: 100%; /* Адаптивная ширина */
    padding: 0 10px; /* Сохраняем минимальные отступы */
  }
  .header-inner-limited {
    max-width: 960px; /* Уменьшаем ширину шапки */
    width: 100%; /* Адаптивная ширина */
    padding: 0 10px; /* Сохраняем минимальные отступы */
  }
  .content-box {
    padding: 18px 30px; /* Сохраняем увеличенные боковые отступы */
    margin-bottom: 15px; /* Минимальный нижний отступ */
  }
  .home-slider .item {
    height: 350px; /* Уменьшаем высоту слайдера */
  }
  .centered-line {
    margin: 18px auto; /* Сохраняем минимальные отступы для линии */
  }
}

@media only screen and (max-width: 992px) {
  .site-container {
    max-width: 720px; /* Ещё меньше ширина */
    width: 100%; /* Адаптивная ширина */
    padding: 0 8px; /* Уменьшаем боковые отступы */
  }
  .header-inner-limited {
    max-width: 720px; /* Уменьшаем ширину шапки */
    width: 100%; /* Адаптивная ширина */
    padding: 0 8px; /* Уменьшаем боковые отступы */
  }
  section {
    padding: 12px 0; /* Уменьшаем отступы в секциях */
  }
  .content-box {
    padding: 15px 25px; /* Уменьшаем боковые отступы */
    margin-bottom: 15px; /* Минимальный нижний отступ */
  }
  .home-slider .item {
    height: 300px; /* Уменьshaем высоту слайдера */
  }
  .centered-line {
    margin: 15px auto; /* Уменьшаем отступы для линии */
  }
  #courses .col-md-4 {
    width: 50%; /* На экранах до 992px два столбца */
  }
}

@media only screen and (max-width: 767px) {
  .site-container {
    max-width: 100%; /* Полная ширина экрана */
    padding: 0 5px; /* Минимальные боковые отступы */
  }
  .header-inner-limited {
    max-width: 100%; /* Полная ширина экрана */
    padding: 0 5px; /* Минимальные боковые отступы */
  }
  .content-box {
    padding: 12px 20px; /* Уменьшаем боковые отступы */
    margin-bottom: 15px; /* Минимальный нижний отступ */
  }
  .home-slider .item {
    height: 250px; /* Уменьшаем высоту слайдера */
  }
  section {
    padding: 10px 0; /* Минимальные отступы в секциях */
  }
  .custom-navbar .nav li a {
    padding: 6px 8px; /* Уменьшаем отступы в меню */
  }
  #courses .col-md-4 {
    width: 100%; /* На экранах до 767px один столбец */
  }
  .centered-line {
    margin: 12px auto; /* Уменьshaем отступы для линии */
  }
}

@media only screen and (max-width: 480px) {
  .site-container {
    padding: 0 3px; /* Минимальные боковые отступы */
  }
  .header-inner-limited {
    padding: 0 3px; /* Минимальные боковые отступы */
  }
  .content-box {
    padding: 10px 15px; /* Минимальные боковые отступы */
    margin-bottom: 15px; /* Минимальный нижний отступ */
  }
  .home-slider .item {
    height: 180px; /* Уменьshaем высоту слайдера */
  }
  h1 {
    font-size: 1.5em; /* Уменьshaем заголовок */
  }
  h2 {
    font-size: 1.2em; /* Уменьshaем заголовок */
  }
  h3 {
    font-size: 0.9em; /* Уменьshaем заголовок */
  }
  p {
    font-size: 12px; /* Уменьshaем текст */
    line-height: 1.4; /* Уменьshaем межстрочный интервал */
  }
  .custom-navbar .nav li a {
    font-size: 12px; /* Минимальный шрифт меню */
    padding: 4px 6px; /* Минимальные отступы */
  }
  .slider-text-bottom h1 {
    font-size: 1em; /* Уменьshaем заголовок в слайдере */
  }
  .slider-text-bottom h3 {
    font-size: 0.7em; /* Уменьshaем подзаголовок в слайдере */
  }
  .centered-line {
    margin: 10px auto; /* Минимальные отступы для линии */
  }
}

@media (max-width: 767px) {
  .custom-navbar .nav.navbar-nav {
    float: none !important;
    text-align: center;
    margin: 0 auto !important;
  }
  .custom-navbar .nav.navbar-nav li {
    float: none !important;
    display: block; /* Блочный элемент */
  }
  .custom-navbar .nav.navbar-nav li a {
    font-size: 18px; /* Крупный шрифт */
    display: block;
    padding: 10px 0;
  }
}

/* Дополнительные стили для футера (если потребуется) */
.footer-social a {
  color: var(--secondary-accent);
  font-size: 18px;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #e68a00;
}

/* Подпись под изображением, Ваш путь к гармонии начинается здесь */
.image-caption {
  text-align: center;
  color: var(--primary-accent);
  font-size: 20px;
  font-style: italic;
  margin-top: 10px;
}

/* Стиль для анимации реалистичного солнца (☀️) */
.sun-animation {
    display: inline-block; /* Чтобы анимация работала корректно */
    position: relative; /* Для позиционирования псевдоэлементов (лучи) */
    animation: sunShine 2s infinite ease-in-out, sunGlow 3s infinite alternate; /* Сияние и свечение */
    color: #ffd700; /* Золотой цвет солнца */
    text-shadow: 
        0 0 15px #ffd700, /* Основное свечение */
        0 0 25px #ffd700,
        0 0 35px #ffeb3b, /* Более светлый жёлтый для внешнего свечения */
        0 0 45px #ffeb3b;
    font-size: 1.8em; /* Увеличиваем размер эмодзи для заметности */
}

/* Псевдоэлементы для имитации лучей солнца */
.sun-animation::before,
.sun-animation::after {
    content: "🌞"; /* Символ солнца или звёздочки для лучей (можно заменить) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); /* Начальное положение лучей */
    color: #ffd700;
    font-size: 0.5em; /* Меньший размер для лучей */
    opacity: 0.7;
    animation: sunRays 1.5s infinite ease-in-out;
}

.sun-animation::after {
    transform: translate(-50%, -50%) rotate(-45deg); /* Лучи под другим углом */
}

/* Ключевые кадры для сияния солнца */
@keyframes sunShine {
    0%, 100% {
        transform: scale(1) rotate(0deg); /* Нормальный размер и отсутствие вращения */
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(5deg); /* Лёгкое увеличение и вращение */
        opacity: 0.95;
    }
}

/* Ключевые кадры для свечения солнца */
@keyframes sunGlow {
    0% {
        text-shadow: 0 0 15px #ffd700, 0 0 25px #ffd700, 0 0 35px #ffeb3b, 0 0 45px #ffeb3b;
    }
    50% {
        text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffeb3b, 0 0 50px #ffeb3b; /* Усиление свечения */
    }
    100% {
        text-shadow: 0 0 15px #ffd700, 0 0 25px #ffd700, 0 0 35px #ffeb3b, 0 0 45px #ffeb3b;
    }
}

/* Ключевые кадры для анимации лучей солнца */
@keyframes sunRays {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) rotate(45deg) scale(0.8); /* Лёгкое уменьшение */
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(45deg) scale(1.2); /* Увеличение и сияние */
    }
}

.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 10001;
  font-size: 16px;
  color: #fff;
  display: none;
}

.notification.success {
  background-color: #2ecc71; /* Зелёный цвет для успеха */
}

.notification.error {
  background-color: #e74c3c; /* Красный цвет для ошибки */
}

.testimonial-item .testimonial-author {
    margin-bottom: 20px; /* Отступ снизу данных автора, чтобы отделить их от текста */
}

.testimonial-item p {
    margin-top: 10px; /* Необязательный отступ сверху текста, если нужно дополнительное расстояние */
}

/* Размер текста отзывов */
.testimonial-item p {
  font-size: 18px; /* Можно выбрать 16px, 20px и т.д. */
  color: #333; /* Или любой другой цвет, если нужно */
  line-height: 1.6; /* Удобная межстрочная высота */
}

.testimonial-wrapper {
  display: block;
}


.testimonial-list {
  /* Убираем или уменьшаем min-height */
  min-height: auto;
  overflow-y: auto;
  margin-bottom: 10px;
}

.add-testimonial {
  margin-top: 10px; /* или другое подходящее значение */
}

/* Примерно так (добавьте в ваш templatemo-style.css, 
   либо в отдельный файл, который точно подключается) */

.add-testimonial textarea.form-control {
  min-height: 200px;   /* начальная высота */
  max-height: 600px;   /* максимальная высота, чтобы не растягивало весь экран */
  overflow-y: auto;    /* вертикальная прокрутка при переполнении */
  resize: vertical;    /* пользователь может тянуть за уголок и менять высоту */
}