.page-body {
  background: var(--body-bg-color);
  font-family: 'Golos Text', sans-serif;
  font-feature-settings: 'lnum';
}

.main {
  max-width: 600px;
  margin: 0 auto;
  align-self: center;
}
.img {
  width: 100%;
}

/*slickSlider*/
.slickSlider {
  background: var(--bg-less-color);
  padding: 20px 25px;

  .slickSlider-container {
    height: 500px !important;
  }

  .slide {
    border-radius: 10px;
  }

  .nav {
    padding: 10px 0;
  }

  .nav .slick-slide {
    padding: 0 2px;
    height: auto;
  }

  .nav .slick-slide img {
    opacity: 1; /* Зменшена непрозорість для неактивних слайдів */
    transition: opacity 0.3s ease;
  }

  .nav .slick-slide.slick-current img {
    opacity: 0.5; /* Збільшена непрозорість для активного слайду */
  }

  .nav-img {
    height: 56px;
    border-radius: 7px;
  }
}

/*hero*/

.hero {
  padding: 0 40px;
  background: var(--bg-less-color);
  .hero-container {
    padding: 0 0 20px 0;
    text-align: center;
    gap: 18px;
  }

  .svg-star {
    fill: #e4e42f;
    width: 15px;
  }

  .hero-text {
    line-height: 1.5;
    font-size: 18px;
  }

  .red-textarea {
    padding: 2px 4px;
    background: var(--red-bn-color);
    color: #fff;
    border-radius: 3px;
    gap: 25px;
  }
  .hero-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-list__item {
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
  }

  .icon-bird {
    width: 20px;
    height: 20px;
  }

  .color-text__2 {
    text-align: left;
    line-height: 120%;
  }
}

