/* Подключение шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Подключение шрифтов GT Eesti Pro Display */
@font-face {
  font-family: 'GT Eesti Pro Display';
  src: url('Fonts/GT-Eesti-Pro-Display-Thin.woff2') format('woff2'),
       url('Fonts/GT-Eesti-Pro-Display-Thin.woff') format('woff');
  font-weight: 350;
  font-style: normal;
}

@font-face {
  font-family: 'GT Eesti Pro Display Bold';
  src: url('Fonts/GT-Eesti-Pro-Display-Bold-2.woff2') format('woff2'),
       url('Fonts/GT-Eesti-Pro-Display-Bold-2.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

/* Общие стили для всех элементов */
body, p, div, span, h1, h2, h3, h4, h5, h6, a, li {
  font-family: 'GT Eesti Pro Display', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Основные стили для body */
body {
  background-color: #ADBDFF; /* Новый цвет фона */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: black;
  overflow-x: hidden;
}


/* Основной контейнер */
.main-container {
  width: 1030px; /* Изменено на 100% */
  display: flex;
  flex-direction: column; /* Вертикальная ориентация */
  justify-content: center;
  align-items: center;
  padding-top: 100px; /* Добавлено для учета высоты фиксированного меню */
}

/* Стили для фона с эффектом жидкости */
.liquid {
  background: #c1cdff;
  height: 100vh;
  width: 100vw;
  transform: scale(1.5);
  filter: blur(80px);
  position: fixed;
  top: 50%;
  left: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -3; /* За главным контейнером */
}

.liquid .item {
  position: absolute;
  height: 25vw;
  width: 25vw;
  border-radius: 50%;
  filter: blur(10px) contrast(1);
}

.liquid .item1 {
  top: 40vh;
  left: 15vw;
  background: #f91155;
  animation: part-1 9000ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}

.liquid .item2 {
  top: 40vh;
  left: 20vw;
  right: 0;
  margin: auto;
  background: #00a2ff;
  animation: part-2 9000ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}

.liquid .item3 {
  top: 40vh;
  left: 25vw;
  background: #28d1eb;
  animation: part-3 9000ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}

@keyframes part-1 {
  0% {
      transform: translate(-50%, -50%);
  }
  100% {
      transform: translate(50%, 50%);
  }
}

@keyframes part-2 {
  0% {
      transform: translate(50%, -50%);
  }
  100% {
      transform: translate(-50%, 50%);
  }
}

@keyframes part-3 {
  0% {
      transform: translate(-50%, 50%);
  }
  100% {
      transform: translate(50%, -50%);
  }
}

@keyframes part-4 {
  0% {
      transform: translate(50%, 50%);
  }
  100% {
      transform: translate(-50%, -50%);
  }
}

/* Стили для изображений */
.extra-image-1 {
  width: 278px;
  height: 284px;
  position: absolute;
  top: 101px;
  right: -30px;
  z-index: -3; /* За главным контейнером */
}

.extra-image-2 {
  width: 271px;
  height: 338px;
  position: absolute;
  top: 219px;
  left: -30px;
  z-index: -3; /* За главным контейнером */
}

.extra-image-3 {
  width: 215.7px;
  height: 226.5px;
  position: absolute;
  top: 560px;
  right: -40px;
  z-index: -3; /* За главным контейнером */
}

.extra-image-4 {
  width: 288px;
  height: 317px;
  position: absolute;
  top: 870px;
  left: -60px;
  z-index: -3; /* За главным контейнером */
}

.extra-image-5 {
  width: 367px;
  height: 329px;
  position: absolute;
  top: 1840px; /* Примерная позиция */
  right: -60px;
  z-index: -3; /* За главным контейнером */
}

.extra-image-6 {
  width: 324px;
  height: 330px;
  position: absolute;
  top: 1850px; /* Примерная позиция */
  left: -70px;
  z-index: -3; /* За главным контейнером */
}

.extra-image-7 {
  width: 278px;
  height: 284px;
  position: absolute;
  top: 2700px; /* Примерная позиция */
  right: -80px;
  z-index: -3; /* За главным контейнером */
}

.extra-image-8 {
  width: 313px;
  height: 223px;
  position: absolute;
  top: 2800px; /* Примерная позиция */
  left: -43px;
  z-index: -3; /* За главным контейнером */
}

/* Стили для главного слайдера */

/* Блокировка прокрутки заднего плана */
.modal-open {
  overflow: hidden;
  height: 100%;
}

.carousel-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 392px;
  max-width: 100%;
  margin-top: 50px;
}

.carousel {
  width: 100%;
  height: 320px;
  position: relative;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-item {
  position: absolute;
  width: 190px;
  height: 250px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  transition: transform 1.5s, opacity 1.5s;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  overflow: hidden;
}

.carousel-item.visible {
  opacity: 1;
}

.carousel-item.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) translateZ(-2000px);
}

.carousel-item.central {
  box-shadow: none;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
  transition: transform 0.6s ease-in-out;
}

.carousel-item.central:hover .slide-image {
  transform: scale(1.05);
}

.arrow {
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  top: -110px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  color: black;
  position: relative;
  top: 30px;
}

.click-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 100;
}

