/************************************
*******  общие установки    *********
*************************************/

@charset "utf-8";

@font-face {
  font-family: "Tenor Sans";
  src: url("/fonts/TenorSans.eot");
  src: local("Tenor Sans"), local("TenorSans"),
    url("/fonts/TenorSans.eot?#iefix") format("embedded-opentype"),
    url("/fonts/TenorSans.woff2") format("woff2"),
    url("/fonts/TenorSans.woff") format("woff"),
    url("/fonts/TenorSans.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraLight.eot");
  src: local("Montserrat ExtraLight"), local("Montserrat-ExtraLight"),
    url("../fonts/Montserrat-ExtraLight.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-ExtraLight.woff2") format("woff2"),
    url("../fonts/Montserrat-ExtraLight.woff") format("woff"),
    url("../fonts/Montserrat-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.eot");
  src: local("Montserrat Regular"), local("Montserrat-Regular"),
    url("../fonts/Montserrat-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-Regular.woff2") format("woff2"),
    url("../fonts/Montserrat-Regular.woff") format("woff"),
    url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.eot");
  src: local("Montserrat Bold"), local("Montserrat-Bold"),
    url("../fonts/Montserrat-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-Bold.woff2") format("woff2"),
    url("../fonts/Montserrat-Bold.woff") format("woff"),
    url("../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Light.eot");
  src: local("Montserrat Light"), local("Montserrat-Light"),
    url("../fonts/Montserrat-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-Light.woff2") format("woff2"),
    url("../fonts/Montserrat-Light.woff") format("woff"),
    url("../fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Black.eot");
  src: local("Montserrat Black"), local("Montserrat-Black"),
    url("../fonts/Montserrat-Black.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-Black.woff2") format("woff2"),
    url("../fonts/Montserrat-Black.woff") format("woff"),
    url("../fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.eot");
  src: local("Montserrat Medium"), local("Montserrat-Medium"),
    url("../fonts/Montserrat-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-Medium.woff2") format("woff2"),
    url("../fonts/Montserrat-Medium.woff") format("woff"),
    url("../fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.eot");
  src: local("Montserrat ExtraBold"), local("Montserrat-ExtraBold"),
    url("../fonts/Montserrat-ExtraBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-ExtraBold.woff2") format("woff2"),
    url("../fonts/Montserrat-ExtraBold.woff") format("woff"),
    url("../fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.eot");
  src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"),
    url("../fonts/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-SemiBold.woff2") format("woff2"),
    url("../fonts/Montserrat-SemiBold.woff") format("woff"),
    url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Thin.eot");
  src: local("Montserrat Thin"), local("Montserrat-Thin"),
    url("../fonts/Montserrat-Thin.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Montserrat-Thin.woff2") format("woff2"),
    url("../fonts/Montserrat-Thin.woff") format("woff"),
    url("../fonts/Montserrat-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

/*******************************************
*****  определение мигающего курсора  ******
********************************************/

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  } /* Исходное и конечное состояние - прозрачный цвет границы */
  50% {
    border-color: var(--doc_text_color);
  } /* В середине анимации цвет границы устанавливается в var(--doc_text_color) */
}

/************************************
*****  определение градиентов  ******
*************************************/

@keyframes gradient-animation {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 100%;
  }
}

.gradient-animated-text {
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-animation 10s infinite linear;
}

/*************************
*******  Main    *********
**************************/
* {
  --resize_index: calc(1.5vw + 0vh);
}

body, html {
  /*** font-family: 'Open Sans', sans-serif;***/
  font-family: "Tenor Sans";
  font-weight: 200;
  font-size: 16px;
  line-height: 24px;
  width: 100vw; /* 100% ширины экрана */
  min-width: 100%; /* Если вдруг что-то ограничивает */
  margin: 0; /* Убираем отступы по краям */
  padding: 0; /* Если были внутренние отступы */
  overflow-x: hidden; /* Запрещаем горизонтальный скролл */
  /*overflow-y: hidden;  Разрешаем вертикальный скролл */
  overflow-y: scroll; /* Показываем вертикальный скроллбар всегда */

}

.scroll-container {
  position: relative; /* Оставляем его в потоке */
  width: 100%; /* Растягиваем на всю ширину */
  height: 100vh; /* Делаем высоту равной экрану */
  min-height: 100vh; /* Даем контейнеру возможность расти */
  overflow-y: auto; /* Разрешаем вертикальную прокрутку */
  /* Наследуем стили от body */
  background: inherit;
  color: inherit;
  font: inherit;
  overflow-y: auto; /* Включаем вертикальный скролл */
}

.scroll-off {
  overflow-y: auto; /* Разрешаем вертикальную прокрутку */
  /* Наследуем стили от body */
  background: inherit;
  color: inherit;
  font: inherit;
}



h6 {
  /*****8 установки шрифта и размера для заголовка разделов *****/
  font-family: "Montserrat";
  font-weight: 300;
  font-size: calc(var(--resize_index) * 1.8);
  text-transform: uppercase;
}

h5 {
  /*****8 установки шрифта и размера для заголовка сайта*****/
  font-family: "Montserrat";
  font-size: calc(var(--resize_index) * 2);
  /* text-transform: lowercase; */
  font-weight: 200;
}

h2 {
  font-size: 30px;
  margin-bottom: 20px;
}

h3 {
  font-size: 18px;
}

