* {

	scrollbar-color: #666 #333;

	scrollbar-width: thin;

}



::-webkit-scrollbar {

  width: 10px;

}



::-webkit-scrollbar-track {

  background-color: #333;

}



::-webkit-scrollbar-thumb {

  background-color: #666;

  border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

  background-color: #999;

}



body {

  margin: 0;

  padding: 0;

  font-family: Arial, sans-serif;

  color: #000;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  position: relative;

}



header {

  background-color: #181818;

  padding: 20px;

  text-align: center;

  color: white;

}



header nav ul li i {

  color: white;

  margin-right: 5px;

}



.right {

  margin-left: auto;

}



.dropdown {

  position: relative;

  display: inline-block;

}



.dropbtn {

  background-color: #4CAF50;

  color: white;

  padding: 10px;

  border: none;

  cursor: pointer;

  position: relative;

  overflow: hidden;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

}



.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}



.dropdown-content a:hover {

  background-color: #f1f1f1;

}



.dropdown:hover .dropdown-content {

  display: block;

}



/* Media queries */

@media screen and (max-width: 767px) {

  .banner {

    padding: 135px;

  }

  

  .banner h1 {

    font-size: 26px;

  }

  

  .banner p {

    font-size: 20px;

  }

  

  section h2 {

    font-size: 28px;

  }

  

  section p {

    font-size: 16px;

  }

}



@media screen and (min-width: 768px) and (max-width: 1023px) {

  .banner {

    padding: 180px;

  }



  .banner h1 {

    font-size: 40px;

  }



  .banner p {

    font-size: 20px;

  }



  section h2 {

    font-size: 32px;

  }



  section p {

    font-size: 18px;

  }

}



@media screen and (min-width: 1024px) {

  .container {

    padding: 20px 40px;

  }



  .banner {

    padding: 250px;

  }



  .banner h1 {

    font-size: 48px;

  }



  .banner p {

    font-size: 24px;

  }



  section h2 {

    font-size: 36px;

  }



  section p {

    font-size: 18px;

  }

}



/* Social icons styles */

.social-icons {

  text-align: center;

}



.social-icon {

  font-size: 30px;

  margin-left: 10px;

  color: white;

  margin-top: 10px;

  transition: color 0.3s;

}



.social-icon-whatsapp:hover {

  color: lime;

}



.social-icon-vk:hover {

  color: dodgerblue;

}

.social-icon-telegram:hover {

  color: dodgerblue;

}


.social-icon-ozon:hover {

  color: coral;

}



.social-icon-master:hover {

  color: gold;

}



.prev-button,

.next-button {

/*  display: inline-block;

  background-color: #181818;

  color: white;

  border: none;

  padding: 10px 20px;

  margin: 0 5px;

  cursor: pointer;

  font-size: 15px;
*/

  background: none;
  border: 2px solid #181818;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 20px;
  font-size: 15px;
  transition: all 0.3s ease;
}

.prev-button:hover, 
.next-button:hover {
  background: #181818;
  color: white;
}

.fade-in {

  animation: fade-in-animation 0.5s ease-in;

}



@keyframes fade-in-animation {

from {

  opacity: 0;

}

to {

  opacity: 1;

}

}



/*.panel-body {

  background-color: #fff;

  position: absolute;

  right: 0;

  z-index: -1;

  background-color: #fff;

  width: 960px;

  height: 100%;

  max-height: 2500px;

}*/



.product-image-overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7);

  z-index: 9999;

  text-align: center;

}


.product-image-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    opacity: 0;
    animation: fadeInModal 0.5s ease-in-out forwards;
    max-width: 90%; /* Ограничиваем максимальную ширину модального окна */
    max-height: 90%; /* Ограничиваем максимальную высоту модального окна */
    overflow: hidden; /* Скрываем переполнение */
}

.product-image-modal img {
    max-width: 100%; /* Изображение не будет шире модального окна */
    max-height: 100%; /* Изображение не будет выше модального окна */
    width: auto; /* Автоматическая ширина для сохранения пропорций */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    object-fit: contain; /* Сохраняем пропорции изображения и помещаем его в контейнер */
}

/* Адаптация под мобильные устройства */
@media (max-width: 600px) {
    .product-image-modal {
        max-width: 95%; /* Увеличиваем ширину для мобильных устройств */
        max-height: 95%; /* Увеличиваем высоту для мобильных устройств */
    }
}