/* Стили для текста на слайде */
.slide-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-family: 'GT Eesti Pro Display', sans-serif;
  font-size: 14px;
  font-weight: 350;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  transition: bottom 0.6s ease-in-out, opacity 0.6s ease-in-out;
  opacity: 0;
}

.carousel-item.central .slide-text {
  opacity: 1;
}

.carousel-item.central:hover .slide-text {
  bottom: 15px;
  opacity: 1;
}

/* Стили для элементов в главном контейнере */
.menu {
  width: 510px;
  height: 40px;
  padding: 8px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 72px;
  border-radius: 80px;
  background: linear-gradient(0deg, rgba(183, 196, 255, 0.5) 0%, rgba(182, 196, 255, 0.6) 100%);
  backdrop-filter: blur(10px); /* Эффект размытия фона */
  -webkit-backdrop-filter: blur(10px); /* Эффект размытия фона для Safari */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Полупрозрачный бордюр */
  margin-top: 40px; /* Отступ сверху */
  z-index: 1;
  opacity: 1;
  position: fixed; /* Добавлено для фиксирования меню */
  top: 0; /* Добавлено для фиксирования меню */
  z-index: 100; /* За главным контейнером */
}

.menu-item {
  display: flex;
  align-items: center;
  font-size: 18px; /* Установите размер шрифта */
  font-weight: 350; /* Установите вес шрифта */
  line-height: 21.6px; /* Установите межстрочный интервал */
  text-align: left; /* Установите выравнивание текста по левому краю */
  color: white; /* Цвет текста белый */
}

.icon {
  width: 40px;
  height: 40px;
}

.menu-link {
  color: inherit; /* Использовать текущий цвет текста */
  text-decoration: none; /* Убрать подчеркивание */
  font-size: inherit; /* Использовать текущий размер шрифта */
  font-weight: inherit; /* Использовать текущий вес шрифта */
  line-height: inherit; /* Использовать текущий межстрочный интервал */
}

.menu-link:hover {
  text-decoration: none; /* Убрать подчеркивание при наведении */
}

.icon {
  margin-right: 8px; /* Отступ справа от иконки */
}

.title-image {
  margin-top: 50px; /* Отступ сверху от меню */
  width: 640px;
  height: 100px;
}

