/* Общие стили */
html {
  scroll-behavior: smooth; /*плавная прокрутка якорных ссылок*/
}
body {
  font-family: 'Montserrat', sans-serif; /* Применение шрифта Montserrat */
  line-height: 1.6;
  background-color: #f8f9fa;
  color: #333;
}

.container {
  margin-top: 30px;
}

/* Общий стиль для навигации */
.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Элементы выравниваются по левому краю */
  padding: 0 15px;
  background-color: #007bff; /* Цвет фона */
  position: fixed; /* Фиксация панели */
  top: 0; /* Приклеить панель к верхнему краю */
  left: 0; /* Приклеить панель к левому краю */
  width: 100%; /* Панель растягивается на всю ширину */
  z-index: 1000; /* Обеспечиваем, чтобы панель была поверх других элементов */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для панели */
}



.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 10px; /* Отступ после логотипа */
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 5px; /* Расстояние между языками */
}

.language-switcher span {
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
}

.navbar-toggler {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
  margin-left: auto; /* Прижимает бургер к правому краю */
}

.navbar-toggler-icon {
  width: 24px;
  height: 2px;
  background-color: white;
  display: block;
  position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  width: 24px;
  height: 2px;
  background-color: white;
  display: block;
  position: absolute;
  left: 0;
}

.navbar-toggler-icon::before {
  top: -6px;
}

.navbar-toggler-icon::after {
  top: 6px;
}

/* Адаптивность */
@media (max-width: 767px) {
  .navbar {
    padding: 10px 15px;
  }

  .navbar-brand {
    font-size: 1.2rem;
  }

  .language-switcher {
    gap: 3px; /* Уменьшить расстояние между языками */
  }

  .navbar-toggler-icon {
    width: 20px;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    width: 20px;
  }
}


/* Стили для переключателя языка */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 5px; /* Расстояние между языками */
}

.lang-btn {
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.lang-btn:hover {
  color: #0972ef;
}

/* Стили для активного языка */
.lang-btn.active {
  font-weight: bold;
  text-decoration: #00af00; /* Добавим подчеркивание для активного языка */
  color: rgba(243, 250, 0, 0.98); /* Можно выбрать любой цвет для выделения активного языка */
}

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

  .lang-btn {
    font-size: 1rem; /* Уменьшаем размер шрифта */
  }
}

/* Стили для первого блока с фоном и кнопкой */
.d-flex {
  position: relative;
  text-align: left;
  color: white;
  background-size: cover;
  background-position: center;
}

#subscribe-button {
  font-size: 1.2rem;
  padding: 15px 30px;
  border-radius: 5px;
  background-color: #ff0000;
  border: none;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#subscribe-button:hover {
  background-color: #881313;
  transform: scale(1.05);
}

/* Блок с текстом и изображением */
h2 {
  font-weight: bold;

}

p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #515151;
}

/* Стили для изображений */
.img-fluid {
  max-width: 100%;
  height: auto;
  border-radius: 10px;  /* Легкое скругление углов */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Стили для заголовков и параграфов */
#welcome-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

#welcome-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #555;
}

/* Стили для адаптивности */
@media (max-width: 767px) {
  .navbar .container-fluid {
    flex-direction: row; /* Все элементы остаются в ряд */
    justify-content: flex-start; /* Элементы слева */
    gap: 10px; /* Пробел между элементами */
  }

  .navbar-brand {
    font-size: 1.5rem; /* Размер текста логотипа */
  }

  .language-switcher {
    margin-right: 15px; /* Отступ от логотипа */
  }

  .menu {
    margin-left: auto; /* Меню справа */
  }
}

/* Карточка отзыва */
.testimonial {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Аватарка */
.testimonial-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #007bff;
  object-fit: cover;
  margin-bottom: 15px; /* Отступ между аватаркой и текстом */
  transition: transform 0.3s ease-in-out;
}

.testimonial-avatar:hover {
  transform: scale(1.2); /* Увеличение на hover */
}

