/* Основные стили */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
html, body {
  overflow: auto !important;
  height: auto !important;
}

body {
  margin: 0;
  font-family: "Exo 2", serif;
  background-color: #ffefd5;
  color: #333;
  overflow: hidden;
}
@media (max-width: 768px) { /* Можно изменить значение 768px, если нужно */
  .navbar-buttons {
      display: none;
  }
}
/* instagram post */
.insta-section {
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
  color: #222;
  max-width: 900px;
  margin: 0 auto;
}

.insta-header {
  display: flex;
  align-items: center;
  gap: 80px; /* збільшено з 30px до 80px */
  flex-wrap: wrap;
}


.insta-avatar-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
}

.avatar-ring {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  left: 0;
}

.insta-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.insta-avatar:hover {
  transform: rotate(360deg);
}


.insta-info {
  flex-grow: 1;
  min-width: 200px;
}

.insta-name-line {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.insta-name-line h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.insta-name-line a {
  color: #555;
  text-decoration: none;
  font-weight: 500;
}

.insta-stats {
  display: flex;
  gap: 25px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.insta-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.insta-stats li strong {
  font-weight: 600;
  font-size: 16px;
}

.insta-follow-wrap {
  flex-shrink: 0;
}

.insta-follow {
  position: relative; /* Устанавливаем позиционирование */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 35px;
  border-radius: 50px;
  min-width: 160px;
  background-color: #8e735b;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: "Forum", serif;
  text-transform: uppercase;
  transform: translateZ(0);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  margin-top: 30px;
  left: -10px; /* Сдвигаем кнопку влево */
}

.insta-follow:hover {
  background: #fff;
  color: #8e735b;
}


.insta-bio {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.5;
}

.insta-link {
  color: #6f6c6c;
  font-weight: 500;
  text-decoration: none;
  word-break: break-word;
}

.insta-link:hover {
  text-decoration: underline;
}
.instagram-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.instagram-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 7px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.instagram-posts li {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.instagram-posts li:hover {
  transform: scale(1.03);
}

.instagram-posts img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
}

@media (max-width: 576px) {
  .insta-section {
    padding: 30px 16px;
  }

  .insta-header {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  .insta-info {
    width: 100%;
  }

  .insta-name-line {
    flex-direction: column;
    gap: 5px;
  }

  .insta-name-line h2 {
    font-size: 18px;
  }

  .insta-stats {
    justify-content: center;
    gap: 20px;
  }

  .insta-stats li {
    font-size: 13px;
  }

  .insta-stats li strong {
    font-size: 15px;
  }

  .insta-follow {
    margin-top: 20px;
    padding: 12px 28px;
    font-size: 13px;
    min-width: auto;
    left: 0;
  }

  .instagram-posts {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px; /* зменшуємо відступи для щільнішої сітки */
  }

  .instagram-grid {
    padding: 20px 10px;
  }

  .insta-bio {
    font-size: 14px;
  }
}


.video-circle {
  position: relative;
  overflow: hidden;
  display: inline-block;

}

.fade-in-video {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* Запрещает клики */
  user-select: none; /* Запрещает выделение */
}
.video-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('img/video/IMG_0434.gif') center/cover no-repeat;
}


.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.hidden.active {
  opacity: 1;
  transform: translateY(0);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
}

/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffefd5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: opacity 0.5s ease, transform 1.5s ease-in-out;
}

.preloader .logo img {
  width: 150px;
  animation: logoBounce 1.5s ease infinite;
}

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

/* Main Content */
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  padding: 0 10%;
}

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

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

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Merriweather", serif;
  color: white;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* затемнення */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 20px;
}

.video-heading {
  font-size: 4em;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #f9f3e0cc;
  font-family: auto;
  letter-spacing: 0.05em;
}

.hero-description {
  color: white;
  font-size: 1.5em;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .video-heading {
    font-size: 2.5em;
  }

  .hero-description {
    font-size: 1.2em;
  }
}

/* Hide checkbox */
#menu__toggle {
  opacity: 0;
}

/* Hamburger button styling */
.menu__btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 20px;
  left: 60px;
  width: 26px;
  height: 70px;
  cursor: pointer;
  z-index: 1;
}

/* Hamburger icon lines */
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #8b6b4d;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

/* Full-screen menu container */
.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
  z-index: 0;
  transition: left 0.25s ease-in-out;
} 


/* Animation for menu visibility */
#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}
/* Стили для текста "Меню" */
.menu-text {
  margin-left: 43px;
  font-size: 20px;
  color: #8e735b;
  font-family: "Forum", serif;
  transition: color 0.3s ease;
}
/* Стили для контейнера */

/* Логотип */
.logo {
  position: absolute;
  left: 50%;
  font-size: 40px;
  transform: translateX(-50%); /* Центрирует логотип */
}

/* Стили для кнопок */
.navbar-buttons {
  display: flex
;
  gap: 20px;
  position: absolute;
  top: 40%;
  right: -140px;
  transform: translateY(-60%);
}

/* Общие стили для кнопок */
/* Общие стили для кнопок */
.navbar-btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: all 0.3s ease; /* Плавное изменение при наведении */
}

/* Прозрачная кнопка */
.transparent-navbar-btn {
  background-color: transparent;
  color: #616161; /* Цвет текста по умолчанию */
  border: 2px solid #616161;
}

/* Коричневая кнопка */
.brown-navbar-btn {
  background-color: white;
  color: #8b6b4d;
  border-color: #8e735b;
}

/* При наведении на кнопки */
.navbar-btn:hover {
  transform: scale(1.05);
}

/* При наведении на прозрачную кнопку */
.transparent-navbar-btn:hover {
  background-color: #8e735b;
  color: white;
  border-color: #8e735b;
}

/* При наведении на коричневую кнопку */
.brown-navbar-btn:hover {
  background-color: #8e735b;
  color: white;
  border-color: #8e735b;
}

/* При нажатии */
.navbar-btn:active {
  background-color: #8e735b;
  color: white;
  border-color: #8e735b;
}


/* Контейнер для изображения */
.menu__image-preview {
  position: absolute;
  top: 0;
  left: 140%; /* Увеличиваем отступ, чтобы изображение было правее */
  width: 600px; /* Ширина изображения остается прежней */
  height: 600px; /* Увеличиваем только высоту изображения */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateX(50px) rotate(3deg); /* Начальная анимация */
  transition: opacity 0.4s ease, transform 0.4s ease;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Тень */
}

/* Стили для изображения внутри */
.menu__image {
  width: 100%;
  height: 100%; /* Высота будет увеличена */
  object-fit: cover; /* Заполнение контейнера изображением */
  transition: transform 0.4s ease, box-shadow 0.3s ease; /* Плавная анимация увеличения */
}

/* Показываем изображение при наведении на пункт меню */
.has-submenu:hover > .menu__image-preview {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateX(0) rotate(0deg); /* Изображение появляется */
}

/* Увеличиваем изображение при наведении */
.menu__secondary-item:hover ~ .menu__image-preview .menu__image {
  transform: scale(1.2) rotate(10deg); /* Увеличиваем изображение */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Увеличиваем тень */
}
/* Видео-превью */
.menu__video-preview {
  position: absolute;
  top: 0;
  left: 140%; /* Расположение справа от меню */
  width: 600px;
  height: 600px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateX(50px) rotate(3deg); /* Начальная анимация */
  transition: opacity 0.4s ease, transform 0.4s ease;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Тень */
}

/* Видео внутри */
.menu__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, box-shadow 0.3s ease; /* Плавная анимация */
}

/* Показываем видео при наведении на пункт меню */
.menu__secondary-item:hover ~ .menu__video-preview {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateX(0) rotate(0deg); /* Видео появляется */
}

/* Эффект увеличения видео при наведении */
.menu__secondary-item:hover ~ .menu__video-preview .menu__video {
  transform: scale(1.2) rotate(10deg); /* Увеличиваем видео */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Увеличиваем тень */
}

/* Стили для контейнера с контактами */
.menu__contacts {
  display: flex;
  justify-content: space-between; /* Размещение контента по бокам */
  padding: 40px 0;
  margin-top: 40px;
  margin-left: 20%; /* Сдвигаем блок вправо, можно увеличить значение */
}

.menu__contacts-info {
  width: 48%; 
}

.menu__contacts h3 {
  font-family: auto;
  font-size: 20px;
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 10px;
  font-weight: bold;
}

.menu__contacts p {
   font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
  font-family: auto;
  font-size: 18px;
  margin-bottom: 20px;
}