.description {
  margin-top: 50px;
  width: 545px;
  height: 124px;
  font-size: 15px; /* Установите размер шрифта */
  font-weight: 350; /* Установите вес шрифта */
  line-height: 18px; /* Установите межстрочный интервал */
  text-align: center; /* Установите выравнивание текста по центру */
  color: white; /* Цвет текста белый */
  gap: 16px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.arrow2 {
  display: none;
}

.description2 {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 735px;
  height: 54px;
  font-size: 15px; /* Установите размер шрифта */
  font-weight: 350; /* Установите вес шрифта */
  line-height: 18px; /* Установите межстрочный интервал */
  text-align: center; /* Установите выравнивание текста по центру */
  color: white; /* Цвет текста белый */
  gap: 16px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.showcase-content {
  position: relative;
  width: 100%;
}

.showcase-image {
  width: 1104px;
  height: 668px;
  display: block;
  margin-top: 80px;
  padding: 0;
}

.showcase-image {
    width: 1104px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hotspot-container {
    position: absolute;
    width: 1104px;
    height: 668px;
}

.hotspot {
    position: absolute;
    cursor: pointer;
    transition: filter 0.3s ease;
    z-index: 10;
}

.hotspot:hover {
    filter: brightness(0.8); /* Эффект затемнения */
}

/* Позиции для каждого хотспота */
.hotspot:nth-child(1) { /* Гольфы с босоножками */
  top: -430px;
  left: 40px;
}

.hotspot:nth-child(2) { /* Слингбэки с металлическим мысом */
  top: -590px;
  left: 100px;
}

.hotspot:nth-child(3) { /* Юбка с воланами */
  top: -380px;
  left: 160px;
}

.hotspot:nth-child(4) { /* Балетки с леопардовым принтом */
  top: -560px;
  left: 310px;
}

.hotspot:nth-child(5) { /* Золотая юбка с разрезом */
  top: -280px;
  left: 300px;
}

.hotspot:nth-child(6) { /* Багет в винном оттенке */
  top: -680px;
  left: 430px;
}

.hotspot:nth-child(7) { /* Оверсайз двойка */
  top: -180px;
  left: 450px;
}

.hotspot:nth-child(8) { /* Замшевые казаки */
  top: -650px;
  left: 550px;
}

.hotspot:nth-child(9) { /* Базовое бордовое макси платье */
  top: -290px;
  left: 580px;
}

.hotspot:nth-child(10) { /* Вместительный шопер с мягким каркасом */
  top: -590px;
  left: 660px;
}

.hotspot:nth-child(11) { /* Кружевная макси юбка */
  top: -420px;
  left: 690px;
}

.hotspot:nth-child(12) { /* Сумка ведро */
  top: -650px;
  left: 800px;
}

.hotspot:nth-child(13) { /* Укороченная кожанка */
  top: -390px;
  left: 890px;
}

.hotspot:nth-child(14) { /* Элегантные мюли-лоферы */
  top: -570px;
  left: 930px;
}

.hotspot:nth-child(15) { /* Ремень шнурок */
  top: -430px;
  left: 1030px;
}

.popup {
  display: none; /* Скрываем по умолчанию */
  position: absolute;
  width: 240px;
  padding: 20px;
  -webkit-backdrop-filter: blur(6px); /* Эффект размытия фона для Safari */
  background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Полупрозрачный бордюр */
  border-radius: 24px; /* Скругленные углы */
  backdrop-filter: blur(20px); /* Размытие фона */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 20;
  transform: scaleY(0);
  transform-origin: bottom; /* Масштабирование снизу вверх */
  transition: transform 0.3s cubic-bezier(0.68, 0.55, 0.27, 1.55); /* Плавное масштабирование */
}

.popup-title {
    font-family: 'GT Eesti Pro Display Bold', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    color: white; /* Цвет текста белый */
}

.popup-description {
    font-family: 'GT Eesti Pro Display', sans-serif;
    font-size: 16px;
    color: white; /* Цвет текста белый */
}

.popup-close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.popup-close:hover {
    filter: brightness(0.8);
}

.description3 {
  margin-top: 150px;
  width: 541px;
  height: 72px;
  font-size: 15px; /* Установите размер шрифта */
  font-weight: 350; /* Установите вес шрифта */
  line-height: 18px; /* Установите межстрочный интервал */
  text-align: center; /* Установите выравнивание текста по центру */
  color: white; /* Цвет текста белый */
  gap: 16px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.reviews-container {
  display: flex;
  gap: 24px;
  margin-top: 80px;
  margin-bottom: 20px;
  opacity: 1; /* Всегда видимые */
  padding-left: 0; /* Убираем отступ слева */
}

.review {
  width: 352px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* Выравниваем по левому краю */
  background-color: rgba(255, 255, 255, 0); /* Полупрозрачный белый фон */
  z-index: 2; /* За главным контейнером */
  padding-left: 0; /* Убираем внутренний отступ слева */
}

.review-image {
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  filter: none; /* Попробуйте изменить filter для Safari */
}

.review a {
  display: block; /* Сделать ссылку блочным элементом, чтобы она занимала весь размер изображения */
  text-decoration: none; /* Убрать подчеркивание текста */
  z-index: 2; /* За главным контейнером */
}

.review a img {
  display: block; /* Убедиться, что изображение внутри ссылки ведет себя как блочный элемент */
  width: 100%; /* Убедиться, что изображение занимает всю ширину ссылки */
  height: auto; /* Сохранить соотношение сторон изображения */
}

.review-text1, .review-text2, .review-text3, .review-text4 {
  width: 352px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px); /* Эффект размытия фона */
  -webkit-backdrop-filter: blur(6px); /* Эффект размытия фона для Safari */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 20px 0 20px;
  box-sizing: border-box;
  margin-top: -58px;
  font-family: 'GT Eesti Pro Display', sans-serif;
  font-size: 15px;
  font-weight: 350;
  line-height: 18px;
  text-align: left;
  color: white;
  z-index: 20;
}

.review-text1, .review-text4  {
  z-index: -1; /* За главным контейнером */
}

.review-text1, .review-text2 {
  min-height: 310px; /* Минимальная высота для review-text */
}

.review-text3, .review-text4 {
  min-height: 274px; /* Минимальная высота для review-text */
}

.review-owner {
  display: flex;
  align-items: flex-start; /* Выравниваем по верхнему краю */
  margin-top: 20px;
  text-align: left; /* Выравнивание по левому краю */
  padding-left: 0; /* Убираем внутренний отступ слева */
}

.review-owner-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 16px;
  margin-left: 0; /* Убираем отступ слева */
}

.review-owner-text h3 {
  margin: 0;
  font-size: 16px;
  font-family: 'GT Eesti Pro Display Bold', sans-serif; /* Применение второго шрифта */
  font-weight: 900;
  color: white;
}

.review-owner-text p {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 350;
  line-height: 18px;
  color: white;
}

.additional-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px; /* Отступ сверху */
  margin-bottom: 30px; /* Отступ снизу */
}

.hanger-block {
  position: relative; /* Добавляем относительное позиционирование */
  width: 104px;
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -140px;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Эффект размытия фона для Safari */
  z-index: 1;
}

.hanger-image {
  width: 100px;
  position: absolute;
  top: 14px;
}

.text-block {
  width: 736px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3); /* Полупрозрачный фон */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Полупрозрачный бордюр */
  border-radius: 24px; /* Скругленные углы */
  backdrop-filter: blur(10px); /* Размытие фона */
  -webkit-backdrop-filter: blur(6px); /* Эффект размытия фона для Safari */
  padding: 60px 30px 10px 30px; /* Внутренний отступ */
  box-sizing: border-box;
  color: white; /* Цвет текста */
  font-family: 'GT Eesti Pro Display', sans-serif; /* Шрифт */
  font-size: 15px; /* Размер шрифта */
  font-weight: 350; /* Вес шрифта */
  line-height: 18px; /* Межстрочный интервал */
  text-align: left; /* Выравнивание текста по центру */
  margin-top: 80px; /* Отступ сверху для текста */
}