.parallax {
  background-size: cover; /* Обеспечиваем покрытие контейнера изображением */
  background-position: center; /* Центрируем изображение */
  background-repeat: no-repeat; /* Запрещаем повторение изображения */
  width: 100vw; /* Задаем ширину 100% от ширины окна просмотра */
  position: relative; /* Устанавливаем относительное позиционирование для контейнера */
  padding: 60vh 0; /* Устанавливаем вертикальные отступы секции */
  max-width: 100vw; /* Ограничиваем ширину секции видимой областью экрана (viewport) */
  overflow: hidden; /* Убираем возможные лишние области за пределами секции */
  background-attachment: fixed;
}

/* Стили только для iOS Safari */
body.ios-safari .parallax {
  background-attachment: scroll !important; /* Заменяем fixed на scroll для корректной работы */
}


.parallax input,
.parallax input:hover,
.parallax textarea,
.parallax textarea:hover {
  font-weight: 300;
}

.btn-submit {
  border: 1px solid;
  border-radius: 10px;
  display: block;
  padding: 12px;
  width: 100%;
  margin-top: 40px;
}

.btn {
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out,
    color 0.2s ease-in-out; /* Анимируем только transform */
}

.btn:hover {
  transform: scale(1.03);
}

a {
  text-decoration: none;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

a:focus,
a:hover {
  text-decoration: none;
  outline: none;
}

section {
  padding: 10px 0;
}

.heading {
  padding-bottom: 30px;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}

.preloader > i {
  position: absolute;
  font-size: 36px;
  line-height: 36px;
  top: 50%;
  left: 50%;
  height: 36px;
  width: 36px;
  margin-top: -15px;
  margin-left: -15px;
  display: inline-block;
}
.preloader > p {
  position: absolute;
  font-size: 16px;
  text-align: center;
  line-height: 16px;
  top: 60%;
  left: 50%;
  transform: translate(-40%, 0);
  height: 16px;
  margin-top: -15px;
  margin-left: -15px;
  display: inline-block;
}

.row.justify-content-center {
  display: flex; /* Устанавливаем flexbox для родительского контейнера */
  justify-content: center; /* Горизонтальное выравнивание дочерних элементов по центру */
}

/*************************
*******   Navbar    ******
**************************/

.navbar-header {
  height: 90px; /* Высота навбара */
  line-height: 90px; /* Совпадает с высотой */
  display: flex; /* Используем flexbox */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  cursor: pointer;
}

.navbar-brand {
  margin-left: calc(var(--resize_index) * 5);
  display: flex; /* Используем flexbox для выравнивания */
  flex-direction: column; /* Размещаем элементы в колонку */
  align-items: center; /* Выравниваем элементы по центру контейнера по горизонтали */
  justify-content: center; /* Выравниваем элементы по центру контейнера по вертикали */
  text-align: center; /* Выравниваем текст по центру */
}

/* Стили для первого текстового названия */
.navbar-brand .first-title {
  font-family: "Montserrat";
  font-size: calc(var(--resize_index) * 2.3);
  font-weight: 200;
  margin-bottom: 15px; /* Добавляем отступ снизу */
  text-transform: uppercase;
}

/* Стили для второго текстового названия */
.navbar-brand .second-title {
  font-family: "Tenor Sans";
  font-size: calc(var(--resize_index) * 1.5);
  font-weight: 200;
}

.navbar-toggle {
  margin-left: auto;
}

.navbar-header img {
  margin-top: 2vh;
  margin-left: 4vh;
  opacity: 1;
}

.navbar-collapse li.scroll:not(.hover-enabled):hover,
.navbar-collapse li.dropdown:not(.hover-enabled):hover {
  pointer-events: none;
}

.navbar-collapse {
  padding-right: 0px;
  padding-left: 0px;
}




.navbar-nav li a:hover,
.navbar-nav li a:active,
.navbar-nav li.active a,
.navbar-nav li.dropdown a,
.navbar-nav li a:focus {
  border-radius: 20px !important;
  border: 0px solid;
}


.navbar-right li a {
  font-family: "Montserrat";
  font-size: calc(var(--resize_index) * 2);
  /* text-transform: lowercase; */
  font-weight: 400;

  transition: background 0.01s;
  text-transform: uppercase;
  font-size: 14px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 2vh;
  margin-bottom: 2vh;
}


/* Базовый стиль для мигающего меню */
.blinking {
  opacity: 0.5; /* Устанавливаем начальную прозрачность */
  animation: blink-scale 4s ease-in-out infinite; /* Применяем анимацию мигания и увеличения с бесконечным повторением */
}

/* Отключение анимации при active и focus */
.blinking.active,
.blinking:hover,
.blinking:focus {
  animation: none; /* Убираем анимацию для активного элемента */
  opacity: 1; /* Устанавливаем непрозрачность */
}

/* Анимация на основе ключевых кадров */
@keyframes blink-scale {
  0%, 100% {
    opacity: 0.5; /* Начальная и конечная прозрачность */
    transform: scale(1); /* Начальный и конечный размер */
  }
  50% {
    opacity: 1; /* Прозрачность на пике мигания */
    transform: scale(1.05); /* Увеличение размера на 10% */
  }
}



/* Убедимся, что .container сохраняет свои размеры */
.container {
  width: 100%; /* Ширина контейнера на 100% родителя */
  max-width: 1200px; /* Максимальная ширина */
  margin: 0 auto; /* Центрируем контейнер */
  box-sizing: border-box; /* Учитываем отступы и границы */
}



.extra-menu {
  display: none; /* Элемент скрыт по умолчанию */
  position: relative; /* Устанавливаем позиционирование элемента */
  z-index: 1000; /* Устанавливаем больший z-index, чтобы элемент отображался поверх других */
}

.dropdown-menu {
  font-family: "Montserrat" !important;
  border: 0px solid; /* Убираем границу, если она есть */
}

.dropdown-menu li a {
  padding: 10px 30px; /* Отступы внутри пунктов меню */
}

/*************************
******** Social Icons ****
**************************/

.social-icons {
  margin-top: 30px;
  text-align: center;
  z-index: 999;
}
.footer-top .social-icons {
  margin: 0px auto;
  text-align: center;
  z-index: 999;
}

.social-icons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.social-icons ul li {
  float: left;
  margin-right: 10px !important;
}

.social-icons ul li:last-child {
  margin-right: 0;
}

.social-icons ul li a {
  border-radius: 25%;
  border: 1px solid;
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: block;
  font-size: 20px;
  opacity: 0.8;
}

.social-icons a {
  border-radius: 25%;
  border: 1px solid;
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: block;
  font-size: 20px;
  opacity: 1;
}

.social-icons a:hover {
  opacity: 1;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.social-icons ul li a:hover {
  opacity: 1;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

/*************************
********start CSS**********
**************************/
#start-slider {
  max-width: 100%; /* Ограничиваем по ширине */
  max-height: 100%; /* Ограничиваем высоту */
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#start-slider .caption {
  display: flex; /* Устанавливаем flexbox для родительского элемента */
  justify-content: center; /* Центрируем дочерние элементы по горизонтали */
  align-items: center; /* Центрируем дочерние элементы по вертикали */
  position: absolute;
  top: 15%; /* Центрирование по вертикали на 50% */
  transform: translateY(-50%); /* Сдвиг на -50% для точного центрирования */
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 15;
}


#start-slider p{
  display: flex; /* Устанавливаем flexbox для родительского элемента */
  justify-content: center; /* Центрируем дочерние элементы по горизонтали */
  align-items: center; /* Центрируем дочерние элементы по вертикали */
  position: absolute;
  width: 100%;
  font-family: "Montserrat";
  font-weight: 200 !important;
  font-size: calc(var(--resize_index) * 2.5);
  text-align: center;
  line-height: 2;
  z-index: 16;
  text-transform: uppercase;
}



#start-slider .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* ← Настрой уровень затемнения здесь */
  z-index: 1;
}


