body {
    font-family: 'Exo 2', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #eef3e3;
    margin: 0;
    padding: 0;

    /* Запретить горизонтальную прокрутку */
    overflow-x: hidden;

    /* Рекомендуется добавить, чтобы body занимал всю высоту */
    min-height: 100vh;
    box-sizing: border-box;
}


/* Устанавливаем box-sizing для всех элементов */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Запретить горизонтальную прокрутку для html */
html {
    overflow-x: hidden;
}

/* Прелоадер на весь экран */
#preloader {
  position: fixed;
  inset: 0;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.sparks {
  position: relative;
  width: 100px;
  height: 100px;
  background: transparent;
}

.spark {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fffacd 0%, transparent 80%);
  border-radius: 50%;
  filter: drop-shadow(0 0 8px #ffec66);
  opacity: 0;
  animation: spark-move 1.5s linear infinite;
}

/* Разные направления и задержки искр */
.spark1 {
  top: 50%; left: 50%;
  animation-delay: 0s;
  animation-direction: normal;
}
.spark2 {
  top: 50%; left: 50%;
  animation-delay: 0.3s;
  animation-direction: normal;
}
.spark3 {
  top: 50%; left: 50%;
  animation-delay: 0.6s;
  animation-direction: reverse;
}
.spark4 {
  top: 50%; left: 50%;
  animation-delay: 0.9s;
  animation-direction: reverse;
}
.spark5 {
  top: 50%; left: 50%;
  animation-delay: 1.2s;
  animation-direction: normal;
}

@keyframes spark-move {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(calc(var(--x) * 30px), calc(var(--y) * 30px)) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) * 50px), calc(var(--y) * 50px)) scale(0.5);
  }
}

/* Задаём направления движение через кастомные свойства */
.spark1 { --x: 1; --y: -1; }
.spark2 { --x: -1; --y: 1; }
.spark3 { --x: 1; --y: 1; }
.spark4 { --x: -1; --y: -1; }
.spark5 { --x: 0; --y: 1; }



.border-bottom {
    border-bottom: none !important;
}


.favicon-tooltip-content {
    position: absolute;
    bottom: 110%; /* над иконкой */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(4, 174, 199, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.favicon-tooltip-wrapper:hover .favicon-tooltip-content {
    opacity: 1;
    pointer-events: auto;
}


header {
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    height: 99px;
}

.nav {
    text-transform: capitalize;
    margin-right: 0;
}

.paddings {
    display: flex !important;
    flex-basis: auto;
    padding-left: 55px !important;
}

.breadcrumb {
    padding: 15px 0 5px;
    font-size: 0.9rem;
    margin-left: 0; /*убрал тк смещался бргкр*/
    /*text-align: center;*/
    text-transform: uppercase;
    margin-bottom: 0;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.98));
}

.breadcrumb li::after {
    content: "›";
    margin-left: 0.23rem;
    color: #666;
}

.breadcrumb li:last-child::after {
    content: "";
}

.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}


/* Контейнер внутри header */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}

/* Логотип */
.logo a {
    color: #95e6ff;
    font-size: 1.75rem;
    font-weight: 700;
    text-decoration: none;
}

/* Навигация */
nav .nav-link {
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    transition: color 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* При наведении */
nav .nav-link:hover {
    color: #95e6ff;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* Активный пункт меню */
nav .nav-link.active {
    color: #95e6ff;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    cursor: default; /* чтобы не было эффекта "руки" */
    pointer-events: none; /* запрет клика по активному пункту */
}

nav .nav-linkss {
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    transition: color 0.3s ease, filter 0.3s ease;
    text-decoration: none;
    position: relative;
    top: 8px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* При наведении */
nav .nav-linkss:hover {
    color: #95e6ff;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* Активный пункт меню */
nav .nav-linkss.active {
    color: #95e6ff;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    cursor: default; /* чтобы не было эффекта "руки" */
    pointer-events: none; /* запрет клика по активному пункту */
    position: relative;
    top: 8px;
}

.about-company {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(66deg, #f2f5f0, #8e8ca2);
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    display: block;
    left: 0;
    position: relative;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

.about-description {
    flex: 4;
    /*filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));*/
}

.company-name {
    margin-bottom: 10px;
    font-size: 1.8rem;
    color: #333;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.55));
}

.product-block-name a {
    margin-bottom: 10px;
    font-size: 1.8rem;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.55));
}

.company-text {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #000;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .about-company {
        flex-direction: column;
        padding: 10px;
    }

    .about-image, .about-description {
        flex: none;
        /*margin: 0 33px;*/
        display: block;
        width: 100%;
    }

    .about-image img {
        width: 150px;
        height: 150px;
        border-radius: 8px;
        /*display: block;*/
        left: 100px;
        position: relative;
        display: none;
    }

    .company-name {
        font-size: 1.5rem;
        margin-top: 15px;
        margin-left: 13px;
    }
}

/*.photo-banner {*/
/*    !*width: 100vw;*!*/
/*    min-height: 400px;*/
/*    background: url('../img/aironmaster_video_lazer.mp4') center/cover no-repeat;*/
/*    color: white;*/
/*    position: relative;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    text-align: center;*/
/*    padding: 2rem 0;*/
/*    box-sizing: border-box;*/
/*    overflow: hidden;*/
/*}*/

.photo-banner {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
    box-sizing: border-box;
}

.photo-banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* чтобы видео было фоном */
}


.photo-banner .container {
    z-index: 2;
    position: relative;
}


.photo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 3, 117, 0.5); /* Затемнение фона */
    z-index: 1; /* Поверх фона, под контентом */
}

.photo-banner-content {
    position: relative;
    z-index: 2; /* Поверх затемнения */
    max-width: 800px;
    margin: 0 auto;
}

.photo-banner a {
    color: whitesmoke;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.photo-banner a:hover,
.photo-banner a:focus {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}


.photo-banner h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

.photo-banner p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-transform: uppercase;
    color: whitesmoke;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.photo-description {
    padding: 0.5rem 1rem 1rem;
    font-size: 0.9rem;
    color: #555;
}


.photo-row {
    display: flex;
    gap: 10px; /* между фото */
    margin-bottom: 1.5rem;
}

.photo-item {
    position: relative;
    /*width: auto!important; !* чтобы совпадало с img *!*/
    height: 170px !important;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden; /* чтобы описание не выходило за границы */
    transition: transform 0.3s ease;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    display: flex;
}

.photo-item-product {
    position: relative;
    width: 100%; /* лучше контролировать ширину через родителя */
    height: 155px !important; /* фиксированная высота */
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));

    display: contents;
    flex-direction: column;
    justify-content: center; /* вертикальное центрирование содержимого */
    align-items: center; /* горизонтальное центрирование */
    box-sizing: border-box;
    padding: 10px; /* по желанию */
}

/* Ограничиваем размер изображений внутри */
.photo-item-product img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 6px;
    height: 90px;
    width: 100px;
}

.photo-item-product img {
    position: relative;
}

/* Если внутри есть текст — ограничиваем высоту и скрываем переполнение */
.photo-item-product .text-content {
    max-height: 40px; /* подберите под ваш дизайн */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 6px;
}

.fixed-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* ограничение в 3 строки */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* высота 3 строк (примерно 3 * 1.5em line-height) */
    line-height: 1.3em; /* задайте нужный line-height */
    word-break: break-word; /* чтобы переносить длинные слова */
}


.photo-item-mini {
    position: absolute;
    top: 77%; /* по вертикали середина родителя */
    left: 20px; /* прижать к левому краю */
    transform: translateY(-50%); /* сдвинуть вверх на половину своей высоты для точного центрирования */
    width: 17% !important;
    height: 150px !important;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}


.photo-item-banners {
    position: relative;
    width: auto !important; /* чтобы совпадало с img */
    height: 130px !important;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden; /* чтобы описание не выходило за границы */
    transition: transform 0.3s ease;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

@media (min-width: 840px) and (max-width: 848px) {
    .photo-item {
        position: relative;
        width: auto !important;
        height: 138px !important;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    }

    .photo-item img {
        width: 100%;
        height: 140px !important;
        object-fit: cover;
        display: block;
        border-radius: 8px;
        vertical-align: middle;
    }

    .photo-item-banners {
        position: relative;
        width: auto !important;
        height: 138px !important;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    }

    .photo-item-banners img {
        width: 100%;
        height: 140px !important;
        object-fit: cover;
        display: block;
        border-radius: 8px;
        vertical-align: middle;
    }
}


.photo-item:hover {
    transform: scale(1.05);
    z-index: 1; /* чтобы при увеличении фото не перекрывалось соседними */
}

.photo-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    /*border-radius: 8px;*/
    vertical-align: middle;
}

/*.photo-item-mini:hover {*/
/*  transform: scale(2.05);*/
/*  z-index: 1; !* чтобы при увеличении фото не перекрывалось соседними *!*/
/*}*/

.photo-item-mini img {
    width: 20%;
    height: auto;
    object-fit: cover;
    display: block;
    /*border-radius: 8px;*/
    vertical-align: middle;
}

.photo-item-banners:hover {
    transform: scale(1.05);
    z-index: 1; /* чтобы при увеличении фото не перекрывалось соседними */
}

.photo-item-banners {
    position: relative;
    width: auto !important;
    height: 130px !important;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    transition: transform 0.3s ease;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));

    /* Центрируем содержимое по вертикали и горизонтали */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px; /* немного внутреннего отступа */
    box-sizing: border-box;
}

.photo-item-banners img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: block;
    height: 65px !important;
    object-fit: cover;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
    cursor: pointer;
    margin: 0 auto;
    position: static;
    left: auto;
    margin-bottom: 40px;

    /* Чтобы изображение не растягивалось слишком широко */
    max-width: 100%;
}

.photo-description-banners {
    position: absolute;
    bottom: 10px; /* чуть выше от нижнего края */
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: linear-gradient(144deg, #dcdfdc, #dddddd21, #0198d44d);
    color: #000000;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 5px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    width: auto;
    text-transform: uppercase;
    max-width: 90%;
}


/* Описание внутри фото */
.photo-description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.5); /* полупрозрачный чёрный фон */
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}


.photo-banner .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(270deg, #0297d3, #480576, #911bff);
    background-size: auto;
    background-size: 600% 600%;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    filter: drop-shadow(0 0 5px rgb(36, 78, 165));
    transition: background-position 3s ease, filter 0.3s ease;
    animation: pulseGlow 3s ease-in-out infinite;
    cursor: pointer;
    user-select: none;
    border-color: #7818cf;
}


/* Анимация плавного движения градиента */
.photo-banner .btn:hover {
    background-position: 100% 0;
    filter: drop-shadow(0 0 10px rgba(155, 48, 255, 0.9));
    border-color: #7b15d7;
}

/* Мерцание (пульсация) */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 5px rgba(155, 48, 255, 0.7));
    }
    50% {
        opacity: 0.85;
        filter: drop-shadow(0 0 15px rgba(155, 48, 255, 1));
    }
}


.product .btn {
    display: inline-flex;
    align-items: end;
    justify-content: center;
    background: linear-gradient(270deg, #0297d3, #480576, #911bff);
    background-size: auto;
    background-size: 600% 600%;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    border-color: #8a1af2;
    font-weight: 600;
    filter: drop-shadow(0 0 5px rgb(36, 78, 165));
    transition: background-position 3s ease, filter 0.3s ease;
    animation: pulseGlow 3s ease-in-out infinite;
    cursor: pointer;
    user-select: none;
}


/* Анимация плавного движения градиента */
.product .btn:hover {
    background-position: 100% 0;
    filter: drop-shadow(0 0 10px rgba(155, 48, 255, 0.9));
    border-color: #1180b2;
}

/* Мерцание (пульсация) */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 5px rgba(155, 48, 255, 0.7));
    }
    50% {
        opacity: 0.85;
        filter: drop-shadow(0 0 15px rgba(155, 48, 255, 1));
    }
}