.ozon-shopping-button-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.ozon-shopping-button {
  width: 286px;
  height: 56px;
  padding: 17px 32px;
  gap: 8px;
  border-radius: 8px 8px 8px 8px;
  border: 2px solid #F91155;
  background: transparent;
  color: #F91155;
  opacity: 1;
  font-family: 'GT Eesti Pro Display Bold', sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.developers {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 20px 0; 
  color: white;
  width: 100%;
  box-sizing: border-box; 
}

.developers-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 730px; 
  margin: 0 auto; 
  padding: 80px 40px 140px 40px; 
}

.developers-section {
  text-align: center; 
}

.developers-title {
  margin: 0;
  font-size: 15px;
  font-family: 'GT Eesti Pro Display Bold', sans-serif;
  font-weight: bold;
}

.developers-name {
  margin: 5px 0 0;
  font-size: 15px;
  font-family: 'GT Eesti Pro Display', sans-serif;
}

.advertisement {
  text-align: center; 
  font-size: 11px; 
  color: white; 
  margin: 20px; 
  padding: 10px 0;
  text-decoration: none;
}

.advertisement a{
  text-align: center; 
  font-size: 11px; 
  color: white; 
  margin: 20px; 
  padding: 10px 0;
  text-decoration: none;
}

/* Стили для модальных окон */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.8);
}

