@media screen and (max-width: 767px) {
        .hide-on-small-screen {
            display: none;
        }
        }

          @media screen and (max-width: 896px) {
        .hide-on-small-screen {
            display: none;
        }
    }

    @media (max-width: 767px) {

    /* Убираем отступы для боковой колонки */
.col-md-3 {
    padding-left: 10;  /* Убираем отступ слева */
    padding-right: 10; /* Убираем отступ справа */
}
        }

    @media (max-width: 896px) {

    /* Убираем отступы для боковой колонки */
.col-md-3 {
    padding-left: 10;  /* Убираем отступ слева */
    padding-right: 10; /* Убираем отступ справа */
}

        }


/* Медиазапрос для экрана с шириной до 898px */
 @media (max-width: 898px) {

     /* Центрируем боковую колонку и уменьшаем её ширину */
     .col-md-3 {
         width: 100% !important; /* Задаём 100% ширину для боковой колонки */
         margin: 0 auto; /* Центрируем колонку */
     }

     /* Центрируем саму sidebar */
     .sidebar {
         padding: 20px;
         background-color: #ffffff;
         border-radius: 8px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         margin-bottom: 20px;
         width: 100%; /* Ширина 100% для контейнера */
     }

     /* Уменьшаем шрифт и выравниваем текст в карточках */
     .sidebar h4,
     .sidebar p,
     .sidebar .rating-text,

     }



     /* Уменьшаем размеры элементов при необходимости */
     .star-rating {
         display: inline-block; /* Заменяем на inline-block для корректного отображения */

     }

     /* Модификация кнопок */
     .btn-container, .btn-container2 {
         display: block;
         text-align: center;
     }

     /* Центрируем табы */
     .nav-tabs {
         display: flex;

         padding-left: 0;
     }

     .nav-tabs .nav-item {
         margin: 0 10px;
     }

     /* Уменьшаем отступы для текста */
     .btn-container p {
         font-size: 14px;
     }

     .product-info {
         margin: 0 auto; /* Выравнивание карточки по центру */
         width: 90%; /* Ограничение ширины карточки (можно настроить под ваш дизайн) */
         max-width: 600px; /* Максимальная ширина карточки */
         display: block; /* Убираем flex-свойства, если они применяются */
     }

     .product-info h2, .product-info .product-ukr-name {
         text-align: center; /* Центрируем текст */
     }

     .row.mt-3 {
         justify-content: center; /* Центрируем изображения в ряду */
     }

     .col-4 {
         max-width: 33%; /* Ограничиваем ширину изображений */
         padding: 5px; /* Отступы между изображениями */
     }

     /* Дополнительные стили для карусели */
     #carouselExampleControls {
         max-width: 100%;
         margin: 0 auto; /* Центрируем карусель */
     }

     .carousel-inner {
         display: block; /* Убираем флексбокс */
     }

 }
 @media (max-width: 898px) {
     .col-md-6 {
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
     }

     .col-md-6 {
         display: block !important; /* Оставляем колонки блочными */
         margin: 0 auto !important;  /* Центрирование блока */
         max-width: 600px !important; /* Ограничиваем максимальную ширину */
         width: 100% !important;     /* Убедимся, что элемент может занять всю ширину */
     }
     .col-md-6 {
     width: 100%;
     max-width: 900px; /* Ограничиваем максимальную ширину */
     min-width: 400px; /* Устанавливаем минимальную ширину */
     margin: 0 auto; /* Центрируем элемент */
 }

 }
 @media (max-width: 898px) {
     .container-fluid {
         display: flex;
         justify-content: center; /* Центрирует дочерние элементы по горизонтали */
         align-items: center; /* Центрирует по вертикали */
     }

     .col-md-6 {
         width: 100%;         /* Ширина колонки 100% */
         max-width: 900px;    /* Ограничиваем максимальную ширину */
         min-width: 400px;    /* Минимальная ширина */
         margin: 0 auto;      /* Центрируем по горизонтали */
     }
 }



            @media (orientation: landscape) and (max-width: 767px) {
    /* Увеличиваем размер карточки рекомендаци и задаем размер видимой области */
.recommended-parfums-container {
    width: 710px; /* Фиксированная ширина видимой области */
    overflow-x: auto; /* Горизонтальная прокрутка */

    flex-wrap: nowrap; /* Запрещаем перенос карточек */
}


    /* Настройка для боковой колонки */
    .sidebar {
        width: 710px !important; /* Задаем фиксированную ширину боковой колонки */
    }

    /* Увеличиваем минимальную высоту описания */
    .tab-content p {
        font-size: 16px !important;
        line-height: 1.5 !important;

    }

    /* Дополнительные отступы для контейнера */
    .container {
        padding: 0px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }


}



           @media (orientation: landscape) and (max-width: 896px) {
    /* Увеличиваем размер карточки рекомендаци и задаем размер видимой области */
.recommended-parfums-container {
    width: 710px; /* Фиксированная ширина видимой области */
    overflow-x: auto; /* Горизонтальная прокрутка */

    flex-wrap: nowrap; /* Запрещаем перенос карточек */
}


    /* Настройка для боковой колонки */
    .sidebar {
        width: 750px !important; /* Задаем фиксированную ширину боковой колонки */
    }

    /* Увеличиваем минимальную высоту описания */
    .tab-content p {
        font-size: 16px !important;
        line-height: 1.5 !important;

    }

    /* Дополнительные отступы для контейнера */
    .container {
        padding: 0px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }


}