.breadcrumps {
    padding: 0.4rem 1.1rem;
    background: linear-gradient(66deg, #f0f7e6, #acabbc);
    color: #2b409c;
    /*box-sizing: border-box;*/
    /*text-align: center;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: baseline;*/
    /*justify-content: center;*/
    /*min-height: 50px;*/
    /*height: 15px;*/
}

#breadcrumps {
    padding: 0 0;
    background: linear-gradient(66deg, #f0f7e6, #8e8ca2);
    color: #2b409c;
    box-sizing: border-box;
    text-align: center;
    display: list-item;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    min-height: 50px;
    height: 20px;
}

#category-burg {
    /*padding: 2.5rem 1.5rem;*/
    background: linear-gradient(66deg, #f4ffe3, #8e8ca2);
    color: #2b409c;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    min-height: 50px;
    height: 20px;
}

.category-burger {
    width: 30px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    margin-left: 20px;
    z-index: 10;
}

.category-burger .bar {
    height: 4px;
    background-color: #4a0073;
    border-radius: 2px;
    transition: all 0.3s ease;
    margin-top: 4px;
}

/* Анимация в крестик при активном состоянии */
.category-burger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.category-burger.active .bar:nth-child(2) {
    opacity: 0;
}

.category-burger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Меню категорий */
.category-menu {
    position: absolute;
    top: 190px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 0;
    left: 60px;
    width: 250px;
}

/* Скрываем меню по умолчанию */
.category-menu[hidden] {
    display: none;
}

/* Список категорий */
.category-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-menu ul li {
    margin: 0;
    text-align: left;
}

.category-menu ul li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 4px solid transparent;
}

/* Ховер и активный пункт */
.category-menu ul li a:hover,
.category-menu ul li a.active {
    background: linear-gradient(90deg, #52a5ff, #0099d5, #3f0e66);
    color: #fff;
    border-left-color: #0056b3;
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
    #category-burg {
        width: 100%;
    }

    .category-menu {
        width: 65%;
        top: 190px;
        left: 60px;
        border-radius: 0;
    }
}


#screw-spiral {
    /*width: 100vw; !* секция на всю ширину окна *!*/
    padding: 2.5rem 1.5rem;
    background: linear-gradient(66deg, #ffffff, #cbcbd3);
    color: #e0d9f1;
    box-sizing: border-box;
    text-align: center; /* центрируем текст */
    display: inherit;
    flex-direction: column;
    align-items: center; /* центрируем по горизонтали */
    justify-content: center; /* центрируем по вертикали, если нужно */
    min-height: 200px; /* можно задать минимальную высоту */
}

#screw {
    /*width: 100vw; !* секция на всю ширину окна *!*/
    padding: 2.5rem 1.5rem;
    background: linear-gradient(66deg, #ffffff, #cbcbd3);
    color: #e0d9f1;
    box-sizing: border-box;
    /*text-align: center; !* центрируем текст *!*/
    display: flex;
    flex-direction: column;
    align-items: center; /* центрируем по горизонтали */
    justify-content: center; /* центрируем по вертикали, если нужно */
    min-height: 200px; /* можно задать минимальную высоту */
}

#screw-img {
    /* Секция с фоном на всю ширину */
    padding: 2.5rem 1.5rem;
    color: #e0d9f1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* центрируем по горизонтали */
    justify-content: center; /* центрируем по вертикали */
    min-height: 200px; /* минимальная высота */

    /* Добавляем фон с фотографией */
    background-image: url('../img/contacts.jpeg'); /* укажите здесь правильный путь к фото */
    background-repeat: no-repeat; /* не повторять фон */
    background-position: center center; /* центрировать изображение */
    background-size: cover; /* масштабировать изображение, чтобы покрыть весь блок */
    /* Опционально: фиксировать фон при скролле */
    /* background-attachment: fixed; */
}

#screw-img {
    position: relative;
    /* остальные свойства как выше */
    background-image: linear-gradient(rgb(243 243 243 / 99%), rgb(208 208 218 / 92%)), url(../img/steal_banner.jpg);
}

#screw-img p {
    margin: 0.3rem 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #313131;
    /* background: #d1d1d12e; */
    border-radius: 7px;
    padding: 0 10px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}


.screw-margin-li li {
    margin-left: 30px !important;
}

.screw-margin {
    margin-left: 30px !important;
    max-width: 1380px;
    margin-top: 40px;
}

.screw-margin-desc-two p {
    position: relative;
    right: 15px;
    margin-right: 0 !important;
    bottom: 22px;

}

.bg-category {
    background: linear-gradient(66deg, #f0f7e6, #8e8ca2);

}

.content-wrapper a[href^="tel:"] {
    color: whitesmoke;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.content-wrapper a[href^="tel:"]:hover,
.content-wrapper a[href^="tel:"]:focus {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.gradient {
    height: 25px; /* adjust height as needed */
    background: linear-gradient(92deg, #f3f3f3, #8b8b9e) !important;
    width: 100%;
}

.gradient-adventure {
    height: 25px; /* adjust height as needed */
    background: linear-gradient(92deg, #fffefe, #8b8b9e) !important;
    width: 100%;
}

.first-gradient {
    height: 25px; /* adjust height as needed */
    background: linear-gradient(92deg, #ffffff, #8b8b9e) !important;
    width: 100%;
}

.gradient-advertisement {
    height: 4px;
    border-bottom: 2px solid #cacaca;
    width: 100%;
    margin-bottom: 13px;
    margin-top: 21px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.44));
}

.gradient-brcr {
    height: 25px; /* adjust height as needed */
    background: linear-gradient(92deg, #f2f5f0, #bdbdcc) !important;
    width: 100%;
}

.gradient-product-detail {
    height: 25px;
    background: linear-gradient(92deg, #ffffff, #d0d0d8) !important;
    width: 100%;
}

.gradient-contacts {
    height: 60px; /* adjust height as needed */
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    width: 100%;
}

.advertisement-bg {
    background: linear-gradient(144deg, #cacaca, #ffffff, #cacaca);
}


#screw-spiral .content-wrapper {
    /* ваши текущие стили */
    max-width: 700px;
    width: 100%;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    background: linear-gradient(144deg, #dce1d9, #9a98a9, #0198d4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

#screw-spiral .content-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Внутренний контейнер для ограничения ширины */
#screw-spiral .content-wrapper {
    /*max-width: 100%;*/
    width: 100%;
    height: 300px; /* фиксированная высота */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(90, 26, 126, 0.3);
    padding: 1rem 1.5rem;
    position: relative;
    margin: 0 auto 30px auto;

    display: grid; /* flex контейнер */
    flex-direction: column; /* расположение по вертикали */
    justify-content: space-between; /* равномерное распределение по высоте */
    align-items: stretch; /* растянуть элементы по ширине */
    overflow: hidden; /* скрыть выходящий контент, если есть */
}

#screw-spiral .content-wrapper > * {
    flex-shrink: 0; /* запретить сжиматься элементам, чтобы не «скакали» */
}


#screw-spiral h2 {
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: #313131;
    text-transform: uppercase;
    filter: drop-shadow(1px 1px 0px rgba(255, 255, 255, 0.4));
}

#screw-spiral h3 {
    margin-bottom: 0.8rem;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.02em;
    color: white;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
}

#screw-spiral p {
    /*margin: 0.3rem 0;*/
    font-size: 15px;
    line-height: 1.3;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
    color: white;
}

#screw .content-wrapper {
    /* ваши текущие стили */
    max-width: 900px;
    width: 100%;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    background: linear-gradient(144deg, #dce1d9, #9a98a9, #0198d4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

#screw .content-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Внутренний контейнер для ограничения ширины */
#screw .content-wrapper {
    max-width: 900px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(90, 26, 126, 0.3);
    padding: 1rem 1.5rem;
    margin-bottom: 30px;
}

#screw h2 {
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    color: white;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
}

#screw h3 {
    margin: 1rem;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: #313131;
    text-transform: uppercase;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}


#screw p {
    margin: 0.3rem 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #313131;
    /*background: #d1d1d12e;*/
    border-radius: 7px;
    padding: 0 10px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}

#screw li {
    list-style-type: none;
    /* при необходимости убрать отступ слева */
    margin-left: 0;
    padding-left: 0;
    color: navy;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}


#screw a {
    margin: 0.3rem 0;
    font-size: 1.1rem;
    line-height: 1.4;
    text-transform: uppercase;
    color: #2e326d;
    text-decoration: none;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.9));
    /*background: #e1e1e1;*/
    border-radius: 13px;
}

.my-flex-container {
    display: flex;
    gap: 18px;
    margin-left: 50px;
    margin-top: 20px;
    flex-wrap: wrap;
}


#screw p svg rect.background {
    fill: white;
}

.phone-icon {
    filter: brightness(0) invert(1) drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}


#screw a[href^="tel:"]:hover, .content-wrapper a[href^="tel:"]:focus {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}


#reducers-alt {
    width: 100vw; /* секция на всю ширину окна */
    padding: 2.5rem 1.5rem;
    background: linear-gradient(135deg, #5a1a7e, #0073b8, #5a1a7e);
    color: #e0d9f1;
    box-sizing: border-box;
    text-align: center; /* центрируем текст */
    display: flex;
    flex-direction: column;
    align-items: center; /* центрируем по горизонтали */
    justify-content: center; /* центрируем по вертикали, если нужно */
    min-height: 200px; /* можно задать минимальную высоту */
}

#reducers-alt .content-wrapper {
    /* ваши текущие стили */
    max-width: 700px;
    width: 100%;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    background: linear-gradient(90deg, #1b4288, #0099d5, #1e5487);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

#reducers-alt .content-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Внутренний контейнер для ограничения ширины */
#reducers-alt .content-wrapper {
    max-width: 700px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(90, 26, 126, 0.3);
    padding: 1rem 1.5rem;
}

/* Стили заголовка */
#reducers-alt h2 {
    font-weight: 700;
    font-size: 1.9rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    color: white;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
}

/* Стили параграфов */
#reducers-alt p {
    margin: 0.3rem 0;
    font-size: 1.1rem;
    line-height: 1.5;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
    color: white;
}

#equipment {
    width: 100vw;
    padding: 3rem 1.5rem;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    box-sizing: border-box;
    color: #f0f9f9;
    text-align: center;
    display: flex;
    justify-content: center;
}


#equipment .content-wrapper {
    /* ваши текущие стили */
    max-width: 700px;
    width: 100%;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    background: linear-gradient(90deg, #1b4288, #0099d5, #1e5487);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

#equipment .content-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

#equipment > div,
#equipment > p,
#equipment > h2 {
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#equipment h2 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    color: white;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

#equipment p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    color: white;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* Кликабельные телефоны */
#equipment a[href^="tel:"] {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

#equipment a[href^="tel:"]:hover,
#equipment a[href^="tel:"]:focus {
    color: #95e6ff;
    text-decoration: underline;
}

.dropdown-content li a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 5px;
}

.social-icon-contact {
    width: 16px;
    height: 16px;
    filter: none;
}


#engineering {
    /*width: 100vw;*/
    padding: 3rem 1.5rem;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    box-sizing: border-box;
    color: #f0f9f9;
    text-align: center;
    display: flex;
    justify-content: center;
}

#engineering .content-wrapper {
    /* ваши текущие стили */
    max-width: 700px;
    width: 100%;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    background: linear-gradient(90deg, #1b4288, #0099d5, #1e5487);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

#engineering .content-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

#engineering > div,
#engineering > p,
#engineering > h2 {
    max-width: 700px;
    width: 45%;
    margin-left: auto;
    margin-right: auto;
}

