/*
Theme Name: My Theme
Theme URI: http://example.com/my-theme
Author: Твое имя
Author URI: http://example.com
Description: Описание темы
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
*/
:root {
  --main-container: 1200px;
  --small-container: 1000px;
  
  --radzel-margin: 120px;
  --radzel-dop: 80px;
  --offset-content: 40px;
  --offset-small: 24px;
  --offset-mini: 10px;
}

::selection {
    color:#fff;
    background:#AAB3BC; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

html, body {
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    color: #000;
    font-weight: 400;
    background-color: #fff;
    line-height: 1.3;     
    height: 100%; /* Устанавливаем высоту 100% для правильного позиционирования */
    margin: 0;
    padding: 0;
}

.container {
    width: var(--main-container);
    margin: 0 auto; 
    padding: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;    
}

h1 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase; /* Все буквы заглавные */
}

h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase; 
}

h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 10px;
    text-transform: uppercase; 
}

h4 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
}

h5 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 12px;
}

p {
    line-height: 1.5;
     margin-bottom: 30px; /* Отступ после каждого абзаца */
}


.ul-no-point ul,
.ul-no-point ol {
  list-style-type: none;
  margin-left: 0px !important;
  padding: 0;
}



textarea, select  {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: #565656;
}
a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* Убираем синий прямоугольник на мобильных */
}

a:focus-visible {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 122, 255, 0.8);
}

a:focus {
    outline: none;
}

a:active {
    outline: none;
}


.aLinkDashed {
    text-decoration: none; /* Убираем стандартное подчеркивание */
    border-bottom: 1px dashed #14A0FD; /* Делаем пунктирное подчеркивание */
    color: inherit; /* Наследуем цвет от родительского элемента */
    transition: border-bottom 0.3s ease; /* Плавное изменение подчеркивания */
}

.aLinkDashed:hover {
    border-bottom-style: solid; /* При наведении делаем сплошное подчеркивание */
}

.aLinkActive {
    color: #007AFF !important;
}

.aLinkBlack2 {
    color: #000;
    text-decoration: none;
   }
.aLinkBlack2:hover {
    color: #000; 
}

.razdel {
    margin-top: var(--radzel-margin);
}

.razdel-dop {
    margin-top: var(--radzel-dop);
}

.offset {
    margin-top: var(--offset-content);
}

.offset-small {
    margin-top: var(--offset-small);
}

.offset-mini {
    margin-top: var(--offset-mini);
}

.offset-none {
    margin-bottom: 0px;
}


.offset-bg {
    padding-top: var(--offset-content);
}

.offset-minus-bg-razdel {
    padding-bottom: var(--radzel-margin);
    margin-bottom: calc(-1 * var(--radzel-margin));
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Автоматически создаются колонки от 300px */
    gap: 60px; /* Расстояние между колонками */
    justify-content: start;
}

.grid-item {
    background-color: #f3f3f3; /* Фон для наглядности */
    padding: 20px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.grid-span-3 {
    grid-column: span 3; /* Один элемент занимает 3 колонки */
}

.grid-span-2 {
    grid-column: span 2; /* Один элемент занимает 2 колонки */
}

.grid-span-1 {
    grid-column: span 1; 
}

.content-half {
    width: 600px;
}

.content-gird-foto-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Адаптивная ширина колонок */
    gap: 20px; /* Отступы между элементами */
    padding: 30px; /* Внутренние отступы для контейнера */
}

.content-gird-foto-3 div {
   
}

.content-gird-foto-3 img {
    max-width: 100%; /* Ограничение ширины изображения */
    height: auto; /* Сохранение пропорций */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень для изображений */
}

.content-gird-foto-3 p {
    margin-top: 10px; /* Отступ между изображением и текстом */
}



.grid-container-half {
    display: grid;
    grid-template-columns: 600px 480px;
    gap: 120px; /* Расстояние между колонками */
    justify-content: start;
}

.grid-container-cta {
    display: grid;
    grid-template-columns: 300px 420px 360px; /* Три столбца по 360px */
    gap: 60px; /* Расстояние между колонками */
    justify-content: start;
}

.grid-container-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; /* Расстояние между колонками */
    justify-content: start;
}

.grid-container-two-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    justify-content: start;
}

.grid-buttons {
    display: flex;
    justify-content: left;
    gap: 48px;
}

.grid-container-item {
    display: grid;
    grid-template-columns: 220px auto; 
    gap: 12px; 
    justify-content: space-between;   
}

.grid-container-item-img{
    display: flex;
    align-items: center;
    gap: 12px;
}

.grid-container-item-img-item {
    width: 30px; /* Фиксированная ширина */
    height: 30px; /* Фиксированная высота */
    display: flex;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
}

.grid-container-6 {
    display: grid;
    grid-template-columns: repeat(6, 180px); /* Три столбца по 360px */
    gap: 12px;
    justify-content: space-between;
}

.container-cover {
    height: 100vh;
    width: 100%; /* Можно задать фиксированную ширину, если нужно */
    overflow: hidden; /* Обрезаем лишнее */
}

.container-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняем контейнер, сохраняя пропорции */
    object-position: center; /* Центрируем изображение */
    display: block; /* Убираем лишние отступы */
}