.social-icons {
  display: flex; 
  gap: 20px;
  align-items: center; 
}

.social-item {
  display: flex;
  align-items: center;
}

.social-item a {
  display: flex;
  align-items: center;
  text-decoration: none; 
  color: #333;
}

.social-item a:hover {
  color: #8e735b; 
}
.product-description {
  position: relative;
}

.quote-container {
  display: flex;
  align-items: center;
  border-right: 2px solid #8b6b4d; /* Тонкая линия справа */
  padding-right: 20px;
  margin-top: 20px; /* Отступ сверху, чтобы текст не слипался */
}
.filters-section {
  text-align: center;
  margin: 20px 0;
}

.categories {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 20px;
  position: relative;
}

.categories .category {
  position: relative;
}

.categories .category a {
  text-decoration: none;
  color: #7a7a7a;
  font-size: 16px;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

.categories .category a:hover,
.categories .category.current-cat a {
  color: #8b6b4d;
}

.categories .category.current-cat a::after {
  content: '';
  display: block;
  height: 2px;
  background: #8b6b4d;
  width: 100%;
  position: absolute;
  bottom: -5px;
  left: 0;
  animation: slide-in 0.3s ease;
}

@keyframes slide-in {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* Фильтры */
.filters-section {
  text-align: center;
  margin-bottom: 20px;
}

.categories {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Позволяет переносить элементы на новую строку */
    justify-content: center; /* Центрируем */
    gap: 10px; /* Увеличиваем отступы между элементами */
    max-width: 800px; /* Ограничиваем ширину */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .categories {
        gap: 5px; /* Уменьшаем отступы */
        max-width: 100%; /* Используем всю доступную ширину */
    }
}

@media (max-width: 480px) {
    .categories {
        flex-direction: column; /* Элементы идут в столбик */
        align-items: center; /* Центрируем */
    }
}


.categories .category a {
  text-decoration: none;
  color: #7a7a7a;
  font-size: 16px;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

.categories .category a:hover,
.categories .category.current-cat a {
  color: #8b6b4d;
  font-weight: bold;
}

/* Сетка изображений */
.images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.image-wrapper img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.image-wrapper:hover img {
  transform: scale(1.05);
  opacity: 0.9;
}

@media (max-width: 992px) {
  .images-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .images-grid {
    grid-template-columns: 1fr;
  }
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Расстояние между изображениями */
}

.image-grid-item {
    width: 100%; /* Адаптация по ширине контейнера */
    height: auto; /* Сохранение пропорций изображений */
}

.image-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Подгонка изображения по контейнеру */
    border-radius: 4px; /* Сглаживание углов (опционально) */
}
/* Адаптация под мобильные устройства */
@media (max-width: 768px) {
    .steps__row {
        display: flex;
        flex-direction: column;
    }

    .steps__col--media {
        order: 2; /* Изображения после текста */
        margin-top: 20px; /* Отступ между текстом и изображениями */
    }

    .steps__content {
        order: 1;
    }

    .image-grid {
        grid-template-columns: 1fr; /* Изображения в один столбец */
        gap: 15px; /* Увеличиваем расстояние между изображениями */
    }

    .image-grid-img {
        width: 350px; /* Увеличиваем ширину */
        height: 250px; /* Задаем фиксированную высоту для увеличения */
        object-fit: cover; /* Сохраняем соотношение сторон, обрезая лишнее */
    }
}
.hidden { display: none; }
    .products-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
/* Адаптация для экрана с шириной менее 1200px */
@media (max-width: 1199px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    }
}

/* Адаптация для экрана с шириной менее 992px */
@media (max-width: 991px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    }
}

/* Адаптация для экрана с шириной менее 768px */
@media (max-width: 767px) {
    .products-grid {
        grid-template-columns: 1fr; /* 1 колонка */
        justify-items: center; /* Центрируем элементы по горизонтали */
    }
}

/* Адаптация для экрана с шириной менее 480px */
@media (max-width: 479px) {
    .products-grid {
        grid-template-columns: 1fr; /* 1 колонка */
    }
}
.quote-text {
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.5;
  margin: 0;
  padding-left: 15px; /* Отступ слева, чтобы текст не прилипал к линии */
}


.social-item span {
  font-size: 18px; 
  margin-right: 10px; 
}

.social-item i {
  font-size: 24px; 
  color: #333; 
}

.social-item a:hover i {
  color: #8e735b; 
}

.menu__contacts-info a {
  font-family: auto;
  color: #333;
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  font-size: 18px;
}

.menu__contacts-info a:hover {
  text-decoration: none;
  color: #8b6b4d;
}

/* Анимация для правого изображения */
.menu__single-image {
  position: relative;
  width: 80%; /* Увеличиваем ширину */
  height: 100%;
  min-height: 850px; /* Минимальная высота */
  opacity: 0;
  transform: rotate(3deg); /* Легкий поворот */
  transition: opacity 0.8s cubic-bezier(.6, 0, .41, 1), transform 0.8s cubic-bezier(.6, 0, .41, 1); /* Плавная анимация */
  overflow: hidden;
}

/* Появление изображения при наведении */
.has-submenu:hover > .menu__single-image {
  opacity: 1;
  transform: rotate(0deg) translateX(20px); /* Изображение появляется и сдвигается */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* Сильная тень */
}

/* Main menu column */
/* Main menu column */
.menu__main-col {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 5px; /* Уменьшен правый отступ */
  padding-left: 5px; /* Уменьшен левый отступ */
  margin-top: 20px; /* Оставляем отступ сверху */
  margin-left: -90px; /* Сдвигаем блок левее */
  flex: 0 0 auto;
  width: 50%; /* Оставляем фиксированную ширину */
  transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out;
}