#engineering h2 {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    color: white;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

#engineering p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    color: white;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    text-align: center;
}

.text-end {
    text-align: center !important;
}

/* Кликабельные телефоны */
#engineering a[href^="tel:"] {
    color: whitesmoke;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

#engineering a[href^="tel:"]:hover,
#engineering a[href^="tel:"]:focus {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}


#gallery {
    /*max-width: 1200px; !* ограничение ширины контейнера *!*/
    margin: 0 auto;
    padding: 1rem;
}

#gallery {
    background: linear-gradient(66deg, #ffffff, #aeabc6); /* светлый градиент */
    padding: 2rem;
    /*border-bottom-left-radius: 12px;*/
    /*border-bottom-right-radius: 12px;*/
    /*    box-shadow: rgba(255, 88, 88, 0.15) 0 4px 18px, rgba(0, 0, 0, 0.08) 0 1.5px 4px;*/

    /* Анимация плавного появления */
    opacity: 0;
    animation: fadeIn 1.2s ease forwards;
}

/* Ключевые кадры для fade-in */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


.photo-row {
    display: flex;
    justify-content: space-between; /* равномерные отступы между фото */
    gap: 10px; /* промежуток между фото */
    margin-bottom: 15px; /* отступ между строками */
}

.photo-row img {
    /*width: calc((100% - 30px) / 4); !* 4 фото в строке с учётом gap *!*/
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.photo-row img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


#bunkers-mixers {
    width: 100vw;
    padding: 3rem 1.5rem;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    box-sizing: border-box;
    color: #f0f9f9;
    text-align: center;
    display: flex;
    justify-content: center;
}

#bunkers-mixers .content-wrapper {
    /* ваши текущие стили */
    max-width: 700px;
    width: 100%;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    background: linear-gradient(90deg, #1b4288, #0099d5, #1e5487);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

#bunkers-mixers .content-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}


#bunkers-mixers h2 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    color: white;
}

#bunkers-mixers p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    user-select: none;
}


#contacts {
    /*width: 100vw;*/
    padding: 3rem 1.5rem;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    box-sizing: border-box;
    color: #f0f9f9;
    text-align: center;
    display: flex;
    justify-content: center;
}

#contacts-with {
    /*width: 100vw;*/
    padding: 3rem 1.5rem;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    box-sizing: border-box;
    color: #f0f9f9;
    text-align: center;
    display: flex;
    border-radius: 10px;
    margin-top: 5px;
    justify-content: center;
}

#contacts-with-item {
    /*width: 100vw;*/
    padding: 2rem 1.5rem;
    background: linear-gradient(66deg, #ffffff, #cbcbd3);
    box-sizing: border-box;
    color: #f0f9f9;
    text-align: center;
    display: flex;
    border-radius: 10px;
    margin-top: 5px;
    justify-content: center;
    max-width: 900px;
    width: 100%;
}

#contacts-with-item h2 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    color: #313131;
    text-transform: uppercase;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}

.form-row-item {
    display: flex;
    flex-direction: column;
}

.form-row-item label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #313131;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}

.form-row-item input, .form-row-item textarea {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border: 1.5px solid #c4c3c6;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    resize: vertical;
}


#contacts .content-wrapper {
    max-width: 700px;
    width: 100%;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    margin: 0 auto 30px auto;
}

#contacts h2 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    color: white;
}

#contacts-with h2 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    color: white;
}

#contacts p {
    /*margin-bottom: 2rem;*/
    font-size: 1.1rem;
    line-height: 1.5;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    user-select: none;
}

/* Форма */
#contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: left;
}

.form-row {
    display: flex;
    flex-direction: column;
}

.form-row label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #e0d9f1;
}

.form-row input,
.form-row textarea {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border: 1.5px solid #7a5bdc;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    resize: vertical;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
    color: #c1b8e6;
}

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: #0099d5;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Кнопка */
.btn-submit {
    align-self: center;
    padding: 0.75rem 2.5rem;
    background: linear-gradient(90deg, #0099d5, #4a0073) !important;
    border: none;
    border-radius: 30px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 153, 213, 0.6);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.btn-submit:hover,
.btn-submit:focus {
    background: linear-gradient(90deg, #4a0073, #0099d5);
    box-shadow: 0 6px 20px rgba(74, 7, 115, 0.8);
    outline: none;
}

.btn-submit-two {
    align-self: center;
    padding: 0.75rem 2.5rem;
    background: linear-gradient(90deg, #c0c0c0, #414243) !important;
    border: none;
    border-radius: 30px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgb(197 205 208 / 60%);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.btn-submit-two:hover,
.btn-submit-two:focus {
    background: linear-gradient(90deg, #434445, #bfbfbf) !important;
    box-shadow: 0 6px 20px rgb(0 0 0 / 80%);
    outline: none;
    color: #862103 !important;
}


/* Стили для блока контактов, интегрированные из ваших стилей */
.contacts {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center; /* добавлено для центрирования */
    margin-top: 1.5rem;
}

.contacts div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.contacts a {
    color: #f0f9f9; /* изменено с #333 на светлый цвет для контраста на темном фоне */
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s ease, filter 0.3s ease;
}

.contacts a:hover {
    color: #95e6ff;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

#we-on-map {
    position: relative;
    /*width: 100vw;      !* на всю ширину экрана *!*/
    /*height: 100vh;     !* на всю высоту экрана *!*/
    background-image: url('../img');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

#we-on-map {
    position: relative;
    overflow: hidden;
}

#we-on-map::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: linear-gradient(90deg, #4a0073, #0099d5, #543071), linear-gradient(to bottom, rgba(245, 240, 230, 0) 30%, #eaece6 100%);

    background-blend-mode: screen; /* мягкое смешивание */

    pointer-events: none;
    z-index: 1;
}

.we-map {
    position: relative;
    /*width: 100vw;      !* на всю ширину экрана *!*/
    height: 100vh; /* на всю высоту экрана */
    background-image: url('../img');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.we-map {
    position: relative;
    overflow: hidden;
}

.we-map::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071), linear-gradient(to bottom, rgba(245, 240, 230, 0) 30%, #eaece6 100%);

    background-blend-mode: screen; /* мягкое смешивание */

    pointer-events: none;
    z-index: 1;
}


/*!* Градиент поверх фото *!*/
/*#we-on-map::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0; left: 0; right: 0; bottom: 0;*/
/*  background: linear-gradient(*/
/*    rgba(0, 0, 0, 0.3),*/
/*    rgba(0, 0, 0, 0.1)*/
/*  );*/
/*  pointer-events: none;*/
/*  z-index: 1;*/
/*}*/

/* Контент поверх градиента */
#we-on-map .content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    padding: 0 1rem;
}

.nav-link:focus, .nav-link:hover {
    color: #008bff;
}

.nav-link:focus {
    color: #008bff;
}

.nav-linkss:focus, .nav-linkss:hover {
    color: #008bff;
}

.nav-linkss:focus {
    color: #98d0ff;
}

.burger-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 20px;
    padding: 0;
    z-index: 1051;
}

.burger-line {
    width: 100%;
    height: 3px;
    background-color: #000; /* или #fff, в зависимости от дизайна */
    border-radius: 2px;
    transition: all 0.3s ease;
}

.burger-btn.open .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-btn.open .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-btn.open .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 60px; /* под шапкой */
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    padding: 1rem 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1050;
}

.mobile-menu.show {
    display: block;
}


/* Секции */
section {
    padding: 1.7rem 0;
}

/* Заголовки */
h2 {
    margin-bottom: 1rem;
    color: #222;
}

.top-bar {
    background: linear-gradient(90deg, #4a0073, #0099d5, #3f0e66);
    color: #f0f9f9; /* чуть светлее белого для мягкости */
    font-size: 0.85rem;
    padding: 0.3rem 0;
    font-weight: 600; /* чуть жирнее для лучшей читаемости */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    box-shadow: rgba(255, 88, 88, 0.15) 0 4px 18px, rgba(0, 0, 0, 0.08) 0 1.5px 4px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s ease;
    overflow: hidden;
    /* Тень для текста для улучшения читаемости */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}


/* Контейнер внутри для ограничения ширины и отступов */
.top-bar .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem;
    width: 100%;
    max-width: 1200px; /* по желанию */
    margin: 0 auto;
}

.top-bar a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s ease;
    font-weight: 600;
}

.top-bar a:hover {
    color: #ccefff;
}

.top-bar img {
    filter: brightness(0) invert(1); /* белые иконки */
    width: 16px;
    height: 16px;
}


.logo a {
    display: inline-block;
    text-decoration: none;
}

.logo img {
    height: 60px; /* увеличиваем размер логотипа */
    width: auto; /* сохраняем пропорции */
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s;
}


#scrollToTopBtn {
    position: fixed;
    bottom: 40px;
    right: 30px;
    z-index: 10000;
    background: linear-gradient(90deg, #0099d5, #650898, #0099d5);
    color: white;
    border: none;
    padding: 5px 0 0;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: 50px;
    height: 50px;
    display: grid;
}

#scrollToTopBtn:hover {
    background: linear-gradient(90deg, #650898, #0099d5, #650898);
}


/* Показываем кнопку при активном классе */
#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
}

.footer {
    position: relative;
    padding: 80px 23px 40px;
    user-select: none;
    overflow: visible;
    font-weight: 500;
    min-height: 300px;
    color: white;

    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;

    /* Убираем фон, фон будет через ::before */
    background: transparent;
    z-index: 0;
}

/* Плавный переход от бежевого к градиенту */
.footer::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* под контентом футера */
    background: linear-gradient(to top, #3e1882 0%, #0592ce 40%, #236dab 70%, beige 100%);
}


/* Фон футера под волной и контентом */
.footer-bg {
    position: absolute;
    /*top: 0;*/
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    z-index: 0;
}

/* Волна */
.footer-wave {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 151px;
    overflow: visible;
    line-height: 0;
    z-index: 1;
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Контент футера */
.footer-content.container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

.footer-logo img {
    height: 60px;
    width: auto;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s ease;
    margin-top: 5px;
}

.footer-logo img:hover {
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5));
}

/* Контакты в строку */
.footer-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    flex: 1 1 500px;
    max-width: 800px;
    color: #f0f9f9;
    gap: 20px;
    padding-top: 70px;
}

.footer-info > div {
    flex: 1 1 200px;
}