.grid-img-text {
    display: grid;
    grid-template-columns: 80px auto; /* Три столбца по 360px */
    gap: 40px; /* Расстояние между колонками */
    justify-content: start;
}

.grid-img-contact {
    display: grid;
    grid-template-columns: 40px auto; /* Три столбца по 360px */
    gap: 18px; /* Расстояние между колонками */
    justify-content: start;
}

.grid-footer {
    display: grid;
    grid-template-columns: 300px 300px 362px 238px;
    justify-content: start; 
}

.grid-modal-title {
    display: grid;
    grid-template-columns: 1fr auto; /* Один столбец для текста, второй — для кнопки */
    gap: 10px; 
    align-items: center;
    justify-content: start; 
    margin-bottom: 30px;
}

.grid-modal-title h4 {
    font-size: 24px;
    font-weight: 500;
    margin: 0; /* Убираем отступы у заголовка */
    padding: 0; /* Убираем отступы */
    line-height: 1.1;     
}

.grid-modal-title h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 0; /* Убираем отступы у заголовка */
    padding: 0; /* Убираем отступы */
}

.grid-modal-title h5 {
    font-size: 18px;
    font-weight: 500;
    margin: 0; /* Убираем отступы у заголовка */
    padding: 0; /* Убираем отступы */
    text-transform: none;
}

.grid-mobile-contact {
    display: grid;
    grid-template-columns: 32px auto; 
    gap: 12px; 
    align-items: center;
    justify-content: start;
    margin-bottom: 18px;
}


.grid-feedback-star {
    display: grid;
    grid-template-columns: repeat(5, 32px);
    gap: 6px; 
    justify-content: start;
    margin-bottom: 12px;
}

.header {
    display: grid;
    grid-template-columns: auto 1fr auto; /* Разделение на три колонки: логотип, центральная часть и контакты */
    align-items: center;
    margin-top: 30px;
}

.header-logo {
    display: grid; /* Включаем grid для внутренних элементов */
    grid-template-columns: auto auto 1fr; /* Три элемента в одну строку */
    align-items: center; /* Выравниваем элементы по вертикали */
    gap: 10px; /* Отступы между элементами */
    justify-items: start; /* Элементы будут выровнены по левому краю */
}

.header-logo-img {
    width: 68px;
    height: 68px;
}

.header-logo-name {
    font-size: 12px;
    text-transform: uppercase;
    padding-left: 24px;
    padding-right: 24px;
    width: 158px;
}

.header-logo-description {
    display: flex; /* Включаем Flexbox */
    align-items: center; /* Центрируем текст по вертикали */
    font-size: 12px;
    border-left: 1px solid #f2ca75; 
    padding-left: 24px;
    width: 248px;
    height: 100%;
}

.header-contact {
    display: grid; /* Включаем grid для внутренних элементов */
    grid-template-columns: auto auto 1fr; /* Три элемента в одну строку */
    justify-self: end; /* Размещаем справа */
    align-items: center;
    gap: 10px; /* Отступы между элементами */
    height: 100%;
}

.header-contact-email {
    font-size: 20px;
    color: #565656;
}

.header-contact-phone {
    padding-left: 24px;
    padding-right: 24px;
}

.header-contact-adress {
    font-size: 12px;
    color: #909090;
    width: 264px;
    padding-left: 24px;
    display: flex; /* Включаем Flexbox */
    align-items: center; /* Центрируем текст по вертикали */
    height: 100%;
    border-left: 1px solid #f2ca75; 
}

.header-mobile-menu, .footer-mobile {
    display: none;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 31px;
    margin-bottom: 28px;
    width: 100%; /* Растягиваем меню на всю ширину */
}

.menu-left {
    display: flex;
    font-size: 14px;
}

.menu-item {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #565656;
    text-transform: uppercase;
    border-right: 1px solid #A8A8A8;
    padding-left: 24px;
    padding-right: 24px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-20px);
    transition: transform 0.3s ease, color 0.3s ease; /* Четкая анимация */
}

/* Появление меню при загрузке */
.menu-item:nth-child(1) { animation: fadeInItem 0.3s ease-in-out forwards; animation-delay: 0.1s; }
.menu-item:nth-child(2) { animation: fadeInItem 0.3s ease-in-out forwards; animation-delay: 0.2s; }
.menu-item:nth-child(3) { animation: fadeInItem 0.3s ease-in-out forwards; animation-delay: 0.3s; }
.menu-item:nth-child(4) { animation: fadeInItem 0.3s ease-in-out forwards; animation-delay: 0.4s; }
.menu-item:nth-child(5) { animation: fadeInItem 0.3s ease-in-out forwards; animation-delay: 0.5s; }
.menu-item:nth-child(6) { animation: fadeInItem 0.3s ease-in-out forwards; animation-delay: 0.6s; }

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateX(-20px); /* Начинаем с небольшого смещения */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Плавно выравниваем по горизонтали */
    }
}

.menu-item:hover {
    color: #007AFF; /* Яркий синий цвет */
    transform: scale(1.1); /* Легкое увеличение, четко */
    border-color: #007AFF; /* Изменение цвета границы */
}

.menu-item a {
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет от родительского элемента */
    transition: color 0.3s ease, transform 0.2s ease; /* Плавное изменение цвета и масштаба */
}