@media (width: 1024px) {
    body {
        font-size: 12px; /* Устанавливаем шрифт 12px для всего текста на экранах с шириной 1024px и меньше */
    }

    /* Если нужно применить размер шрифта только к определенным элементам */
    .product-description,
    .sidebar p,
    .sidebar h4 {
        font-size: 12px;
    }
}
 @media (max-width: 767px) {
                        /* Скрытие боковых колонок на мобильных устройствах */
                        .d-none {
                            display: none !important;
                        }
                    }
                     @media (max-width: 932px) {
                        /* Скрытие боковых колонок на мобильных устройствах */
                        .d-none {
                            display: none !important;
                        }
                    }

                      @media (max-width: 912px) {
                        /* Скрытие боковых колонок на мобильных устройствах */
                        .d-none {
                            display: none !important;
                        }
                    }


  @media (max-width: 896px) {
                        /* Скрытие боковых колонок на мобильных устройствах */
                        .d-none {
                            display: none !important;
                        }
                    }
                    /* Стили для боковых колонок */
                    .sidebar {
                        padding: 20px;
                        background-color: #ffffff;
                        border-radius: 8px;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                        margin-bottom: 20px;

                    }

                    .sidebar h4 {
                        margin-bottom: 10px;
                    }

                    .sidebar ul {
                        list-style-type: none;
                        padding-left: 0;
                    }

                    .sidebar ul li {
                        margin-bottom: 10px;
                    }

                    .sidebar ul li a {
                        text-decoration: none;
                        color: black;
                    }

                    .sidebar ul li a:hover {
                        text-decoration: underline;
                    }

                    /* Для экранов с шириной до 768px (мобильные устройства) */
                    @media screen and (max-width: 768px) {
                        #tab-ingredients, #tab-reviews {
                            font-size: 14px !important;
                        }
                    }

                    /* Для экранов с шириной от 769px до 1024px (планшеты) */
                    @media screen and (min-width: 769px) and (max-width: 1024px) {
                        #tab-ingredients, #tab-reviews {
                            font-size: 11px !important;
                        }
                    }

                    /* Для экранов с шириной от 1025px до 1366px (большие планшеты и ноутбуки) */
                    @media screen and (min-width: 1025px) and (max-width: 1366px) {
                        #tab-ingredients, #tab-reviews {
                            font-size: 11px !important;
                        }
                    }

                    /* Для экранов с шириной более 1366px (большие экраны) */
                    @media screen and (min-width: 1367px) {
                        #tab-ingredients, #tab-reviews {
                            font-size: 14px !important;
                        }
                    }






                    @media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
                      .nav-item {
                          font-size: 12px; /* Уменьшаем размер шрифта айпад про*/
                      }
                  }
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .nav-item {
        font-size: 12px; /* Уменьшаем размер шрифта айпад мини */
    }

}



@media screen and (width: 912px) and (height: 1368px) and (orientation: portrait) {
    .nav-item {
        font-size: 9px; /* Уменьшаем размер шрифта для Surface Pro 7 в портретной ориентации */
    }
}