/* Текст отзыва */
.testimonial-text {
  font-size: 1rem;
  font-style: italic;
  color: #555;
  margin-bottom: 15px;
}

/* Автор и профессия */
.testimonial-author {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 5px;
}

.testimonial-profession {
  font-size: 0.9rem;
  color: #777;
}

/* diploms */
.diplomas-section {
  margin-top: 50px; /* Отступ сверху (можно изменить значение) */
}

.diplomas-section h2 {
  font-size: 2rem;
  color: #333;
}








/* Reviews section specific styles */
.reviews-section .testimonial {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.reviews-section .testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Стили формы записи */
.appointment-form-section {
  background-color: #f8f9fa;
  padding: 40px 0;
}

.appointment-form-section h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 30px;
}

.appointment-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.appointment-form .form-label {
  font-weight: bold;
  color: #555;
}

.appointment-form .form-control {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 1rem;
}

.appointment-form .form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.appointment-form button {
  background-color: #007bff; /* Синий фон */
  border-color: #007bff; /* Синий цвет границы */
  color: #fff; /* Белый текст */
  border: none;
  padding: 10px 20px;
  border-radius: 20px; /* Более округлые углы */
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.appointment-form button:hover {
  background-color: #0056b3; /* Темно-синий при наведении */
  transform: translateY(-3px); /* Поднятие кнопки */
}

.appointment-form button:active {
  background-color: #004085; /* Еще темнее синий при нажатии */
  transform: translateY(1px); /* Сжатие кнопки при нажатии */
}

@media (max-width: 767px) {
  .appointment-form-section h2 {
    font-size: 1.5rem;
  }
}

/* Стили для FAQ */
.faq {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.faq .card {
  border: none;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq .card-header {
  background-color: #007bff;
  border-radius: 8px;
}

.faq .card-header h2 {
  font-size: 1.2rem;
}

.faq .btn-link {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
}

.faq .btn-link:hover {
  text-decoration: underline;
  color: #f8d347;
}

.faq .card-body {
  font-size: 1rem;
  color: #333;
}

.faq .card-body p {
  margin: 0;
}

@media (max-width: 768px) {
  .faq .btn-link {
    font-size: 0.9rem;
  }
}

/* Стили для футера */
.footer {
  background-color: #212529; /* Темный фон */
  color: #f8f9fa; /* Светлый текст */
}

.footer h5 {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ffffff;
}

.footer ul {
  padding-left: 0;
}

.footer ul li {
  margin-bottom: 0.5rem;
}

.footer a {
  color: #f8f9fa;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #FFD700; /* Цвет при наведении */
}

.footer .fab {
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.footer .fab:hover {
  color: #FFD700; /* Цвет иконок соцсетей при наведении */
}

.footer .mt-3 {
  font-size: 0.9rem;
}


/*три колонки*/
.consultation-section {
  background-color: #f9f9f9;
  padding: 50px 0;
}

.consultation-section h2 {
  font-size: 2rem;
  color: #333;
}

.consultation-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.consultation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.consultation-card h3 {
  font-size: 1.25rem;
  color: #515151;
}

.consultation-card p,
.consultation-card ul {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

.consultation-card ul {
  padding-left: 20px;
  margin-top: 10px;
}

.consultation-card ul li {
  margin-bottom: 10px;
}

/* стили первого блока с фото */
#paragraph-text {
  color: white; /* Белый цвет текста в параграфе */
}

.text-overlay {
  position: absolute;
  left: 50px;
  top: 70%;
  transform: translateY(-50%);
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  color: white;
  max-width: 90%; /* Чтобы блок не растягивался слишком сильно */
}

h2, p, button {
  text-align: left; /* Текст будет выравниваться по левому краю */
}

/* Адаптация для мобильных устройств */
@media (max-width: 767px) {
  .text-overlay {
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    width: 90%; /* Растягиваем блок на 90% ширины */
    text-align: center; /* Центрируем текст */
    padding: 20px;
  }

  h2, p, button {
    text-align: center; /* Центрируем текст для заголовка и параграфа */
  }
}

/* Owl Carousel common styles for both sliders */
.owl-dots {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.owl-dot {
  width: 30px;
  height: 4px;
  background: #ddd;
  margin: 0 5px;
  transition: background 0.3s;
}

.owl-dot.active {
  background: #007bff; /* Подберите цвет, соответствующий вашей теме */
}
.slider-1 .item {
  border: 1px solid black; /* Рамка вокруг каждого слайда */
  padding: 10px;           /* Внутренние отступы для улучшения внешнего вида */
  border-radius: 5px;      /* Слегка скруглённые углы рамки */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
  background-color: #fff; /* Белый фон внутри рамки */
}
.diplomas-section {
  padding: 10px; /* Внутренние отступы для слайдов */
}




/* Reviews section specific styles */
.reviews-section .testimonial {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.reviews-section .testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Блок с двумя кнопками для записи и звонка */
.consultation-buttons-section {
  background-color: rgba(128, 128, 128, 0.3); /* Прозрачный серый фон (30% непрозрачности) */
  padding: 50px 0;
  border-radius: 10px;
}

.consultation-buttons-section h2 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.consultation-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.consultation-btn {
  font-size: 18px;
  padding: 12px 30px;
  border-radius: 50px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
}

.consultation-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-primary, .btn-success {
  color: white;
  font-weight: bold;
}

/* Переключение языков */
.lang-ru, .lang-ua {
  display: none;
}

.lang-ru:lang(ru), .lang-ua:lang(ua) {
  display: inline;
}

/* На мобильных устройствах до 768px меняем порядок колонок */
@media (max-width: 768px) {
  #about-me-second .row {
    display: flex;
    flex-direction: column-reverse; /* Меняет порядок элементов */
  }
  #about-me-second .col-md-6 {
    margin-bottom: 15px; /* Добавляем отступ между блоками */
  }
  #about-me-second .col-md-6.text-center {
    margin-bottom: 0; /* Убираем отступ для фото, если оно второе */
  }
}



/*buttons*/
.consultation-buttons {
  display: flex;
  justify-content: center;
  gap: 10px; /* Расстояние между кнопками */
}

.consultation-btn {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 576px) {
  .consultation-buttons {
    flex-direction: column; /* Расположить кнопки в столбик */
    align-items: center;
    gap: 15px; /* Увеличить расстояние между кнопками */
  }

  .consultation-btn {
    width: 100%; /* Сделать кнопки на всю ширину */
    max-width: 300px; /* Ограничить ширину кнопок */
  }
}


/* Основные стили для кнопок */
.consultation-btn {
  font-size: 18px;
  font-weight: bold;
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  width: 100%;
  max-width: 250px;
}

/* Градиенты для кнопок */
.btn-primary-gradient {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

.btn-success-gradient {
  background: linear-gradient(135deg, #11998e, #38ef7d);
}

/* Эффекты наведения */
.btn-primary-gradient:hover {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  box-shadow: 0 8px 20px rgba(106, 17, 203, 0.5);
  transform: scale(1.05);
}

.btn-success-gradient:hover {
  background: linear-gradient(135deg, #38ef7d, #11998e);
  box-shadow: 0 8px 20px rgba(56, 239, 125, 0.5);
  transform: scale(1.05);
}

/* Анимация нажатия */
.consultation-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Адаптивность */
@media (max-width: 576px) {
  .consultation-buttons {
    flex-direction: column;
    gap: 20px;
  }

  .consultation-btn {
    width: 90%;
  }
}


/*lightbox*/

.diploma-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}
.diploma-gallery img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.diploma-gallery img:hover {
  transform: scale(1.05);
}

/*полоса*/
.gray-line {
  height: 30px;
  background-color: #ffffff;
}

.icon-size {
  font-size: 40px; /* Размер иконки */
}