.modal-content {
  background-color: #fefefe;
  margin: 100px auto;
  padding: 0;
  width: 1024px;
  border-radius: 40px;
  position: relative;
  font-family: 'GT Eesti Pro Display', sans-serif;
  overflow: hidden;
  border: 1px solid #CCD0D7;
}

.modal-header {
  position: relative;
}

/* Стили для кнопки закрытия */
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.close-button:hover {
  filter: brightness(0.8);
}

.modal-header-image {
  width: 100%;
  height: 520px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  object-fit: cover;
  display: block;
}

.modal-header-text {
  position: absolute;
  bottom: 20px;
  left: 40px;
  font-family: 'GT Eesti Pro Display Bold';
  font-size: 36px;
  font-weight: 900;
  line-height: 43.2px;
  text-align: left;
  color: white;
}

.modal-body {
  margin: 0 40px;
}

.modal-text, .modal-new-text {
  padding: 0 20px;
  color: #647080;
}

.modal-body .modal-text {
  margin: 0;
}

.modal-text {
  padding: 50px 0 0 20px;
  font-size: 18px;
  color: #647080;
  line-height: 22px;
}

.modal-body .modal-text .modal-new-text  {
  width: 928px;
  padding: 10px 0 30px 0;
  margin: 0;
  font-family: 'GT Eesti Pro Display';
  font-size: 15px;
  font-weight: 350;
  line-height: 22px;
  text-align: left;
  color: #647080;
}

.modal-bottom-text {
  width: 928px;
  margin: 0;
  font-family: 'GT Eesti Pro Display';
  font-size: 18px;
  font-weight: 350;
  line-height: 22px;
  text-align: left;
  color: #647080;
  margin-top: 40px;
  margin-bottom: -30px;
}

.modal-images {
  display: flex;
  justify-content: center; /* Выравнивание блоков по левому краю */
  padding-top: 80px;
  flex-wrap: wrap; /* Позволяет блокам переноситься на новую строку при необходимости */
  gap: 20px; /* Расстояние между блоками, при необходимости */
}

.single-item-of-goods {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 288px;
  margin: 0;
}

.modal-images .single-item-of-goods .modal-image {
  width: 288px;
  height: 288px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-bottom: 16px;
}

.modal-images .single-item-of-goods {
  width: 288px;
}

.modal-image {
  width: 288px;
  height: 288px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-bottom: 16px;
}

.modal-image-wrapper {
  position: absolute;
  width: 40px;
  height: 40px;
  right: 10px;
  bottom: 10px;
  z-index: 110;
}