.footer-info h4 {
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.footer-info p {
    margin: 0;
    line-height: 1.5;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

/* Копирайт на всю ширину */
.footer-copyright {
    background: linear-gradient(90deg, #4a0073, #0099d5, #543071);
    color: #f0f9f9;
    font-size: 0.95rem;
    padding: 1rem 20px;
    font-weight: 600;
    text-align: center;
    box-shadow: rgba(255, 88, 88, 0.15) 0 4px 18px,
    rgba(0, 0, 0, 0.08) 0 1.5px 4px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 3;
    margin-top: 40px;
    padding-right: 110px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end; /* прижать вправо */
    align-items: center;
    gap: 1.5rem;
}

/* Адаптивность */
@media (max-width: 768px) {
    .footer-content.container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-info {
        max-width: 100%;
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-info > div {
        flex: unset;
    }

    .footer-logo img {
        height: 60px;
        margin-bottom: 20px;
    }

    .footer-copyright {
        justify-content: center; /* центрируем копирайт на мобилках */
    }
}


.map-phones {
    max-width: 444px; /* можно настроить ширину */
}

.section-title {
    font-weight: bold;
    margin: 0.5rem 0 0.3rem 0;
    color: white; /* или нужный цвет */
    text-transform: uppercase;
    font-size: 1rem;
}

.section-title-color {
    color: #5f5f5f !important; /* или нужный цвет */
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.98));

}

.phones-list {
    display: flex;
    gap: 20px; /* расстояние между телефонами */
    margin-bottom: 1rem;
    background: linear-gradient(18deg, #b77cd6, #8db6c6, #ccd7dd);
    padding: 4px;
    border-radius: 6px;
    padding-left: 8px;
    align-items: center;
}

.phones-list p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    /*filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5));*/
}

.email-row a {
    color: #5a5353;
    filter: drop-shadow(2px 1px 0px rgba(69, 64, 64, 0.55));
}

/*.phone-icon,*/
/*.email-icon {*/
/*    display: inline-block;*/
/*    vertical-align: middle;*/
/*    filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5));*/
/*}*/

.phone-icon {
    display: inline-block;
    vertical-align: middle;
}


.map-section {
    padding: 40px 0 0 0;
    background: bottom;
    transition: filter 0.3s;
    /*filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));*/
}

.map-title {
    position: relative; /* чтобы z-index работал */
    text-align: center;
    margin-bottom: 24px;
    color: whitesmoke; /* более контрастный */
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    transition: filter 0.3s;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-transform: uppercase;
    z-index: 10;
}


.map-phones {
    margin-top: 15px;
    color: whitesmoke;
    font-size: 1.3rem;
    z-index: 5;
    top: 158px;
    position: relative;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-align: justify;
}

/*.map-phones p {*/
/*    margin: 5px 0;*/
/*    z-index: 10;*/
/*}*/

.map-phones a[href^="tel:"] {
    color: whitesmoke;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.map-phones a:hover {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.map-phones a:focus {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.map-phones img {
    /*filter: brightness(0) invert(1) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));*/
    width: 16px;
    height: 16px;
}

.map-phones a {
    text-decoration: none;
}

.service-phones {
    margin-top: 15px;
    color: whitesmoke;
    font-size: 1rem;
    z-index: 5;
    position: relative;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    text-align: justify;
    background: #edefe978;
    padding: 10px;
    border-radius: 7px;
}

/*.map-phones p {*/
/*    margin: 5px 0;*/
/*    z-index: 10;*/
/*}*/

.service-phones a[href^="tel:"] {
    color: #5a5353;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    text-decoration: none;
    /*filter: drop-shadow(2px 1px 0px rgba(0,0,0,0.5));*/
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.98));
}

.service-phones a:hover {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.7));
}

.service-phones a:focus {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.service-phones img {
    filter: brightness(0) invert(1) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    width: 16px;
    height: 16px;
}

.service-phones a {
    text-decoration: none;
}

.social-icons-cont img {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    width: 25px;
    height: 25px;
}

.email-row img {
    color: whitesmoke !important;
    filter: brightness(0) invert(1) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.icons-row img {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    width: 25px;
    height: 25px;
    margin: 0 5px; /* горизонтальные отступы слева и справа */
    box-sizing: content-box; /* чтобы margin не влиял на размер */
    vertical-align: middle; /* выравнивание по центру по вертикали */
}

.icons-row img:hover {
    transform: scale(1.1);
    /* box-shadow: 0 4px 12px rgba(59, 89, 152, 0.7); */
    /* background-color: #2d4373; */
    /* border-color: #2d4373; */
    color: whitesmoke;
}


.map-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 40%; /* Соотношение сторон 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(4, 174, 199, 0.15);
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
    z-index: 10;
}

.footer-email h4 {
    color: #f0f9f9;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

/* Контейнер для почты и иконки */
.email-wrapper {
    display: flex;
    align-items: center;
    gap: 12px; /* расстояние между почтой и иконкой */
    color: #f0f9f9;
}

.social-wrapper {
    display: flex;
    align-items: center;
    /*gap: 7px;*/
}

.social-wrapper img {
    width: 25px;
    height: 25px;
    display: block;
    margin-top: 20px;
    position: relative;
    /*margin-left: 5px;*/
    filter: drop-shadow(2px 2px 2px rgba(255, 247, 247, 0.5));
}


/* Текст почты */
.footer-email p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: text;
}

/* Ссылка с иконкой */
.footer-face a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    background-color: transparent;
    margin-top: 8px;
}

.footer-email a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    box-shadow: none;
    border: 0;
    background-color: transparent;
    margin-top: 8px;
    color: whitesmoke;
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

/* Иконка внутри ссылки */
.footer-email a img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: filter 0.3s ease;
    user-select: none;
    pointer-events: none;
}

/* Эффекты при наведении */
.footer-email a:hover {
    transform: scale(1.1);
    /*box-shadow: 0 4px 12px rgba(59, 89, 152, 0.7);*/
    /*background-color: #2d4373;*/
    /*border-color: #2d4373;*/
    color: whitesmoke;
}

.footer-email a:hover img {
    filter: brightness(1.2);
}

.footer-contacts a {
    color: whitesmoke;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.footer-contacts a:hover, .footer-contacts a:focus {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

/* Скрываем модалку, когда неактивна */
.custom-modal.hidden {
    display: none;
}

/* Фон модального окна */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Затемнённый оверлей */
.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

/* Контейнер контента модалки */
.custom-modal-content {
    position: relative;
    z-index: 10;
    background: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    box-sizing: border-box;
    gap: 0; /* Отступ между стрелками и изображением */
    overflow: hidden;
}

/* Обёртка для изображения и описания */
.custom-image-wrapper {
    max-width: 80vw;
    max-height: 80vh;
    position: relative;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Изображение — фиксированный размер с сохранением пропорций */
.custom-image-wrapper img {
    width: auto; /* фиксированная ширина */
    height: auto; /* фиксированная высота */
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain; /* обрезка по размеру */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin: 0 auto
}

.custom-modal.hidden {
    display: none;
}

.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}


/* Описание под изображением */
.custom-description {
    margin-top: 12px;
    font-size: 1rem;
    color: #1c0073; /* приятный фиолетовый */
    font-weight: 500;
    max-width: 700px;
    word-wrap: break-word;
}

/* Кнопки управления (закрыть, стрелки) */
.custom-close, .custom-prev, .custom-next {
    background: transparent;
    border: none;
    font-size: 2.5rem;
    color: #3c0ed5; /* фиолетовый цвет */
    cursor: pointer;
    user-select: none;
    padding: 0 15px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Закрыть — позиционируем в правом верхнем углу */
.custom-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 3rem;
    z-index: 10;
}

/* Стрелки — фиксированная высота и центрирование */
.custom-prev, .custom-next {
    flex-shrink: 0;
    height: 80px; /* совпадает с высотой изображения */
    user-select: none;
}

/* Наведение — цвет темнее */
.custom-prev:hover, .custom-next:hover, .custom-close:hover {
    color: #3a27a3;
}

/* Расположение стрелок слева и справа */
.custom-prev {
    order: 0;
}

.custom-image-wrapper {
    order: 1;
}

.custom-next {
    order: 2;
}

/* Скрываем модалку, когда неактивна */
.custom-modal.hidden {
    display: none;
}


/* Мобильная адаптация */
@media (max-width: 600px) {
    .custom-modal-content {
        padding: 10px;
        height: auto;
        top: 0;
    }

    .custom-close {
        font-size: 2rem;
        top: -13px;
        right: 0;
    }

    .custom-next {
        order: 2;
        position: absolute;
        left: 296px;
        z-index: 10;
    }

    .custom-image-wrapper img {
        max-height: 60vh;
    }

    .custom-description {
        font-size: 0.9rem;
    }

    .custom-prev, .custom-next {
        font-size: 2rem;
        margin-right: 30px;
        padding-right: 5px;
        z-index: 10;
        position: absolute;
    }

    .service-phones {
        margin-top: 15px;
        color: whitesmoke;
        font-size: 0.95rem;
        z-index: 5;
        position: relative;
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
        text-align: justify;
    }

    .custom-image-wrapper img {
        /*width: 250px; !* фиксированная ширина *!*/
        height: 250px; /* фиксированная высота */
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
        object-fit: cover; /* обрезка по размеру */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        top: 20px;
        /*margin-bottom: 110px;*/
        /*margin-right: 175px;*/
        margin-top: 15px;

    }
}

/* Скрываем подменю по умолчанию */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* под основным пунктом */
    left: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
    padding: 5px 0;
    text-transform: uppercase;
    list-style-type: none;
    margin-top: 10px;
}

/* Стили для ссылок в подменю */
.dropdown-content li a {
    padding: 10px 15px;
    color: #333;
    display: block;
    text-decoration: none;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
}

.dropdown-content li a:hover {
    background-color: #f0e6ff; /* светло-фиолетовый фон при наведении */
    color: #078acb;
}

/* Показываем подменю при наведении */
.dropdown:hover .dropdown-content {
    display: block;
    width: 255px;
}

/*.toggle-checkbox:checked + .dropdown-content {*/
/*  display: block;*/
/*}*/

/* Курсор для выпадающего пункта */
.dropdown > .dropbtn::after {
    content: " ▼";
    font-size: 0.5em;
    margin-left: 7px;
    color: #fff;
    padding-top: 5px;
    top: 7px;
    position: absolute;
}

html {
    scroll-behavior: smooth;
}

/* Убираем внешние отступы у списков в мобильном меню */
.mobile-menu ul,
.mobile-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Отступы между пунктами меню */
.mobile-menu > ul > li {
    margin-bottom: 0.5rem; /* вертикальный отступ между пунктами */
}

/* Ссылки в основном меню и дропдауне */
.mobile-menu .nav-link,
.mobile-menu .nav-linkss,
.mobile-menu .dropdown-content li a {
    color: #fff;
    /*font-size: 1.15rem;*/
    /*padding: 12px 24px; !* одинаковые отступы слева и справа *!*/
    display: block;
    text-decoration: none;
    transition: background 0.2s;
}

/* Подменю (дропдаун) */
.mobile-menu .dropdown-content {
    display: none;
    flex-direction: column;
    background: #073d73;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    position: static;
    margin: 0; /* убираем левый отступ */
    padding: 0; /* убираем внутренние отступы, чтобы контролировать через ссылки */
    overflow: hidden;
    transition: max-height 0.3s;
}

/* Активное подменю */
.mobile-menu .dropdown.open .dropdown-content {
    display: flex;
    animation: dropdownFade 0.3s;
}

/* Ссылки в подменю */
.mobile-menu .dropdown-content li a {
    font-size: 1rem;
    /*padding: 12px 24px; !* такие же отступы, как в основном меню *!*/
    background: none;
    border: none;
}

/* Отступы между пунктами подменю */
.mobile-menu .dropdown-content li {
    margin: 0; /* убираем внешние отступы у li */
}

/* Стрелка у дропдауна */
.mobile-menu .dropbtn::after {
    content: '▼';
    font-size: 0.7em;
    margin-left: 8px;
    vertical-align: middle;
    color: whitesmoke;
    transition: transform 0.3s;
    position: relative; /* чтобы не смещать текст */
    top: 2px; /* чуть опустим стрелку для выравнивания */
}


/* Появление с эффектом bounce (прыжка) */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Лёгкое подёргивание без изменения opacity */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-3px);
    }
    40%, 80% {
        transform: translateX(3px);
    }
}

/*.social-icon {*/
/*  opacity: 0;*/
/*  animation-name: bounceIn;*/
/*  animation-duration: 0.8s;*/
/*  animation-delay: 0.1s; !* появление через 0.9 секунды *!*/
/*  animation-fill-mode: forwards; !* сохраняем конечное состояние (видимость) *!*/
/*  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);*/
/*  transition: filter 0.3s ease, box-shadow 0.3s ease;*/
/*}*/

/* Класс для подёргивания */
.social-icon.shake {
    animation-name: pulseGlow !important;
    animation-duration: 0.3s !important;
    animation-iteration-count: 3 !important;
    animation-timing-function: ease-in-out !important;
    animation-fill-mode: none !important; /* не меняем видимость */
}