.menu-item a:hover {
    color: #007AFF; /* Яркий синий цвет при наведении */
    
}

.menu-item-last {
    border-right: 0px;
    margin-right: 24px;
}
.menu-button {
    padding: 6px 30px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: 4px; 
    margin-right: auto; 
    background-color: #003366;
    color: white;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    cursor: pointer;
    border: 2px solid #0055A5; /* Добавил границу для четкости */
}

.menu-button:hover {
    background-color: #0055A5; /* Светлее при наведении */
    transform: scale(1.05);
    color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8); /* Легкое свечение */
}

.menu-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-icon {
    width: 36px; /* Фиксированная ширина */
    height: 36px; /* Фиксированная высота */
    display: flex;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    border-radius: 50%; /* Скругляем иконки */
}

.menu-icon img {
    width: 30px; /* Размер изображений */
    height: 30px; /* Размер изображений */
}

.hero {
    padding-top: 88px;
    color: #fff;
    background-color: gray;
    height: 780px;
    background-image: url(../images/index/hero-cover.jpg);     
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Видео будет вести себя как background-size: cover */
    z-index: 1; /* Видео на задний план */
}

/* Псевдоэлемент для затемнения краев */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.80) 100%);
    z-index: 1; /* Между видео и контентом */
}

.сover {
    height: 100vh;
    text-align: center;
    color: white;
}

.hero p {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 36px;
    margin-bottom: 60px;
    width: 506px;
}

.about-stats {
    display: flex;
    margin-top: 150px;
    gap: 138px;
}

.stat {
    text-align: left;
}

.stat-number {
    font-size: 140px;
    font-weight: 600;
    line-height: 1.0;
    color: #14A0FD;
}

.stat-number-middle {
    font-size: 120px;
}

.stat-text {
    font-size: 16px;
    color: #14A0FD;
    text-align: left;
    width: 142px;
}

.line-offset {
    position: relative;
}

.green-line {
    position: absolute;
    width: 120px;
    height: 5px;
    background-color: #f2ca75;
    top: 16px;   /* Смещение от верхнего края родителя */
    left: -180px;  /* Смещение от левого края родителя */
}

.green-line-under {
    width: 50px;
    height: 4px;
    background-color: #4CAF50;
}

.uslugi {
    background-color: #E6F0FA;
}

.advantages-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.advantages-title {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
}

.advantages-description {
    font-size: 18px;
    line-height: 1.5;
    margin-top: 20px;
    max-width: 800px;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.advantage-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 15px;
}

.advantage-icon {
    width: 50px;
    height: 50px;
}