/* Secondary menu column */
/* Общие стили для меню */
.menu__main {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu__main-item {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  position: relative;
}

.has-submenu {
  position: relative;
}

/* Подменю */
.menu__secondary {
  position: absolute;
  top: 0;
  left: 100%; /* Подменю отображается справа от родительского элемента */
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px; /* Размер шрифта поменьше */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50px); /* Начальное положение */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Элементы подменю */
.menu__secondary-item {
  display: block;
  padding: 10px 15px; /* Уменьшенные внутренние отступы */
  color: #333;
  text-decoration: none;
  font-family: auto; /* Наследуемый шрифт или системный */
  white-space: nowrap; /* Убирает перенос строк */
  font-size: 30px; /* Размер текста для элементов */
  text-transform: none; /* Обычный регистр текста */
  margin-top: 5px; /* Уменьшенный отступ между элементами */
}

/* При наведении на элемент подменю */
.menu__secondary-item:hover {
  color: #8b6b4d; /* Цвет текста при наведении */
  text-decoration: none; /* Дополнительный стиль, как акцент */
}

/* Появление подменю при наведении */
.has-submenu:hover > .menu__secondary {
  opacity: 1; /* Видимость */
  visibility: visible;
  transform: translateX(0); /* Плавное перемещение */
}

/* Отступ для выравнивания подменю ниже */
.has-submenu:hover > .menu__secondary {
  top: 30px; /* Смещаем подменю ниже относительно основного элемента */
}

/* Курсор для всех ссылок */
a, button {
  cursor: pointer;
}

/* Общие стили ссылок */
a {
  color: inherit;
  text-decoration: none;
}

/* Main menu items */
.menu__item, .menu__main-item {
  display: block;
  padding: 30px 0;
  color: #333;
  font-family: auto;
  font-size: 84px;
  font-weight: 400;
  text-decoration: none;
  padding-top: 90px;
  transition: background-color 0.3s ease-in-out;
}

.menu__item:hover,
.menu__main-item:hover {
  color: #8b6b4d;
}

/* Main menu items */
.menu__item, .menu__main-item {
  display: block;
  padding: 30px 0;
  color: #333;
  font-family: auto;
  font-size: 84px;
  font-weight: 400;
  text-decoration: none;
  padding-top: 30px;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease; /* Add transition for transform */
}

/* Hover effect */
.menu__item:hover,
.menu__main-item:hover {
  transform: translateX(10px); /* Slide to the right */
}

/* arrow navbar */
.arrow {
  display: inline-block;
  margin-right: 10px; /* Add space between arrow and text */
  transition: transform 0.3s ease-in-out;
}
/* Контейнер */
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

p{
  color: #7c6f63;;
}
.logo img {
  max-height: 105px;
  width: auto;
}
/* logo mobile */
@media (max-width: 768px) {
  .logo {
    justify-content: center;
    margin-left: 0;
  }

  .logo img {
    max-height: 80px;
  }
}

/* preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffefd5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader-logo {
  width: 150px;
  animation: jump 0.5s ease-in-out infinite alternate;
  transition: transform 1s cubic-bezier(0.42, 0, 0.58, 1),
    opacity 0.8s ease-in-out;
  will-change: transform, opacity;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  #preloader {
    background: #f4e1c1;
  }

  .preloader-logo {
    width: 200px;
    animation: jumpMobile 0.7s ease-in-out infinite alternate;
  }

  @keyframes jumpMobile {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-40px);
    }
    100% {
      transform: translateY(0);
    }
  }
}
/* nav-logo */
.nav-logo {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.navbar {
  position: relative;
  background-color: rgba(244, 241, 225, 0.9);
  padding: 15px 25px;
}

.nav-items {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  align-items: center;
}



/* second page "about us" */
.about-us {
  padding: 80px 0;
  background-color: #f4f4f4;
  text-align: center;
}

/* Первый контейнер: шапка с фиксированными отступами */
.navbar .container {
  display: flex;
  justify-content: center; /* Центрирует все элементы по горизонтали */
  align-items: center; /* Центрирует по вертикали */
  position: relative; /* Для абсолютного позиционирования кнопок */
  padding: 0 40px; /* Добавление отступов по бокам */
  height: 80px; /* Высота шапки */
  width: 100%; /* Использует всю доступную ширину */
}

/* Второй контейнер: основной контейнер с максимальной шириной */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px; /* Ограничиваем максимальную ширину контейнера */
  margin: 0 auto; /* Центрируем контейнер */
  width: 100%; /* Занимает всю доступную ширину */
}

.image-wrapper {
  flex: 1;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.about-us-image {
  width: 100%;
  height: auto;
  max-width: 500px;
  border-radius: 10px;
}

.text-wrapper {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  text-align: left;
}

.text-wrapper h2 {
  font-family: "Merriweather", serif;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #7c6f63;;
  letter-spacing: 0.5px;
}

.text-wrapper p {
  font-size: 1.2rem;
  color: #666;
  line-height: 1.8;
  font-weight: 300;
  max-width: 700px;
  margin: 0 auto;
}
.text-wrapper h3 {
  display: flex;
  font-family: auto;
  color: #7c6f63;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

h2{
  color: #7c6f63;
  font-family: auto;
}
.highlight {
  font-style: italic;
  font-weight: 500; /* Трошки товще шрифт */
  color: #443436; /* Колір, що підкреслює елегантність */
  font-family: 'Georgia', serif; /* Витончений шрифт */
}
/* Mobile styles */
@media (max-width: 768px) {


  .container {
    flex-direction: column; /* Ставим элементы вертикально */
    align-items: stretch; /* Растягиваем элементы */
  }

  .image-wrapper {
    padding: 10px 0; /* Уменьшаем отступы вокруг изображения */
  }

  .about-us-image {
    max-width: 300px; /* Еще меньше на мобильных */
  }

  .text-wrapper {
    padding: 10px 0; /* Уменьшаем внутренние отступы */
    text-align: center; /* Центрируем текст */
  }

  .text-wrapper h2 {
    font-size: 1.8rem; /* Заголовок поменьше */
    margin-bottom: 10px;
  }

  .text-wrapper p {
    font-size: 0.9rem; /* Компактный текст */
    line-height: 1.5;
    margin: 5px 0;
  }

  .text-wrapper h3 {
    font-size: 1.5rem; /* Заголовок третьего уровня компактнее */
  }
}
.strip {
  width: 80%;
  height: 2px;
  background-color: #e1d5b3;
  margin: 20px auto;
  border-radius: 2px;
}

.strip:hover {
  background-color: #d0c8a1;
}

main {
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.fade-in-title,
.fade-in-text,
.fade-in-video {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-title.visible,
.fade-in-text.visible,
.fade-in-video.visible {
  opacity: 1;
  transform: translateY(0);
}
.navbar {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(244, 241, 225, 0.9);
  padding: 15px 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
/* button in navigation */
.wow-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: #6a3f2442;
  color: #fff;
  border-radius: 25px;
  border: 2px solid #6a3f24;
  font-size: 24px;
  transition: color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/*icon for button*/
.wow-button i {
  transition: color 0.3s ease;
}

/* click effect */
.wow-button:hover {
  color: #6a3f24;
  border-color: #fff;
}

.wow-button:hover i {
  color: #6a3f24;
}

.wow-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background-color: #fff;
  transition: all 0.4s ease;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 0;
}

.wow-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.wow-button span,
.wow-button i {
  position: relative;
  z-index: 1;
}

@keyframes wowEffect {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.wow-button {
  animation: wowEffect 1s ease-out;
}
/* scroll-to-top */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #ffffff00; /* Білий фон */
  color: #854b22; /* Початковий зелений колір тексту */
  border: 2px solid #854b22; /* Зелений бордер */
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
    background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  z-index: 1000;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.back-to-top:hover {
  background-color: #854b22;
  color: white;
  border-color: #854b22;
}

/* img animation */
.image-wrapper {
  display: inline-block;
  overflow: hidden;
}

.about-us-image {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* Плавный переход */
}

.about-us-image:hover {
  transform: scale(1.1); /* Увеличение изображения при наведении */
}
/* Общие стили секции */
.scroll-block {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* Карточки не будут переноситься на новую строку */
}

/* Левая часть */
.scroll-block__half {
  height: 80%; /* Высота в 100% от родительского контейнера */
  display: flex; /* Используем flexbox для распределения элементов */
  flex-direction: column; /* Располагаем элементы в колонку */
  justify-content: center; /* Центрируем содержимое по вертикали */
  padding: 50px; /* Отступы вокруг содержимого */
}

.scroll-block__content {
  max-width: 600px;
}

.scroll-block__title {
  font-size: 110px;
  margin-bottom: 20px;
  text-align: center;
  font-family: auto;
  position: relative;
  color: #7c6f63;;
  left: 20px; /* Сдвиг текста немного правее */
}
/* Стили для линии */
.scroll-block__content .line {
  display: block;
  width: 100%;
  height: 1px; /* Толщина линии */
  background-color: #854b22; /* Цвет линии */
  margin: 10px 0; /* Отступы сверху и снизу */
}

.scroll-block__text ul {
  list-style: disc;
  padding-left: 20px;
}


.scroll-block__image-block {
  position: absolute;
  left: 10%; 
  bottom: -100px; 
  width: 80%;
  height: auto;
  z-index: 2; 
}

.scroll-block__image {
  object-fit: cover; 
  object-position: center; 
  transform: translateY(-80%) translateX(113%); 
}


/* Контейнер для карточек */
.scroll-block__grid {
  display: flex;
  justify-content: flex-start;
  gap: 20px; /* Отступы между карточками */
  padding: 50px 20px;
  overflow-x: auto; /* Горизонтальная прокрутка */
}

/* Карточка */
.scroll-block__card {
  flex: 0 0 auto; /* Каждая карточка имеет фиксированную ширину */
  width: 500px; /* Увеличенный размер карточки */
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: none;
  transition: transform 0.3s ease;
  margin-top: 50px; /* Поднимаем карточки ниже */
}

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

/* Изображение в карточке */
.scroll-block__card-image-block {
  width: 100%;
  height: 900px; /* Увеличенная высота для изображения */
  overflow: hidden;
  border-radius: 15px; /* Закругленные углы */
  position: relative;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень под изображением */
}

/* Стили для контейнера изображений */
.stat-image-container {
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden;
  border-radius: 15px;
}

/* Изображение по умолчанию */
.stat-image {
  width: 100%;
  height: 900px;
  object-fit: cover;
  transition: opacity 0.3s ease;
  border-radius: 15px;
}

/* Изображение при наведении */
.stat-image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 15px;
}

/* Эффект смены изображения при наведении */
.stat-item:hover .stat-image {
  opacity: 0;
}

.stat-item:hover .stat-image-hover {
  opacity: 1;
}

/* Плавное увеличение изображения при наведении */
.scroll-block__card:hover .scroll-block__card-image {
  transform: scale(1.05); /* Увеличиваем изображение при наведении */
}


/* Название карточки */
.scroll-block__card-title {
  font-size: 22px; /* Увеличенный размер текста */
  font-weight: 600;
  color: rgba(40, 10, 11, 0.8); /* Темно-коричневый цвет */
  margin-bottom: 15px;
}

/* Текст карточки */
.scroll-block__card-text {
  font-size: 16px; /* Увеличенный размер текста */
  color: #7c6f63;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* Ссылка на карточке, которая перекрывает всю карточку */
.scroll-block__card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
}

/* Стили для ссылок */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Адаптивность для мобильных устройств */
.scroll-block-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.scroll-block-wrapper {
  display: flex;
  flex-direction: row;
  width: max-content; /* Контейнер адаптируется по ширине содержимого */
}
.news__title-grid {
  display: flex;
  justify-content: space-between; /* Разделяет заголовок и кнопку по сторонам */
  align-items: center; /* Вертикальное выравнивание элементов */
}

.news__title {
  margin-right: 30px; /* Дополнительный отступ вправо */
  font-size: 36px;
  color: #280a0b;
  font-weight: 700;
  margin-bottom: 0; /* Убираем отступ снизу, если он не нужен */
}

.news__btn {
    margin-left: 20px; /* Отступ слева для кнопки */
  margin-top: 0; /* Убираем отступ сверху, если не нужен */
}

/* Основные стили для кнопки */
/* Общие стили для кнопок */
.custom-button {
  position: relative; /* Устанавливаем позиционирование */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 35px;
  border-radius: 50px;
  min-width: 160px;
  background-color: #fff;
  color: #8e735b;
  font-size: 14px;
  font-weight: 400;
  font-family: "Forum", serif;
  text-transform: uppercase;
  transform: translateZ(0);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  margin-top: 30px;
  left: -10px; /* Сдвигаем кнопку влево */
}


/* Коричневая кнопка с белым фоном */
.brown-button {
  background-color: #8e735b; /* Коричневый фон */
  color: white; /* Белый текст */
  border-color: #8e735b;
}

/* Прозрачная кнопка с коричневыми буквами и окантовкой */
.transparent-button {
  background-color: transparent; /* Прозрачный фон */
  color: #8e735b; /* Коричневый цвет текста */
  border: 2px solid #8e735b; /* Коричневая окантовка */
}

/* Эффекты при наведении */
.custom-button:hover {
  transform: scale(1.1); /* Увеличение кнопки при наведении */
}

/* При наведении на коричневую кнопку */
.brown-button:hover {
  background-color: white; /* Белый фон при наведении */
  color: #8e735b; /* Коричневый текст при наведении */
  border-color: #8e735b; /* Коричневая граница */
}

/* При наведении на прозрачную кнопку */
.transparent-button:hover {
  background-color: #8e735b; /* Коричневый фон при наведении */
  color: white; /* Белый текст при наведении */
}
@media (max-width: 768px) {
  .product-info {
    max-width: 90%;
    padding: 15px;
    padding-right: 100px; /* Отступ справа уменьшаем */
  }

  .product-info h2 {
    font-size: 24px; /* Чуть меньше на мобильных */
    
  }

  .product-info p {
    font-size: 16px;
  }

  .product-info .custon-button-a {
    padding: 10px 25px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .product-info {
    padding-right: 20px; /* Ещё меньше на самых маленьких экранах */
  }

  .product-info h2 {
    font-size: 22px; /* Еще меньше */
  }

  .product-info p {
    font-size: 14px;
  }

  .product-info .custon-button-a {
    padding: 8px 20px;
    font-size: 26px;
  }
}
.custon-button-a {
  position: relative; /* Устанавливаем позиционирование */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 35px;
  border-radius: 50px;
  min-width: 160px;
  background-color: #8e735b;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: "Forum", serif;
  text-transform: uppercase;
  transform: translateZ(0);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  margin-top: 30px;
  left: -10px; /* Сдвигаем кнопку влево */
}
.custon-button-a:hover {
  transform: scale(1.1); /* Увеличение кнопки при наведении */
}
.custon-button-a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s;
  border-radius: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
}

/* Анимация при наведении */
.custon-button-a:hover::before {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

/* Текст кнопки */
.custon-button-a span {
  position: relative;
  z-index: 1;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .custom-button-a {
    padding: 10px 25px;
    font-size: 12px;
    min-width: 120px;
    margin-top: 15px;
  }
}

@media (max-width: 480px) {
  .custom-button-a {
    padding: 8px 20px;
    font-size: 11px;
    min-width: 110px;
  }
}
/* Эффект с анимацией на кнопку */
.custom-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s;
  border-radius: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
}

/* Анимация при наведении */
.custom-button:hover::before {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

/* Текст кнопки */
.custom-button span {
  position: relative;
  z-index: 1;
}

.scroll-block-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.scroll-block-wrapper {
  display: flex;
  flex-direction: row;
  width: max-content; /* Контейнер адаптируется по ширине содержимого */
}  .marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 100px; /* Высота строки увеличена */
  display: flex;
  align-items: center;
  background-color: #ad8a6b;; /* Темный элегантный фон */
}

.marquee__inner {
  font-family: auto;
  display: inline-flex;
  animation: marquee 50s linear infinite; /* Замедленная анимация */
  will-change: transform; /* Оптимизация для плавности */
}

.marquee__inner span {
  display: inline-block;
  padding: 0 50px; /* Пространство между словами */
  font-size: 36px; /* Крупный текст */
  font-weight: bold;
  color: #fff; /* Белый текст */
  text-transform: uppercase;
  letter-spacing: 2px; /* Расширенный межбуквенный интервал */
  opacity: 0.9; /* Легкая прозрачность для элегантности */
  transition: transform 0.3s ease-in-out; /* Эффект при наведении */
}

.marquee__inner span:hover {
  transform: scale(1.1); /* Увеличение при наведении */
  opacity: 1; /* Полная непрозрачность */
}

@keyframes marquee {
  from {
    transform: translateX(0); /* Начинаем с левого края */
  }
  to {
    transform: translateX(-100%); /* Уходим полностью влево */
  }
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .marquee {
    height: 70px;
  }

  .marquee__inner span {
    padding: 0 20px; 
    font-size: 24px; 
    letter-spacing: 1px; 
  }
}

@media (max-width: 480px) {
  .marquee {
    height: 50px;
  }

  .marquee__inner span {
    padding: 0 10px;
    font-size: 18px; 
  }
}
.arrow {
    font-size: 54px;
    margin-left: -4px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.nav-item:hover .arrow {
  transform: rotate(180deg);
}
.larger-text {
  font-size: 2em;
}
/* Контейнер для карточек */
.scroll-block__grid {
  display: flex;
  justify-content: flex-start;
  gap: 20px; 
  padding: 50px 20px;
  overflow-x: auto; /* Горизонтальная прокрутка */
}

/* Карточка */
.scroll-block__card {
  flex: 0 0 auto; /* Каждая карточка имеет фиксированную ширину */
  width: 500px; 
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: none;
  transition: transform 0.3s ease;
  margin-top: 50px; /* Поднимаем карточки ниже */
}

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

/* Изображение в карточке */
.scroll-block__card-image-block {
  width: 100%;
  height: 400px; /* Увеличенная высота для изображения */
  overflow: hidden;
  border-radius: 15px; /* Закругленные углы */
  position: relative;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень под изображением */
}

/* Стили для контейнера изображений */
.stat-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
}

/* Изображение по умолчанию */
.stat-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  border-radius: 15px;
}

/* Изображение при наведении */
.stat-image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 15px;
}

/* Эффект смены изображения при наведении */
.scroll-block__card:hover .stat-image {
  opacity: 0;
}

.scroll-block__card:hover .stat-image-hover {
  opacity: 1;
}
/* Начальное состояние - элемент скрыт */
.scroll-block__card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Когда элемент видим */
.scroll-block__card.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Initial state before animation */
.fade-in,
.fade-in-left,
.fade-in-right,
.wow-text,
.scroll-block__card {
  opacity: 0;
  transform: translateY(20px); /* Slight upward shift for fade-in */
  transition: opacity 1s ease, transform 1s ease;
}
@media (max-width: 768px) {
  .scroll-block__grid {
    padding-bottom: 10px; /* Уменьшает отступ снизу */
  }

  .scroll-block__card:last-child {
    margin-bottom: 0; /* Убирает лишний отступ у последней карточки */
  }

  .scroll-block__card-bottom {
    padding-bottom: 10px; /* Уменьшает внутренний отступ карточек */
  }
}

.fade-in-left {
  transform: translateX(-20px); /* Shift left for left animations */
}

.fade-in-right {
  transform: translateX(20px); /* Shift right for right animations */
}

/* Visible state for animations */
.visible {
  opacity: 1;
  font-family: auto;
  margin-top: 50px; 
}

/* Section styles */
.section-title-wrap {
  margin-bottom: 30px;
}

.section-heading {
    font-size: 36px;
    font-weight: bold;
    text-align: left;
    margin-right: 50px;
}


.title-accent::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  bottom: -10px;
  left: 0;
}
/* 4 section */
.how-we-work {
  text-align: center;
  padding: 15px 20px;
}

.how-we-work h2 {
  font-size: 26px;
  color: #7c6f63;
}

.how-we-work .highlight {
  color: #8b6b4d;
  font-weight: bold;
}

.timeline {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #d9d9d9;
  z-index: 1;
}

.step {
  position: relative;
  text-align: center;
  z-index: 2;
  flex: 1;
  max-width: 140px;
  transition: all 0.3s ease;
}

.step .arrow {
  width: 40px;
  height: 40px;
  border: 3px dashed #8b6b4d;
  border-radius: 50%;
  margin: 30px auto 30px auto;
  position: relative;
  /* background-color: #fff; */
  display: flex
;
  justify-content: center;
  align-items: center;
}

.step i {
  font-size: 36px;
  color: #8b6b4d;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.step p {
  font-size: 14px;
  color: #333;
  margin-top: 10px;
  transition: opacity 0.3s ease;
}

/* Стрелка для всех шагов кроме последнего */
.work-steps-item::after {
  content: '';
  position: absolute;
  top: 43px;
  left: calc(50% - 5px);
  border-top: 7px solid transparent;
  border-left: 14px solid #8b6b4d;
  border-bottom: 7px solid transparent;
  transition: opacity 0.3s ease;
}

/* Удаление стрелки для последнего шага */
.final-step::after {
  display: none;
}

/* Последний шаг: круг с галочкой */
.final-step .circle-check {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 20px auto 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.final-step .circle-check i {
  font-size: 45px;
  color: #8e735b;
}

/* --- Эффект размытия при наведении --- */
.timeline:hover .step {
  opacity: 0.3;
  filter: blur(2px); /* Добавляет легкое размытие */
  transform: scale(1); /* Убираем увеличение всех остальных элементов */
}

.timeline .step:hover {
  opacity: 1; /* Выделяем текущий элемент */
  filter: blur(0); /* Убираем размытие */
  transform: scale(1.1); /* Увеличиваем текущий элемент */
  z-index: 3; /* Поднимаем над остальными */
}

.how-we-work h2 {
  font-family: auto;
  font-size: 50px;
  color: #7c6f63;
}
/* FAQ Section Layout */
.faq {
  position: relative;
  padding-top: 120px; /* Increased top padding for spacing */
  padding-bottom: 75px;
  background-color: #fdfaf6;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 100px; /* Increased gap between title and questions */
  align-items: start;
}

.faq-header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.faq-title {
  font-size: 120px;
  font-family: Forum, sans-serif;
  text-align: left;
  color: #8b6b4d;
  margin: 0;
  transform: translateX(-90px);
}

.faq-content {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Space between questions */
  border-top: 1px solid #e0e0e0; /* Top line */
}

.faq-item {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border-bottom: 1px solid #e0e0e0; /* Line between questions */
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 22px;
  font-family: auto;
  font-weight: bold;
  color: #2d2d2d;
  position: relative;
  cursor: pointer;
  padding: 20px 10px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.faq-question:hover {
  color: #bb8e62; /* Elegant hover color */
  transform: scale(1.02); /* Slight zoom effect */
}

.faq-icon {
  position: absolute;
  right: 7px;
  top: 60%;
  transform: translateY(-50%);
  font-size: 24px;
  transition: transform 0.3s ease, color 0.3s ease;
  color: #2d2d2d;
}

.faq-item.open .faq-icon {
  transform: rotate(-90deg); /* Arrow rotates on open */
  color: #bb8e62;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: 18px;
  color: #4a4a4a;
  line-height: 1.5;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 10px;
}

.faq-item.open .faq-answer {
  max-height: 200px;
  padding-top: 10px;
}

@media (max-width: 768px) {
  .faq {
    padding-top: 60px; /* Уменьшили отступ сверху */
    padding-bottom: 40px; /* Уменьшили отступ снизу */
    background-color: #fdfaf6;
  }

  .faq-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: block; /* Меняем сетку на блоковую верстку для мобильных */
    gap: 40px; /* Уменьшаем промежуток */
  }

  .faq-header {
    display: block;
    text-align: center;
    margin-bottom: 30px;
  }

  .faq-title {
    font-size: 40px; /* Уменьшаем размер шрифта для мобильных */
    text-align: center;
    color: #8b6b4d;
    margin: 0;
    transform: translateX(0); /* Убираем сдвиг для мобильных */
  }

  .faq-content {
    display: block;
    gap: 20px; /* Уменьшаем промежуток между вопросами */
    border-top: none; /* Убираем верхнюю границу для мобильных */
  }

  .faq-item {
    border-bottom: 1px solid #e0e0e0; /* Линия между вопросами */
    margin-bottom: 20px; /* Отступ между элементами */
  }

  .faq-question {
    font-size: 18px; /* Уменьшаем размер шрифта */
    font-weight: bold;
    color: #2d2d2d;
    cursor: pointer;
    padding: 15px 10px; /* Уменьшаем отступы для мобильных */
    transition: color 0.3s ease, transform 0.3s ease;
  }

  .faq-question:hover {
    color: #bb8e62; /* Цвет при наведении */
    transform: scale(1.02); /* Легкий эффект увеличения */
  }

  .faq-icon {
    font-size: 20px; /* Уменьшаем размер иконки */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease, color 0.3s ease;
    color: #2d2d2d;
  }

  .faq-item.open .faq-icon {
    transform: rotate(-90deg); /* Поворот иконки при открытии */
    color: #bb8e62;
  }

  .faq-answer {
    font-size: 16px; /* Уменьшаем размер шрифта ответа */
    color: #4a4a4a;
    line-height: 1.5;
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }

  .faq-item.open .faq-answer {
    max-height: 200px; /* Устанавливаем максимальную высоту для ответа */
    padding-top: 10px;
  }
}
@media (max-width: 768px) {
  .scroll-block__title {
    font-size: 40px; /* Уменьшаем размер шрифта для мобильных */
    margin-bottom: 20px;
    text-align: center; /* Центрируем текст */
    font-family: auto;
    color: #7c6f63;
    left: 0; /* Убираем сдвиг на мобильных устройствах */
  }
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  /* Меню-кнопка */
  .menu__btn {
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
  }

  /* Иконки в гамбургере */
  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
    height: 2px;
    background-color: #8e735b; /* Цвет полос */
  }

  /* Меню */
  .menu__box {
    padding: 20px;
    text-align: left; /* Текст выравнивается по левому краю */
  }

  /* Контакты */
  .menu__contacts {
    flex-direction: column; /* Размещаем контакты в колонку */
    align-items: flex-start; /* Выравниваем по началу */
    margin-left: 0;
  }

  .menu__contacts-info {
    width: 100%; /* На мобильных контакты занимают всю ширину */
    margin-bottom: 20px; /* Добавляем отступ между блоками */
  }

  /* Социальные иконки */
  .social-icons {
    flex-wrap: wrap; /* Иконки переносятся на новую строку */
    gap: 10px;
    justify-content: flex-start;
  }

  .social-item span {
    font-size: 16px; /* Уменьшаем размер текста */
  }

  .social-item i {
    font-size: 20px; /* Уменьшаем размер иконок */
  }

  /* Основное меню */
  .menu__main-col {
    width: 100%; /* Меню занимает всю ширину */
    margin-left: 0;
  }

  .menu__main-item {
    font-size: 28px; /* Уменьшаем размер текста */
    padding: 10px 0; /* Уменьшаем отступы */
  }

  /* Подменю */
  .menu__secondary {
    font-size: 14px; /* Размер текста подменю */
    top: 40px; /* Сдвигаем подменю ниже */
  }

  /* Изображение */
  .menu__image-preview {
    width: 100%; /* Изображение подстраивается под ширину */
    height: auto;
    left: 0; /* Центрируем изображение */
    top: 20px; /* Сдвигаем вниз */
  }

  .menu__single-image {
    width: 90%; /* Уменьшаем ширину изображения */
    margin: 0 auto; /* Центрируем */
  }
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  /* Скрываем изображения подменю */
  .menu__image-preview,
  .menu__single-image {
    display: none; /* Полностью скрываем изображения */
  }

  /* Основные пункты меню */
  .menu__main-item {
    position: relative; /* Для отображения подменю */
    font-size: 24px; /* Уменьшенный шрифт */
    padding: 10px 15px; /* Уменьшенные отступы */
    border-bottom: 1px solid #ddd; /* Разделение пунктов */
  }

  /* Подменю */
  .menu__secondary {
    position: absolute; /* Абсолютное позиционирование */
    top: 100%; /* Размещаем подменю сразу под родительским элементом */
    left: 0; /* Выравнивание по левому краю */
    width: 100%; /* Ширина совпадает с родительским пунктом */
    opacity: 0; /* Прячем подменю */
    visibility: hidden; /* Делаем подменю невидимым */
    transform: translateY(-10px); /* Смещаем вверх для анимации */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    background-color: #f5f5f5; /* Фон подменю */
    z-index: 1000; /* Увеличиваем слой, чтобы было поверх других элементов */
  }

  /* Показываем подменю при наведении */
  .menu__main-item:hover > .menu__secondary,
  .menu__main-item:focus-within > .menu__secondary {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Подменю появляется плавно */
  }

  /* Элементы подменю */
  .menu__secondary-item {
    padding: 10px 15px; /* Внутренние отступы для удобства */
    color: #333; /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    border-bottom: 1px solid #ddd; /* Разделитель между пунктами */
    background-color: #fff; /* Фон каждого элемента */
  }
  
  .menu__secondary-item:hover {
    background-color: #e0e0e0; /* Изменение фона при наведении */
    color: #8b6b4d; /* Изменение цвета текста */
  }

  /* Убираем стандартные отступы для списка */
  .menu__main,
  .menu__secondary {
    padding: 0;
    margin: 0;
    list-style: none; /* Убираем маркеры списка */
  }
}

/* Эффекты при наведении */
.btn:hover {
  background-color: #8e735b; /* Коричневый фон при наведении */
  color: #fff; /* Белый текст при наведении */
  transform: scale(1.1); /* Увеличение кнопки при наведении */
}

/* Эффект с анимацией на кнопку */
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s;
  border-radius: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
}

/* Анимация при наведении */
.btn:hover::before {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

/* Текст кнопки */
.btn span {
  position: relative;
  z-index: 1;
} /* Общие стили для кнопок */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 50px;
  min-width: 140px;
  background-color: #8e735b; /* Белый фон по умолчанию */
  color: #fff; /* Коричневый цвет текста по умолчанию */
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  transform: translateZ(0);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  margin-top: 30px; /* Отступ сверху */
}

/* Эффекты при наведении */
.btn:hover {
  background-color: #fff; /* Коричневый фон при наведении */
  color: #8e735b; /* Белый текст при наведении */
  transform: scale(1.1); /* Увеличение кнопки при наведении */
}

/* Анимация для кнопки при наведении */
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s;
  border-radius: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
}