/* Базовый класс для иконок соцсетей */
.social-icon {
    display: flex; /* используем flexbox для выравнивания */
    justify-content: center; /* выравниваем по центру горизонтально */
    align-items: center; /* выравниваем по центру вертикально */
    width: 30px; /* задаём небольшую ширину */
    height: 30px; /* задаём небольшую высоту */
    border-radius: 50%; /* делаем иконку круглой */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* добавляем небольшую тень */
    transition: all 0.3s ease; /* плавная анимация для hover эффектов */
    filter: grayscale(80%); /* делаем иконки серыми */
    margin-top: 10px;
}

/* Hover эффект: убираем фильтр и немного увеличиваем */
.social-icon:hover {
    filter: grayscale(0%); /* возвращаем цвет */
    transform: scale(1.1); /* увеличиваем размер */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* увеличиваем тень */
}

/* Стили для изображений внутри иконок */
.social-icon img {
    max-width: 80%; /* ограничиваем максимальную ширину изображения */
    max-height: 80%; /* ограничиваем максимальную высоту изображения */
    object-fit: contain; /* масштабируем изображение, чтобы поместилось в контейнер */
}


.social-icons-wrapper {
    display: flex;
    gap: 12px; /* расстояние между иконками */
    align-items: center;
}

.social-icons-wrapper-two {
    display: flex;
    gap: 10px;
    align-items: center;
    left: 54%;
    position: absolute;
    top: 58%;
    z-index: 3;
}

.gray-overlay {
    position: relative; /* Чтобы позиционировать псевдоэлемент */
}

.gray-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(128, 128, 128, 0.4); /* Серый с прозрачностью 40% */
    pointer-events: none; /* Чтобы не мешать кликам */
    z-index: 1;
}

.gray-overlay > * {
    position: relative;
    z-index: 2; /* Контент поверх оверлея */
}


.cool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #e0d9f1; /* светлый фиолетовый текст */
    background: linear-gradient(135deg, #5a3f99, #3a2a72); /* темно-фиолетовый градиент */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(90, 63, 153, 0.6),
    0 0 12px rgba(58, 42, 114, 0.9);
    transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    user-select: none;
    text-shadow: 0 0 5px rgba(224, 217, 241, 0.7);
}

