@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat';
    list-style: none;
    text-decoration: none;
}
body{
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/** НАЧАЛО ШАПКИ САЙТА */
.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8%;
    z-index: 1001;
}
.menu ul li{
    position: relative;
    float: left;
}
.menu ul li a{
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    padding: 15px;
}
.menu ul li a:hover{
    text-decoration: underline;
    color: #fff;
}
.logo-img{
    width: 14%;
}
.dropdown {
    position: relative; /* Необходимо для позиционирования выпадающего контента */
    display: inline-block;
}
.dropdown-content {
    display: none; /* Изначально скрыто */
    position: absolute; /* Позиционируем относительно родительского элемента */
    background-color: rgba(0, 0, 0, .8); /* Цвет фона */
    min-width: 300px; /* Минимальная ширина меню */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
    z-index: 1; /* Чтобы меню было сверху */
    grid-template-columns: repeat(6, 1fr); /* Четыре равных столбца */
}
.dropdown-content .dropdown-column a{
    width: 100%;
    text-align: center;
    white-space: nowrap; 
    text-align: center;
    font-size: 18px;
}
.h{
    text-align: center;
    color: rgb(238, 0, 91);
}
.dropdown:hover > .dropdown-content{
    display: grid;
    padding: 0; /* Убираем отступы */
    margin: 0; /* Убираем внешние отступы */
}
.menu li {
    margin-right: 20px; /* Отступ между ссылками */
}