@media screen and (min-width: 430px) and (max-width: 932px) and (orientation: landscape) {
    .nav-item {
        font-size: 9px; /* Уменьшаем размер шрифта айфон про макс */

    }

}






                                                           @media (min-width: 768px) {
                                               .btn-container .btn-group .btn {
                                                   font-size: 14px !important; /* на пк размер кнопки выбора обьема уменьшение шрифта кнопки */
                                                   padding: 5px 10px !important; /* уменьшение отступов */
                                               }
                                           }

                                                           p {
                                                 margin: 0 ;
                                                 padding: 0 ;
                                                 line-height: 1.2 ;
                                             }





				 @media screen and (max-width: 767px) {
        .mt-auto .addToCartBtn {
            font-size: 10px !important; /* Уменьшаем размер шрифта */
            padding: 6px 10px !important; /* Устанавливаем меньшие отступы для кнопки */
            white-space: nowrap !important; /* Запрещаем перенос текста */
            width: 100% !important; /* Кнопка займет всю доступную ширину */
            box-sizing: border-box !important; /* Учитываем отступы в ширине */
        }
    }
  @media screen and (max-width: 896px) {
        .mt-auto .addToCartBtn {
            font-size: 10px !important; /* Уменьшаем размер шрифта */
            padding: 6px 10px !important; /* Устанавливаем меньшие отступы для кнопки */
            white-space: nowrap !important; /* Запрещаем перенос текста */
            width: 100% !important; /* Кнопка займет всю доступную ширину */
            box-sizing: border-box !important; /* Учитываем отступы в ширине */
        }
    }



                    @media (min-width: 912px) { /* Для экранов от 992px и выше (ПК) */
                        .review-form {
                            display: none; /* Скрыть форму */
                        }
                    }
/* Форма всегда видна на мобильных устройствах */
                                        @media (max-width: 932px) {
                                            .review-form {
                                                display: block; /* Показать форму только на мобильных устройствах */
                                            }


                                        }
                                        /* Форма всегда видна на мобильных устройствах */
                                        @media (max-width: 767px) {
                                            .review-form {
                                                display: block; /* Показать форму только на мобильных устройствах */
                                            }


                                        }


    /* Стили для мобильных устройств */
@media screen and (max-width: 767px) {
    .btn-container .btn-group .btn {
        font-size: 12px; /* Уменьшаем размер шрифта */
        padding: 6px 12px; /* Уменьшаем отступы внутри кнопки */
    }

    .btn-container p {
        font-size: 14px; /* Уменьшаем размер шрифта для текста */
    }
}
    /* Стили для мобильных устройств */