/* Анимация при наведении */
.btn:hover::before {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

/* Текст кнопки */
.btn span {
  font-family: auto;
  position: relative;
  z-index: 1;
}
/* Логотип в футере */
.footer__top {
  text-align: center;
  margin-bottom: 40px;
}

.footer__logo-link img {
  width: 200px; /* Подберите размер логотипа */
  height: auto;
  transition: transform 0.3s ease;
}

.footer__logo-link img:hover {
  transform: scale(1.1);
}


/* Контейнер футера */
/* Большая колонка */
.footer__col-lg {
  flex: 1;
  min-width: 280px;
  text-align: left;
}

/* Заголовок для первого столбца */
.footer__title {
  font-size: 38px;
  font-weight: bold;
  color: #8e735b;
  margin-bottom: 20px;
  font-family: auto;
}
/* Кнопка */
.btn {
  background-color: #8e735b;
  color: #fff;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
  background-color: #6b4a2a;
  transform: scale(1.05);
}

/* Средняя колонка */
.footer__col-md {
  flex: 1;
  min-width: 280px;
  text-align: left;
}
.blog-header {
  position: relative;
  background-image: url(img/background.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 150px 20px;
  text-align: center;
}
.footer__small-title {
  font-size: 24px;
  color: #8e735b;
  margin-bottom: 10px;
  font-family: auto;
}

.footer__link {
  color: #555;
  text-decoration: none;
  font-size: 16px;
  font-family: auto;
  transition: color 0.3s ease;
  margin-bottom: 15px;
  display: block;
  padding: 5px 0;
}
/* Социальные иконки */
.footer-socials {
  margin-top: 20px;
}

.social-icon {
  font-size: 16px; /* Уменьшенный размер иконок для пропорции */
  color: #8e735b;
  margin: 0 10px; /* Чуть меньше расстояние между иконками */
  transition: color 0.3s ease, transform 0.3s ease; /* Добавлена анимация для улучшения эффекта */
  display: inline-block;
  border-radius: 50%;
  padding: 14px; /* Увеличенные отступы для более округлой формы */
  background-color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Более заметная тень */
}

.social-icon:hover {
  color: #654321; /* Цвет при наведении */
  transform: scale(1.1); /* Легкое увеличение при наведении */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Усиление тени при наведении */
}



.footer__link:hover {
  color: #8e735b;
}

/* Маленькая колонка */
.footer__col-sm {
  flex: 1;
  min-width: 280px;
  text-align: left;
}

/* Социальные иконки */
.footer__socials {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.footer__socials li {
  list-style: none;
}

.footer__socials a {
  font-size: 30px;
  color: #8e735b;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer__socials a:hover {
  color: #fff;
  background-color: #8e735b;
  border-radius: 50%;
  padding: 10px;
  transform: scale(1.1);
}

/* Нижняя часть футера */
.footer__bottom {
  margin-top: 40px;
  text-align: center;
}

.footer__bottom p {
  font-size: 16px;
  color: #8e735b;
}

.footer__bottom ul {
  list-style: none;
  padding: 0;
  display: inline-flex;
  gap: 20px;
  margin-top: 10px;
}

.footer__bottom ul li {
  display: inline-block;
}

.footer__bottom ul li a {
  color: #8e735b;
  text-decoration: none;
  font-family: auto;
  transition: color 0.3s ease;
  font-family: "Forum", serif;
}

.footer__bottom ul li a:hover {
  color: #333;
}

/* Адаптивность */

@media (max-width: 768px) { /* Можно изменить значение 768px при необходимости */
  .transparent-button,
  .custom-button {
      display: none;
  }
}


.footer__row {
  display: flex
;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-divider {
  border: 0;
  height: 1px;
  background-color: #8b6b4d; /* Цвет линии */
  margin: 20px 0; /* Отступы сверху и снизу */
}
.footer {
    padding: 40px 20px;
    border-radius: 4em;
    text-align: center;
    margin-top: 100px; /* Увеличено для смещения вниз */
    background-color: rgb(0 0 0 / 10%);
}


/* Модальное окно */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  overflow: hidden;
  background-color: rgba(200, 189, 180, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal__dialog {
  height: 100%;
  max-width: 850px;
  margin-left: auto;
  background-color: #c8bdb4;
  padding: 80px 100px 100px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

/* Кнопка закрытия */
/* Кнопка закрытия */
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 30px;
  color: #8b6b4d;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s ease;
}

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


/* Линия под "GET IN TOUCH" */
.modal__top {
  display: flex;
  font-family: auto;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 16px;
  font-weight: bold;
  font-family: 'Forum';
  color: #8b6b4d;
  margin-bottom: 20px;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #8b6b4d;
  margin-top: 8px;
}

/* Заголовок и текст */
.modal__title {
  margin-top: 0px;
  font-family: auto;
  margin-bottom: 20px;
  color: #8b6b4d;
  font-size: 74px;
  font-weight: bold;
}

.modal__text {
  margin-bottom: 20px;
  color: #8b6b4d;
  font-size: 16px;
  line-height: 1.5;
}

/* Поля формы */
.feedback__form .label {
  margin-bottom: 20px;
}

.input-text {
  width: 100%;
  font-family: auto;
  padding: 20px 30px;
  background-color: rgba(200, 189, 180, 0.2);
  border: none;
  border-bottom: 1px solid #8b6b4d;
  outline: none; /* Убирает обводку при фокусе */
}


/* Кнопка отправки */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 35px; /* Увеличенные размеры кнопок */
  border-radius: 50px;
  min-width: 160px; /* Увеличена минимальная ширина */
  background-color: #fff; /* Белый фон по умолчанию */
  color: #8e735b; /* Коричневый цвет текста */
  font-size: 14px; /* Увеличен размер шрифта */
  font-weight: 400; /* Увеличена жирность текста */
   font-family: "Forum", serif;
  text-transform: uppercase;
  transform: translateZ(0);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  margin-top: 30px; /* Отступ сверху */
}

.btn:hover {
  transform: scale(1.1); /* Увеличение кнопки при наведении */
}

/* Активное модальное окно */
.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal__dialog.active {
  transform: translateX(0);
}
#submit-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 35px;
  border-radius: 50px;
  background-color: #fff;
  color: #8e735b;
  font-size: 14px;
  font-family: "Forum", serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/* Стили для состояния "успешно отправлено" */
#submit-button.success {
  background-color: #8b6b4d; 
  color: #fff; 
}

#submit-button.success::after {
  content: "✔"; 
  margin-left: 10px;
  font-size: 16px;
}

.blog-header {
  position: relative;
  background-image: url('img/background.jpg'); 
  background-size: cover;
  background-position: center top; 
  background-repeat: no-repeat; 
  padding: 150px 20px;
  text-align: center;
}
.header-slabs{
  color: #f9f3e0;
    font-size: 60px;
    font-weight: 800;
    font-family: auto;
}

* {
  -webkit-tap-highlight-color: transparent !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Отступ между продуктами */
  justify-content: center;
  padding: 20px;
  list-style-type: none;
}

.product {
  width: 300px; /* Ширина карточки */
  text-align: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.product:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.shop-product-box {
  position: relative;
}

.shop-product-box .ft_image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.product:hover .ft_image img {
  transform: rotate(360deg);
}

.product-info {
  margin-top: 10px;
  line-height: 1.5;
}

.product-info h3 {
  font-family: "Forum", serif;
  font-size: 18px;
  margin-bottom: 5px;
}

.product-info p {
  font-size: 14px;
  color: #666;
}
/* Общий стиль секции */
.shop-categories {
  margin: 50px auto; /* На компьютерах оставляем текущий отступ */
  text-align: center;
}

.shop-list {
  list-style: none;
  padding: 0;
  display: inline-block;
}

.cat-item {
  display: inline-block;
  margin: 10px 20px;
  font-size: 26px;
  font-weight: 400;
  font-family: auto;
  color: #000;
  position: relative;
}

.cat-item:not(:last-child)::after {
  content: "/";
  font-size: 20px;
  color: #aaa;
  margin-left: 20px;
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}

.cat-item a {
  text-decoration: none;
  color: #000;
  position: relative;
  padding: 8px 0;
  transition: color 0.3s ease;
}

.cat-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background-color: #d4a373;
  transition: width 0.3s ease;
}

.cat-item a:hover::after {
  width: 100%;
}

.cat-item a:hover {
  color: #d4a373;
}

.cat-item.current-cat a {
  color: #000;
  text-decoration: none;
}

.cat-item.current-cat a::after {
  width: 100%;
  background-color: #000;
}

/* Секция кругов */
.circles-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem; /* Отступ между элементами */
  padding: 2rem 0;
}

.circles-text {
  max-width: 40%;
}

.circles-title {
  font-size: 3rem;
  font-weight: 500;
  font-family: auto;
  margin-bottom: 1rem;
}

.circles-description {
  font-size: 1.2rem;
  font-family: auto;
  line-height: 1.5;
  color: #333;
}

.circles-items {
  display: flex;
  gap: 2rem; /* Отступы между кругами на компьютерах */
}

/* Применение пульсации ко всем кругам */
.circle-item {
  position: relative;
  width: 12rem;
  height: 12rem;
  border: 2px solid #8e735b;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8e735b;
  font-size: 1rem;
  padding: 1rem;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  animation: pulse 2s infinite;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .text-wrapper p {
      font-size: 1rem;  /* Уменьшаем размер шрифта */
      line-height: 1.6;  /* Уменьшаем межстрочное расстояние */
      max-width: 90%;  /* Делаем ширину динамической */
  }
}

@media (max-width: 480px) {
  .text-wrapper p {
      font-size: 0.9rem;  
      line-height: 1.5;
      max-width: 95%;  
  }
}
@media (max-width: 768px) {
  .shop-list {
      display: flex;
      flex-wrap: wrap; /* Позволяет переносить элементы на новую строку */
      justify-content: center; /* Центрируем элементы */
      gap: 10px; /* Добавляем расстояние между элементами */
      padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .shop-item {
      flex: 1 1 calc(50% - 10px); /* Два элемента в строке */
      max-width: calc(50% - 10px); 
  }
}

@media (max-width: 480px) {
  .shop-item {
      flex: 1 1 100%; /* Один элемент в строке на маленьких экранах */
      max-width: 100%;
  }
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .shop-categories {
    margin: 30px auto; /* Уменьшение верхнего и нижнего отступа */
  }

  .cat-item {
    display: block;
    margin: 15px 0; /* Увеличение отступов между элементами */
    font-size: 18px; /* Уменьшение шрифта для мобильных */
  }

  .cat-item:not(:last-child)::after {
    content: none; /* Убираем разделитель на мобильных */
  }

  .circles-section {
    flex-direction: column; /* Вертикальное выравнивание секции */
    align-items: center;
    gap: 2.5rem; /* Увеличенные отступы между элементами */
  }

  .circles-text {
    max-width: 100%; /* Текст занимает всю ширину */
    text-align: center;
  }

  .circles-title {
    font-size: 2rem; /* Уменьшаем размер заголовка */
  }

  .circles-description {
    font-size: 1rem; /* Уменьшаем размер текста */
  }

  .circles-items {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem; /* Увеличенные отступы между кругами */
  }

  .circle-item {
    width: 10rem; /* Уменьшение размера круга */
    height: 10rem;
    font-size: 0.9rem; /* Уменьшение текста внутри круга */
    margin-bottom: 1rem; /* Дополнительный отступ между кругами */
  }
}


.circle-count {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  opacity: 1; /* Цифры видны сразу */
}

.circle-text {
  font-size: 1rem;
  font-weight: 400;
}

/* Пульсация круга */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(142, 115, 91, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(142, 115, 91, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(142, 115, 91, 0.4);
  }
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .circles-section {
    flex-direction: column;
    align-items: center;
  }

  .circles-items {
    flex-wrap: wrap;
    justify-content: center;
  }
}


.line {
  display: block;
  width: 120%;
  height: 1px;
  margin-right: -50px;
  background-color: #ac9b8b;
}

.news__row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  background-color: #f9f3e0;
  padding: 0 50px;
  margin-left: -10px;
  margin-top: 40px;
}

.news__col {
  flex-shrink: 0;
  width: 33.333%;
  max-width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 0;
}

.news-card {
  
  position: relative;
  padding-bottom: 30px;
  height: 100%;
}

.news-card__image-block {
  position: relative;
  width: 100%;
  height: 300px; /* Высота контейнера */
  overflow: hidden;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.news-card__image-block img {
  height: 100%;
  object-fit: cover; /* Масштабирование изображения */
  transition: transform 0.3s ease;
}

.news-card__image-block:hover img {
  transform: scale(1.1); /* Масштабирование изображения при наведении */
}

.news-card__image-block:hover {
  filter: brightness(0.8); /* Затемнение контейнера при наведении */
}
.news__title {
  max-width: 700px; /* Увеличенная ширина */
  color: #8e735b;
  font-size: 57px; /* Увеличенный размер шрифта */
  font-family: auto;
  font-weight: 500; /* Более жирный текст */
  margin-left: 30px; /* Отступ влево */
  margin-right: 30px; /* Дополнительный отступ вправо */
  line-height: 1.5; /* Увеличенное межстрочное расстояние для удобства чтения */
}


.news-card__date, .news-card__source {
  display: block;
  margin-bottom: 10px;
  color: #ac9b8b;
}

.news-card__line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ac9b8b;
  transition: background-color 0.5s ease;
}

/* Контейнер для слайдера */
.t-slds {
  position: relative;
  overflow: hidden;
}

.news__row-scroll {
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
}

.news__col {
  flex: 0 0 300px;
  margin-right: 20px;
}

.t-slds__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background 0.3s ease;
}