.menu li:last-child {
    margin-right: 0; /* Убираем отступ у последнего элемента */
}
.menu-toggle {
    display: none; /* Скрыть чекбокс */
}
.link-checkbox{
    display: none;
}
.menu-button {
    display: none; /* Скрыть кнопку по умолчанию */
    cursor: pointer;
    font-size: 24px;
    color: white;
}
/** КОНЕЦ ШАПКИ САЙТА */
@media (max-width:540px){
    .menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        padding: 5px 5px;
    }
    .menu ul li a{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        font-size: 14px;
        padding: 8px;
    }
    .logo-img{display: none;}
    .dropdown {
        position: relative; /* Необходимо для позиционирования выпадающего контента */
        display: inline-block;
    }
    .dropdown-content {
        display: none; /* Изначально скрыто */
        position: absolute; /* Позиционируем относительно родительского элемента */
        background-color: rgba(0, 0, 0, .8); /* Цвет фона */
        width: 400px; /* Минимальная ширина меню */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
        z-index: 1; /* Чтобы меню было сверху */
        grid-template-columns: repeat(3, 1fr); /* Четыре равных столбца */
        grid-template-rows: repeat(3, auto);
        top: -97px;
        right: 0;
        font-size: 12px;
    }
    .dropdown-content .dropdown-column a{
        font-size: 12px;
    }
    .h{
        text-align: center;
        color: rgb(238, 0, 91);
    }
    .menu-button {
        display: block; /* Показать кнопку на малых экранах */
    }
    .menu {
        display: none; /* Скрыть меню по умолчанию при малых экранах */
    }
    .menu-toggle:checked ~ .menu {
        display: block; /* Показать меню при активном чекбоксе */
        width: 100%; /* Ширина меню */
        position: absolute;
        top: 40px; /* Позиция меню */
    }
    .menu ul {
        flex-direction: column; /* Вертикальное выравнивание элементов меню */
        padding: 0;
        margin: 0;
    }
    .menu ul li {
        width: 100%; /* Полная ширина блока */
    }
    .link-checkbox {
        display: none; /* Скрыть чекбоксы */
    }
    .link-checkbox + label {
        display: inline-block;
        font-size: 18px;
        padding: 6px;
        color: white;
        cursor: pointer;
    }
    .link-checkbox:checked + label {
        background-color: rgba(255, 255, 255, 0.2); /* Подсвечивание активной ссылки */
    }
    #footer p{
        display: none;
    }
    #footer li a{
        color: #fff;
        font-size: 14px;
        padding-left: 30px;
        padding-right: 0px;
        white-space: nowrap; 
    }
    button {
        font-size: 14px; /* Уменьшить размер шрифта для маленьких экранов */
        padding: 8px 12px; /* Уменьшить отступы */
    }
    .carousel {
        margin-top: 30px; /* Убрать отступ сверху на меньших экранах */
    }
    #about-us-info{
        margin-top: 40px;
    }
    #about-us{
        width: 70%;
        height: auto;
    }
    #about-us-abzac{
        font-size: 24px;
        margin-top: 10px;
    }
    #about-us-compani{
        font-size: 16px;
        margin-top: 10px;
    }
    #cooperation-container {
        display: block; /* Убираем грид, чтобы элементы располагались вертикально */
        text-align: center; /* Центрируем текст */
        padding: 0 20px; /* Упрощаем отступы */
        margin-top: 10px;
    }
    #cooperation-img {
        width: 100%; /* Делаем изображение адаптивным */
        height: auto; /* Автоматическая высота для сохранения пропорций */
        border-radius: 5%; 
    }
    #cooperation-text-1 {
        font-size: 28px; /* Уменьшаем размер шрифта */
        margin-top: 20px; /* Добавляем отступ сверху */
    }
    #cooperation-text-2 {
        font-size: 20px; /* Уменьшаем размер шрифта */
        padding: 20px 20px; /* Увеличиваем отступы, чтобы текст не прилипал к краям */
        
    }
    #cooperation-abzac {
        margin-top: 20px;
        font-size: 24px; /* Уменьшаем размер шрифта */
    }
    #cooperation-container-1 {
        flex-direction: column; /* Изменяем направление на вертикальное */
        padding: 20px; /* Упрощаем отступы */
        font-size: 20px; /* Уменьшаем размер шрифта */
    }
    #line {
        height: 2px; /* Уменьшаем толщину линии */
        width: 60%; /* Уменьшаем ширину линии */
        margin: 10px auto; /* Центрируем линию */
    }
    #contact-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        margin-top: 40px;
        margin-bottom: 10px;
    }
    #contact-grid-item {
        background-color: #fff;               /* Цвет фона блока */
        border: 0.1px solid #0c0101;          /* Рамка вокруг блока */
        border-radius: 8px;                   /* Закругленные углы */
        padding: 20px;                        /* Внутренние отступы */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
        line-height: 1.5;
    }
    h2 {
        margin: 0 0 10px;                     /* Отступы для заголовка */
        font-size: 20px;
    }
    #contact-grid-link {
        color: #000;
        text-decoration: underline;
    }
}
@media (max-width:966px){
    #about-us-info{
        margin-top: 60px;
    }
    #about-us-abzac{
        margin-top: 10px;
    }
    #about-us-compani{
        font-size: 20px;
        margin-top: 10px;
    }
    .dropdown-content {
        display: none; /* Изначально скрыто */
        position: absolute; /* Позиционируем относительно родительского элемента */
        background-color: rgba(0, 0, 0, .8); /* Цвет фона */
        min-width: 300px; /* Минимальная ширина меню */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
        z-index: 1; /* Чтобы меню было сверху */
        grid-template-columns: repeat(6, 1fr); /* Четыре равных столбца */
        left: -230px;
    }
    .header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5%;
        z-index: 1001;
    }
    .menu ul li a{
        display: inline-block;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        padding: 12px;
    }
    #contact-grid-container {
        margin-top: 60px;
        margin-bottom: 10px;
    }
    #cooperation-container{
        margin-top: 60px;
    }
    #cooperation-img{
        margin-top: 100px;
    }
    #cooperation-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Центрирование по горизонтали */
        text-align: center;  /* Центрирование текста */
    }
    #cooperation-img {
        margin-top: 20px; /* Отступ сверху для картинки */
        width: 100%; /* Подстроить ширину изображения под экран */
        max-width: 500px; /* Максимальная ширина картинки */
        height: auto; /* Автоматическая высота для сохранения пропорций */
    }
    #cooperation-img {
        width: 500px;
        height: 400px;
        border-radius: 5%;
    }
    #cooperation-text-1 {
        color: #000;
        font-size: 32px;
        font-weight: 600;
        text-align: center;
        
    }
    #cooperation-text-2 {
        color: #000;
        font-size: 22px;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    #footer p{
        color: #fff;
        font-size: 20px;
        white-space: nowrap; 
    }
    #footer a{
        color: #fff;
        font-size: 18px;
        margin: 0 40px;
        white-space: nowrap; 
    }
}
@media (max-width:896px){
    .header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5%;
        z-index: 1001;
    }
    .menu ul li a{
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        padding: 10px;
    }
    .dropdown-content {
        display: none; /* Изначально скрыто */
        position: absolute; /* Позиционируем относительно родительского элемента */
        background-color: rgba(0, 0, 0, .8); /* Цвет фона */
        min-width: 300px; /* Минимальная ширина меню */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
        z-index: 1; /* Чтобы меню было сверху */
        grid-template-columns: repeat(6, 1fr); /* Четыре равных столбца */
        left: -220px;
    }
    #contact-grid-container {
        grid-template-columns: repeat(3, 1fr); /* 2 колонки */
        margin-top: 50px;
        margin-bottom: 10px;
    }
    #cooperation-container{
        margin-top: 44px;
    }
}
@media(max-width: 780px) {
    #footer p{
        color: #fff;
        font-size: 16px;
        white-space: nowrap; 
    }
    #footer a{
        color: #fff;
        font-size: 14px;
        margin: 0 40px;
        white-space: nowrap; 
    }
    .menu ul li a{
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        padding: 8px;
    }
    .dropdown-content {
        display: none; /* Изначально скрыто */
        position: absolute; /* Позиционируем относительно родительского элемента */
        background-color: rgba(0, 0, 0, .8); /* Цвет фона */
        min-width: 300px; /* Минимальная ширина меню */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
        z-index: 1; /* Чтобы меню было сверху */
        grid-template-columns: repeat(3, 1fr); /* Четыре равных столбца */
        left: 0;
    }
    #about-us-abzac{
        font-size: 24px;
    }
    #about-us-compani{
        font-size: 18px;
        padding: 10px 40px;
    }
    #contact-grid-item h2{
        font-size: 20px;
    }
    #cooperation-text-1{
        font-size: 26px;
    }
    #cooperation-text-2{
        font-size: 18px;
        font-weight: 400;
        padding-top: 10px;
    }
    #cooperation-abzac p{
        font-size: 26px;
    }
    #cooperation-container-1 p{
        font-size: 20px;
    }
}
@media screen and (max-width: 677px) and (min-width: 541px){
    .menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        padding: 5px 5px;
    }
    .menu ul li a{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        font-size: 14px;
        padding: 8px;
    }
    .logo-img{display: none;}
    .dropdown {
        position: relative; /* Необходимо для позиционирования выпадающего контента */
        display: inline-block;
    }
    .dropdown-content {
        display: none; /* Изначально скрыто */
        position: absolute; /* Позиционируем относительно родительского элемента */
        background-color: rgba(0, 0, 0, .8); /* Цвет фона */
        width: 400px; /* Минимальная ширина меню */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
        z-index: 1; /* Чтобы меню было сверху */
        grid-template-columns: repeat(3, 1fr); /* Четыре равных столбца */
        grid-template-rows: repeat(3, auto);
        top: -97px;
        font-size: 12px;
    }
    .dropdown-content .dropdown-column a{
        font-size: 12px;
    }
    .h{
        text-align: center;
        color: rgb(238, 0, 91);
    }
    .menu-button {
        display: block; /* Показать кнопку на малых экранах */
    }
    .menu {
        display: none; /* Скрыть меню по умолчанию при малых экранах */
    }
    .menu-toggle:checked ~ .menu {
        display: block; /* Показать меню при активном чекбоксе */
        width: 100%; /* Ширина меню */
        position: absolute;
        top: 40px; /* Позиция меню */
    }
    .menu ul {
        flex-direction: column; /* Вертикальное выравнивание элементов меню */
        padding: 0;
        margin: 0;
    }
    .menu ul li {
        width: 100%; /* Полная ширина блока */
    }
    .link-checkbox {
        display: none; /* Скрыть чекбоксы */
    }
    .link-checkbox + label {
        display: inline-block;
        font-size: 18px;
        padding: 6px;
        color: white;
        cursor: pointer;
    }
    .link-checkbox:checked + label {
        background-color: rgba(255, 255, 255, 0.2); /* Подсвечивание активной ссылки */
    }
    #footer p{
        color: #fff;
        font-size: 14px;
        white-space: nowrap; 
    }
    #footer a{
        color: #fff;
        font-size: 14px;
        margin: 0 20px;
        white-space: nowrap; 
    }
    #about-us-abzac{
        font-size: 24px;
    }
    #about-us-compani{
        font-size: 18px;
        padding: 10px 40px;
    }
    #contact-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        margin-top: 40px;
        margin-bottom: 10px;
    }
    #contact-grid-item {
        background-color: #fff;               /* Цвет фона блока */
        border: 0.1px solid #0c0101;          /* Рамка вокруг блока */
        border-radius: 8px;                   /* Закругленные углы */
        padding: 20px;                        /* Внутренние отступы */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
        line-height: 1.5;
    }
    h2 {
        margin: 0 0 10px;                     /* Отступы для заголовка */
        font-size: 20px;
    }
    #contact-grid-link {
        color: #000;
        text-decoration: underline;
    }
}
/** ОСНОВА САЙТА*/
.carousel {
    position: static; /* Статичное позиционирование */
    width: 100%;
    height: auto; /* Автоматическая высота */
    overflow: hidden;
    margin-top: 55px;
}
.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}
.carousel-images img {
    width: 100%;
    height: auto; /* Поддержка пропорций изображений */
    border-radius: 5px;
}
button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    padding: 10px 15px; /* Увеличены отступы для удобства на маленьких экранах */
    border-radius: 5px;
    font-size: 16px; /* Снижен размер шрифта для лучшего соответствия */
    z-index: 1000;
}
.prev {
    left: 10px;
}
.next {
    right: 10px;
}
/** FOOTER МЕНЮ */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%; 
    margin-top: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center; /* Выровнять элементы по центру вертикально */
    padding: 20px;
    text-align: center; /* Центрировать текст */
}
.footer p{
    color: #fff;
    font-size: 24px;
}
.footer a{
    color: #fff;
    font-size: 20px;
    margin: 0 120px;
}
.footer a:hover{
    color: deeppink;
}
/**О НАС начало*/
.about-us-info{
    margin-top: 90px;
}
.about-us{
    display: block;
    width: 70%;
    height: 70%;
    margin: auto;
}
.about-us-abzac{
    color: #000;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
}
.about-us-compani{
    color: #000;
    line-height: 1.5;
    margin: 20px 20px;
    font-size: 20px;
    font-weight: 500;
}
/** КОНТАКТЫ */
/*.img-world{
    margin-top: 58px;
    width: 100%;
    text-align: center;
}*/
.contact-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    grid-template-rows: repeat(3, auto);    /* 3 строки */
    gap: 20px;                               /* Промежутки между блоками */
    margin-top: 84px;
    margin-left: 18px;
    margin-right: 18px;
    margin-bottom: 10px;
}
.contact-grid-item {
    background-color: #fff;               /* Цвет фона блока */
    border: 0.1px solid #0c0101;                  /* Рамка вокруг блока */
    border-radius: 8px;                      /* Закругленные углы */
    padding: 20px;                           /* Внутренние отступы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
    line-height: 1.5;
}
.contact-grid-item h2 {
    margin: 0 0 10px;                       /* Отступы для заголовка */
    font-size: 26px;
}
.contact-grid-link{
    color: #000;
    text-decoration: underline;
}
/*Сотрудничество начало */
.body-cooperation{
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center; /* Выравниваем по центру горизонтально */
    justify-content: center; /* Выравниваем по центру вертикально */
    min-height: 100vh; /* Занимаем всю высоту окна */
    margin: 0; /* Убираем отступы для body */
}
.cooperation-container {
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cooperation-img {
    width: 600px;
    height: 500px;
    border-radius: 5%;
}
.cooperation-text-1 {
    color: #000;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}
.cooperation-text-2 {
    color: #000;
    font-size: 22px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify; /* Для выравнивания текста по ширине */
}
.cooperation-abzac {
    margin-top: 20px;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #000;
}
.cooperation-container-1 {
    display: flex;
    align-items: center; /* Выравниваем по центру по вертикали */
    padding: 25px 100px;
    color: #000;
    font-size: 26px;
    font-weight: 400;
}
.phone-numbers {
    display: flex;
    flex-direction: column; /* Размещаем номера телефонов в колонку */
}
.cooperation-container-1 p {
    margin: 5px 0; /* Добавляем небольшой отступ сверху и снизу для абзацев */
}
.line {
    width: 2px; /* Толщина линии */
    height: 100px; /* Высота линии */
    background-color: #000; /* Цвет линии */
    margin: 20px; /* Отступы по всем сторонам */
}
.email {
    margin-left: 20px; /* Отступ слева для отделения от линии */
}
/* SHOP PAGES ОКОНЧАТЕЛЬНОЕ */
.product-container {
    display: flex; /* Используем Flexbox */
    flex-wrap: wrap; /* Позволяет карточкам переноситься на новую строку */
    justify-content: center; /* Центрируем карточки по горизонтали */
    gap: 20px; /* Отступ между карточками */
    margin-top: 100px;
    padding-left: 40px;
    margin-bottom: 10px;
}
.product-card {
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    background-color: #fff;
    transition: transform 0.3s;
    width: 250px; 
    height: auto; /* Высота будет автоматически подстраиваться */
}
.product-card img {
    width: auto;
    height: 200px;
}
.product-card h3 {
    margin: 10px 0 0;
}
.product-card h4 {
    font-weight: 400;
}
.product-card:hover {
    transform: scale(1.05);
}
.product-card-1 {
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    background-color: #fff;
    transition: transform 0.3s;
    width: 250px; 
    height: auto; /* Высота будет автоматически подстраиваться */
}
.product-card-1 img {
    width: auto;
    height: 200px;
}
.product-card-1 h3 {
    margin: 10px 0 0;
}
.product-card-1 h4 {
    font-weight: 400;
}
.product-card-1:hover {
    transform: scale(1.05);
}
.product-card-2 {
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    background-color: #fff;
    transition: transform 0.3s;
    width: 250px; 
    height: auto; /* Высота будет автоматически подстраиваться */
}
.product-card-2 img {
    width: auto;
    height: 200px;
}
.product-card-2 h3 {
    margin: 10px 0 0;
}
.product-card-2 h4 {
    font-weight: 400;
}
.product-card-2:hover {
    transform: scale(1.05);
}