#start-slider .navbar-brand {
  margin-left: 0;
  margin: 0 auto !important;
  height: auto;
  display: flex; /* Используем flexbox для выравнивания */
  flex-direction: column; /* Размещаем элементы в колонку */
  align-items: center; /* Выравниваем элементы по центру контейнера по горизонтали */
  justify-content: center; /* Выравниваем элементы по центру контейнера по вертикали */
  text-align: center; /* Выравниваем текст по центру */
}

#start-slider .item {
  background-size: cover; /* Обеспечиваем покрытие контейнера изображением */
  background-position: center; /* Центрируем изображение */
  background-repeat: no-repeat; /* Запрещаем повторение изображения */
  width: 100vw; /* Задаем ширину 100% от ширины окна просмотра */
  position: relative; /* Устанавливаем относительное позиционирование для контейнера */
  max-width: 100vw; /* Ограничиваем ширину секции видимой областью экрана (viewport) */
  overflow: hidden; /* Убираем возможные лишние области за пределами секции */
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

#start-slider img {
  border: 0px solid;
  width: 100%;
  height: 100%;
  object-fit: fill; /* Изображение полностью влезает без обрезки */
}

#start-slider h1 {
  font-family: "Montserrat";
  font-weight: 200 !important;
  font-size: calc(var(--resize_index) * 3);
  text-align: center;
}

#start-slider .carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  background-repeat: no-repeat;
  background-size: cover; /* Полное заполнение, даже с искажением */
  height: 100vh;

}

#start-slider .carousel-inner .item p {
  padding-left: 10%;
  padding-right: 10%;
}
#start-slider .container p {
  padding-left: 2%;
  padding-right: 2%;
}

#start-slider .carousel-fade .carousel-inner .item:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#start-slider .carousel-fade .carousel-inner .active {
  opacity: 1;

}
#start-slider .carousel-fade .carousel-inner .active.left,
#start-slider .carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
#start-slider .carousel-fade .carousel-inner .next.left,
#start-slider .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
 
}
#start-slider .carousel-fade .carousel-control {
  z-index: 2;
}

#start-slider .left-control,
#start-slider .right-control,
.left-control,
.right-control {
  position: absolute;
  top: 50%; /* Центрирование по вертикали на 50% */
  transform: translateY(-50%); /* Сдвиг на -50% для точного центрирования */

  height: calc(var(--resize_index) * 3);
  width: calc(var(--resize_index) * 3);
  line-height: calc(var(--resize_index) * 2.7);
  border-radius: 50%;
  border: 2px solid;
  z-index: 20;
  font-size: calc(var(--resize_index) * 1.5);
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#start-slider .fa-angle-down {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: inline-block;
  width: 24px;
  margin-left: -12px;
  font-size: 24px;
  line-height: 24px;
  z-index: 999;
  -webkit-animation: bounce 3000ms infinite;
  animation: bounce 3000ms infinite;
}