.cool-button:hover,
.cool-button:focus {
    background: linear-gradient(135deg, #6f5ce8, #4a7fff); /* светло-синий градиент */
    box-shadow: 0 6px 14px rgba(111, 92, 232, 0.8),
    0 0 20px rgba(74, 127, 255, 1);
    color: #f0f5ff;
    outline: none;
}

.cool-button:active {
    box-shadow: 0 3px 6px rgba(74, 127, 255, 0.7),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #4a7fff, #3a2a72);
    color: #d0d9ff;
    transform: translateY(1px);
}


.contacts-wrapper {
    display: flex;
    gap: 5rem; /* расстояние между картой и формой */
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    width: 1200px;
}

.map-responsive-two {
    position: relative;
    width: 100%;
    padding-bottom: 40%;
    height: 53%;
    overflow: visible;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(4, 174, 199, 0.15);
}

/* Карта слева */
.map-container {
    flex: 1 1 45%;
    max-width: 600px;
}

.map-responsive iframe {
    width: 100%;
    height: 444px;
    border: none;
    border-radius: 8px;
}

/* Форма справа */
.contact-form-container {
    flex: 1 1 35%;
    max-width: 600px;
    z-index: 3;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .contacts-wrapper {
        flex-direction: column;
    }

    .map-container,
    .contact-form-container {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .map-responsive iframe {
        height: 250px;
    }
}

.order-form-container {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(1, 152, 212, 0.12);
    padding: 1.8rem 2rem;
    margin: 2rem auto;
    max-width: 950px;
    width: 90%; /* адаптивная ширина */
    box-sizing: border-box; /* padding учитывается в ширине */
    overflow-wrap: break-word; /* перенос слов, если нужно */
}

.order-form-title {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 10px 0 1.5rem;
    color: #0198d4;
    text-align: center;
}

.form-group label {
    font-weight: 500;
    color: #2d2d2d;
    margin-bottom: 5px;
    display: block;
    font-size: 14px;
}

.form-control {
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    margin-bottom: 0.7rem;
    width: 100%; /* занимает всю ширину контейнера */
    box-sizing: border-box;
    transition: border-color 0.2s;
    word-break: break-word; /* перенос длинных слов */
    max-width: 835px;
}

.form-control:focus {
    border-color: #0198d4;
    box-shadow: 0 0 0 2px rgba(1, 152, 212, 0.15);
    outline: none;
}

.btn-form {
    background: #0198d4 !important;
    color: #fff;
    border-radius: 8px;
    padding: 0.7rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    transition: background 0.2s;
    margin-bottom: 5px;
    cursor: pointer;
    display: inline-block;
    width: 25%; /* кнопка на всю ширину */
    box-sizing: border-box;
    text-align: center;
}

.btn-form:hover,
.btn-form:focus {
    background: #026ea4;
    color: #fff !important; /* цвет текста при наведении */
    outline: none;

    /* Эффект "дымки" — мягкое свечение */
    box-shadow: 0 0 8px 2px rgba(2, 110, 164, 0.7),
    0 0 20px 6px rgba(2, 110, 164, 0.4);
}


.btn-all-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(270deg, #0297d3, #480576, #911bff);
    background-size: auto;
    background-size: 600% 600%;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    filter: drop-shadow(0 0 5px rgb(36, 78, 165));
    transition: background-position 3s ease, filter 0.3s ease;
    animation: pulseGlow 3s ease-in-out infinite;
    cursor: pointer;
    user-select: none;
    border-color: #7818cf;
}

.btn-all-product:hover {
    background-position: 100% 0;
    filter: drop-shadow(0 0 10px rgba(155, 48, 255, 0.9));
    border-color: #0297d3;
}

.modal-content {
    background: mintcream;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(1, 152, 212, 0.12);
    padding: 1.8rem 2rem;
    max-width: 915px;
    width: 90%;
    position: relative;
    animation: slideIn 0.3s;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* ограничиваем высоту окна */
}

.modal-body {
    overflow-y: auto; /* включаем вертикальную прокрутку */
    -webkit-overflow-scrolling: touch; /* плавная прокрутка на iOS */
    flex-grow: 1; /* занимает всё доступное пространство */
    padding: inherit;
}

/* Адаптация для мобильных */
@media (max-width: 600px) {
    .modal-content {
        max-width: 95%;
        padding: 1.2rem 1rem;
        border-radius: 10px;
    }

    .btn-form {
        background: #0198d4;
        color: #fff;
        border-radius: 8px;
        padding: 0.7rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        border: none;
        transition: background 0.2s;
        margin-bottom: 5px;
        cursor: pointer;
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        text-align: center;
    }
}


.btn-form:hover,
.btn-form:focus {
    background: #026ea4;
    outline: none;
}

/* Медиазапросы для планшетов и мобильных */
@media (max-width: 991px) {
    .order-form-container {
        padding: 1.2rem 1rem;
        max-width: 600px;
        margin: 1.5rem auto;
    }

    .order-form-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .btn-form {
        padding: 0.7rem 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .order-form-container {
        padding: 1rem 0.8rem;
        max-width: 100%;
        margin: 1rem auto;
        border-radius: 10px;
        /* Добавляем вертикальную прокрутку, если форма очень высокая */
        max-height: 90vh;
        overflow-y: auto;
    }

    .order-form-title {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .form-control {
        font-size: 0.95rem;
        padding: 0.5rem 0.8rem;
    }

    .btn-form {
        padding: 0.6rem 1rem;
        font-size: 1rem;
    }
}

/* Модальное окно */

.modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: mintcream;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(1, 152, 212, 0.12);
    padding: 1.8rem 2rem;
    max-width: 915px;
    width: 90%;
    position: relative;
    animation: slideIn 0.3s;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

@keyframes slideIn {
    from {
        transform: translateY(60px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 2rem;
    color: #0198d4;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.modal-close:hover,
.modal-close:focus {
    color: #ff5252;
    outline: none;
}

/* Медиазапросы для модального окна */

@media (max-width: 991px) {
    .modal-content {
        max-width: 600px;
        padding: 1.5rem 1.5rem;
    }

    .modal-close {
        top: 15px;
        right: 15px;
        font-size: 1.8rem;
    }
}

@media (max-width: 600px) {
    .modal-content {
        max-width: 95%;
        padding: 1.2rem 1rem;
        border-radius: 10px;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        font-size: 1.5rem;
    }
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;

    /*background: linear-gradient(135deg, #e0f0fc 0%, #c2e0f8 100%);*/
    border-radius: 16px;
    /*box-shadow: 0 4px 20px rgba(1, 152, 212, 0.15);*/
    overflow-x: hidden;
}

.category-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(1, 152, 212, 0.4);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #000; /* фон на случай отсутствия фото */
}

.category-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.3s ease;
}

.category-item:hover .category-image {
    transform: scale(1.05);
}

.category-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.item-name {
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    word-wrap: break-word;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    /*border: 2px solid #fff;*/
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    user-select: none;
    text-align: center;
    min-width: 100px;
    background: darkgray;
    border-color: darkgray;
}

.btn:hover,
.btn:focus {
    background-color: #fff;
    color: whitesmoke;
    outline: none;
}

/* Адаптивность */
@media (max-width: 900px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
        padding: 15px;
    }
}

@media (max-width: 500px) {
    .category-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 15px;
    }
}


@media (max-width: 768px) {
    .about-image img {
        width: 150px;
        height: 150px;
        border-radius: 8px;
        display: block;
        left: 70px;
        position: initial;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    }

    .photo-description-banners {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.5rem 1rem;
        background: linear-gradient(144deg, #dcdfdc, #dddddd21, #0198d44d);
        color: #000000;
        font-size: 0.9rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 5px;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
        width: auto;
        text-transform: uppercase;
        max-width: 100%;
    }

    #engineering h2 {
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        letter-spacing: 0.05em;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
        color: white;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    }

    .nav {
        text-transform: capitalize;
        margin-right: 0;
    }

    .about-company {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0 auto;
        padding: 20px;
        background: linear-gradient(66deg, #edf4e7, #8e8ca2);
    }
}

@media (max-width: 375px) {
    .about-image img {
        display: none !important;
    }

    .about-company {
        display: flex !important;
        align-items: center;
        gap: 20px;
        margin: 0 auto;
        padding: 20px;
        background: linear-gradient(66deg, #edf4e7, #8e8ca2);
    }
}


@media (max-width: 1024px) {
    .about-image img {
        width: 150px;
        height: 150px;
        border-radius: 8px;
        /*display: block;*/
        left: 0;
        /*position: relative;*/
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
        display: none;
    }

    .about-company {
        display: grid;
        gap: 20px;
        margin: 0 auto;
        padding: 20px;
        background: linear-gradient(66deg, #edf4e7, #8e8ca2);
    }

    .custom-image-wrapper img {
        width: 450px;
        height: 350px;
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
        object-fit: cover;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.about-container {
    display: flex;
    align-items: flex-start; /* Выровнять по верхнему краю */
    gap: 20px; /* Отступ между колонками */
}

.about-image {
    flex: 0 0 200px; /* Фиксированная ширина для фото, не растягивается */
    max-width: 200px;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* По желанию, для красоты */
}

.about-description {
    flex: 1; /* Занимает всё оставшееся пространство */
}

/* Адаптив для маленьких экранов */
@media (max-width: 600px) {
    .about-container {
        flex-direction: column;
    }

    .about-image {
        flex: none;
        max-width: 30%;
        margin: 0 auto 15px auto;
        display: none;
    }
}


.service-detail-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
    color: var(#fff);
}

.service-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.55));
}

.service-photos-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.service-photo-wrapper {
    flex: 1 1 30%;
    max-width: 30%;
    min-width: 180px;
    display: flex;
    justify-content: center;
}

.service-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    background: #222;
}

.service-description {
    /*text-align: center;*/
    font-size: 1.1rem;
    color: var(#ccc);
    margin-top: 20px;
}

@media (max-width: 700px) {
    .service-photo-wrapper {
        max-width: 45%;
    }

    .service-photo {
        height: 130px;
    }
}

@media (max-width: 500px) {
    .service-photo-wrapper {
        max-width: 100%;
    }

    .service-photo {
        height: 100px;
    }
}

.main-photo-wrapper {
    width: 100%;
    max-width: 700px;
    /*aspect-ratio: 4/3; !* Автоматически сохраняет пропорции блока — заменяет фикс. высоту *!*/
    border-radius: 12px;
    overflow: hidden;
    /*box-shadow: 0 4px 16px rgba(122,110,181,0.07), 0 2px 4px rgba(90,63,153,0.13);*/
    /*background: linear-gradient(120deg, #eaeaff 0%, #fafaff 100%);*/
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    border: 0;
}

.photo-container-product {
    border-radius: 8px;
    overflow: hidden;
    width: 600px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screw-title-mobile h2 {
    display: none;
}

.custom-image-miniature-style {
    width: 142px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
}


.photo-container img {
    display: block; /* убрать лишние отступы */
    width: 100%; /* заполнение по ширине контейнера */
    height: 100%; /* заполнение по высоте */
    object-fit: cover; /* сохранить пропорции и заполнить контейнер */
    border-radius: 8px 8px 0 0; /* если нужно, скруглить углы у фото */
}


.main-photo-wrapper img#main-photo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Важно: всё фото всегда видно и НЕ обрезается */
    display: block;
    background: #fff;
    border-radius: 5px;
    user-select: none;
}

/* Контейнер слайдера */
/* Контейнер слайдера (оставьте как у вас) */
.item-section-bg {
    background: linear-gradient(66deg, #edf4e7, #8e8ca2);
}

/* Owl Carousel управляет шириной автоматически */
/* Задаем максимальную высоту и минимальную, чтобы слайды не были слишком высокими */

.second-product-slider .item {
    background: linear-gradient(66deg, #edf4e7, #8e8ca2);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(90, 63, 153, 0.1);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 280px; /* Можно подкорректировать */
    max-height: none; /* нет жесткого ограничения */
    transition: box-shadow 0.3s ease;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.second-product-slider .item:hover {
    box-shadow: 0 6px 20px rgba(90, 63, 153, 0.2);
}

/* Изображение */
.product-image img.img-fluid {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
    display: block;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

/* Тело карточки */
.card-body {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Название товара */
.product-name {
    margin-bottom: 8px;
    font-size: 0.88rem;
    line-height: 1.1;
    font-weight: 600;
    color: #38314c;
    white-space: normal;
    overflow-wrap: break-word;
    text-transform: uppercase;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}

/* Атрибуты */
.attributes-card {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.attributes-card li {
    font-size: 1rem;
    color: #555;
}

.attributes-card li a {
    color: #777;
    text-decoration: none;
}

.attributes-card li a:hover {
    text-decoration: underline;
}

/* Бейджи и кнопки товаров оставляем без изменений */

.badge-container {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    z-index: 2;
}

.product-badge {
    background-color: #5a3f99;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 12px;
    white-space: nowrap;
}

.badge-new {
    background-color: #007bff;
}

.img-btn-container {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
    font-size: 1.25rem;
    user-select: none;
    cursor: pointer;
}

/* Навигация Owl Carousel (стрелки) */
.owl-nav button {
    position: absolute;
    top: 45%;
    background: rgba(90, 63, 153, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #5a3f99;
    box-shadow: 0 0 6px rgba(90, 63, 153, 0.2);
    transition: background-color 0.3s;
}

.owl-nav button:hover {
    background: rgba(90, 63, 153, 0.3);
}

.owl-nav .owl-prev {
    left: 10px;
}

.owl-nav .owl-next {
    right: 10px;
}

.owl-theme .owl-nav [class*=owl-] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #D6D6D6;
    display: inline-block;
    cursor: pointer;
    border-radius: 50px;
    /* padding-top: 30px; */
    margin-top: 60px;
}

/* Пагинация (точки) */
.owl-dots {
    text-align: center;
    margin-top: 15px;
}

.owl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #bbb;
    border-radius: 50%;
    margin: 0 4px;
    transition: background-color 0.3s;
    cursor: pointer;
}

.owl-dot.active,
.owl-dot:hover {
    background: #5a3f99;
}

/* Адаптив */
@media (max-width: 767px) {
    .second-product-slider .item {
        min-height: auto;
    }

    .product-image img.img-fluid {
        height: 200px;
    }
}


.custom-metal-bg {
    background: linear-gradient(66deg, #f3f3f3, #8e8ca2);
    padding: 20px;
}

.custom-advanced-bg {
    background: linear-gradient(66deg, #edf4e7, #bdc0c5);
    padding: 20px;
}

.custom-service-bg {
    background: linear-gradient(83deg, #fdfff9, #bababa);
    padding: 22px;
}

.custom-container {
    max-width: 1400px;
    margin: 40px auto;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Основной блок контента */
.custom-metal-block {
    flex: 1 1 0%; /* Занимает все доступное место */
    background: linear-gradient(90deg, #ccced1 0%, #cfdef3 100%);
    border-radius: 18px;
    padding: 26.4px 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
}

/* Ваши стили заголовка и карточек */
.custom-title {
    font-size: 1.8rem;
    text-align: center;
    font-weight: 500;
    margin-bottom: 10px;
    color: #3e3d3d;
    text-transform: uppercase;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.55));
}

.custom-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.custom-card {
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    width: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .2s;
    margin: 0;
    padding: 0;
}

.custom-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
}

.custom-card img {
    display: block;
    width: 290px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px 14px 0 0;
}

.custom-caption {
    padding: 15px 8px;
    text-align: center;
    /*font-size: 0.88rem;*/
    color: #333;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
}

/* Сайдбар справа */
.custom-sidebar {
    width: 300px;
    background: linear-gradient(90deg, #cfdef3 60%, #ccced1 100%);
    border-radius: 18px;
    padding: 24px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Виджеты сайдбара */
.sidebar-widget {
    margin-bottom: 32px;
}

.sidebar-widget img {
    width: 10px;
    height: 10px;
    padding: 5px 5px 5px;
}

.sidebar-title {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 16px;
    color: #333;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 5px;
}

.sidebar-menu a {
    color: #555;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.sidebar-menu a:hover {
    color: #222;
}

.sidebar-widget a {
    color: #1d12c9;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.sidebar-widget a:hover {
    color: #00b7ff;
    transform: scale(1.05);
    text-decoration: none;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.1));
}

.order-discount {
    position: relative;
    background: linear-gradient(45deg, #fefcea, #f1da36, #f7b733, #f12036);
    color: #222;
    font-weight: 700;
    font-size: 17px;
    text-align: center;
    padding: 20px 25px;
    margin: 20px 0 17px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: visible;
    text-decoration: none;

    /* Плавный переход цвета при наведении */
    transition: background 0.4s ease;
}

/* Эффект рваного края с псевдоэлементом */
.order-discount::before {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    width: 25px;
    height: 100%;
    background: repeating-linear-gradient(
            135deg,
            transparent,
            transparent 5px,
            #f7b733 5px,
            #f7b733 10px
    );
    border-radius: 12px 0 0 12px;
    z-index: 1;
}

.order-discount::after {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;
    width: 25px;
    height: 100%;
    background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 5px,
            #f7b733 5px,
            #f7b733 10px
    );
    border-radius: 0 12px 12px 0;
    z-index: 1;
}

/* При наведении подсвечиваем фон */
.order-discount:hover {
    background: linear-gradient(45deg, #fefcea, #f1da36, #f7d733, #f14d36);
    cursor: pointer;
}


/* Общий стиль для иконок в сайдбаре */
.custom-sidebar .dropdown-icon {
    width: 24px; /* фиксированная ширина иконки */
    height: 24px; /* фиксированная высота иконки */
    object-fit: contain; /* сохраняет пропорции и масштабирует */
    vertical-align: middle; /* выравнивание по вертикали с текстом */
    margin-right: 8px; /* небольшой отступ справа от иконки */
    border-radius: 4px; /* если хотите скруглить края иконок */
    transition: filter 0.3s ease; /* плавное изменение стиля при наведении */
}

/* Стиль ссылок в меню сайдбара, чтобы иконка и текст были на одной линии */
.custom-sidebar .sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 6px 0;
    color: #555;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 18px;
}

/* Эффект при наведении на ссылку */
.custom-sidebar .sidebar-menu a:hover {
    background-color: #d0d4e7;
    color: #222;
}

/* При наведении сделаем иконку чуть ярче */
.custom-sidebar .sidebar-menu a:hover .dropdown-icon {
    filter: brightness(1.2);
}

/* Чтобы текст не слипался с иконкой, делаем маленький отступ для текста */
.custom-sidebar .sidebar-menu a .dropdown-icon + span {
    margin-left: 4px;
}

/* Если хотите, чтобы иконки были чуть крупнее на больших экранах */
@media (min-width: 1024px) {
    .custom-sidebar .dropdown-icon {
        width: 33px;
        height: 33px;
    }
}


/* Адаптивность */

/* При ширине до 1200px sidebar сжимается */
@media (max-width: 1200px) {
    .custom-sidebar {
        width: 250px;
        padding: 20px 16px;
    }
}

/* При ширине до 950px блоки становятся вертикальными */
@media (max-width: 950px) {
    .custom-container {
        flex-direction: column;
    }

    .custom-sidebar {
        width: 100%;
        margin-top: 30px;
        display: none;
    }

    .custom-metal-block {
        max-width: 100%;
        width: 100%;
    }
}

/* Сохраняем ваши медиа-запросы для карточек */

@media (max-width: 1050px) {
    .custom-metal-block {
        padding: 18px 5px;
    }

    .custom-row {
        gap: 18px;
    }

    .custom-card {
        width: 220px;
    }

    .custom-title {
        font-size: 1.44rem;
    }
}

@media (max-width: 735px) {
    .custom-row {
        flex-direction: column;
        align-items: center;
    }

    .custom-card {
        width: 95%;
        margin-bottom: 18px;
    }
}


.news-carousel__title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 40px;
    /*filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.1));*/
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.68));
}

.news-carousel {
    max-width: 1300px; /* увеличиваем ширину контейнера */
    margin: 40px auto;
    color: #222;
    background: linear-gradient(90deg, #ccced1 0%, #cfdef3 100%);
    border-radius: 13px;
}

.news-carousel__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: 50px;
}

.news-carousel__viewport {
    overflow: hidden;
    width: 100%;
    padding-left: 20px; /* увеличили отступы слева */
    padding-right: 20px; /* увеличили отступы справа */
    box-sizing: content-box;
}

.news-carousel__track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
    margin-left: -10px; /* компенсируем отступы карточек */
    margin-right: -10px;
}

.news-carousel__slide {
    flex: 0 0 calc(25% - 20px); /* 25% минус суммарные боковые margin */
    box-sizing: border-box;
    padding: 10px;
    background: #f9ffeb94;
    margin: 0 10px; /* 10px отступы по бокам (всего 20px) */
    border-radius: 13px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
    text-align: center;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    margin-bottom: 10px;
}

.news-carousel__image {
    width: 100%;
    height: 200px;
    border-radius: 13px;
    margin-bottom: 7px;
}

/* Остальные стили не меняем */


.news-carousel__slide a {
    text-transform: uppercase;
    font-size: 13px;
    color: #494646;
    text-decoration: none;
}

.news-carousel__slide h3 {
    position: absolute;
    top: 40px;
    color: whitesmoke;
    font-size: 1.1rem;
    width: 260px;
    background: #354c6c57;
    align-items: center;
    text-align: center;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    height: 30px;
    padding-top: 5px;
}

.news-carousel__more {
    margin-top: 10px;
}

.news-carousel__more-link {
    color: #5224a4; /* Цвет ссылок в стиле твоего слайдера */
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.95rem;
    display: inline-block;
    transition: color 0.3s ease;
    margin-top: 10px;
}

.news-carousel__more-link:hover,
.news-carousel__more-link:focus {
    color: #7a4dd8;
    text-decoration: none;
}

.news-carousel__slide p {
    position: absolute;
    top: 113px;
    color: whitesmoke;
    font-size: 15px;
    width: 260px;
    background: #000000a3;
    text-align: left;
    padding: 5px;
    overflow: hidden;
}

.news-carousel__date {
    background: #ced9e9cf;
    padding: 7px;
    border-radius: 5px;
    font-size: 14px;
}

.news-carousel__image {
    width: 100%;
    height: 200px;
    border-radius: 13px;
    margin-bottom: 20px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.news-carousel__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.news-carousel__viewport {
    overflow: hidden;
    width: 100%;
    padding-left: 15px; /* отступ слева */
    padding-right: 15px; /* отступ справа */
    box-sizing: content-box; /* чтобы padding учитывалось */
}

.news-carousel__nav {
    background: transparent;
    border: none;
    font-size: 2.5rem;
    color: #5224a4;
    cursor: pointer;
    padding: 0 12px; /* увеличили кнопки */
    user-select: none;
    z-index: 10;
    position: relative;
}

.news-carousel__nav--prev {
    left: 5px; /* сдвинули внутрь, чтобы не заслоняли край слайда */
}

.news-carousel__nav--next {
    right: 5px; /* сдвинули внутрь */
}

.news-detail {
    max-width: 1350px;
    margin: 40px auto;
    padding: 0 20px;
    color: #222;
    background: linear-gradient(90deg, #e2e2e4 0%, #cfdef3 100%);
    border-radius: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.news-detail h1 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 12px;
    color: #4d4b4b;
    text-transform: uppercase;
    text-align: center;
    padding-top: 40px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.98));
}

.news-detail time {
    display: block;
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 25px;
    font-style: normal;
    letter-spacing: 0.05em;
}

.news-detail__image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 13px;
    margin-bottom: 35px;
    box-shadow: 0 8px 15px rgba(82, 36, 164, 0.2);
    transition: transform 0.3s ease;
    max-width: 1200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.news-detail__image:hover,
.news-detail__image:focus {
    transform: scale(1.02);
}

.news-detail__text {
    font-size: 1.22rem;
    line-height: 1.7;
    color: #333;
    /*white-space: pre-line; !* для корректного отображения переносов из linebreaks *!*/
}

.news-detail__text p {
    margin-bottom: 1.3em;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.44));
}

@media (max-width: 768px) {
    .news-detail {
        padding: 0 15px;
        margin: 20px auto;
    }

    .news-detail h1 {
        font-size: 1.5rem;
    }

    .news-detail__image {
        max-height: 300px;
        margin-bottom: 25px;
    }

    .news-detail__text {
        font-size: 1.3rem;
        line-height: 1.5;
    }
}

/* Общие стили для блока соцсетей */
.social-wrapper {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-left: 20px;
}

.social-wrapper a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.social-wrapper a:hover,
.social-wrapper a:focus {
    opacity: 0.7;
    outline: none;
}

.social-wrapper img {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 4px; /* иногда нужно для визуальной аккуратности */
    object-fit: contain;
}

/* Стили для поиска */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 20px; /* отступ слева от соцсетей */
}

/* Контейнер с результатами поиска */
#searchResults {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    border-radius: 0 0 4px 4px;
    display: none;
    font-size: 14px;
    border-radius: 7px;
    margin-top: 60px;
}

/* Чтобы позиционировался относительно контейнера */
.search-container {
    position: relative; /* обязательно, чтобы позиционирование абсолютное работало как надо */
}

/* Стили для ссылок внутри результатов */
#searchResults a.search-result-item {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

/* Подсветка результата при наведении */
#searchResults a.search-result-item:hover {
    background-color: #f0f0f0;
}


.search-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    color: white; /* иконка в белом цвете */
    transition: opacity 0.3s ease;
}

.search-icon:hover,
.search-icon:focus {
    opacity: 0.7;
    outline: none;
}

/* Поле поиска: скрыто по умолчанию */
#searchForm {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 18px;
    background: white;
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 100;
}

#searchForm input[type="text"] {
    padding: 6px 12px;
    border: none;
    outline: none;
    width: 180px;
    font-size: 0.9rem;
    color: #333;
}