.image-container-modal5 {
  position: relative;
  width: 348.75px; /* Фиксированная ширина контейнера */
  height: 503.25px; /* Фиксированная высота контейнера */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.clickable-zone {
  position: absolute;
  width: 34.875px; /* Ширина зоны 10% от ширины контейнера */
  height: 50.325px; /* Высота зоны 10% от высоты контейнера */
  display: block; /* Делаем зону блочным элементом */
  text-decoration: none; /* Убираем подчеркивание */
}

.clickable-zone:hover {
  cursor: pointer;
}

.image-container .clickable-zone {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container .clickable-zone a {
  color: white;
  text-decoration: none;
}

/* Цвета и позиции для зон в первом контейнере */
.prefix1 .zone1 {
  width: 120px; /* Ширина зоны 10% от ширины контейнера */
  height: 220px; /* Высота зоны 10% от высоты контейнера */
  top: 36px;
  left: 8px;
  /* background-color: rgba(255, 0, 0, 0.5); */
}

.prefix1 .zone2 {
  width: 140px; /* Ширина зоны 10% от ширины контейнера */
  height: 200px; /* Высота зоны 10% от высоты контейнера */
  top: 0;
  right: 36px;
  /* background-color: rgba(0, 0, 255, 0.5); */
}

.prefix1 .zone3 {
  width: 140px; /* Ширина зоны 10% от ширины контейнера */
  height: 200px; /* Высота зоны 10% от высоты контейнера */
  bottom: 18px;
  left: 36px;
  /* background-color: rgba(0, 255, 0, 0.5); */
}

.prefix1 .zone4 {
  width: 120px; /* Ширина зоны 10% от ширины контейнера */
  height: 220px;
  bottom: 50px;
  right: 8px;
  /* background-color: rgba(255, 255, 0, 0.5); */
}

/* Цвета и позиции для зон во втором контейнере */
.prefix2 .zone1 {
  width: 120px; /* Ширина зоны 10% от ширины контейнера */
  height: 220px; /* Высота зоны 10% от высоты контейнера */
  top: 36px;
  left: 8px;
  /* background-color: rgba(128, 0, 128, 0.5); */
}

.prefix2 .zone2 {
  width: 140px; /* Ширина зоны 10% от ширины контейнера */
  height: 200px; /* Высота зоны 10% от высоты контейнера */
  top: 0;
  right: 33px;
  /* background-color: rgba(255, 165, 0, 0.5); */
}

.prefix2 .zone3 {
  width: 140px; /* Ширина зоны 10% от ширины контейнера */
  height: 200px; /* Высота зоны 10% от высоты контейнера */
  bottom: 18px;
  left: 37px;
  /* background-color: rgba(255, 192, 203, 0.5); */
}

.prefix2 .zone4 {
  width: 126px; /* Ширина зоны 10% от ширины контейнера */
  height: 86px; /* Высота зоны 10% от высоты контейнера */
  bottom: 186px;
  right: 4px;
  /* background-color: rgba(0, 255, 255, 0.5); */
}

.prefix2 .zone5 {
  width: 126px; /* Ширина зоны 10% от ширины контейнера */
  height: 86px; /* Высота зоны 10% от высоты контейнера */
  bottom: 53px;
  right: 4px;
  /* background-color: rgba(255, 81, 0, 0.5); */
}

/* Цвета и позиции для зон в третьем контейнере */
.prefix3 .zone1 {
  width: 120px; /* Ширина зоны 10% от ширины контейнера */
  height: 220px; /* Высота зоны 10% от высоты контейнера */
  top: 36px;
  left: 8px;
  /* background-color: rgba(165, 42, 42, 0.5); */
}

.prefix3 .zone2 {
  width: 140px; /* Ширина зоны 10% от ширины контейнера */
  height: 200px; /* Высота зоны 10% от высоты контейнера */
  top: 0;
  right: 36px;
  /* background-color: rgba(128, 128, 128, 0.5); */
}

.prefix3 .zone3 {
  width: 140px; /* Ширина зоны 10% от ширины контейнера */
  height: 200px; /* Высота зоны 10% от высоты контейнера */
  bottom: 18px;
  left: 36px;
  /* background-color: rgba(3, 209, 255, 0.5); */
}

.prefix3 .zone4 {
  width: 120px; /* Ширина зоны 10% от ширины контейнера */
  height: 220px;
  bottom: 50px;
  right: 8px;
  /* background-color: rgba(11, 223, 0, 0.5); */
}

.link-arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px; /* Размер стрелки можно изменить по вашему желанию */
  height: 40px;
}

.item-title {
  font-family: 'GT Eesti Pro Display Bold';
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  text-align: left;
  color: #37434D;
  margin: 10px 0 20px 0;
}

.item-description {
  font-family: 'GT Eesti Pro Display';
  font-size: 15px;
  font-weight: 350;
  line-height: 18px;
  text-align: left;
  margin: 0 0 30px 0;
  color: #647080;
}

.item-title-link {
  text-decoration: none;
}

.item-title-link:hover .item-title {
  color: blue;
}

.mini-carousel-divider {
  width: 100vw; /* Во всю ширину окна */
  height: 1px; /* Высота линии */
  background-color: #CCD0D7; /* Цвет линии */
  position: relative;
  margin-top: 80px; /* Отступ сверху */
  left: 50%;
  transform: translateX(-50%);
}

/* Добавьте эти стили в конец вашего файла modals.css */
.mini-carousel-iframe {
  width: 100%; /* Во всю ширину модального окна */
  height: 300px;
  margin-top: -10px; /* Отступ снизу */
  margin-bottom: -44px; /* Отступ снизу */
  border: none; /* Убираем бордюры */
  display: block; /* Обеспечиваем, что iframe является блочным элементом */
}

.person {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* Отступ снизу, если необходимо */
}

.person-image {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Скругленные углы для изображения */
  margin-right: 20px; /* Отступ справа от изображения */
}

.person-info {
  display: flex;
  flex-direction: column;
  align-items: left; /* Центрирование содержимого по горизонтали */
}

.person-name {
  font-family: 'GT Eesti Pro Display Bold', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #647080; /* Цвет текста */
  margin-bottom: 5px; /* Отступ снизу от имени */
}

.person-social {
  display: flex;
  align-items: center;
  text-align: center; /* Центрирование текста */
}

.person-social .social-text {
  font-family: 'GT Eesti Pro Display', sans-serif;
  font-size: 16px;
  color: #647080; /* Цвет текста */
  text-align: left; /* Центрирование текста */
}

.social-text {
  text-align: center; /* Центрирование текста */
  margin-right: 20px; /* Отступ справа от изображения */
}

.social-logo {
  width: 20px;
  height: 20px;
  margin-right: 10px; /* Отступ справа от логотипа */
}

.social-link {
  font-family: 'GT Eesti Pro Display', sans-serif;
  font-size: 16px;
  color: #007BFF; /* Цвет ссылки */
  text-decoration: none; /* Убираем подчеркивание */
}

.social-link:hover {
  text-decoration: underline; /* Подчеркивание при наведении */
}

.modal-text-blocks {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px; /* Отступ снизу */
}

.left-text-block, .right-text-block {
  padding: 24px 0 0 0;
  gap: 24px;
  border-radius: 32px;
  border: 2px solid;
}

.left-text-block {
  width: 608px;
  height: 546px; /* Позволяет блоку растягиваться по высоте */
  border-color: #005BFF; /* Цвет рамки */
}

.right-text-block {
  width: 288px;
  height: 372px; /* Позволяет блоку растягиваться по высоте */
  border-color: #F91155; /* Цвет рамки */
}

.left-text-block h2, .right-text-block h2 {
  font-family: 'GT Eesti Pro Display Bold', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 26.4px;
  text-align: left;
  margin: 0 20px 16px 20px; /* Отступы справа и слева для заголовка */
  color: #647080;
}

.left-text-block ul, .right-text-block ul {
  list-style-type: none; /* Убираем маркеры списка */
  padding-left: 0; /* Убираем отступ слева */
  font-family: 'GT Eesti Pro Display', sans-serif;
  margin: 0 20px; /* Отступы справа и слева для текста */
  font-size: 15px;
  font-weight: 350;
  line-height: 18px;
  text-align: left;
  color: #647080;
}

.left-text-block li, .right-text-block li {
  margin-bottom: 12px; /* Отступ снизу для элементов списка */
  position: relative; /* Относительное позиционирование для маркера */
  padding-left: 20px; /* Отступ слева для маркера */
}

.left-text-block li::before, .right-text-block li::before {
  content: '•'; /* Маркер списка */
  position: absolute; /* Абсолютное позиционирование маркера */
  left: 0; /* Расположение маркера слева */
  color: #000; /* Цвет маркера */
}

.modal5-text-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 768px;
  height: 503.25px;
  gap: 64px;
  margin: 40px;
}