#start-slider .btn-start {
  position: absolute;
  left: 50%;
  width: 140px;
  margin-left: -70px;
  bottom: 70px;
  line-height: 28px;
  z-index: 999;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 4px;
  margin-top: 40px;
}

#start-slider .btn-start:hover {
  transition: all 0.5s ease !important;
}

/*************************
********Home CSS**********
**************************/
#home-slider {
  max-width: 100%; /* Ограничиваем по ширине */
  max-height: 100%; /* Ограничиваем высоту */
  margin: 0 auto;
  height: calc(var(--resize_index) * 25);
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-slider .caption {
  position: absolute; /* Абсолютное позиционирование */
  top: 50%; /* Центрирование по вертикали на 50% */
  transform: translateY(-50%); /* Сдвиг на -50% для точного центрирования */
  left: 0; /* Отступ слева 0 */
  right: 0; /* Отступ справа 0 */
  text-align: center; /* Выравнивание текста по центру */
  z-index: 15; /* Установка z-index для управления наложением */
  font-size: 18px; /* Размер шрифта 18 пикселей */
  font-weight: 400; /* Толщина шрифта 400 */
}

#home-slider img {
  margin-top: 40px;
  border-radius: 0%;
  border: 0px solid;
  object-fit: fill;
}

#home-slider .caption h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
}

.caption .btn-start {
  font-size: 14px;
  font-weight: 600;
  padding: 14px 40px;
  border: 1px solid;
  border-radius: 4px;
  margin-top: 40px;
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

.carousel-inner .item p {
  padding-left: 10%;
  padding-right: 10%;
  font-size: 16px;
}
.container p {
  padding-left: 2%;
  padding-right: 2%;
}

.carousel-fade .carousel-inner .item:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}

#start-slider .left-control,
#home-slider .left-control {
  left: -55px;
}

#start-slider .right-control,
#home-slider .right-control {
  right: -55px;
}


#start-slider:hover .left-control {
  /* left: 30px;  выходят при ховере */
  left: -55px; /* не  выходят при ховере */
}

#home-slider:hover .left-control {
  left: 30px;
}



#start-slider:hover .right-control {
  /* right: 30px;  выходят при ховере */
  right: -55px;
}

#home-slider:hover .right-control {
  right: 30px;
}


#home-slider .fa-angle-down {
  position: absolute;
  left: 50%;
  bottom: 50px;
  display: inline-block;
  width: 24px;
  margin-left: -12px;
  font-size: 24px;
  line-height: 24px;
  z-index: 999;
  -webkit-animation: bounce 3000ms infinite;
  animation: bounce 3000ms infinite;
}

/*************************
********Service CSS*******
**************************/
.service-icon {
  border-radius: 44px;
  display: inline-block;
  font-size: 36px;
  height: 90px;
  line-height: 90px;
  width: 90px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

#services-single-wrap,
#about-single-wrap,
#confidence-single-wrap,
#portfolio-single-wrap {
  padding-top: 0px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.our-services .col-sm-4 {
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 50px;
}

.our-services .col-sm-4:nth-child(4),
.our-services .col-sm-4:nth-child(5),
.our-services .col-sm-4:nth-child(6) {
  border-bottom: 0;
  padding-top: 60px;
}

.our-services .col-sm-4:nth-child(3),
.our-services .col-sm-4:nth-child(6) {
  border-right: 0;
}

.service-info h3 {
  margin-top: 35px;
}

#services .overlay {
  left: 0;
  right: 0;
  bottom: -100%;
  height: 0;
  position: absolute;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#services img,
#about-us img:not(.img-responsive2),
#contact img,
#team img,
#portfolio-details img,
#wed_portfolio img:not(.img-responsive2),
#cases_ img:not(.img-responsive2) {
  cursor: pointer;
  /*** border-radius: 20px; 
  box-shadow: 0 0 10px var(--doc_text_color); ***/
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}


.img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;

}


.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* начальное затенение */
  transition: background 0.5s ease-in-out;
  -webkit-transition: background 0.5s ease-in-out;
  pointer-events: none; /* Чтобы overlay не мешал событиям мыши */
}


.img-wrapper:hover .img-overlay {
  background: rgba(0, 0, 0, 0); /* убираем затемнение */
}




#single-services,
#single-portfolio,
#single-about,
#single-footer {
  padding: 60px 0;
  position: relative;
}

#Up_close.close-services-item,
#Up_close.close-folio-item,
#Up_close.close-about-item,
#Up_close.close-footer-item {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 30px;
  font-size: 50px !important;
  width: 54px;
  height: 54px;
  line-height: 54px;
  color: var(--back_basic_color);
}

#Up_close.close-services-item:hover,
#Up_close.close-folio-item:hover,
#Up_close.close-about-item:hover,
#Up_close.close-footer-item:hover,
#Down_close.close-services-item:hover,
#Down_close.close-folio-item:hover,
#Down_close.close-about-item:hover,
#Down_close.close-footer-item:hover {
  color: var(--doc_back3_color);
}

#Down_close.close-services-item,
#Down_close.close-folio-item,
#Down_close.close-about-item,
#Down_close.close-footer-item {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  bottom: 30px;
  font-size: 44px !important;
  width: 54px;
  height: 54px;
  line-height: 44px;
  color: var(--back_basic_color);
}