.offer {
  padding: 20px 40px;
  background: var(--bg-less-color);
  .offer-container {
    border-radius: 12px;
    background: var(--light-color);
    padding: 20px 20px;
    gap: 20px;
    align-items: flex-start;
  }

  .offer-item-details {
    gap: 10px;
  }

  .green-text {
    color: var(--green-color);
    background: rgba(0, 172, 69, 0.18);
    padding: 2px 5px;
  }

  .red-textarea {
    padding: 2px 5px;
    background: var(--red-color);
    color: #fff;
    border-radius: 3px;
  }

  .price-subtitle {
    color: var(--gray-color);
    font-size: 14px;
  }

  .offer-price_box {
    align-items: flex-start;
    gap: 10px;
  }

  .new-price {
    font-size: 40px;
  }

  .old-price {
    font-size: 24px;
    text-decoration: line-through;
  }

  .sellCount {
    color: var(--gray-color);
    font-size: 16px;
  }

  .offer-details {
    gap: 10px;

    .delivery-container {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 16px;
      width: auto; /* Ширина контейнера */
      margin: 0 auto; /* Центрування */
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
    }

    .delivery-header {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .icon {
      margin-right: 8px;
      width: 24px; /* Відстань між іконкою та текстом */
    }

    .title {
      flex-grow: 1; /* Дозволяє заголовку займати вільний простір */
      color: var(--black-color);
      font-size: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .arrow {
      transition: transform 0.3s ease; /* Анімація для стрілки */
    }

    .delivery-details {
      padding: 0 20px;
      max-height: 0; /* Сховати деталі за замовчуванням */
      overflow: hidden; /* Сховати вміст, що виходить за межі */
      transition: max-height 0.3s ease, opacity 0.6s ease; /* Перехід для висоти */
      opacity: 0.1;
    }

    .delivery-details.active {
      opacity: 1;
      padding: 18px 20px 1px 20px;
      max-height: 290px; /* Максимальна висота для розкриття */
    }

    .exchange-container {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 16px;
      width: auto; /* Ширина контейнера */
      margin: 0 auto; /* Центрування */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .exchange-header {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .icon {
      margin-right: 8px; /* Відстань між іконкою та текстом */
    }

    .arrow {
      transition: transform 0.3s ease; /* Анімація для стрілки */
      width: 28px;
    }

    .exchange-details {
      padding: 0 20px;
      max-height: 0; /* Сховати деталі за замовчуванням */
      overflow: hidden; /* Сховати вміст, що виходить за межі */
      transition: max-height 0.3s ease, opacity 0.6s ease; /* Перехід для висоти */
      margin-top: 8px;
      opacity: 0.1;
    }

    .exchange-details.active {
      opacity: 1;
      padding: 0 20px;
      max-height: 300px; /* Максимальна висота для розкриття */
    }
  }

  .color-btn {
    align-self: center;
    background: var(--red-bn-color);
    color: var(--light-color);
    width: 100%;
    text-align: center;
    padding: 16px;
    border-radius: 5px;
  }

  .gray-text {
    text-align: center;
    padding: 8px;
  }
}

.neverMore {
  padding: 10px 15px;

  .neverMore-container {
    gap: 30px;
  }

  .neverMore-title {
    font-size: 25px;
    align-self: center;
    text-align: center;
  }

  .neverMove-box {
    gap: 35px;
  }

  .neverMove-box__item {
    gap: 12px;
  }

  .img {
    border-radius: 10px;
  }
}

.comfort {
  padding: 20px 30px;

  .comfort-container {
    gap: 50px;
  }

  .comfort-title {
    font-size: 26px;
    text-align: center;
    padding: 0 40px;
  }

  .comfort-list {
    list-style-type: decimal;
    align-items: flex-start;
    gap: 20px;
    padding: 0 0 0 20px;
  }

  .comfort-list__item {
    font-size: 18px;
    line-height: 120%;
  }

  .red-textarea {
    padding: 2px 5px;
    background: var(--red-color);
    color: #fff;
    border-radius: 3px;
  }
}

.video {
  padding: 20px 30px;
  .video-container {
    gap: 20px;
  }

  .video-title {
    font-size: 26px;
  }

  .video-video {
    border-radius: 15px;
    width: 100%;
  }
}

.modern {
  padding: 20px 20px;
  .modern-container {
    gap: 50px;
  }

  .modern-title {
    font-size: 24px;
    text-align: center;
  }

  .modern-list {
    gap: 70px;
  }

  .modern-list__item {
    align-items: center;
    gap: 20px;
  }

  .modern-img {
    width: 30%;
    margin: 0 auto;
  }

  .modern-sub-title {
    font-size: 18px;
  }

  .modern-text {
    width: 95%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 125%;
    text-align: center;
  }
}

.action {
  padding: 20px 30px;
  background: var(--bg-less-color);
  .action-container {
    background: var(--body-bg-color);
    padding: 30px;
    gap: 20px;
  }

  .action-title {
    font-size: 26px;
    text-align: center;
  }

  .action-text {
    text-align: center;
    font-size: 16px;
    line-height: 120%;
  }

  .red-textarea {
    padding: 2px 5px;
    background: var(--red-color);
    color: #fff;
    border-radius: 3px;
  }

  .img-box {
    gap: 30px;
    align-items: center;
    width: 50%;
  }

  .action-img {
    width: 100%;
  }

  .action-img:nth-child(2) {
    width: 50%;
    margin: 0 auto;
  }
  .action-button {
    background: var(--red-bn-color);
    color: var(--light-color);
    width: 100%;
    padding: 16px 0;
    border-radius: 5px;
  }
}

.characteristics {
  padding: 20px 30px;
  .characteristics-container {
    gap: 30px;
  }

  .characteristics-title {
    font-size: 26px;
  }

  .characteristics-sub-title {
    width: 100%;
    text-align: left;
    font-size: 20px;
  }

  .characteristics-list {
    width: 90%;
    margin: 0 auto;
    align-items: flex-start;
    gap: 20px;
    list-style-type: disc;
  }

  .characteristics-list_item {
    font-size: 16px;
  }
}

.FQA {
  padding: 20px 20px;

  .FQA-container {
    gap: 50px;
  }

  .FQA-title {
    font-size: 26px;
  }
  .FQA-list {
    gap: 40px;
  }

  .FQA-list__item {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    width: 100%;
  }

  .FQA-header {
    padding: 16px;
    align-items: center;
    justify-content: space-between;
  }

  .icon {
    background: var(--red-bn-color);
    border-radius: 50%;
    padding: 15px;
    font-size: 18px;
    color: var(--light-color);
    width: auto;
  }

  .FQ-sub-title {
    font-size: 20px;
    width: 75%;
  }

  .arrow {
    transition: transform 0.3s ease; /* Анімація для стрілки */
    width: 30px;
  }

  .FQ-details {
    padding: 0 20px 0 50px;
    max-height: 0; /* Сховати деталі за замовчуванням */
    overflow: hidden; /* Сховати вміст, що виходить за межі */
    transition: max-height 0.3s ease, opacity 0.6s ease, padding 0.6s ease; /* Перехід для висоти */
    opacity: 0.1;
  }

  .FQ-details.active {
    opacity: 1;
    padding: 0 20px 20px 50px;
    max-height: 400px;
  }
}

.consultation {
  padding: 20px 30px;
  background: var(--bg-less-color);

  .consultation-container {
    padding: 35px 25px;
    gap: 30px;
    background: var(--body-bg-color);
    border-radius: 10px;
  }

  .consultation-title {
    text-align: center;
    font-size: 24px;
  }

  .consultation-sub-title {
    text-align: center;
    font-size: 16px;
  }

  .consultation-form {
    width: 100%;
    gap: 30px;
  }

  .consultation-input-box {
    padding: 20px;
    width: 100%;
    font-size: 18px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
  }

  .consultation-btn {
    background: var(--red-bn-color);
    color: var(--light-color);
    width: 100%;
    margin: 0 auto;
    padding: 16px 0;
    border-radius: 5px;
  }
}

.reviews {
  background: var(--bg-less-color);
  padding: 35px 25px;
  .reviews-container {
    padding: 0;
    gap: 25px;
  }

  .reviews-title {
    font-size: 26px;
    text-align: center;
  }

  .reviews-rating {
    align-self: center;
    display: flex;
    gap: 10px;
  }

  .stars {
    width: 80px;
  }

  .svg-star {
    fill: #e4e42f;
    width: 100%;
  }

  .reviews-sub-title {
    font-size: 18px;
    color: black;
  }

  .green-textarea {
    border-radius: 5px;
    padding: 2px 5px;
    background: var(--green-color);
    color: var(--light-color);
  }

  .reviews-list {
    border-radius: 10px;
    padding: 25px 0;
    background-color: var(--body-bg-color);
    gap: 40px;
  }

  .reviews-list__item {
    .stars {
      padding: 0 25px;
      width: 200px;
    }

    .svg-star {
      fill: #e4e42f;
      width: 100%;
    }
    align-items: flex-start;
    gap: 20px;
  }

  .reviews-person-title {
    padding: 0 25px;
    font-size: 24px;
    text-align: left;
  }

  .review-verification {
    padding: 0 25px;
    gap: 8px;
  }

  .verification-icon {
    width: 15px;
    border: 1px solid #e0e0e0;
    padding: 3px;
    border-radius: 50%;
  }

  .verification-text {
    font-size: 12px;
  }
  .review-text {
    padding: 0 25px;

    text-align: left;
    line-height: 120%;
    font-size: 16px;
  }
}

.order {
  padding: 30px;
  background: var(--bg-less-color);
  .order-container {
    gap: 40px;
  }

  .order-title {
    font-size: 26px;
    text-align: center;
    width: 100%;
  }

  .order-list {
    gap: 40px;
  }

  .order-list__item {
    background: var(--body-bg-color);
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    align-items: flex-start;
    width: 100%;
  }
  .order-icon-box {
    min-width: 35px;
  }

  .order-list__item-box {
    align-items: flex-start;
    gap: 10px;
  }

  .order-list__item-box-title {
    text-align: left;
    font-size: 20px;
  }

  .order-list__item-box-text {
    font-size: 16px;
  }
}

form.main-order-form {
  gap: 30px;
  width: 100%;
  .form-input {
    width: 100%;
    padding: 20px 20px;
    border: 1px solid #e0e0ee;
    border-radius: 5px;
  }

  .button-m {
    background: var(--red-bn-color);
    color: var(--light-color);
    width: 100%;
    margin: 0 auto;
    padding: 16px 0;
    border-radius: 5px;
  }
}

.footer {
  background: var(--bg-less-color);
  padding: 0 40px;

  .footer-container {
    border-radius: 15px;
    background: var(--body-bg-color);
    padding: 15px;
    gap: 20px;
  }
  .footer-box {
    gap: 5px;
  }
}
.video1 {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  h2 {
    font-size: 24px;
    text-align: center;
  }
  .video1_block {
    iframe {
      width: 100%;
      height: 300px;
    }
  }
}