.modal5-text-block img {
  width: 50%;
  height: auto;
}

.modal5-text-block div {
  width: 355.25px;
  height: 214px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: left;
}

.modal5-text-block h3 {
  font-family: 'GT Eesti Pro Display', sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: #647080;
}

.modal5-text-block h2 {
  width: 100%;
  font-family: 'GT Eesti Pro Display Bold', sans-serif;
  font-size: 32px;
  font-weight: 900;
  margin: 0;
  color: #647080;
}

.modal5-text-block p {
  width: 100%;
  font-family: 'GT Eesti Pro Display', sans-serif;
  font-size: 15px;
  font-weight: 350;
  line-height: 22px;
  color: #647080;
  margin: 0;
}

.modal-images-5-mobile {
  display: none;
}

.modal6-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 768px;
  height: auto;
  gap: 32px;
  margin-top: 40px;
}

.modal6-single-item-of-goods {
  display: flex;
  width: 672px;
  height: 160px;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.modal6-text-container {
  display: flex;
  width: 512px;
  height: 104px;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  padding-right: 16px;
  text-align: left;
  margin-left: 50px;
}

.modal6-item-title {
  font-family: 'GT Eesti Pro Display Bold', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #647080;
  margin: 0;
}

.modal6-item-description {
  width: 480px;
  font-family: 'GT Eesti Pro Display', sans-serif;
  font-size: 15px;
  font-weight: 350;
  line-height: 22px;
  color: #647080;
}

.modal6-image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.modal6-image-container {
  position: relative;
  width: 160px;
  height: 160px;
}

.modal6-modal-image {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-top-right-radius: 16px;
}

.modal6-link-arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
}