.services-overview a {
  font-size: 18px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20px;
  margin-right: 5px;
}

.services-overview a:hover {
  color: #f5f5f5;
}

.services-overview .services-expand {
  margin-top: -500px;
  margin-left: -500px;
}

/*************************
********About CSS*******
**************************/
#about-us {
  padding: 60px 0;
}

#about-us h2 {
  margin-top: 0;
}

#about-us .lead {
  font-size: 16px;
  margin-bottom: 10px;
}

#about-us h1 {
  margin-bottom: 30px;
}

.progress {
  height: 20px;
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin-bottom: 25px;
}

.progress-bar {
  box-shadow: none;
  -webkit-box-shadow: none;
  text-align: right;
  padding-right: 12px;
  font-size: 12px;
  font-weight: 400;
}

.progress .progress-bar.six-sec-ease-in-out {
  -webkit-transition: width 4s ease-in-out;
  transition: width 4s ease-in-out;
}

/*****************************
********wed_portfolio CSS*****
******************************/
/* ПК: всё как было */
.mobile-cover-link {
  display: none;
}

/* Мобильные: убираем эффекты оверлея и делаем всю карточку ссылкой */
@media (pointer: coarse), (max-width: 768px) {
  .folio-item .overlay {
    display: none !important;            /* прячет затемнение, анимации, тексты */
  }
  .folio-item .folio-image img {
    transform: none !important;          /* на случай hover-скейлов */
    filter: none !important;             /* на случай эффектов */
  }
  .mobile-cover-link {
    display: block;
    position: absolute;
    inset: 0;                            /* растянуть на всю карточку */
    z-index: 2;
  }
}

#wed_portfolio .container-fluid,
#wed_portfolio .col-sm-3,
#cases_ .container-fluid,
#cases_ .col-sm-3 {
  overflow: hidden;
  padding: 0;
}
#wed_portfolio .folio-item,
#cases_ .folio-item {
  position: relative;
}

#wed_portfolio .overlay,
#cases_ .overlay {
  left: 0;
  top: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.overlay .overlay-content {
  display: table;
  height: 100%;
  width: 100%;
}
.overlay .overlay-text {
  vertical-align: center;
  position: absolute;
  padding: 0px;
  text-align: center;
  width: 100%;
}

.overlay .folio-info {
  opacity: 0;
  margin-bottom: 75px;
  margin-top: -75px;
  width: 100%;
  background-color: var(--menu_basic_color);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.overlay .folio-info h3 {
  margin-top: 0;
  color: #f5f5f5;
}

.img-responsive {
  margin: 0px auto;
  width: 100%; /* Ширина изображения равна 100% ширины контейнера */
  height: auto; /* Высота изображения автоматически подстраивается под сохранение пропорций */
  display: block;
}

.img-responsive2 {
  width: 100%;
  margin: 10px auto;
}



.image-container-right {
  float: right !important; /* Элемент перемещается влево, независимо от других правил */
  width: 50%; /* Устанавливаем ширину элемента */
  margin: 10px; /* Добавляем отступ справа */
}

.folio-overview a {
  font-size: 44px;
  height: 110px;
  width: 110px;
  line-height: 110px;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
  margin-top: 40px;
  margin-right: 5px;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}



.folio-overview a:hover {
  transform: scale(1.1);
  pointer-events: all;
}



.folio-overview .folio-expand {
  margin-top: -500px;
  margin-left: -500px;
  pointer-events: none;
}

.folio-image,
.folio-overview .folio-expand {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#wed_portfolio .folio-item:hover .folio-image,
#cases_ .folio-item:hover .folio-image {
  -webkit-transform: scale(1.5) rotate(-15deg);
  transform: scale(1.5) rotate(-15deg);
}

.folio-image {
  position: relative;
  display: inline-block;
}


.folio-image img {
  width: 100%;
  height: auto;
  object-fit: fill;
}

#wed_portfolio .folio-item:hover .overlay,
#cases_ .folio-item:hover .overlay {
  opacity: 0.7;
  bottom: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

#wed_portfolio .folio-item:hover .folio-overview .folio-expand,
#cases_ .folio-item:hover .folio-overview .folio-expand {
  margin-top: 0;
  margin-left: 0;
}

#wed_portfolio .folio-item:hover .overlay .folio-info,
#cases_ .folio-item:hover .overlay .folio-info {
  opacity: 1;
  margin-bottom: 0;
  margin-top: 0;
}

/*************************
*********Team CSS*********
**************************/
#team,
#section5,
#contact,
#wed_FAQ,
#wed_pricing,
#section6,
#footer,
.parallax {
  padding-top: 0;
}

.team-members {
  margin-bottom: 25px;
}

.team-member {
  text-align: center;
  font-size: 14px;
}

#team .img-responsive {
  width: 100%;
}

.member-info h3 {
  margin-top: 35px;
}

.member-info h4 {
  font-size: 14px;
  margin-bottom: 15px;
}

/*************************
*******Features CSS*******
**************************/
#features {
  text-align: center;
  background-image: url(../images/features-bg.jpg);
}

#features i {
  font-size: 48px;
}

#features h3 {
  margin-top: 15px;
  font-size: 30px;
  margin-bottom: 7px;
}