/* Показываем форму поиска, если у нее есть класс "show" */
#searchForm.show {
    display: block;
}

/* --- Адаптив для мобильных --- */
@media (max-width: 991px) {
    /* Расположение соцсетей и поиска рядом со логотипом */
    .social-wrapper,
    .search-container {
        margin-left: 0;
    }

    /* Можно сделать иконки чуть поменьше на мобилках */
    .social-wrapper img {
        width: 22px;
        height: 22px;
    }

    /* Если нужно, чтобы поиск разворачивался иначе на мобилках,
       можно задать дополнительные стили или изменения здесь */
}

/* --- Адаптив для больших экранов --- */
@media (min-width: 992px) {
    /* Расположить соцсети и поиск справа от меню с отступом */
    .social-wrapper {
        margin-left: 30px;
    }

    /* Можно контролировать размер иконок */
    .social-wrapper img {
        width: 25px;
        height: 25px;
    }

    /* Поиск справа с определённым отступом */
    .search-container {
        margin-left: 20px;
    }
}


/* Заголовок страницы */
.news-page__title {
    font-weight: 500;
    font-size: 2.5rem;
    color: #222;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 40px;
    text-transform: uppercase;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.55));
}

/* Список новостей */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

/* Одна новость */
.news-item {
    display: flex;
    flex-direction: row;
    background: linear-gradient(90deg, #fdfdfe 0%, #cfdef3 100%);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgb(0 0 0 / 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.news-item:hover {
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

/* Картинка новости */
.news-item__link {
    flex-shrink: 0;
    width: 40%;
    overflow: hidden;
}

.news-item__image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-item__link:hover .news-item__image,
.news-item__link:focus .news-item__image {
    transform: scale(1.05);
    outline: none;
}

/* Контент новости */
.news-item__content {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
}

/* Заголовок новости */
.news-item__headline {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    color: #352377;
    text-decoration: none;
    transition: color 0.3s ease;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.1));
}

.news-item__headline-link {
    text-decoration: none;
    color: inherit;
}

.news-item__headline-link:hover .news-item__headline,
.news-item__headline-link:focus .news-item__headline {
    color: #035fcc;
    outline: none;
}

/* Дата новости */
.news-item__date {
    font-size: 0.9rem;
    color: #999;
    margin: 12px 0 20px;
    user-select: none;
}

/* Краткий текст */
.news-item__excerpt {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #555;
    flex-grow: 1;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.98));
}

/* Ссылка «Узнать больше..» */
.news-item__more-link {
    align-self: flex-start;
    font-size: 1rem;
    font-weight: 500;
    color: #352377;
    text-decoration: none;
    margin-top: 20px;
    transition: color 0.3s ease;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.98));
}

.news-item__more-link:hover,
.news-item__more-link:focus {
    color: #0075ff;
    text-decoration: none;
    outline: none;
}

/* Адаптив */

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
        width: 100%;
    }

    .news-item__link,
    .news-item__content {
        width: 100%;
    }

    .news-item__content {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .news-page__title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
}

.news-separator {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, #e4eade, #503575);
    margin: 30px auto; /* автоотступы слева и справа для центрирования */
    width: 50%;
    opacity: 0.5;
}


/* Общие стили контейнеров */
.service-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    color: #222;
    font-size: 20px;
}

/* Заголовки секций */
.section-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 2px solid #cacaca;
    padding-bottom: 5px;
    font-weight: 500;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.77));
}

.about-text-banner p{
    font-size: 18px;
    margin-left: 44px;
    text-align: left;
    padding: 4px;
    background: #53535a;
    width: 1110px;
    border-radius: 5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    color: whitesmoke;
    text-transform: uppercase;
    padding-left: 8px;
}


.about-text-banner h2 {
    background: #53535a;
    margin-left: 44px;
    text-align: left;
    padding: 4px;
    width: 777px;
    border-radius: 5px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-weight: 600;
    color: #e2e8df;
    padding-left: 8px;
    font-size: 24px;
}

.three-d-text-banner h2 {
    background: rgba(83, 83, 90, 0.71);
    margin-left: 44px;
    text-align: left;
    padding: 4px;
    width: 777px;
    border-radius: 5px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-weight: 600;
    color: #e2e8df;
    padding-left: 8px;
    font-size: 24px;
}

.three-d-text-banner p{
    font-size: 18px;
    margin-left: 44px;
    text-align: left;
    padding: 4px;
    background: rgba(83, 83, 90, 0.71);
    width: 1110px;
    border-radius: 5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    color: whitesmoke;
    text-transform: uppercase;
    padding-left: 8px;
}

.contact-text-banner h2 {
    background: #c77f6285;
    margin-left: 44px;
    text-align: left;
    padding: 4px;
    width: 777px;
    border-radius: 5px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-weight: 600;
    color: #e2e8df;
    padding-left: 8px;
    font-size: 24px;
}

.contact-text-banner p{
    font-size: 18px;
    margin-left: 44px;
    text-align: left;
    padding: 4px;
    background: #c77f6285;
    width: 1110px;
    border-radius: 5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    color: whitesmoke;
    text-transform: uppercase;
    padding-left: 8px;
}

.section-metal-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 2px solid #cacaca;
    padding-bottom: 5px;
    font-weight: 500;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.77));
}

.section-title-contact {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #01376c;
    border-bottom: 2px solid #cacaca;
    padding-bottom: 5px;
    font-weight: 500;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
}

.section-title-services {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 2px solid #cacaca;
    padding-bottom: 5px;
    font-weight: 500;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.98));
    text-align: center;
    text-transform: uppercase;
}

/* Секция с описанием */
.service-description p,
.technology-section ul,
.advantages-section ul {
    font-size: 1.3rem;
    line-height: 1.5em;
    margin-bottom: 15px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.44));
}

.technology-section ul,
.advantages-section ul {
    padding-left: 20px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.44));
    list-style: none;
}

.service-description ul {
    padding-left: 20px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.44));
    list-style: none;
}

/* Таблица цены */
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 30px;
}

.price-table th,
.price-table td {
    border: 1px solid #c9cccd;
    padding: 12px 15px;
    text-align: center;
    font-size: 1rem;
}

.price-table th {
    background: linear-gradient(90deg, #ccced1 0%, #cfdef3 100%);
    color: #5c5c5c;
}

tbody, td, tfoot, th, thead, tr {
    border-color: #818a98 !important;
    border-style: solid;
    border-width: 0;
}

.price-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Контейнер слайдера */
#photoSlider {
    overflow: hidden;
    position: relative;
    max-width: 700px; /* или ваша максимальная ширина */
    margin: 0 auto;
}