/* Адаптация под планшеты */
@media (min-width: 601px) and (max-width: 1024px) {
    .product-image-modal {
        max-width: 80%; /* Уменьшаем ширину для планшетов */
        max-height: 80%; /* Уменьшаем высоту для планшетов */
    }
}


@keyframes fadeInModal {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



.close-image-modal {

  position: absolute;

  top: 10px;

  right: 10px;

  cursor: pointer;

  font-size: 24px;

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}



.product-image-modal:hover .close-image-modal {

  opacity: 1;

}

		

.product-container {

  opacity: 0;

  transition: opacity 0.5s ease-in-out;

}



.product-container.fade-in {

  opacity: 1;

}



.product-link {

  background-color: #4caf50;

  color: #fff;

  border-radius: 8px;

  padding: 10px 20px;

  font-size: 16px;

  cursor: pointer;

  text-decoration-line: none;

}



.product-link:hover {

  background-color: #45a049;

}



.search-container {

  position: relative;

  margin-bottom: 20px;

}



.search-input {

  padding: 10px 40px 10px 10px;

  border: 1px solid #676774;

  border-radius: 5px;

  font-size: 16px;

}



.page-indicator {

  display: inline-block;

  text-align: center;

  margin: 10px 0;

}



.panel {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  border-radius: 10px;

  padding: 20px;

  color: #fff;

  font-weight: bold;

  text-align: center;

  background-color: rgba(0, 0, 0, 0.7);

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}



.panel.success {

  background-color: #4CAF50;

}



.panel.error {

  background-color: #f44336;

}



.overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.3);

  z-index: 9998;

  display: none;

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}



.logo {

  color: #fff;

  font-size: 36px;

  font-weight: bold;

  text-transform: uppercase;

  letter-spacing: 3px;

  margin-bottom: 10px;

}



nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



nav ul li {

  display: inline;

  margin-right: 10px;

}



nav ul li a {

  color: #fff;

  text-decoration: none;

  font-size: 18px;

  position: relative;

}



nav ul li a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 100%;

  height: 2px;

  background-color: #fff;

  transform: scaleX(0);

  transition: transform 0.3s ease-in-out;

}



nav ul li a:hover::after {

  transform: scaleX(1);

}



.banner {

  background: no-repeat;

  background-size: cover;

  background-position: center;

  /* padding: 100px; */

  text-align: center;

  color: #fff;

}



.banner h1 {

  font-size: 48px;

  font-weight: bold;

  margin-bottom: 20px;

}



.banner p {

  font-size: 24px;

}



main {

  flex: 1;

  padding: 20px 0;

}



section {

  padding: 40px 0;

  text-align: center;

  padding-bottom: 30vb;

}



section h2 {

  font-size: 36px;

  margin-bottom: 10px;

}



section p {

  font-size: 18px;

}



.product-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: flex-start;

}



.availability {

  color: #fff;

  font-size: 14px;

  line-height: 26px;

  padding: 4px;

  border-radius: 5px;

  margin-bottom: 10px;

}



.availability.available {

  background-color: #4CAF50;

}



.availability.order {

  background-color: #f44336;

}



.price-filter {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 15px;

}



#price-filter-form label {

  margin-right: 10px;

}



#price-filter-form input[type="number"] {

  width: 120px;

  padding: 5px;

  margin-bottom: 10px;

}



#price-filter-form {

  margin-top: 10px;

}



::-webkit-scrollbar {

  width: 10px;

}



::-webkit-scrollbar-track {

  background-color: #333;

}



::-webkit-scrollbar-thumb {

  background-color: #666;

  border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

  background-color: #999;

}



::-webkit-scrollbar-button {

  display: none;

}



.product {

  position: relative;

  width: 100%;

  max-width: 220px;

  height: 325px;

  margin: 0 10px 20px;

  padding: 15px;

  background-color: #fff;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  transition: transform 0.3s ease;

}



.product:hover {

  transform: scale(1.05);

}



.product-image {

  width: 100%;

  overflow: hidden;

  border-radius: 10px 10px 10px 10px;

  /*margin-bottom: 10px;*/

}



.product-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.product-details {

  text-align: center;

  margin-top: 20px;

}



.product-details h3 {

  font-size: 16px;

  margin-bottom: 20px;

  color: #333;

}