#features .slider-overlay {
  opacity: 0.8;
}

/*************************
*****Pricing Table CSS****
**************************/
.pricing-table {
  text-align: center;
}

.price {
  font-size: 36px;
  line-height: 36px;
}

.price span {
  font-size: 14px;
  line-height: 14px;
}

.single-table {
  padding: 20px;
  border: 1px solid;
  border-radius: 10px;
  cursor: pointer;
  position: relative; /* Делаем родительский блок точкой отсчёта */
  overflow: visible; /* Чтобы картинка могла выходить за границы */
  counter-reset: list-counter;
  height: calc(var(--resize_index) * 55);
}



.flip-back-button .single-table {
  overflow-y: auto; /* Включение вертикальной прокрутки */
}

.single-table h3 {
  height: 1.4em; /* Высота = 2 строки */
  line-height: 1.4em; /* Межстрочный интервал */
  overflow: hidden; /* Обрезает лишний текст */
  display: block; /* Гарантирует, что работает с `height` */
  margin-top: 0;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
}

.single-table p {
  padding-bottom: 0px;
  margin: 0px auto;
}

.single-table .btn-submit {
  position: absolute;
  bottom: 20px;      /* 20px от нижнего края */
  left: 50%;         /* Центр по горизонтали */
  transform: translateX(-50%); /* Сдвиг на половину ширины назад */
  width: 90%;
}

/* Стили для метки прайса*/
.corner-label {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: red;
  color: var(--back_basic_color);
  border-color: var(--back_basic_color);
  font-weight: bold;
  padding: 1%;
  height: 35px;
  width: auto;
  border-radius: 10px;
  z-index: 10;
  text-decoration: none;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
  
  /* Добавляем Flex для вертикального выравнивания */
  display: flex;
  align-items: center;
  justify-content: center; /* Для горизонтального выравнивания */
}

/* Стили для простой метки*/
.simple-label {
  position: absolute;
  top: -10px; /* Выносит вверх */
  right: 5px; /* Центрируем  */
  background-color: #ff5733; /* Красно-оранжевый фон */
  color: white; /* Белый текст */
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 10px; /* Закругленные углы */
  z-index: 10; /* Поверх остальных элементов */
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Эффект при наведении */
.corner-label:hover,
.simple-label:hover {
  transform: scale(1.2);
  color: white; /* Белый текст */
}

/* Эффект при активации */
.corner-label:active,
.corner-label:visited,
.simple-label:active,
.simple-label:visited {
  color: white; /* Белый текст */
}

.fixed-height-list {
  height: calc(var(--resize_index) * 27); /* Фиксированная высота */
  overflow-y: auto; /* Включение вертикальной прокрутки */
  border: 0px solid; /* Для наглядности можно добавить границу */
  padding: 1px;
  margin-top: 80px;
  max-width: 100%;
  list-style-type: none;
  text-align: left;
  counter-reset: list-counter;
  border-radius: 10px; /* Закругленные углы */
  position: relative;
}
.fixed-height-list2 {
  height: calc(var(--resize_index) * 17); /* Фиксированная высота */
  overflow-y: auto; /* Включение вертикальной прокрутки */
  border: 0px solid; /* Для наглядности можно добавить границу */
  padding: 1px;
  margin-top: 80px;
  max-width: 100%;
  list-style-type: none;
  text-align: left;
  counter-reset: list-counter;
  border-radius: 10px; /* Закругленные углы */
  position: relative;
}

.fixed-height-list li,
.single-table li {
  counter-increment: list-counter;
  list-style: none;
  padding-left: calc(var(--resize_index) * 1.8);
}

.back li {
  list-style: none;
  text-indent: 0px;
  line-height: 21px !important;
  padding-left: calc(var(--resize_index) * 0.3);
}

.fixed-height-list li::before,
.single-table li::before {
  content: counter(list-counter) ". "; /* Добавление номера строки перед элементом списка */
  position: absolute; /* Абсолютное позиционирование номера строки */
  left: 10px; /* Отступ номера строки  */
  font-weight: bold;
}

.pricing-table .col-sm-6:not(:last-child) {
  margin-bottom: 20px;
}

/*************************
**********Blog CSS********
**************************/

.post-thumb {
  position: relative;
}

.post-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
}

.post-meta {
  position: absolute;
  bottom: 15px;
  left: 15px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.post-meta span {
  margin-right: 16px;
}

#post-carousel .carousel-indicators {
  bottom: 3px;
  left: 90%;
}

.blog-left-control,
.blog-right-control {
  position: absolute;
  top: 45%;
  width: 30px;
  text-align: center;
  font-size: 36px;
}

.blog-left-control {
  left: 0;
}

.blog-right-control {
  right: 0;
}

.entry-header h3 a {
  line-height: 30px;
}

.entry-header .date,
.entry-header .cetagory {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 30px;
  text-transform: uppercase;
  position: relative;
}

.entry-header .date:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -22px;
  width: 20px;
  height: 3px;
}

.entry-content {
  font-size: 14px;
}

.load-more {
  display: block;
  text-align: center;
  margin-top: 70px;
}

.btn-loadmore {
  border: 1px solid;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 125px;
  text-transform: uppercase;
}

/*************************
**********Contact CSS*****
**************************/

#contact {
  padding-top: 45px;
  padding-bottom: 0;
}

#google-map {
  height: 350px;
}