/* Обертка слайдов - flex в ряд */
.slider-inner-wrapper {
    display: flex;
    flex-wrap: nowrap; /* запрещаем перенос слайдов */
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Слайды — по 2 в ряд, с отступами */
.slider-inner-wrapper .slide {
    flex: 0 0 31.33%; /* ширина каждого слайда */
    box-sizing: border-box;
    margin-right: 3% !important; /* горизонтальный отступ, кроме последнего */
    border-radius: 12px;
    background: #f7f7f7;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* Убираем правый отступ у каждого второго слайда */
.slider-inner-wrapper .slide:nth-child(3n) {
    margin-right: 0;
}

/* Картинки внутри слайда растягиваем по ширине и сохраняем пропорции */
.slider-inner-wrapper .slide img {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

/* При наведении небольшой масштаб для эффекта */
.slider-inner-wrapper .slide:hover {
    transform: scale(1.04);
}

/* Адаптив — на узких экранах 1 слайд в ряд */
@media (max-width: 768px) {
    .slider-inner-wrapper .slide {
        flex: 0 0 100%;
        margin-right: 0;
        padding: 5px;
    }
}


/* Контакты */
.service-phones {
    margin-top: 30px;
    font-size: 1rem;
    color: #edefe978;
}

.phone-icon, .email-icon {
    vertical-align: middle;
    margin-right: 6px;
}

/*.phones-list p {*/
/*    margin: 0 0 10px 0;*/
/*}*/

.email-row {
    margin-bottom: 21px;
    background: linear-gradient(18deg, #b77cd6, #8db6c6, #ccd7dd);
    padding: 4px;
    border-radius: 6px;
    padding-left: 8px;
}

.icons-row a img {
    width: 44px;
    height: 44px;
    margin-right: 10px;
    margin-bottom: 4px;
    vertical-align: middle;
}

/* Мобильные стили */
@media (max-width: 768px) {

    .price-table th,
    .price-table td {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .service-description p,
    .technology-section ul,
    .advantages-section ul {
        font-size: 1.4rem;
    }

    /* Слайдер — 1 слайд в строке для мобильных */
    .slider-inner-wrapper {
        transition: none;
    }

    .slider .slide {
        flex: 0 0 100% !important;
        padding: 5px !important;
    }
}

.videos-wrapper::-webkit-scrollbar {
    height: 8px;
}

.videos-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.videos-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
}

.videos-service {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.video-service-div {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    white-space: nowrap;
}

.video-service-divvv {
    flex: 0 0 auto;
    width: 320px;
    display: inline-block;
    height: 240px;
    box-sizing: border-box;
}

#prevBtn, #nextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: linear-gradient(90deg, #fdf9ff8f, #d2f2ff, #fdf9ff8f);
    border: none;
    padding: 0 10px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 30%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    user-select: none;
    color: grey;
}
#prevBtn:hover, #nextBtn:hover {
    background: rgba(200, 200, 200, 1);
}
#prevBtn {
    left: 10px;
}
#nextBtn {
    right: 10px;
}


/* Список преимуществ в одну строку */
.advantages-list.horizontal-list {
    list-style: none; /* Убираем маркеры */
    padding: 24px;
    margin: 0;
    display: flex; /* Горизонтальный ряд */
    gap: 40px; /* Отступы между пунктами */
    justify-content: center; /* Центрируем весь блок по горизонтали */
}

/* Каждый пункт - вертикальный flex с центровкой */
.advantage-item {
    display: flex;
    flex-direction: column; /* Вертикальное расположение: иконка сверху, текст снизу */
    align-items: center; /* Центрируем по горизонтали */
    max-width: 225px; /* Ограничиваем ширину, чтобы текст не был слишком растянут */
    text-align: center; /* Выравнивание текста по центру */
    margin-top: 21px;
}

.advantages__title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 30px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
}

/* Стили для иконок */
.advantage-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 10px; /* Отступ снизу для пространства между иконкой и текстом */
    flex-shrink: 0;
}

/* Текст под иконкой */
.advantage-text {
    font-size: 0.9rem;
    color: #34495e;
    line-height: 1.3;
}

/* Адаптивность - на узких экранах пунктам разрешаем перенос */
@media (max-width: 768px) {
    .advantages-list.horizontal-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .advantage-item {
        max-width: 100%;
    }
}

.services-inline-bg {
    background: linear-gradient(to right, #c6c5c6, #fbfcfa);
    padding: 24px 0;
    border-radius: 7px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.service-inline-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px;
}


.services-inline-row {
    display: flex;
    gap: 13px;
    justify-content: center;
    align-items: center; /* выравнивание по центру по вертикали */
    flex-wrap: nowrap; /* фиксированный ряд без переноса */
    overflow-x: auto; /* позволяет прокручивать ряд, если не помещается */
    padding: 0 10px; /* небольшой отступ по бокам */
    -webkit-overflow-scrolling: touch; /* плавная прокрутка на iOS */
}

.service-mini-card {
    flex: 0 0 110px; /* фиксированная ширина и запрет сжатия/растяжения */
    height: 185px; /* фиксированная высота для блочного выравнивания */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* сверху размещаем содержимое */
    text-align: center;
    background: #d8ded6;
    border-radius: 9px;
    box-shadow: 0 2px 9px rgba(30, 40, 72, 0.10);
    padding: 10px;
    transition: box-shadow 0.18s ease-in-out;
    box-sizing: border-box;
    cursor: pointer; /* курсор при наведении */
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    margin-bottom: 25px;
    margin-top: 25px;
}

.service-mini-card:hover {
    box-shadow: 0 2px 16px rgba(30, 40, 72, 0.18);
}

.service-mini-img {
    width: 190px;
    height: 125px;
    object-fit: cover;
    margin-bottom: 12px;
    border-radius: 6px;
    background: #ececec;
    box-shadow: 0 2px 6px rgba(30, 40, 72, 0.05);
    flex-shrink: 0;
}

.service-mini-caption {
    font-size: 14px;
    color: #32324d;
    line-height: 1.15;
    font-weight: 500;
    word-break: break-word;
    user-select: none; /* предотвращаем выделение текста при клике */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px;
    text-transform: uppercase;
}

/* Для изображений в блоках с фото (галерея и пр.), фиксируем размеры */
/*.photo-item-banners img {*/
/*    width: 100px; !* фиксированная ширина *!*/
/*    height: 100px; !* фиксированная высота *!*/
/*    object-fit: contain; !* сохраняет пропорции *!*/
/*    border-radius: 6px;*/
/*    box-shadow: 0 2px 6px rgba(30, 40, 72, 0.05);*/
/*    display: block;*/
/*    margin: 0 auto 10px auto; !* выравнивание по центру и отступ снизу *!*/
/*}*/

/* Чтобы при ховере вся карточка была интерактивной */
.service-mini-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
}

/* Прокрутка скрытая, если хотите — убрать скроллбар */
.services-inline-row::-webkit-scrollbar {
    height: 6px;
}

.services-inline-row::-webkit-scrollbar-track {
    background: transparent;
}

.services-inline-row::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* Мобильная адаптация — уменьшить ширину карточек и размер шрифта */
@media (max-width: 480px) {
    .service-mini-card {
        flex: 0 0 90px;
        height: 130px;
        padding: 8px;
    }

    /*.service-mini-img {*/
    /*    width: 48px;*/
    /*    height: 48px;*/
    /*    margin-bottom: 8px;*/
    /*    border-radius: 4px;*/
    /*}*/
    .service-mini-img {
        width: 165px;
        height: 80px;
        margin-bottom: 8px;
        border-radius: 4px;
    }

    #photoSlider {
        overflow: hidden;
        position: relative;
        max-width: 200px;
        margin: 0 auto;
    }

    .service-mini-caption {
        font-size: 12px;
        padding: 0 3px;
    }

    .photo-item-banners img {
        width: 80px;
        height: 80px;
    }
}


#imageModal {
    display: none; /* скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);

    /* Убираем дублирование display. flex нужно ставить при открытии через JS */
    justify-content: center;
    align-items: center;
    flex-direction: row;

    z-index: 9999;
    cursor: pointer;
}

/* Кнопки навигации - стрелки слева и справа */
#imageModal .modal-nav {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    font-size: 24px;
    user-select: none;
    align-self: center;
    transition: background-color 0.3s ease;
    /* Кнопки тоже скрыты с контейнером, когда display: none; */
}

#modalPrev {
    margin-right: 20px;
}

#modalNext {
    margin-left: 20px;
}

#imageModal .modal-nav:hover {
    background: rgba(255, 255, 255, 1);
}

/* Изображение в модальном окне */
#imageModal .modal-image {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
    user-select: none;
    pointer-events: none; /* чтобы клики проходили через картинку */
    flex-shrink: 0;
}

.laser-cutting-ad {
    max-width: 1250px;
    margin: 20px auto;
    padding: 15px;
    color: #333;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    font-size: 1rem;
}

.laser-cutting-ad h1 {
    font-size: 2.2em;
    color: #222;
    text-align: center;
    margin-bottom: 15px;
    filter: drop-shadow(2px 1px 0px rgba(255, 255, 255, 0.68));
}

.laser-cutting-ad p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.ad-features ul {
    margin-bottom: 25px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: #555;
    font-size: 1.1em;
    list-style: none;
    padding: 15px;
    border-radius: 7px;
}

.ad-features ul li {
    margin-bottom: 8px;
}

.ad-features-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5em;
    margin-bottom: 1em;
    text-align: left;
    font-size: 13px;
}

.ad-features-list li {
    margin-bottom: 0.4em;
    font-weight: 500;
    color: #2a2a2a;
    text-transform: none;
}

.margin-button-top {
    margin-bottom: 1em;
    margin-top: 1em;
}

.ad-examples {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 колонки */
  gap: 15px;
  padding: 10px;
  box-sizing: border-box;
  overflow-x: visible; /* без скролла по умолчанию */
}

.ad-item {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%; /* занять всю ширину колонки */
  box-sizing: border-box;
}

.ad-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.ad-image {
    width: 100%; /* фиксированная ширина, укажите свою, например 300px */
    height: 200px; /* фиксированная высота, укажите свою, например 200px */
    object-fit: cover; /* сохраняет пропорции, обрезая лишнее */
    border-radius: 4px;
    margin-bottom: 12px;
}

.ad-item h2 {
  font-size: 1.1em;
  color: #111;
  margin-bottom: 13px;
}

.ad-item p {
  color: #555;
  margin-bottom: 15px;
  font-size: 1em;
  line-height: 1.4;
  text-align: left;
  text-transform: initial;
}

.size-icon {
    width: 60px;
    height: 60px;
}

.btn.btn-primary {
  display: inline-block;
  background-color: #007bff;
  color: white !important;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn.btn-primary:hover {
  background-color: #0056b3;
}

/* Планшеты: 2 колонки */
@media (max-width: 1024px) {
  .ad-examples {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Мобильные устройства: горизонтальный скролл, 1 элемент на экран */
@media (max-width: 600px) {
  .ad-examples {
    display: flex;
    flex-wrap: nowrap;               /* Запрещаем перенос */
    overflow-x: auto;                /* Включаем горизонтальный скролл */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    gap: 15px;
    padding: 10px;
  }

  .ad-item {
    flex: 0 0 100%;     /* Каждый элемент занимает всю ширину экрана */
    max-width: 100%;
    scroll-snap-align: start; /* Прилипание к началу при прокрутке */
    box-sizing: border-box;
  }

    .laser-cutting-ad h1 {
        font-size: 1.1em;
        color: #222;
        text-align: center;
        margin-bottom: 15px;
    }

    .advantage-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 300px;
        text-align: center;
        margin-top: 21px;
        font-size: 24px;
    }

    .advantage-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    .ad-features ul {
        margin-bottom: 25px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        color: #555;
        font-size: 12px;
        list-style: none;
        padding: 15px;
        border-radius: 7px;
    }

    .size-icon {
        width: 34px;
        height: 34px;
    }

    .laser-cutting-ad p {
        font-size: 0.8em;
        line-height: 1.5;
        margin-bottom: 5px;
        text-align: left;
    }
}