@media screen and (max-width: 896px) {
    .btn-container .btn-group .btn {
        font-size: 12px; /* Уменьшаем размер шрифта */
        padding: 6px 12px; /* Уменьшаем отступы внутри кнопки */
    }

    .btn-container p {
        font-size: 14px; /* Уменьшаем размер шрифта для текста */
    }
}
@media screen and (max-width: 375px) {
    .btn-container .btn-group .btn {
        font-size: 12px; /* Еще больше уменьшаем размер шрифта */
        padding: 4px 8px; /* Уменьшаем отступы еще больше */
        display: inline-block; /* Гарантируем, что кнопки останутся в строке */
        margin-right: 5px; /* Отступ между кнопками */
        width: auto; /* Кнопка подстраивается по содержимому */
    }

    .btn-container p {
        font-size: 14px; /* Уменьшаем размер шрифта для текста */
    }
}
/* Стили для мобильных устройств в горизонтальной ориентации (для iPhone 6) */
@media screen and (max-width: 667px) and (orientation: landscape) {
.recommended-parfums-container {
    width: 615px; /* Фиксированная ширина видимой области */
    overflow-x: auto; /* Горизонтальная прокрутка */

    flex-wrap: nowrap; /* Запрещаем перенос карточек */
}
    .btn-container .btn-group .btn {
        font-size: 12px; /* Еще больше уменьшаем размер шрифта */
        padding: 4px 8px; /* Уменьшаем отступы еще больше */
        display: inline-block; /* Гарантируем, что кнопки останутся в строке */
        margin-right: 5px; /* Отступ между кнопками */
        width: auto; /* Кнопка подстраивается по содержимому */
    }
 /* Настройка для боковой колонки */
    .sidebar {
        width: 643px !important; /* Задаем фиксированную ширину боковой колонки */
    }
    .btn-container p {
        font-size: 14px; /* Уменьшаем размер шрифта для текста */
    }
}

    @media (orientation: landscape) and (max-width: 767px) {
    /* Убираем все отступы и паддинги для всего контейнера */
    .container, .container-fluid, .container-sm {
        margin-left: 0 !important; /* Убираем отступ слева */

    }

  @media (orientation: landscape) and (max-width: 896px) {
    /* Убираем все отступы и паддинги для всего контейнера */
    .container, .container-fluid, .container-sm {
        margin-left: 0 !important; /* Убираем отступ слева */

    }

}



/* Применение стилей для элементов внутри блока recommended-parfums-container на экранах до 767px */
    @media (max-width: 767px) {
        .recommended-parfums-container .card-text {
            font-size: 14px !important; /* Устанавливаем размер шрифта 14px для старой цены */
        }

        .recommended-parfums-container .new-price1 {
            font-size: 14px !important; /* Устанавливаем размер шрифта для новой цены */
        }

        .recommended-parfums-container .discount-label {
            font-size: 14px !important; /* Устанавливаем размер шрифта для скидки */
        }

        .recommended-parfums-container #genderg {
            font-size: 14px !important; /* Устанавливаем размер шрифта для gender */
        }

        .recommended-parfums-container .card-link {
            font-size: 14px !important; /* Устанавливаем размер шрифта для названия товара */
        }



       .recommended-parfums-container .discount-label {
        font-size: 8px !important; /* Устанавливаем размер шрифта для скидки на мобильных устройствах */
    }
      /* Применение стилей для элементов внутри блока recommended-parfums-container на экранах до 767px */
    @media (max-width: 896px) {
        .recommended-parfums-container .card-text {
            font-size: 14px !important; /* Устанавливаем размер шрифта 14px для старой цены */
        }

        .recommended-parfums-container .new-price1 {
            font-size: 14px !important; /* Устанавливаем размер шрифта для новой цены */
        }

        .recommended-parfums-container .discount-label {
            font-size: 14px !important; /* Устанавливаем размер шрифта для скидки */
        }

        .recommended-parfums-container #genderg {
            font-size: 14px !important; /* Устанавливаем размер шрифта для gender */
        }

        .recommended-parfums-container .card-link {
            font-size: 14px !important; /* Устанавливаем размер шрифта для названия товара */
        }



       .recommended-parfums-container .discount-label {
        font-size: 8px !important; /* Устанавливаем размер шрифта для скидки на мобильных устройствах */
    }
    }

    @media (max-width: 375px) {
           .ukr-name {
               font-size: 13px !important;  /* Уменьшаем размер шрифта, можно настроить под ваш дизайн */
           }
       }

   @media (max-width: 767px) {
       .card-body .card-link {
           font-size: 14px !important; /* Уменьшаем размер шрифта названия */
       }

       .card-body .custom-font.ukr-name {
           font-size: 14px !important; /* Уменьшаем размер шрифта ukrName */
       }
        @media (max-width: 896px) {
       .card-body .card-link {
           font-size: 14px !important; /* Уменьшаем размер шрифта названия */
       }

       .card-body .custom-font.ukr-name {
           font-size: 14px !important; /* Уменьшаем размер шрифта ukrName */
       }
   }

    /* Уменьшаем шрифт для ukrName на мобильных устройствах, таких как iPhone 6 */
    @media (max-width: 375px) {
        .ukr-name {
            font-size: 13px !important;  /* Уменьшаем размер шрифта, можно настроить под ваш дизайн */
        }
    }

	@media screen and (max-width: 767px) {
     .mt-auto .addToCartBtn {
         font-size: 8px; /* Устанавливаем размер шрифта в 8px для мобильных устройств */
         padding: 8px 12px; /* Устанавливаем внутренние отступы для кнопки */
     }
 }
   /* Стили для мобильных устройств */
 @media screen and (max-width: 896px) {
     .mt-auto .addToCartBtn {
         font-size: 8px; /* Устанавливаем размер шрифта в 8px для мобильных устройств */
         padding: 8px 12px; /* Устанавливаем внутренние отступы для кнопки */
     }
 }
  @media (max-width: 768px) {
         .card.no-shrink {
             width: 10rem;  /* Для мобильных устройств немного уменьшаем ширину карточки */
         }
     }
/* Настройки для маленьких экранов */
@media screen and (max-width: 767px) {
 .card {
     width: 100%; /* Ширина карточки на маленьких экранах */
     height: auto; /* Позволяет карточке изменять высоту в зависимости от контента */
 }

 .row-cols-sm-2 > * {
     flex: 0 0 50%;
     max-width: 50%;
 }

 .card-text {
     white-space: normal; /* Позволяет тексту переноситься */
 }
 /* Настройки для маленьких экранов */
@media screen and (max-width: 896px) {
 .card {
     width: 100%; /* Ширина карточки на маленьких экранах */
     height: auto; /* Позволяет карточке изменять высоту в зависимости от контента */
 }

 .row-cols-sm-2 > * {
     flex: 0 0 50%;
     max-width: 50%;
 }

 .card-text {
     white-space: normal; /* Позволяет тексту переноситься */
 }
}
      /* Настройки для маленьких экранов */
     @media screen and (max-width: 896px) {
         .card {
             width: 50% !important; /* Ширина карточки на маленьких экранах */
             height: auto !important; /* Позволяет карточке изменять высоту в зависимости от контента */
         }

         .row-cols-sm-2 > * {
             flex: 0 0 50% !important;
             max-width: 50% !important;
         }

         .card-text {
             white-space: normal !important; /* Позволяет тексту переноситься */
         }

         .card-link {
             display: block !important; /* Делаем элемент блочным для управления высотой */
             height: 40px !important; /* Фиксированная высота для текста */
             line-height: 20px !important; /* Устанавливаем межстрочный интервал */
             overflow: hidden !important; /* Скрытие переполнения */
             text-overflow: ellipsis !important; /* Обработка переполнения */
             word-wrap: break-word !important; /* Перенос слов */
             white-space: normal !important; /* Разрешаем перенос текста */
             padding-bottom: 5px !important; /* Отступ снизу для дополнительного пространства */
         }
     }

	    /* Уменьшаем шрифт для ukrName на мобильных устройствах, таких как iPhone 6 */
@media (max-width: 375px) {
.ukr-name {
font-size: 13px !important;  /* Уменьшаем размер шрифта, можно настроить под ваш дизайн */
}
}

/* Для мобильных устройств */
@media (max-width: 768px) {
.card.no-shrink {
   width: 10rem;  /* Для мобильных устройств немного уменьшаем ширину карточки */
}
}

 /* Для мобильных устройств */
        @media (max-width: 767px) {
            .card {
                max-width: 125px; /* Уменьшаем размер карточки для мобильных устройств */
            }

            .card-body .card-link {
                font-size: 12px; /* Уменьшаем шрифт для названия на мобильных */
            }

            .card-body .custom-font.ukr-name {
                font-size: 10px; /* Уменьшаем шрифт для украинского названия на мобильных */
            }
             /* Для мобильных устройств */
        @media (max-width: 896px) {
            .card {
                max-width: 150px; /* Уменьшаем размер карточки для мобильных устройств */
            }

            .card-body .card-link {
                font-size: 12px; /* Уменьшаем шрифт для названия на мобильных */
            }

            .card-body .custom-font.ukr-name {
                font-size: 10px; /* Уменьшаем шрифт для украинского названия на мобильных */
            }
        }

		@media (max-width: 768px) {
        .card.no-shrink {
            width: 10rem; /* Для мобильных устройств немного уменьшаем ширину карточки */
        }
    }



 /* Настройки для маленьких экранов */
     @media screen and (max-width: 767px) {
         .card {
             width: 50% !important; /* Ширина карточки на маленьких экранах */
             height: auto !important; /* Позволяет карточке изменять высоту в зависимости от контента */
         }

footer {
    display: flex;
    flex-direction: column;  /* Размещаем элементы по вертикали */
    align-items: center;     /* Центрируем элементы по горизонтали */
    justify-content: center; /* Центрируем по вертикали */
}

footer svg {
    transform: scale(0.8) !important; /* Масштабируем SVG */
    margin-top: 5px;  /* Небольшой отступ сверху, чтобы иконка была под текстом */
}

/* Стили для ссылок с классом .text-gray-300 */
a.text-gray-300 {
    text-decoration: none;  /* Убираем подчеркивание у ссылок */
    color: gray; /* Цвет ссылок по умолчанию */
}

/* Убираем подсветку при наведении */
a.text-gray-300:hover {
    color: white !important; /* Устанавливаем тот же цвет при наведении */
	}

}