#contact-us {
  padding-bottom: 90px;
}

#contact-us .heading {
  padding-top: 95px;
}

.form-control {
  background-color: transparent;
  height: 50px;
  border-radius: 10px;
  transition: box-shadow 0.5s ease;
  box-shadow: none;
}

.form-control:focus {
  box-shadow: 0 0 10px var(--doc_text_color); /* Тень с размерами 0 0 10px и цветом var(--doc_text_color) */
  outline: none; /* Убираем стандартный outline */
  border-width: 1px; /* Ширина границы 2px */
  border-style: solid; /* Стиль границы - сплошная линия */
  animation: blink-caret 3s ease infinite; /* Применение анимации мигающего курсора с длительностью 1s, без плавности, бесконечно */
}

.textarea.form-control {
  min-height: 180px;
  resize: none;
}

.form-group {
  margin-bottom: 30px;
}

.contact-info {
  padding-left: 70px;
  font-weight: 300;
}

ul.address {
  margin-top: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info ul li {
  margin-bottom: 8px;
}

.footer {
  width: 100vw;
  position: absolute;
  left: 0;
  right: 0;
}

#footer .footer-top {
  position: relative;
  padding: 0px auto;
}

#footer .footer-bottom {
  position: relative;
}

#footer .footer-bottom a:hover {
  text-decoration: underline;
}

#footer .footer-logo {
  display: inline-block;
}


.whole_slider {
  /* Основной контейнер */
  display: flex; /* Используем flexbox для родительского контейнера */
  justify-content: center; /* Горизонтальное выравнивание дочерних элементов по центру */
  width: 100%; /* Задаем ширину 100% для основного контейнера */
  position: relative; /* Устанавливаем относительное позиционирование для контейнера */
  margin-bottom: 20px;
}

.whole_slider img {
  /* Стили для изображения */
  width: 100%; /* Задаем ширину изображения на 100% от ширины контейнера */
  height: 100%; /* Задаем высоту изображения на 100% от высоты контейнера */
  object-fit: cover; /* Обеспечиваем покрытие контейнера изображением, обрезая его края, если необходимо */
}