.t-slds__arrow:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.t-slds__arrow--left {
  left: 10px;
}

.t-slds__arrow--right {
  right: 10px;
}
/* Увеличенные отступы для subtitle */


/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .news__title {
    font-size: 28px; /* Уменьшенный размер для мобильных */
    margin-left: 15px;
    margin-right: 15px;
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .news__row-scroll {
    flex-wrap: nowrap;
  }
}
.product-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 5%;
  background-color: #f9f9f9;
}

.product-content {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

.date {
  font-size: 12px;
  color: #8e8e8e;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 270px;
  margin-left: 15px;
}

.material-icons {
  font-size: 14px;
  margin-right: 5px;
}

.product-description {
  flex: 1 1 50%;
  max-width: 50%;
}

.product-description h1 {
  font-family: 'Playfair Display', serif;
  color: #8b6b4d;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.product-description p {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  margin-bottom: 15px;
  line-height: 1.6;
}

.custom-button.yellow-button {
  background-color: #8b6b4d;
  color: #fff;
  font-size: 1rem;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

.custom-button.yellow-button:hover {
  background-color: #8b6b4d;
}

.product-image {
  flex: 1 1 40%;
  max-width: 40%;
  text-align: center;
  position: relative;
  overflow: hidden; /* Обрезаем изображения, чтобы не выходили за пределы */
}

.product-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.product-image:hover img {
  transform: scale(1.1) rotate(5deg); /* Увеличение с легким поворотом */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Эффект тени */
  opacity: 0.9; /* Уменьшаем прозрачность для выделения */
}

.product-image:hover::after {
  content: ''; /* Создание псевдоэлемента для пульсации */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  animation: pulse 1.5s infinite; /* Анимация пульсации */
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}


.fade-in {
  opacity: 0;
  transform: translateY(50px);
  background: red;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
  background: transparent;
}

.hero-title {
  font-size: 5rem;
  font-weight: bold;
  color: #8b6b4d;
  font-family: auto;
  text-align: center;
  margin: 50px auto 20px;
  position: relative;
}

.hero-title::after {
  content: '';
  display: block;
  width: 1250px;
  height: 1px;
  background-color: #8b6b4d;
  margin: 10px auto 0;
}

.centered-text {
  text-align: center;
  font-family: auto;
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a4a;
  max-width: 800px;
  margin: 30px auto;
  padding: 0 20px;
  border-radius: 8px;
}

/* Медиазапросы для мобильных устройств */
@media (max-width: 768px) {
  .product-section {
    flex-direction: column; /* Переводим на вертикальную компоновку */
    padding: 20px 10%; /* Уменьшаем отступы */
  }

  .product-content {
    gap: 40px; /* Уменьшаем расстояние между элементами */
  }

  .date {
    margin-right: 0; /* Убираем отступ справа */
    margin-left: 0; /* Убираем отступ слева */
    justify-content: flex-start; /* Перемещаем влево */
  }

  .product-description {
    flex: 1 1 100%;
    max-width: 100%; /* Растягиваем описание на всю ширину */
  }

  .product-description h1 {
    font-size: 2rem; /* Уменьшаем размер заголовка */
  }

  .product-description p {
    font-size: 0.9rem; /* Уменьшаем размер текста */
  }

  .product-image {
    flex: 1 1 100%;
    max-width: 100%; /* Растягиваем изображение на всю ширину */
  }

  .hero-title {
    font-size: 3rem; /* Уменьшаем размер заголовка */
  }

  .hero-title::after {
    width: 100%; /* Линия будет шириной экрана */
  }

  .centered-text {
    font-size: 16px; /* Уменьшаем размер текста */
    padding: 0 10px; /* Уменьшаем отступы */
  }
}


.project-goals {
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.project-goals li {
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
  line-height: 1.5;
}

.project-goals li strong {
  color: #8b6b4d;
}

.note {
  font-size: 16px;
  font-style: italic;
  color: #666;
  margin-top: 10px;
}
.product-link {
  text-decoration: none; /* Убирает подчеркивание ссылки */
  color: inherit; /* Сохраняет цвет текста */
  display: block; /* Делает всю область кликабельной */
}

.product-link:hover .product {
  transform: scale(1.02); /* Эффект увеличения при наведении */
  transition: transform 0.3s ease;
}
.telegram-link {
  color: #d4a373; /* Початковий колір */
  font-weight: bold; /* Жирний шрифт */
  text-decoration: none; /* Прибрати підкреслення */
}

.telegram-link:hover {
  color: #f5d3a6; /* Світліший колір при наведенні */
}
.delivery-section {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.icon-circle {
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #333;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.icon-circle:hover {
  transform: scale(1.1);
}

.content {
  max-width: 600px;
}

.kh {
  color: #333;
  line-height: 1.5;
}
.breadcrumbs {
  display: flex;
  list-style: none;
  margin-bottom: 20px;
}

.breadcrumbs li {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}

.breadcrumbs li:not(:last-child):after {
  content: "/";
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
  color: #666;
}

/* Стиль для стрелки */
.breadcrumbs__icon {
  font-size: 20px; /* Размер стрелки */
  color: #280a0b; /* Цвет стрелки */
  display: inline-block;
  transition: transform 0.3s ease, margin-left 0.3s ease;
  margin-left: 8px;
}

/* Эффект при наведении */
.breadcrumbs__icon:hover {
  transform: translateX(-5px); /* Стрелка сдвигается вправо */
}
.breadcrumbs__text {
  font-size: 16px;
  color: #666;
}
.breadcrumbs {
  display: flex;
  list-style: none;
  margin-bottom: 20px;
}

.breadcrumbs li {
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.breadcrumbs__icon {
  width: 16px;
  margin-right: 5px;
}
/* Общие стили для секции */
.contacts-section {
  display: flex;
  justify-content: space-between;
  margin: 100px auto; /* Отступ сверху и снизу секции */
  max-width: 1400px; /* Увеличенная ширина секции */
  font-family: 'Montserrat', sans-serif;
  color: #3d3d3d;
  align-items: flex-start; /* Все элементы выровнены по верхнему краю */
}

.contact-column {
  flex: 1;
  padding: 0 50px; /* Внутренний отступ колонок */
}

.contact-column h3 {
  font-family: auto;
  color: #8b6b4d;
  font-size: 32px; /* Размер заголовков */
  font-weight: 500;
  margin-bottom: 30px; /* Отступ после заголовка */
  line-height: 1.5; /* Равномерное расстояние между строками */
}

.contact-column hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 20px 0 30px; /* Равномерный отступ до и после линии */
  width: 100%; /* Линия занимает всю ширину родителя */
}

.contact-column p {
  font-size: 20px; /* Размер текста */
  margin: 0 0 50px; /* Отступ между текстами */
  line-height: 1.6; /* Высота строк для равномерного расстояния */
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 40px; /* Расстояние между иконками */
  margin-top: 10px; /* Уменьшен отступ сверху */
 
}

.social-icons a {
  font-size: 38px; /* Размер иконок */
  color: #8b6b4d;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Плавный переход */
}

.social-icons a:hover {
  color: #8B4513; /* Коричневый цвет */
  transform: scale(1.2); /* Увеличение размера */
}

.social-icons a:active {
  transform: scale(1.1); /* Немного уменьшить при клике */
  
}


/* Анимация */
.contact-column, .social-icons {
  opacity: 0;
  transform: translateY(50px); /* Начальное смещение */
  animation: fadeInUp 1.5s ease forwards;
}

.contact-column:nth-child(1) { animation-delay: 0.5s; }
.contact-column:nth-child(2) { animation-delay: 1s; }
.contact-column:nth-child(3) { animation-delay: 1.5s; }
.social-icons { animation-delay: 2s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contacts__map {
  display: block;
  width: 100%;
  max-width: 1200px; /* Максимальная ширина карты */
  margin: 0 auto;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease; /* Плавная анимация */
}

.contacts__map.js-animated {
  opacity: 1;
  transform: translateY(0);
}

.contacts__map-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.fade--bottom {
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.js-animated {
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 1s ease forwards;
}

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

.fade--right {
  animation: fadeInRight 1s ease forwards;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.mini_title {
	margin-top: 28px;
	font-family: auto;
	margin-bottom: 20px;
	color: #6a3f24;
	font-size: 74px;
	font-weight: bold;
    margin-left: 72px;
  }
  
  .mini_text {
	margin-bottom: 20px;
    margin-left: 76px;
	color: #8b6b4d;
	font-size: 16px;
	line-height: 1.5;
  }
  @media (max-width: 768px) {
    .mini_title {
      font-size: 40px;
      margin-left: 0;
      text-align: center;
    }
  
    .mini_text {
      margin-left: 0;
      font-size: 14px;
      text-align: center;
    }
  }
  
  /* Блок для экранов с шириной больше 768px (большие экраны) */
  @media (min-width: 769px) {
    
    .mini_title {
      font-size: 74px;
      margin-left: 72px;
    }
  
    .mini_text {
      font-size: 16px;
      margin-left: 76px;
    }
  
    }
  strong{
    color: #6a3f24;
  }
  /* Анимация текста */
.word {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) rotate(10deg);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.8s ease;
}

.word.show .char {
  opacity: 1;
  transform: translateY(0) rotate(0);
}