/* Стиль скроллбара */
::-webkit-scrollbar {
    width: 12px; /* Ширина скроллбара */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(218, 198, 189, 0.21); /* Цвет скроллбара */
    border-radius: 10px; /* Закругленные углы */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(192, 174, 167, 0.34); /* Цвет при наведении на скроллбар */
}

::-webkit-scrollbar-track {
    background: rgba(192, 174, 167, 0.09); /* Цвет дорожки скроллбара */
    border-radius: 10px; /* Закругленные углы */
}


.carousel {
    overflow-x: auto; /* Горизонтальный скроллинг */
    scroll-behavior: smooth; /* Плавная прокрутка */
    display: flex;
}


.carousel-wrapper {
    display: flex;
    flex-wrap: nowrap; /* Запрещаем перенос строк */
}

.carousel-item {
    flex: 0 0 auto; /* Элементы занимают фиксированное пространство */
    width: 19rem; /* Фиксированная ширина карточек */
    margin: 10px; /* Отступы между карточками */
    padding: 20px; /* Внутренние отступы */
    border-radius: 15px;
    background-color: var(--basic);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); /* Тень для эффекта глубины */
    text-align: left; /* Центрируем текст внутри карточек */
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.2s; /* Переход для анимаций */
    border: none; /* Удаление рамки */
}

.carousel-item:hover {
    transform: scale(1.05); /* Увеличение карточки при наведении */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Тень */
}

.price {
    font-size: 14px;
    font-weight: bold; /* Жирный шрифт для цен */
    color: #837068; /* Золотистый цвет */
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(131, 112, 104, 0.47);
}

.card-title {
    font-size: 16px;
    line-height: 24px; 
    color: var(--text); /* Золотистый цвет для заголовков */

}

.carousel-item .btn {
    font-size: 0.75rem; /* Размер текста остается прежним */
    padding: 0.6rem 4.5rem; /* Изменение отступов для увеличения размера кнопки */
    background-color: var(--basic); /* Цвет фона */
    border-radius: 20px;
    border: none; /* Удаление рамки */
    -webkit-tap-highlight-color: transparent;
    transform: scale(1);
    color: var(--text); /* Цвет текста (измените по необходимости) */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.btn-text{
    font-size: 1rem; /* Размер текста остается прежним */
    background-color: rgba(241, 218, 208, 0); /* Цвет фона */
    border-radius: 20px;
    border: none;
    transform: scale(0.8);
    color: rgba(87, 75, 70, 0.44); /* Цвет текста (измените по необходимости) */
    margin-left: -11pt;
}

.carousel-item .btn:focus,
.carousel-item .btn:active,
.carousel-item .btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: #f1e2d0 !important; /* Цвет фона при фокусе */
}

.carousel-item img {
    width: 20px; /* Установите желаемую ширину */
    height: auto; /* Сохранение пропорций */
    margin-right: 15px; /* Отступ между иконкой и текстом */
    fill: #837068; /*  Установка цвета иконки SVG (если используется inline SVG) */
}
.button-container {
    padding-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.button-common{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem; /* Высота кнопки */
    border-radius: 20px; /* Округлая форма */
    color: var(--text); /* Цвет текста */
    font-size: 18px; /* Размер шрифта */
    background-color: var(--button); /* Цвет фона для обеих кнопок */
    border: none; /* Убираем бордер для кнопок */
    cursor: pointer; /* Курсор в виде указателя при наведении */
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-decoration: none;
}

.whatsapp-button:hover {
    background-color: #249736;
    color: #ffffff;
}

.yclients-button:hover {
    background-color: #ffcb00;
    color: #000000;
}



.divider {
    width: 1.5px;
    height: 4rem;
    background-color: #837068;
    margin: 0 10px;
}

.cert-button {
    display: flex;
    justify-content: center;
    align-items: center; /* Ширина кнопки */
    height: 4rem; /* Высота кнопки */
    border-radius: 20px; /* Округлая форма */
    color: var(--text); /* Цвет текста */
    font-size: 18px; /* Размер шрифта */
    background-color: var(--button); /* Цвет фона для обеих кнопок */
    padding: 20px;
    border: none; /* Убираем бордер для кнопок */
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.cert-button .btn:focus,
.cert-button .btn:active,
.cert-button .btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: #b7a69e !important; /* Цвет фона при фокусе */
}
.cert-button img {
    width: 50px; /* Установите желаемую ширину */
    margin-right: 15px; /* Отступ между иконкой и текстом */
    margin-left: 15px;
    fill: #000000; /*  Установка цвета иконки SVG (если используется inline SVG) */
}

#servicesList {
    margin-top: 20px; /* Отступ сверху для списка услуг */
}

.container .modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Фиксированное позиционирование */
    z-index: 10000; /* На переднем плане */
    left: 0;
    top: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
}

/* Стили для содержимого модального окна */
.container .modal-content {
    background-color: var(--background); /* Белый фон */
    margin: auto; /* Центрирование по горизонтали */
    padding: 20px; /* Отступы */
    border: 1px solid #888; /* Граница */
    width: 100%; /* Занимает 50% от ширины окна браузера */
    max-width: 600px; /* Максимальная ширина */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень */
}

/* Кнопка закрытия */
.container .close-btn {
    color: #aaa; /* Цвет кнопки */
    float: right; /* Выравнивание вправо */
    font-size: 28px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    cursor: pointer; /* Курсор в виде руки */
}

.container .close-btn:hover,
.container .close-btn:focus {
    color: black; /* Цвет при наведении */
}

/* Заголовок модального окна */
.container .modal-header {
    border-bottom: 1px solid #eaeaea; /* Нижняя граница */
    margin-bottom: 15px; /* Отступ снизу */
}

/* Основная часть модального окна */
.container .modal-body {
    max-height: 400px; /* Максимальная высота */
    overflow-y: auto; /* Вертикальная прокрутка */
    padding: 10px 0; /* Отступы */
}

@media (max-width: 767px) {
    .unique-modal-content {
        margin-left: 0px !important;
    }
}
@media (min-width: 768px) {
    .unique-modal-content {
        max-width: 40%;
    }
}

.unique-close-btn {
    color: #574b46;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}


.unique-modal h2 {
    font-size: 1.5em; /* Размер заголовка */
    margin-bottom: 15px; /* Отступ снизу */
    text-align: center; /* Центрировать заголовок */
}