.slider-caption {
  /* Стили для контейнера с подписью */
  position: absolute; /* Устанавливаем абсолютное позиционирование для контейнера с подписью */
  top: 0; /* Размещаем контейнер с подписью вверху */
  width: 100%; /* Задаем ширину 100% для контейнера с подписью */
  height: 40%; /* Устанавливаем высоту контейнера */
  text-align: center; /* Центрируем текст по горизонтали внутри контейнера с подписью */
  padding: 10px; /* Добавляем внутренний отступ */
  display: flex; /* Используем flexbox для выравнивания содержимого */
  justify-content: center; /* Центрируем содержимое по горизонтали */
  align-items: center; /* Центрируем содержимое по вертикали */
  pointer-events: none; /* Игнорировать события мыши для содержимого innerHTML */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.slider-caption h5,
.folio-info h5 {
  /* Стили для заголовка внутри контейнера с подписью */
  text-transform: uppercase; /* Преобразуем текст заголовка в верхний регистр */
  font-family: "Montserrat"; /* Устанавливаем семейство шрифтов */
  font-weight: 200; /* Устанавливаем вес шрифта */
  font-size: calc(
    var(--resize_index) * 2
  ); /* Устанавливаем размер шрифта с использованием переменной */
}

.slider i {
  pointer-events: none; /* Игнорировать события мыши для содержимого innerHTML */
}

/******************************************************************************************
*********** знак для секции свадеб или обучения *******************************************
*******************************************************************************************/

.wed_section_sign a {
  color: var(--menu_basic_color);
  font-weight: 600;
  position: fixed;
  top: 15px;
  left: 25px;
  transform: translate(
    -50%,
    0
  ); /* Смещение элемента на половину его ширины и высоты назад */
  font-size: 1.5em;
  z-index: 15000;
}
.teach_section_sign a {
  color: var(--menu_basic_color);
  font-weight: 600;
  position: fixed;
  top: 55px;
  left: 25px;
  transform: translate(
    -50%,
    0
  ); /* Смещение элемента на половину его ширины и высоты назад */

  font-size: 1.5em;
  z-index: 15000;
}

/******************************************************************************************
********** изменение стилей для lightbox **************************************************
*******************************************************************************************/

/* Пример кастомизации внешнего вида */
.lightbox .lb-image {
  /* Image border */
  border: 3px solid var(--doc_back3_color) !important;
}
.lb-outerContainer {
  /* Background color behind image.
         This is visible during transitions. */
  background-color: transparent !important;
}

/******************************************************************************************
********** контейнер стилей для FAQ и прочих **********************************************
*******************************************************************************************/

.faq_container {
  border: 1px solid; /* Граница контейнера */
  border-radius: 10px; /* Скругленные края контейнера */
  width: 100%; /* Ширина контейнера */
  max-width: 100%; /* Ограничиваем по ширине */
  max-height: 100%; /* Ограничиваем высоту */
  margin: 20px auto; /* Центрирование контейнера */
  position: relative; /* Относительное позиционирование для дочерних элементов */
}

/* Стиль для краткого текстового поля */
.faq_short-text {
  padding-top: 10px; /* Отступ от верхнего края контейнера */
  width: calc(100% - 60px); /* Ширина текстового поля с учетом иконки */
  border: none; /* Убираем границу текстового поля */
  outline: none; /* Убираем обводку текстового поля */
  line-height: 1.5; /* Высота строки */
  align-items: center; /* Вертикальное центрирование */
  cursor: pointer; /* Курсор в виде руки при наведении */
}

/* Стиль для иконки плюсика */
.faq_icon {
  width: 50px; /* Ширина иконки */
  height: 50px; /* Высота иконки */
  font-size: 50px; /* Размер шрифта иконки */
  font-weight: 200; /* Толщина шрифта иконки */
  right: 5px; /* Отступ от правого края контейнера */
  top: 5px; /* Отступ от верхнего края контейнера */
  /*
  border: 1px solid; 
  background: var(--doc_back3_color); 
  border-radius: 50%;
  */
  display: flex; /* Использование flexbox */
  align-items: center; /* Вертикальное центрирование */
  justify-content: center; /* Горизонтальное центрирование */
  user-select: none; /* Запрет на выделение текста */
  position: absolute; /* Абсолютное позиционирование */
  transition: transform 0.5s ease; /* Плавная анимация поворота */
  cursor: pointer; /* Курсор в виде указателя при наведении */
}

/* Стиль для дополнительного текстового поля */
.faq_extra-text {
  padding-top: 15px; /* Отступ от верхнего края контейнера */
  max-height: 0; /* Начальная максимальная высота 0 */
  overflow: hidden; /* Скрываем переполнение */
  margin: 0 auto; /* Убираем отступ сверху */
  width: 100%; /* Ширина дополнительного текстового поля */
  border: none; /* Убираем границу текстового поля */
  outline: none; /* Убираем обводку текстового поля */
  opacity: 0; /* Начальная непрозрачность */
  transition: opacity 0.5s ease, max-height 0.5s ease; /* Плавная анимация высоты и непрозрачности */
}

/* Класс для поворота иконки плюсика */
.faq_icon_rotate {
  transform: rotate(-45deg); /* Поворот иконки на 45 градусов */
}

/* Класс для отображения дополнительного текста */
.faq_extra-text_show {
  max-height: 450vh; /* Максимальная высота в раскрытом состоянии */
  opacity: 1; /* Полная непрозрачность */
  margin: 15px auto; /* Отступ сверху */

}

/******************************************************************************************
********** описание флипперов для карточек ************************************************
*******************************************************************************************/

/* Контейнер для флиппера */
.flip-container {
  perspective: 1000px; /* Добавляет перспективу для создания 3D эффекта */
  height: calc(var(--resize_index) * 57); /* Высота флиппера */
}

/* Флиппер */
.flipper {
  position: relative; /* Относительное позиционирование для флиппера */
  width: 100%; /* Ширина флиппера */
  transition: transform 0.6s; /* Плавный переход для трансформации */
  transform-style: preserve-3d; /* Сохраняет 3D стиль трансформации */
}

/* Переворот флиппера на 180 градусов по оси Y при добавлении класса flip */
.flip-container.flip .flipper {
  transform: rotateY(
    180deg
  ); /* Поворачивает флиппер на 180 градусов по оси Y */
}

/* Передняя и задняя стороны */
.front,
.back {
  position: absolute; /* Абсолютное позиционирование для передней и задней сторон */
  backface-visibility: hidden; /* Скрывает заднюю сторону, когда она перевернута */
}

/* Передняя сторона */
.front {
  background: transparent; /* Фон для передней стороны */
  transform-origin: center; /* Устанавливает точку вращения в центр элемента */
}

/* Задняя сторона */
.back {
  background: transparent; /* Фон для задней стороны */
  transform: rotateY(
    180deg
  ); /* Поворачивает заднюю сторону на 180 градусов по оси Y */
  transform-origin: center; /* Устанавливает точку вращения в центр элемента */
}

/* Класс для скрытия элемента */
.hidden {
  visibility: hidden; /* Делает элемент невидимым */
}

/******************************************************************************************
********** описание видео для карусели ****************************************************
*******************************************************************************************/
.video-container {
  position: relative; /* Устанавливаем относительное позиционирование для контейнера видео */
  width: 100vw; /* Устанавливаем ширину контейнера на 100% ширины окна */
  height: 100vh; /* Устанавливаем высоту контейнера на 100% высоты окна */
  overflow: hidden; /* Обрезаем контент, выходящий за пределы контейнера */
}

.video-container video {
  position: absolute; /* Устанавливаем абсолютное позиционирование для видео */
  top: 50%; /* Смещаем видео на 50% сверху */
  left: 50%; /* Смещаем видео на 50% слева */
  width: 100vw; /* Устанавливаем ширину видео на 100% ширины окна */
  height: 100vh; /* Устанавливаем автоматическую высоту для сохранения пропорций */
  transform: translate(
    -50%,
    -50%
  ); /* Смещаем видео на 50% влево и вверх для центрирования */
  object-fit: cover; /* Обрезаем видео сверху и снизу, чтобы оно заполнило контейнер */
}

 /* Устанавливаем для видео размеры, равные размеру экрана */
 #Carousel_video {
  width: 100vw; /* Ширина видео равна ширине экрана */
  height: 100vh; /* Высота видео равна высоте экрана */
  object-fit: cover; /* Обрезаем или масштабируем видео, чтобы заполнить экран */
  display: block; /* Устанавливаем блочный контекст для видео */
}