.product-details p {

  font-size: 16px;

  margin-bottom: 20px;

  color: #777;

}



.product-price {

  font-weight: bold;

  color: #4CAF50;

  font-size: 16px;

}



.product.pinned {

  border: 2px solid #4CAF50;

}



.product.discounted {

  background-color: #FFFF99;

}



.product.pinned.discounted {

  border: 2px solid #4CAF50;

}



.old-price {

  text-decoration: line-through;

  color: #888;

  margin-right: 10px;

}



.new-price {

  color: #4CAF50;

}



.product-status {

  position: absolute;

  top: 10px;

  right: 10px;

  padding: 5px 10px;

  background-color: #4CAF50;

  color: #fff;

  font-weight: bold;

  border-radius: 5px;

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}



.product-status p {

  margin: 0;

}



.product-status.available {

  background-color: #4CAF50;

}



.product-status.order {

  background-color: #f44336;

}



.product:hover .product-status {

  opacity: 1;

}



.buy-button {

  display: block;

  padding: 10px;

  background-color: #3498db; /* Голубой цвет по умолчанию */

  color: white;

  border: none;

  border-radius: 5px;

  font-size: 14px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



.product:hover .buy-button {

  background-color: #2980b9; /* Изменяем цвет кнопки при наведении */

}



.footer {

  background-color: #181818;

  padding: 20px;

  text-align: center;

}



.footer-content {

  display: flex;

  justify-content: center;

  align-items: center;

}



.logo_footer {

  color: #fff;

  font-size: 16px;

  font-weight: bold;

  text-transform: uppercase;

  letter-spacing: 3px;

  padding-bottom: 30px;

  margin-bottom: 10px;

}



.show {

  display: block;

}









/* Reviews section */

/*#reviews {

    padding: 40px 20px;

    background-color: #f9f9f9;

}



.review-container {

    display: flex;

    overflow-x: hidden;

    scroll-behavior: smooth;

    gap: 20px;

    padding: 20px 0;

}

.review-card {

    min-width: 300px;

    background: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}

.review-user {

    display: flex;

    align-items: center;

    margin-bottom: 15px;

}

.review-avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    margin-right: 15px;

}

.review-stars {

    color: #ffd700;

    margin-bottom: 10px;

}

.review-photos {

    display: flex;

    gap: 10px;

    margin-top: 15px;

}

.review-photo {

    width: 80px;

    height: 80px;

    object-fit: cover;

    border-radius: 5px;

    cursor: pointer;

}

.review-nav {

    text-align: center;

    margin-top: 20px;

}

.review-nav button {
  background: none;
  border: 2px solid #181818;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 20px;
  font-size: 15px;
  transition: all 0.3s ease;
}

.review-nav button:hover {

    background: #181818;

    color: white;

}*/

/* Reviews section */

/* Reviews section */

#reviews {
    padding: 40px 20px;
    background-color: #f9f9f9;
}

.review-container {
    display: flex;
    flex-direction: column; /* Вертикальное направление */
    gap: 20px; /* Отступ между отзывами */
    padding: 20px 0;
}

.review-card {
    max-width: 650px; /* Установите максимальную ширину блока отзыва */
    width: 100%; /* Блок будет занимать всю доступную ширину контейнера */
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Центрирование блока */
}

.review-user {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.review-stars {
    color: #ffd700;
    margin-bottom: 10px;
}

.review-photos {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.review-photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
}

.review-nav {
    text-align: center;
    margin-top: 20px;
}

.review-nav button {
    background: none;
    border: 2px solid #181818;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 20px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.review-nav button:hover {
    background: #181818;
    color: white;
}

/* Адаптация под мобильные устройства */
@media (max-width: 600px) {
    .review-card {
        max-width: 90%; /* Увеличьте ширину для мобильных устройств */
        padding: 15px; /* Уменьшите отступ внутри блока отзыва */
    }

    .review-avatar {
        width: 40px; /* Уменьшите размер аватара */
        height: 40px; /* Уменьшите размер аватара */
        margin-right: 10px; /* Уменьшите отступ справа от аватара */
    }

    .review-nav button {
        padding: 6px 15px; /* Уменьшите отступы для кнопок */
        font-size: 14px; /* Уменьшите размер шрифта для кнопок */
    }
}