/*------------------------------------------------------------------------------------------------------- Main page */
/* Body */
.main-page{
    background-color: rgb(239, 233, 243);
    overflow-x: hidden;
}


/* нач -------------------------------------------------------------------------- Стрелка вверх */
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 30px;
  background-color: #f8fafb;
  color: rgb(81, 179, 236);
  border: 5px solid rgb(111, 13, 177);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  display: none;
  /* Скрыта по умолчанию */
  z-index: 1000;
  /* Убедитесь, что кнопка поверх остального контента */
}

@media (max-width: 994px) {
  #scroll-to-top{
    bottom: 70px;
    right: 18px;
  }
}

#scroll-to-top:hover {
  background-color: #d7bff3;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid rgb(111, 13, 177);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* кон ------------------------------------------------------------------------------- Стрелка вверх */



/*-------------------------------------------------------------------- Меню */

/* Отступы в меню */
.nav-padding{
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (max-width: 990px) {
    .nav-padding{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* Отступы в меню */

/* Logo */
.i-l-s{
    width: 170px;
    height: 70px;
}

@media (max-width: 990px) {
    .i-l-s{
        width: 120px;
        height: 50px;
    }
}
/* Logo */

/* Размеры, шрифт меню */
.menu-li-f{
    font-family: sans-serif;
    font-size: 19px;
}

.menu-li-f.active{
    border-bottom: 3px solid rgb(111, 13, 177);
    color: rgb(111, 13, 177) !important;
}

.menu-li-ofcanv-f{
    font-family: sans-serif;
    font-size: 19px;
}

.menu-li-ofcanv-f.active{
    color: rgb(111, 13, 177) !important;
}
/* Размеры, шрифт меню */

/* Цвет иконки выбора языка */
.globe-f{
    filter: brightness(0) saturate(100%) invert(14%) sepia(95%) saturate(5209%) hue-rotate(276deg) brightness(70%) contrast(104%);  /* rgb(111, 13, 177) */
}
/*-------------------------------------------------------------------- Меню */


/*-------------------------------------------------------------------- Контент страницы по секциям */

/*-------------------------------------------- Секция top-section */
/* Размеры top-section */
.top-section{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 56px;
}

@media (max-width: 1600px) {
    .top-section{
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

@media (max-width: 1400px) {
    .top-section{
        min-height: 85vh;
    }
}

@media (max-width: 1290px) {
    .top-section{
        min-height: 80vh;
    }
}

@media (max-width: 1200px) {
    .top-section{
        min-height: 75vh;
    }
}

@media (max-width: 1100px) {
    .top-section{
        min-height: 70vh;
    }
}

@media (max-width: 1000px) {
    .top-section{
        min-height: 65vh;
    }
}
/* Размеры top-section */

/* Движение картинки в секции */
/* 1. Определяем анимацию */
@keyframes up-down-float {
    0% {
        /* Начальное положение: без сдвига */
        transform: translateY(0);
    }
    50% {
        /* Середина: сдвиг на 10px вверх */
        transform: translateY(-10px);
    }
    100% {
        /* Конец: возврат в исходное положение */
        transform: translateY(0);
    }
}

/* 2. Применяем анимацию к изображению */
.up-down-animated {
    /* Название анимации, длительность, тип, зацикливание */
    animation: up-down-float 3s ease-in-out infinite;
}
/* Движение картинки в секции */

/*-------------------------------------------- Секция top-section */

/* Фон секций section-aboutUs и section-promotions */
.m-sectoins-font{
    background-color: rgb(230, 218, 240);   
}

/*-------------------------------------------- Секция section-aboutUs */
/* Фон всей секции */
.section-aboutUs{
    background-color: rgb(230, 218, 240);
}

/* Фон карточки с видео */
.m-s-about-c-v-font{
    background-color: rgb(230, 218, 240);
    border: 0;
}

/* Отступы видео внутри карточки */
.m-s-about-v-s{
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-right: 1rem;
    padding-left: 3rem;
}

@media (max-width: 554px) {
    .m-s-about-v-s{
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.m-s-about-v-s-text{
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Размер заголовка во вкладки о нас */
.m-s-about-title{
    padding-top: 1rem;
}

/* нач Размер под заголовком во вкладки о нас */
.m-s-about-title-p-f{
    font-family: cursive;
    font-size: 35px;
    color: rgb(73, 161, 1);
}

.m-s-about-title-p-s{
    font-family: cursive;
    font-size: 35px;
    /* color: rgb(111, 13, 177); */
}
/* кон Размер под заголовком во вкладки о нас */

/* Размер текста во вкладки о нас */
.abUs-t{
    font-size: 20px;
}

@media (max-width: 1400px) {
    .abUs-t{
        font-size: 17px;
    }
}

@media (max-width: 1000px) {
    .abUs-t{
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .abUs-t{
        font-size: 17px;
    }
}
/* Размер текста во вкладки о нас */

/*-------------------------------------------- Секция section-aboutUs */



/*-------------------------------------------- Секция section-offers */

/* Фон всей секции */
.section-offers{
    background-color: rgb(230, 218, 240);
}

/* Слайд шоу в секции */

.m-s-prom-slide{
    margin:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:50vh;
    text-align: center;
    overflow: hidden;
}

.image-container{
 position:relative;
 width:200px;
 height:200px;
 transform-style: preserve-3d;
 transform: perspective(1000px) rotateY(0deg);
 transition: transform 0.7s;
}

.image-container span{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}

.image-container span img{
 position:absolute;
 left:0;
 top:0;
 width:100%;
 border-radius: 5px;
}

.btn-container{
 position:relative;
 width:80%;
}

.btn{
 position: absolute;
 bottom:-80px;
 background-color: rgb(249, 248, 250);
 color:white;
 padding:8px 8px;
 border-radius: 50%;
 border: 3px solid rgb(111, 13, 177);
 cursor: pointer;
}

@media (max-width: 594px) {
    .btn{
        padding:4px 4px;
    }
}

.btn:hover{
 filter:brightness(1.5);
}

#prev{
 left:20%;
}

#next{
 right:20%;
}

.m-s-prom-btn-f{
    filter: brightness(0) saturate(100%) invert(14%) sepia(95%) saturate(5209%) hue-rotate(276deg) brightness(70%) contrast(104%); /* цвет rgb(111, 13, 177) */
    width: 25px;
    height: 25px;
}
/* Слайд шоу в секции */


/*-------------------------------------------- Секция section-offers */




/*-------------------------------------------------------------------- Контент страницы по секциям */

/*------------------------------------------------------------------------------------------------------- Main page */



/*------------------------------------------------------------------------------------------------------- Product list page */

/* Главный контейнер страницы */
.p-l-cont-f{
    padding-top: 20px;
    padding-bottom: 50px;
}
/* Главный контейнер страницы */

/* Title страницы */
.p-l-t-f{
    /* font-family: 'Courier New', Courier, monospace; */
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
    /* font-family: Georgia, 'Times New Roman', Times, serif; */
    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    font-family: cursive;
    /* font-family: fantasy; */
    /* font-family: monospace; */
    /* font-family: sans-serif; */
    /* font-family: serif; */
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    /* font-family: inherit; */
    /* font-family: initial; */
    /* font-family: unset; */
    font-size: 45px;
    color: rgb(111, 13, 177);
}

/* Карточки продуктов */
.p-l-c-f{
    background-color: rgb(239, 233, 243);
    border: 0;
}

.p-l-c-title-f{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 30px;
}

.p-l-c-text-first-f{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px; 
    /* color: rgb(145, 103, 173); */
    color: color-mix(in srgb, rgba(111, 13, 177), transparent 50%);
}

.p-l-c-text-second-f{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px;
    /* color: rgb(143, 78, 187); */
    color: color-mix(in srgb, rgba(111, 13, 177), transparent 35%);
}

.p-l-c-text-third-f{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px;
    color: rgb(111, 13, 177);
}

.p-l-c-text-f{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px;
    color: rgb(111, 13, 177);
}
/* Карточки продуктов */

/* нач -------------------- Открыть модальное окно с фото */
/* Стиль для оверлея/модального окна */
.modal {
    display: none; /* Скрываем по умолчанию */
    position: fixed; /* Фиксированное позиционирование */
    z-index: 1; /* Поверх всего */
    padding-top: 100px; /* Смещение сверху для центрирования */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Включаем прокрутку, если нужно */
    background-color: rgb(0,0,0); /* Цвет затемнения */
    background-color: rgba(0,0,0,0.9); /* Черный с 90% прозрачностью (ТЕНЬ) */
}

/* Стиль для самой картинки внутри модального окна */
.modal-content {
    margin: auto;
    display: block;
    width: 80%; /* Занимает 80% ширины */
    max-width: 700px; /* Максимальная ширина */
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* Анимация (необязательно) */
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* Кнопка закрытия */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
/* кон -------------------- Открыть модальное окно с фото */


/*------------------------------------------------------------------------------------------------------- Product list page */