.advantage-title {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.advantage-text {
    font-size: 14px;
    line-height: 1.5;
}

/* Общий стиль FAQ */
.faq-item {
    font-size: 16px;
    padding: 20px 12px 20px 30px;
    border-radius: 16px;
    border: 1px solid #E5C07B; /* Мягкий золотистый оттенок */
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 40px;
    overflow: hidden;
    background: #FFF9E6; /* Светло-желтый фон */
    transition: all 0.3s ease-in-out;
}

/* При открытии меняем цвет фона и добавляем тень */
.faq-item[open] {
    background: #FFF4D1; /* Чуть более насыщенный желтый при открытии */
    border-color: #E5C07B;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Убираем стандартный маркер (стрелку) у summary */
.faq-item summary {
    list-style: none;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    padding-right: 10px;
}

/* Альтернативный способ для Safari */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item {
    
}




/* Стиль заголовка */
.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Стиль текста */
.faq-text {
    font-size: 16px;
    font-weight: 600;
    
    padding-right: 8px;
}

/* Иконка */
.faq-icon img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease-in-out;
}

/* Анимация поворота иконки при открытии */
.faq-item[open] .faq-icon img {
    transform: rotate(45deg);
}

/* Стиль для скрытого текста */
.faq-item p {
    font-size: 16px;
    font-weight: 400;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease-in-out;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-right: 10px;
}

/* Показываем текст, когда details открыт */
.faq-item[open] p {
    opacity: 1;
    max-height: 300px; /* Увеличил значение для плавного раскрытия */
    padding-top: 10px;
}


.reviews-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Базовый стиль отзывов */
.review-item {
    display: none;
    opacity: 0;
    transform: translateX(50px) scale(0.95); /* Немного сдвинут вправо и уменьшен */
    filter: blur(5px); /* Размытие при появлении */
    transition: opacity 0.6s ease-in-out, 
                transform 0.6s ease-in-out, 
                filter 0.6s ease-in-out;
}

/* Активный отзыв: появление */
.review-item.active {
    display: grid;
    opacity: 1;
    transform: translateX(0) scale(1); /* Возвращаем в нормальный размер */
    filter: blur(0);
}

/* Исчезающий отзыв: уходит влево и размывается */
.review-item.prev {
    transform: translateX(-50px) scale(0.95);
    opacity: 0;
    filter: blur(5px);
    transition: opacity 0.6s ease-in-out, 
                transform 0.6s ease-in-out, 
                filter 0.6s ease-in-out;
}

/* Контейнер отзывов */
.reviews-img-text {
    display: grid;
    grid-template-columns: 420px 360px;
    justify-content: start; 
    height: 510px;
}

/* Блоки с картинками */
.reviews-img-item {
    border: 1px solid #A8A8A8;    
    height: 510px;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.reviews-img-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Блоки с текстом */
.reviews-text-item {
    background: #003366;
    color: white;
    padding: 24px 48px;
    height: 510px;
}

/* Стрелки */
.slider-arrow {
    display: grid;
    grid-template-columns: 40px 40px;
    justify-content: end; 
    gap: 30px;
    margin-top: 34px;
}

.slider-arrow-item {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;    
    cursor: pointer;
}

/* Анимация стрелок при наведении */
.slider-arrow-item img {
    transition: transform 0.3s ease-in-out;
}

.slider-arrow-item:hover img {
    transform: scale(1.1); /* Легкий поворот при наведении */
}

.fact-container-width {
    display: grid;
    grid-template-columns: calc((min(100vw, 100%) - var(--main-container)) / 2) 360px calc((min(100vw, 100%) - var(--main-container)) / 2 + 2*360px + 120px);
    gap: 0px;
}

.fact-container-img {
    margin-left: 60px;
}

.cta-div-form {
    padding-left: 60px;
    position: relative; /* Для корректной работы позиционирования */
    overflow: visible; /* Убедитесь, что родительский контейнер позволяет фону выходить за пределы */
}

.cta-div-form-img {
    background-image: url(../images/index/cta/cta-consultation-cover.jpg);
    background-size: 893px 592px; /* Устанавливаем размеры фона */
    background-position: right center; /* Позиционируем картинку справа */
    background-repeat: no-repeat; /* Запрещаем повторение изображения */
    height: 592px; /* Устанавливаем высоту блока */
    width: 100%; /* Блок растягивается по ширине родителя */
    position: relative;
    overflow: visible; /* Разрешаем изображению выходить за пределы блока */
}

.cta-div-call {
    font-size: 24px;
    font-weight: 600;
    display: grid;
    grid-template-columns: 30px auto;
    gap: 10px;
    justify-content: start;    
    margin-top: 10px;
    margin-bottom: 30px;
}

.cta-div-write {
    display: grid;
    grid-template-columns: 120px auto; 
    gap: 20px; /* Расстояние между колонками */
    justify-content: start; /* Выравнивание по левому краю */
}

.cta-div-write p {
    font-size: 16px;
    margin-bottom: 0px;
    line-height: 1.3;
}

.cta-div-write-icon {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta-div-write-icon-item {
    width: 40px; /* Фиксированная ширина */
    height: 40px; /* Фиксированная высота */
    display: flex;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
}

.cta-consultation {
    background: linear-gradient(to bottom, #006699, #003366); /* Градиентный фон */
    padding: 70px 0;
    text-align: center;
}

.cta-project {
    background: linear-gradient(12deg, #76C679 0%, #5FA761 31%, #76C679 100%);
    padding: 70px 0;
    text-align: center;
}


.contact-form {

}
.contact-form input:not([type="checkbox"]),
.contact-form textarea, 
.contact-form select {
    font-size: 16px;
    padding: 12px;
    border: 1px solid #A8A8A8;
    border-radius: 8px;
    width: 100%;
}

.contact-form input[type="checkbox"] {
    width: auto;
}

.contact-form label {
    font-size: 16px;
}
/* Основная обертка */
.custom-select {
    position: relative;
}

/* Стилизация самого select */
.custom-select select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    color: #333;
    background-color: #fff;
    border: 1px solid #A8A8A8;
    border-radius: 8px;
    appearance: none; /* Убираем стандартный вид */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Добавляем кастомную стрелку */
.custom-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 32px;
    height: 32px;
    background-image: url("/images/icon/element/arrow-down.png");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    pointer-events: none; /* Позволяет кликам проходить через стрелку */
}

/* Вращаем стрелку при фокусе внутри контейнера */
.custom-select:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Стилизация выпадающего списка */
.custom-select select:focus {
    border-color: #999;
    outline: none;
}

/* Стилизация опций */
.custom-select select option {
    padding: 12px;
    font-size: 16px;
    color: #333;
    background: #fff;
}

/* Стилизация hover и selected */
.custom-select select option:hover,
.custom-select select option:checked {
    background: #e5e5e5; /* Цвет как в примере */
    font-weight: bold;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.cta-div-form ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 15px;
}

.cta-div-form ul li {
    line-height: 1.5;
}

.cta-div-form-fio {
    text-align: right;
}

.cta-div-form-fio-dop {
    font-size: 16px;
    text-align: right;
    margin-bottom: 20px;
}

.cta-div-form form {
    display: flex;
    flex-direction: column;
}
.cta-div-form input[type="tel"] {
    font-size: 18px;
    padding: 30px;
    margin-bottom: 10px;
    border: 1px solid #A8A8A8;
    border-radius: 8px;
    height: 80px;
}

.form-control {

}

.policy {
    display: grid;
    grid-template-columns: 20px auto ; 
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: start;
    gap: 10px;
}    

.policy input[type="checkbox"] {
    transform: scale(1.5); /* Увеличиваем размер чекбокса */
    margin-right: 14px; /* Расстояние между чекбоксом и текстом, можно настроить по желанию */
}

.footer {
    background-color: #48515b;
    color: white;
    padding-top: 60px;
}

.footer-column {
    font-size: 16px;
    padding-right: 60px;
}

.footer-column h4 {
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;    
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    line-height: 1.8;
}

.footer-column ul li a {
    font-size: 14px;
}

.footer-li-union {
    line-height: 1.5 !important;
    margin-bottom: 14px;
}

.footer-copyright {
    font-size: 14px;
    background: #3E4854;
    color: #fff;
    display: flex;
    align-items: center; /* Центрируем по вертикали */
    height: 60px;
    width: 100%;
}

.icon-smm {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-smm-item {
    width: 36px; /* Фиксированная ширина */
    height: 36px; /* Фиксированная высота */
    display: flex;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
}

.icon-svg-white img {
    fill: white;  /* Изменяем цвет SVG на белый (работает, если SVG использует fill для цвета) */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.bg-success {
    background-color: #00cc00;
    color: #fff;
}

.bg-news {
    background-color: #e3f2fd;
}

.logo img {
    width: 80px;
}

.contact-info a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.breadcrumbs {
    font-size: 12px;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.breadcrumbs a {
    text-decoration: none;
    color: #000;
}

.breadcrumbs a:hover {
    color: #007AFF;
}

.breadcrumbs li {
    display: inline;
    list-style: none;
}

.breadcrumbs li + li::before {
    content: " → ";  /* Стрелка между элементами */
    color: #565656;
    padding-left: 4px;
    padding-right: 4px;
}

.breadcrumbs li:last-child a {
    color: #000;
    pointer-events: none;
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.footer-bottom {
    margin-top: 40px;
    text-align: center;
}

.p-xl {
    font-size: 40px;
    font-weight: 700;
}

.p-big {
    font-size: 32px;
    line-height: 1.4;    
}

.p-middle {
    font-size: 24px;
}

.p-link {
    font-size: 18px;
    margin-top: -24px;
}

.p-item {
    font-size: 16px;
}

.p-subtext {
    font-size: 14px !important;
    line-height: 1.3;
}

.p-contact-item {
    font-size: 12px;
    color: #565656;
    margin-bottom: 8px;
}

.p-small {
    font-size: 12px;
}

.text-upp {
    text-transform: uppercase;    
}

.span-white {
    color: white;
}

.span-label {
    font-size: 16px;
}

.span-item {
    font-size: 14px;
}

.fa-code { background-image: url('/images/elements/fa/code.svg'); }
.fa-suitcase { background-image: url('/images/elements/fa/suitcase.svg'); }
.fa-brick-wall { background-image: url('/images/elements/fa/brick-wall.svg'); }
.fa-puzzle { background-image: url('/images/elements/fa/puzzle.svg'); }
.fa-print { background-image: url('/images/elements/fa/print.svg'); }
.fa-calculator { background-image: url('/images/elements/fa/calculator.svg'); }
.fa-cycle { background-image: url('/images/elements/fa/cycle.svg'); }
.fa-briefcase { background-image: url('/images/elements/fa/briefcase.svg'); }
.fa-run { background-image: url('/images/elements/fa/run.svg'); }
.fa-server { background-image: url('/images/elements/fa/server.svg'); }
.fa-pr { background-image: url('/images/elements/fa/pr.svg'); }
.fa-calendar-write { background-image: url('/images/elements/fa/calendar-write.svg'); }
.fa-video-camera { background-image: url('/images/elements/fa/video-camera.svg'); }
.fa-ok-green { background-image: url('/images/elements/fa/ok-green.svg'); }
.fa-stopwatch { background-image: url('/images/elements/fa/stopwatch.svg'); }
.fa-setup { background-image: url('/images/elements/fa/setup.svg'); }
.fa-traffic { background-image: url('/images/elements/fa/traffic.svg'); }
.fa-palette { background-image: url('/images/elements/fa/palette.svg'); }
.fa-find { background-image: url('/images/elements/fa/find.svg'); }
.fa-doctor { background-image: url('/images/elements/fa/doctor.svg'); }
.fa-user { background-image: url('/images/elements/fa/user.svg'); }
.fa-audience-segment { background-image: url('/images/elements/fa/audience-segment.svg'); }
.fa-printing-documents { background-image: url('/images/elements/fa/printing-documents.svg'); }
.fa-camera { background-image: url('/images/elements/fa/camera.svg'); }
.fa-brain { background-image: url('/images/elements/fa/brain.svg'); }
.fa-screen { background-image: url('/images/elements/fa/screen.svg'); }
.fa-wrench { background-image: url('/images/elements/fa/wrench.svg'); }
.fa-robot { background-image: url('/images/elements/fa/robot.svg'); }
.fa-cube { background-image: url('/images/elements/fa/cube.svg'); }
.fa-phone { background-image: url('/images/elements/fa/phone.svg'); }
.fa-pdf { background-image: url('/images/elements/fa/pdf.svg'); }
.fa-link { background-image: url('/images/elements/fa/link.svg'); }
.fa-tools { background-image: url('/images/elements/fa/tools.svg'); }
.fa-cooperation { background-image: url('/images/elements/fa/cooperation.svg'); }
.fa-book { background-image: url('/images/elements/fa/book.svg'); }
.fa-land { background-image: url('/images/elements/fa/land.svg'); }
.fa-chart { background-image: url('/images/elements/fa/chart.svg'); }
.fa-chart-up { background-image: url('/images/elements/fa/chart-up.svg'); }
.fa-compass { background-image: url('/images/elements/fa/compass.svg'); }
.fa-folder { background-image: url('/images/elements/fa/folder.svg'); }
.fa-site { background-image: url('/images/elements/fa/site.svg'); }
.fa-target { background-image: url('/images/elements/fa/target.svg'); }
.fa-paperwork { background-image: url('/images/elements/fa/paperwork.svg'); }
.fa-orders { background-image: url('/images/elements/fa/orders.svg'); }
.fa-wholesale { background-image: url('/images/elements/fa/wholesale.svg'); }
.fa-sending { background-image: url('/images/elements/fa/sending.svg'); }
.fa-email { background-image: url('/images/elements/fa/email.svg'); }
.fa-basket { background-image: url('/images/elements/fa/basket.svg'); }
.fa-idea { background-image: url('/images/elements/fa/idea.svg'); }
.fa-dialog { background-image: url('/images/elements/fa/dialog.svg'); }
.fa-document-write { background-image: url('/images/elements/fa/document-write.svg'); }
.fa-smartphone { background-image: url('/images/elements/fa/smartphone.svg'); }
.fa-tv { background-image: url('/images/elements/fa/tv.svg'); }
.fa-races { background-image: url('/images/elements/fa/races.svg'); }
.fa-rocket { background-image: url('/images/elements/fa/rocket.svg'); }
.fa-drawing { background-image: url('/images/elements/fa/drawing.svg'); }
.fa-analytics { background-image: url('/images/elements/fa/analytics.svg'); }

.fa-behance    { background-image: url('/images/elements/brand/behance.svg'); }
.fa-facebook   { background-image: url('/images/elements/brand/facebook.svg'); }
.fa-google     { background-image: url('/images/elements/brand/google.svg'); }
.fa-instagram  { background-image: url('/images/elements/brand/instagram.svg'); }
.fa-linkedin   { background-image: url('/images/elements/brand/linkedin.svg'); }
.fa-pinterest  { background-image: url('/images/elements/brand/pinterest.svg'); }
.fa-strava     { background-image: url('/images/elements/brand/strava.svg'); }
.fa-telegram   { background-image: url('/images/elements/brand/telegram.svg'); }
.fa-threads    { background-image: url('/images/elements/brand/threads.svg'); }
.fa-tiktok     { background-image: url('/images/elements/brand/tiktok.svg'); }
.fa-viber      { background-image: url('/images/elements/brand/viber.svg'); }
.fa-vk         { background-image: url('/images/elements/brand/vk.svg'); }
.fa-x          { background-image: url('/images/elements/brand/x.svg'); }
.fa-yandex     { background-image: url('/images/elements/brand/yandex.svg'); }
.fa-youtube    { background-image: url('/images/elements/brand/youtube.svg'); }
.fa-odnoklassniki    { background-image: url('/images/elements/brand/odnoklassniki.svg'); }







/* Базовый стиль всех fa-иконок */
[class^="fa-"], [class*=" fa-"] {
  display: inline-block;
  height: 1em; /* адаптируется к размеру шрифта */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 16px;
}


.fa-size-h4 {
  width: 32px;
  height: 32px;
}

/* Модификаторы размеров */
.fa-16 { width: 16px; height: 16px; }
.fa-20 { width: 20px; height: 20px; }
.fa-24 { width: 24px; height: 24px; }
.fa-32 { width: 32px; height: 32px; }



.div-test-lauout {
    background-color: #FFFFE0; /* Светло-желтый фон */
    border: 1px solid #A8A8A8; /* Серая рамка */
    padding: 20px; /* Внутренние отступы */
    height: 510px;
}

.div-test-lauout-square {
    background-color: #FFFFE0; /* Светло-желтый фон */
    border: 1px solid #A8A8A8; /* Серая рамка */
    padding: 20px; /* Внутренние отступы */
    height: 360px;
}

.div-test-lauout-small {
    background-color: #FFFFE0; /* Светло-желтый фон */
    border: 1px solid #A8A8A8; /* Серая рамка */
    padding: 20px; /* Внутренние отступы */
    height: 100px;
}

.div-test-modal-exit {
    display: grid;
    grid-template-columns: 150px auto; /* Два столбца */
    justify-content: space-between;
    width: 100%;
    position: relative; /* Контейнер остается основой для позиционирования */
}

.div-test-modal-exit-text {
    font-size: 18px;
    font-weight: bold;
    width: 150px;
    padding-top: 12px;
}

.div-test-modal-exit-img {
    display: flex;
    justify-content: flex-end; /* Гарантирует прижатие изображения вправо */
    height: 216px;
    width: 171px;
    overflow: hidden;
}

.div-test-modal-exit-img img {
    position: absolute;
    top: -38px;
    right: -20px; 
}

.div-test-fact-text {
    min-height: 80px;
}

.div-test-lauout-z-index-2 {
    z-index: 2;
    position: relative;
}

/* Стили для маркированного списка */
.div-ul ul {
    font-size: 16px;
    padding-left: 20px;
    margin: 0;
    margin-bottom: 8px;
    list-style: disc; /* Круги как маркеры */
}

.div-ul ul li {
    margin-bottom: 2px;
}

/* Стили для нумерованного списка */
.div-ul ol {
    padding-left: 20px;
    margin: 10px 0;
    list-style: decimal; /* Цифры как маркеры */
}

.div-ul ol li {
    margin-bottom: 5px;
}

.div-center {
    display: flex;
    flex-direction: column; /* Вертикальное выравнивание элементов */
    align-items: center; /* Центрирование по горизонтали */
    justify-content: center; /* Центрирование по вертикали, если нужно */
    text-align: center; /* Для текстов и ссылок */
}

.div-center-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрирует элементы по вертикали */
}

.div-center-column button {
    width: auto; /* Естественная ширина */
    align-self: flex-start; /* Выравнивание кнопки по левому краю */
}

.div-test-cover {
    padding: 70px 0;
    font-weight: 500;
}


.div-link-color a {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: #007AFF;
    transition: color 0.3s;
}

/* Псевдоэлемент применяется только если внутри ссылки НЕТ <img> */
.div-link-color a:not(:has(img)):after {
    display: block;
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #F96D00;
    content: "";
    transition: width 0.3s ease-out;
}

.div-link-color a:hover,
.div-link-color a:focus {
    color: #0056b3;
}

.div-link-color a:hover:not(:has(img)):after,
.div-link-color a:focus:not(:has(img)):after {
    width: 100%;
}



.div-link-color ul,
.div-link-color ol {
    margin: 0 0 16px 24px;
    padding: 0;
}

.div-link-color ul ul,
.div-link-color ol ol {
    list-style-type: disc; /* одинаковый стиль для вложенных списков */
    margin-left: 20px; /* вложенность визуально читается */
}

.div-link-color li {
    margin-bottom: 8px;
}

.div-link-color h2 {
    margin-top: 50px;
    margin-bottom: 16px;
}


.div-link-color h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 50px;
    margin-bottom: 16px;
    text-transform: uppercase; 
    
}



.div-link-hover ul,
.div-link-hover ol {
    margin: 0 0 16px 24px;
    padding: 0;
}

.div-link-hover ul ul,
.div-link-hover ol ol {
    list-style-type: disc; /* одинаковый стиль для вложенных списков */
    margin-left: 20px; /* вложенность визуально читается */
}

.div-link-hover li {
    margin-bottom: 8px;
}

.div-link-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.div-link-shadow:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}


.visible-tablets {
    display: none;
}

/* Модальное окно (изначально скрыто, но без display: none) */
/* Модальное окно */
.modal {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* Центрирование окна */
    position: fixed;
    inset: 0; /* Растягиваем окно по всему экрану */
    margin: auto; /* Автоматические отступы для центрирования */
    
    /* Размеры и оформление */
    border: none;
    padding: 20px;
    border-radius: 16px;
    background: white;
    
    width: 90%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.85);
}

.modal-small {
    max-width: 360px;
}

.modal-big {
    width: var(--main-container);
}

.modal-middle {
    width: 600px;
}

/* Когда модальное окно открывается */
.modal.show {
    opacity: 1;
    transform: scale(1);
}

/* Затемненный фон */
::backdrop {
    background: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.3s ease;
}

/* Анимация затемнения фона */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Контент модального окна */
.modal-content p {
    font-size: 16px;
    margin-bottom: 10px;
}

.modal-content {
}

/* Стили для маркированного списка */
.modal-content ul {
    font-size: 16px;
    padding-left: 20px;
    margin: 0;
    margin-bottom: 8px;
    
    list-style: disc; /* Круги как маркеры */
}

.modal-content ul li {
    margin-bottom: 2px;
}

/* Стили для нумерованного списка */
.modal-content ol {
    padding-left: 20px;
    margin: 10px 0;
    list-style: decimal; /* Цифры как маркеры */
}

.modal-content ol li {
    margin-bottom: 5px;
}

.modal-menu-mobile h4 {
    font-size: 18px;
    font-weight: 400;
    line-height: 2.0;
    text-transform: uppercase;
}

/* Кнопка закрытия */
.close {
    cursor: pointer;
}

.button-main {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background-color: #003366;
    border: 2px solid #0055A5; /* Добавил четкую границу */
    border-radius: 12px; /* Чуть меньше скругления, чтобы кнопка выглядела солиднее */
    cursor: pointer;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px;
    padding-right: 40px;
    
    height: 60px;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}

.button-main:hover {
    background-color: #0055A5; /* Светлее при наведении */
    color: #FFD700;
    transform: translateY(-2px); /* Легкое поднятие */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); /* Технологичное свечение */
}

.button-dop {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 12px; /* Уменьшил скругление для строгого вида */
    cursor: pointer;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px;
    padding-right: 40px;    
    height: 60px;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
    background-color: transparent; /* Делаем кнопку с прозрачным фоном */
}

.button-dop:hover {
    background-color: #fff;
    color: #003366; /* Темно-синий текст при наведении */
    transform: translateY(-2px); /* Легкое поднятие */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); /* Свечение */
}

.button-shadow {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}       


@keyframes slideme {
    0% {
        left: -30px;
        margin-left: 0px;
    }
    30% {
        left: 110%;
        margin-left: 80px;
    }
    100% {
        left: 110%;
        margin-left: 80px;
    }
}

.btn-glow {
    overflow: hidden;
    position: relative;
}

.btn-glow:after {
    content: "";
    position: absolute;
    top: 0;
    left: -200px;
    width: 60px;
    height: 100px;
    background-color: #fff;
    filter: blur(30px);
    transform: skewX(30deg) translateZ(0);
    transition: 1s;
    animation-name: slideme;
    animation-duration: 3s;
    animation-delay: 0.05s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.btn-cta-consultation, .btn-cta-project  {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    padding-left: 40px;
    padding-right: 40px;
    border: 3px solid #fff;
    border-radius: 32px;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    margin: 0 auto;
    display: flex;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    min-width: 320px;
    height: 60px;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-cta-consultation:hover {
    background: white;
    color: #003366;
}

.btn-cta-project:hover {
    background: white;
    color: #5FA761;
}

.btn, .btn-link, .btn-auto {
    font-size: 18px;
    font-weight: 600;
    background: #003366;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    display: flex;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    height: 60px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    border: 2px solid #0055A5; /* Четкая граница */
    cursor: pointer;
}

.btn:hover, .btn-link:hover {
    background: #0055A5; /* Светлее при наведении */
    color: #fff;
    transform: translateY(-2px); /* Легкое поднятие */
    box-shadow: 0 0 12px rgba(0, 85, 165, 0.6); /* Свечение */
}

.btn {
    width: 190px;
}

.btn-link {
    width: 100%;
}

.btn-auto {
    padding-left: 30px;
    padding-right: 30px;
    width: auto;
}

.btn-cta-full, .btn-cta {
    font-size: 18px;
    background: #007AFF;
    color: #fff;
    padding: 20px 40px; /* Сделал паддинги более сбалансированными */
    border: none;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 20px;
    border-radius: 8px;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.4); /* Легкая тень */
}

.btn-cta-full:hover, .btn-cta:hover, .btn-blue:hover {
    background: #005FCC; /* Темнее при наведении */
    transform: translateY(-2px); /* Легкое поднятие */
    box-shadow: 0 6px 12px rgba(0, 95, 204, 0.6); /* Усиление тени */
}

.btn-cta-full {
    height: 80px;
}

.btn-cta {
    height: 60px;
    width: 100%;
}

.btn-grreen {
    border: 2px solid #45a043; 
    background: #4CAF50;
}

.btn-grreen:hover {
    background: #45a043; /* Темнее зеленый */
}

.btn-blue {
    background: #007AFF;
    color: #fff;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}

.btn-tag {
  display: inline-block;
  margin-right: 13px;
  margin-bottom: 6px;

  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;

  color: #0b5e66; /* Глубокий морской */
  background-color: #e1f9fb; /* Мягкий голубой с хорошим контрастом */
  border: 1px solid #1dbec5; /* Цветовая связь с основным акцентом */
  border-radius: 4px;

  text-decoration: none;
  cursor: pointer;
  user-select: none;

  transition: 
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.btn-tag:hover {
  color: #fff;
  background-color: #1dbec5; /* Акцентный насыщенный */
  border-color: #1dbec5;
}


.input__bottom {
    margin-bottom: 20px;
}

.img-icon-write {
    width: 40px; 
    height: 40px;
}

.img-width {
    width: 100%; /* или укажите конкретное значение, например, 500px */
    height: auto; /* Сохраняет пропорции изображения */
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-border {
    border: 1px solid #A8A8A8;    
}

.img-shadow {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

.img-rounded {
    border-radius: 15px;
}

.img-circle {
    border-radius: 40px;
}

.img-icon-big-twin {
  height: 80px;
  width: 80px; /* фиксируем размер */
  object-fit: contain; /* сохраняет пропорции без обрезки */
  display: block;
}

.grid-img-text > div:first-child {
  display: flex;
  align-items: flex-start; /* выравнивание по верхнему краю */
  justify-content: center;
  height: 80px;
}

.grid-img-text {
    margin-top: 40px;
}


.swiper-slide {
    width: auto; /* Автоматическая ширина */
    max-width: 360px; /* Ограничение максимальной ширины */
}

.bg-yellow {
    background: radial-gradient(circle, #FFFFFF 0%, #FAFAED 100%);    
}

.bg-brand-radial {
    background: radial-gradient(circle, #FFFFFF 0%, #B3CDE0 100%);    
}

.bg-green {
    background-color: #4CAF50;    
}

.text-gray {
    color: #565656;
}

.text-white {
    color: #fff;
}

.lh-150 {
   line-height: 1.5 !important;
}

.lh-130 {
   line-height: 1.3 !important;
}

pre, code {
  white-space: pre-wrap;       /* Перенос строк внутри <pre> и <code> */
  word-break: break-word;      /* Перенос слов, если они длинные */
  overflow-wrap: break-word;   /* Современная альтернатива для word-break */
}

#mobileMenu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    background-color: #f8f9fa;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 20px;
    z-index: 3;
}

#mobileMenu.hidden {
    right: -100%;
}

#mobileMenu.visible {
    right: 0;
}


.ratio {
    position: relative;
    width: 100%;
}
.ratio::before {
    display: block;
    padding-top: var(--aspect-ratio);
    content: "";
}
.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio-16x9 {
    --aspect-ratio: calc(9 / 16 * 100%);
}