/* Для модального окна 0 */
#modal_0 .image-container {
  position: relative;
}

#modal_0 .link-arrow {
  position: absolute;
  bottom: 24px;
  right: 10px;
  z-index: 10;
}

/* Для модального окна 1 */
#modal_1 .image-container {
  position: relative;
}

#modal_1 .link-arrow {
  position: absolute;
  bottom: 24px;
  right: 10px;
  z-index: 10;
}

/* Для модального окна 9 */
#modal_9 .image-container {
  position: relative;
}

#modal_9 .link-arrow {
  position: absolute;
  bottom: 24px;
  right: 10px;
  z-index: 10;
}

.modal9-new-text {
  width: 928px;
  height: 100%;
  color: #647080;
  font-size: 16px;
  line-height: 1.4;
  padding: 20px 20px;
}

/* Стили из mini-carousel.css */
.mini-carousel-container {
  width: 940px;
  height: 248px;
  overflow: hidden;
  position: relative;
  align-items: center;
}

.mini-carousel {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.mini-carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 8px;
  will-change: transform; /* Optimizes the performance */
}

.mini-carousel-item {
  width: 160px;
  height: 200px;
  box-sizing: border-box;
  border-radius: 16px;
  flex-shrink: 0;
  position: relative; /* Needed for positioning text inside */
  overflow: hidden; /* Ensure rounded corners are applied to the content */
  cursor: pointer; /* Add pointer cursor */
}

.mini-carousel-item:hover .slide-text {
  transform: translateY(-5px);
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the entire slide */
  object-position: center; /* Center the image */
  border-radius: 16px;
}

.slide-text {
  position: absolute;
  bottom: 5px; /* Add bottom margin */
  left: 5px; /* Add left margin */
  width: calc(100% - 10px); /* Adjust width to account for left margin */
  text-align: left;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  font-family: 'GT Eesti Pro Display Bold', sans-serif;
  font-size: 15px;
  transition: transform 0.3s ease;
}

.mini-arrow {
  cursor: pointer;
  width: 50px;
  height: 50px;
  user-select: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* Ensures arrows are on top */
}

.mini-left-arrow {
  left: 10px;
}

.mini-right-arrow {
  right: 0;
}

/* CSS для выделения областей клика */
.mini-arrow {
  padding: 10px;
  cursor: pointer;
}