/**
 * UI/UX исправления и улучшения
 * Исправление проблем с компоновкой, анимациями и интерактивностью
 */

/* ============================================
   ГЛОБАЛЬНАЯ ОПТИМИЗАЦИЯ ОТСТУПОВ ЗАГОЛОВКОВ
   ============================================ */

/* Уменьшение верхнего отступа для всех section-masthead на 22-23% */
/* Исключаем страницу портфолио, где уже установлены минимальные отступы */
section.section-masthead:not(.portfolio-page-masthead) {
    padding-top: calc(var(--gutter-vertical, 0px) + 62px) !important; /* Уменьшено с 80px на 22.5% */
}

@media screen and (max-width: 1400px) {
    section.section-masthead:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 0px) + 62px) !important;
    }
}

@media screen and (max-width: 1280px) {
    section.section-masthead:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 0px) + 60px) !important;
    }
}

@media screen and (max-width: 991px) {
    section.section-masthead:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 0px) + 54px) !important; /* Уменьшено с 70px на 22.9% */
    }
}

@media screen and (max-width: 768px) {
    section.section-masthead:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 0px) + 48px) !important;
    }
}

/* Переопределение для theme-architects.css стилей */
body .section-masthead:not(.portfolio-page-masthead) {
    padding-top: calc(var(--gutter-vertical, 0px) + 62px) !important;
}

@media screen and (max-width: 1400px) {
    body .section-masthead:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 60px) + 62px) !important;
    }
}

@media screen and (max-width: 1280px) {
    body .section-masthead:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 40px) + 60px) !important;
    }
}

@media screen and (max-width: 991px) {
    body .section-masthead:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 20px) + 54px) !important;
    }
}

/* Уменьшение также для pt-large класса на всех страницах, кроме портфолио */
section.section-masthead.pt-large:not(.portfolio-page-masthead) {
    padding-top: calc(var(--gutter-vertical, 0px) + 62px) !important;
}

@media screen and (max-width: 991px) {
    section.section-masthead.pt-large:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 0px) + 54px) !important;
    }
}

@media screen and (max-width: 768px) {
    section.section-masthead.pt-large:not(.portfolio-page-masthead) {
        padding-top: calc(var(--gutter-vertical, 0px) + 48px) !important;
    }
}

/* Плавная прокрутка для якорных ссылок */
html {
    scroll-behavior: smooth !important;
}

/* Компенсация для фиксированного хедера при прокрутке к якорю */
section[id] {
    scroll-margin-top: 100px !important;
}

@media (max-width: 991px) {
    section[id] {
        scroll-margin-top: 80px !important;
    }
}

@media (max-width: 576px) {
    section[id] {
        scroll-margin-top: 70px !important;
    }
}

/* ============================================
   0. УНИФИЦИРОВАННАЯ СИСТЕМА ОТСТУПОВ
   ============================================ */

/* Единая система spacing для гармоничного дизайна */
:root {
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 0.75rem;   /* 12px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
}

/* Оптимизация отступов секций */
.section.pt-large {
    padding-top: 4rem !important; /* 64px вместо большего значения */
}

/* КРИТИЧЕСКАЯ оптимизация для страницы портфолио - МИНИМАЛЬНЫЕ отступы */
/* Переопределяем базовый padding-top из main.css только для портфолио */
section.section-masthead.portfolio-page-masthead,
section.section-masthead.pt-large.portfolio-page-masthead {
    padding-top: calc(var(--gutter-vertical, 0px) + 10px) !important; /* Абсолютный минимум - только для header */
    min-height: auto !important;
}

@media (max-width: 991px) {
    section.section-masthead.portfolio-page-masthead,
    section.section-masthead.pt-large.portfolio-page-masthead {
        padding-top: calc(var(--gutter-vertical, 0px) + 8px) !important;
    }
}

@media (max-width: 768px) {
    section.section-masthead.portfolio-page-masthead,
    section.section-masthead.pt-large.portfolio-page-masthead {
        padding-top: calc(var(--gutter-vertical, 0px) + 6px) !important;
    }
}

.section.pb-large {
    padding-bottom: 4rem !important;
}

.section.pt-medium {
    padding-top: 2.5rem !important; /* 40px */
}

.section.pb-medium {
    padding-bottom: 2.5rem !important;
}

/* КРИТИЧЕСКАЯ оптимизация нижнего отступа для masthead страницы портфолио */
section.section-masthead.pb-medium {
    padding-bottom: 0.25rem !important; /* Абсолютный минимум (4px) */
}

@media (max-width: 768px) {
    section.section-masthead.pb-medium {
        padding-bottom: 0.125rem !important; /* 2px на мобильных */
    }
}

.section.pt-small {
    padding-top: 1.5rem !important; /* 24px */
}

.section.pb-small {
    padding-bottom: 1.5rem !important;
}

/* Оптимизация отступов заголовков */
h1, .h1 {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

h2, .h2 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

h3, .h3 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Оптимизация отступов параграфов */
p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

p:last-child {
    margin-bottom: 0 !important;
}

.lead {
    margin-bottom: 1.25rem !important;
}

/* Оптимизация отступов контента секций */
.section-content__heading {
    margin-bottom: 1.5rem !important;
}

.section-content__text {
    margin-bottom: 1.5rem !important;
}

.section-content__button {
    margin-top: 1.5rem !important;
}

/* Оптимизация отступов изображений */
.section-content__image,
.figure-project__image {
    margin-bottom: 1.5rem !important;
}

.section-content__image:last-child,
.figure-project__image:last-child {
    margin-bottom: 0 !important;
}

img {
    margin: 0 !important;
}

/* Оптимизация отступов кнопок */
.button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.button + .button {
    margin-left: 0.75rem !important;
}

.section-masthead__button {
    margin-top: 1.5rem !important;
}

/* Оптимизация отступов карточек */
.figure-project__content,
.figure-service__content {
    padding: 1.5rem !important;
}

.figure-project__footer,
.figure-service__footer {
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
}

/* Оптимизация section__headline */
.section__headline.text-center {
    margin-bottom: 2rem !important;
    gap: 1rem !important;
}

/* Адаптивные отступы */
@media (max-width: 991px) {
    .section.pt-large {
        padding-top: 3rem !important; /* 48px */
    }
    
    .section.pb-large {
        padding-bottom: 3rem !important;
    }
    
    .section.pt-medium {
        padding-top: 2rem !important; /* 32px */
    }
    
    .section.pb-medium {
        padding-bottom: 2rem !important;
    }
    
    .section__headline.text-center {
        margin-bottom: 1.5rem !important;
    }
    
    .section-content__heading {
        margin-bottom: 1.25rem !important;
    }
    
    .figure-project__content,
    .figure-service__content {
        padding: 1.25rem !important;
    }
    
    .figure-service__wrapper-bg,
    .figure-project__image {
        height: 220px !important;
    }
    
    .figure-service:hover,
    .figure-project:hover {
        transform: translateY(-4px) scale(1.005) !important;
    }
}

@media (max-width: 768px) {
    .section.pt-large {
        padding-top: 2.5rem !important; /* 40px */
    }
    
    .section.pb-large {
        padding-bottom: 2.5rem !important;
    }
    
    .section.pt-medium {
        padding-top: 1.5rem !important; /* 24px */
    }
    
    .section.pb-medium {
        padding-bottom: 1.5rem !important;
    }
    
    .section__headline.text-center {
        margin-bottom: 1.25rem !important;
        gap: 0.75rem !important;
    }
    
    h2, .h2 {
        margin-bottom: 0.625rem !important;
    }
    
    p {
        margin-bottom: 0.875rem !important;
    }
    
    .figure-project__content,
    .figure-service__content {
        padding: 1rem !important;
    }
}

@media (max-width: 576px) {
    .section.pt-large {
        padding-top: 2rem !important; /* 32px */
    }
    
    .section.pb-large {
        padding-bottom: 2rem !important;
    }
    
    .section.pt-medium {
        padding-top: 1.25rem !important; /* 20px */
    }
    
    .section.pb-medium {
        padding-bottom: 1.25rem !important;
    }
    
    .section__headline.text-center {
        margin-bottom: 1rem !important;
        gap: 0.5rem !important;
    }
    
    .section-content__heading {
        margin-bottom: 1rem !important;
    }
    
    .section-content__button {
        margin-top: 1.25rem !important;
    }
}

/* ============================================
   1. ИСПРАВЛЕНИЕ АНИМАЦИЙ И TRANSITIONS
   ============================================ */

/* Отключаем проблемные анимации, которые скрывают контент */
[data-arts-os-animation] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Улучшенная типографика и читаемость */
body {
    color: #2c3e50 !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

p {
    color: #4a5568 !important;
    line-height: 1.75 !important;
}

.lead {
    color: #5a6575 !important;
    font-weight: 400 !important;
}

h1, .h1 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

h2, .h2 {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

h3, .h3 {
    font-weight: 600 !important;
}

/* Плавные transitions для интерактивных элементов */
a, button, .button, .filter__link, .menu a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Улучшаем hover эффекты */
a:hover, .button:hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button:active {
    transform: translateY(0) !important;
}

/* ============================================
   2. ИСПРАВЛЕНИЕ КОМПОНОВКИ ЭЛЕМЕНТОВ
   ============================================ */

/* Исправление выравнивания для секций */
.section {
    position: relative !important;
    overflow: visible !important;
}

.section-content {
    position: relative !important;
}

/* Исправление для grid элементов */
.section-grid__item {
    margin-bottom: 1.5rem !important;
    position: relative !important;
}

.section-grid__item:last-child {
    margin-bottom: 0 !important;
}

/* Исправление для figure элементов */
.figure-project,
.figure-service {
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.figure-project__image,
.figure-service__wrapper-bg {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
}

.figure-project__image img,
.figure-service__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
}

.figure-project__content,
.figure-service__content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Исправление для кнопок в карточках */
.figure-project__content .button,
.figure-service__content .button {
    margin-top: auto !important;
    align-self: flex-start !important;
}

/* ============================================
   3. ИСПРАВЛЕНИЕ ФОРМ
   ============================================ */

/* Улучшение форм */
.form-contacts,
.form {
    position: relative !important;
    z-index: 1 !important;
}

.form__col {
    margin-bottom: 1.25rem !important;
}

.form__col:last-child {
    margin-bottom: 0 !important;
}

/* Исправление input-float */
.input-float {
    position: relative !important;
    margin-bottom: 1.25rem !important;
}

.input-float__input {
    width: 100% !important;
    padding: 1rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background-color: #ffffff !important;
}

.input-float__input:focus {
    outline: none !important;
    border-color: var(--color-primary, #1a2b4a) !important;
    box-shadow: 0 0 0 4px rgba(26, 43, 74, 0.1) !important;
    background-color: #ffffff !important;
}

.input-float__input:invalid:not(:placeholder-shown) {
    border-color: var(--color-error, #dc3545) !important;
}

.input-float__label {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
    color: #718096 !important;
    background-color: #fff !important;
    padding: 0 0.5rem !important;
    font-weight: 500 !important;
}

.input-float__input:focus + .input-float__label,
.input-float__input:not(:placeholder-shown) + .input-float__label,
.input-float__input_not-empty + .input-float__label {
    top: 0 !important;
    transform: translateY(-50%) scale(0.85) !important;
    color: var(--color-primary, #1a2b4a) !important;
    font-weight: 600 !important;
}

.input-float__input_textarea {
    min-height: 120px !important;
    resize: vertical !important;
    font-family: inherit !important;
}

/* Улучшение кнопки отправки формы */
.button.button_solid:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.button.button_solid .spinner-border-sm {
    width: 1rem !important;
    height: 1rem !important;
    border-width: 0.15em !important;
    border-color: currentColor transparent currentColor transparent !important;
}

/* Автоматический стиль кнопки для форм на темном фоне */
[data-arts-theme-text="light"] .form .button.button_solid.button_primary,
[data-arts-theme-text="light"] .form-contacts .button.button_solid.button_primary {
    background-color: var(--color-white, #fff) !important;
    color: var(--color-primary, #1a2b4a) !important;
    border-color: var(--color-white, #fff) !important;
}

[data-arts-theme-text="light"] .form .button.button_solid.button_primary:hover,
[data-arts-theme-text="light"] .form-contacts .button.button_solid.button_primary:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--color-primary, #1a2b4a) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

/* Стили для белой кнопки на темном фоне (для обратной совместимости) */
.button.button_white,
.button.button_solid.button_white {
    background-color: var(--color-white, #fff) !important;
    color: var(--color-primary, #1a2b4a) !important;
    border-color: var(--color-white, #fff) !important;
}

.button.button_white:hover,
.button.button_solid.button_white:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--color-primary, #1a2b4a) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

.button.button_white:disabled,
.button.button_solid.button_white:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Улучшение отступов для формы */
.form-contacts {
    padding: 0 !important;
}

.form-contacts .row {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

.form-contacts .form__col {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Сообщения об ошибках */
.form__error {
    color: #dc3545 !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
    display: block !important;
}

.form__message {
    padding: 1rem 1.25rem !important;
    border-radius: 6px !important;
    margin-bottom: 1.5rem !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    animation: slideDown 0.3s ease-out !important;
    position: relative !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form__message_success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.form__message_error {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

/* Стили для форм на темном фоне */
[data-arts-theme-text="light"] .form__message_success {
    background-color: rgba(212, 237, 218, 0.95) !important;
    color: #155724 !important;
}

[data-arts-theme-text="light"] .form__message_error {
    background-color: rgba(248, 215, 218, 0.95) !important;
    color: #721c24 !important;
}

/* Улучшение видимости полей формы на темном фоне */
[data-arts-theme-text="light"] .input-float__input {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #333 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-arts-theme-text="light"] .input-float__input:focus {
    background-color: #fff !important;
    border-color: var(--color-white, #fff) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
}

[data-arts-theme-text="light"] .input-float__label {
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: var(--color-primary, #1a2b4a) !important;
}

[data-arts-theme-text="light"] .input-float__input:focus + .input-float__label,
[data-arts-theme-text="light"] .input-float__input:not(:placeholder-shown) + .input-float__label {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-arts-theme-text="light"] .form__error {
    color: rgba(255, 200, 200, 0.95) !important;
}

/* ============================================
   4. ИСПРАВЛЕНИЕ КНОПОК
   ============================================ */

.button {
    display: inline-block !important;
    padding: 0.875rem 2rem !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    position: relative !important;
    overflow: hidden !important;
}

.button::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
    z-index: 0 !important;
}

.button:hover::before {
    width: 300px !important;
    height: 300px !important;
}

.button > * {
    position: relative !important;
    z-index: 1 !important;
}

.button_solid {
    background-color: var(--color-primary, #1a2b4a) !important;
    color: #fff !important;
    border-color: var(--color-primary, #1a2b4a) !important;
    box-shadow: 0 4px 14px rgba(26, 43, 74, 0.25) !important;
}

.button_solid:hover {
    background-color: var(--color-primary-dark, #0f1a2e) !important;
    border-color: var(--color-primary-dark, #0f1a2e) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(26, 43, 74, 0.35) !important;
}

.button_bordered {
    background-color: transparent !important;
    color: var(--color-primary, #1a2b4a) !important;
    border-color: var(--color-primary, #1a2b4a) !important;
    border-width: 2px !important;
    position: relative !important;
}

.button_bordered::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--color-primary, #1a2b4a) !important;
    transition: left 0.4s ease !important;
    z-index: -1 !important;
}

.button_bordered:hover::after {
    left: 0 !important;
}

.button_bordered:hover {
    color: #fff !important;
    border-color: var(--color-primary, #1a2b4a) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26, 43, 74, 0.25) !important;
}

.button_white {
    background-color: #fff !important;
    color: var(--color-primary, #1a2b4a) !important;
    border-color: #fff !important;
}

.button_white:hover {
    background-color: var(--color-primary, #1a2b4a) !important;
    color: #fff !important;
    border-color: var(--color-primary, #1a2b4a) !important;
}

.button:disabled,
.button[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ============================================
   5. ИСПРАВЛЕНИЕ ФИЛЬТРОВ
   ============================================ */

.filter {
    margin-bottom: 1.5rem !important;
}

.filter__list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.filter__item {
    margin: 0 !important;
}

.filter__link {
    display: inline-block !important;
    padding: 0.5rem 1.5rem !important;
    text-decoration: none !important;
    color: var(--color-primary, #1a2b4a) !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    background-color: #fff !important;
}

.filter__link {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.filter__link:hover {
    background-color: var(--color-primary, #1a2b4a) !important;
    color: #fff !important;
    border-color: var(--color-primary, #1a2b4a) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(26, 43, 74, 0.15) !important;
}

.filter__item_active .filter__link {
    box-shadow: 0 2px 8px rgba(26, 43, 74, 0.2) !important;
}

.filter__item_active .filter__link {
    background-color: var(--color-primary, #1a2b4a) !important;
    color: #fff !important;
    border-color: var(--color-primary, #1a2b4a) !important;
}

/* ============================================
   6. ИСПРАВЛЕНИЕ СЛАЙДЕРОВ
   ============================================ */

/* Улучшенные стили для слайдера услуг */
.slider-services,
.slider-images {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 2.5rem !important;
}

.slider-services .swiper-container {
    position: relative !important;
    overflow: visible !important;
    padding-bottom: 1.5rem !important;
}

.slider-services .swiper-slide {
    height: auto !important;
    padding: 0 0.75rem !important;
    display: flex !important;
}

/* Стили для слайдера услуг в формате Portfolio Sliders */
.section-slider-images .slider-services .swiper-slide {
    padding: 0 !important;
    height: auto !important;
    display: block !important;
}

.section-slider-images .figure-service {
    margin: 0 !important;
}

.section-slider-images .figure-service .row.no-gutters {
    margin: 0 !important;
}

.section-slider-images .figure-service .row.no-gutters > [class*="col-"] {
    padding: 0 !important;
}

.section-slider-images .col-lg-5.overflow {
    position: relative !important;
    min-height: 500px !important;
}

.section-slider-images .col-lg-7 {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .slider-services .swiper-slide {
        padding: 0 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .slider-services .swiper-slide {
        padding: 0 0.375rem !important;
    }
}

/* Пагинация для слайдера услуг */
.slider-services .swiper-pagination {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    z-index: 10 !important;
}

.slider-services .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background-color: #ccc !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    transition: all 0.3s ease !important;
}

.slider-services .swiper-pagination-bullet-active {
    background-color: var(--color-primary, #1a2b4a) !important;
    width: 24px !important;
    border-radius: 5px !important;
}

.swiper-container {
    position: relative !important;
    overflow: visible !important;
}

.swiper-slide {
    height: auto !important;
}

/* ============================================
   7. ИСПРАВЛЕНИЕ ТИПОГРАФИКИ
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

p {
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
}

p:last-child {
    margin-bottom: 0 !important;
}

.lead {
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
}

/* ============================================
   8. ИСПРАВЛЕНИЕ FOOTER
   ============================================ */

.footer {
    background-color: #f5f5f5 !important;
    padding: 3rem 0 2rem !important;
    margin-top: 4rem !important;
    border-top: 1px solid #ddd !important;
    position: relative !important;
    z-index: 200 !important; /* Выше контента, но ниже хедера (500) */
    isolation: isolate !important; /* Создаем новый stacking context */
    clear: both !important;
}

/* Убеждаемся, что футер всегда виден */
footer,
footer.footer,
[data-barba="wrapper"] > footer,
[data-barba="wrapper"] > .footer {
    position: relative !important;
    z-index: 200 !important;
    isolation: isolate !important;
    clear: both !important;
}

.footer__col {
    margin-bottom: 2rem !important;
}

.footer__logo img {
    max-width: 400px !important;
    max-height: 160px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 1rem !important;
}

.footer__title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    color: var(--color-primary, #1a2b4a) !important;
}

.footer__menu,
.footer__contacts {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer__menu li,
.footer__contacts li {
    margin-bottom: 0.75rem !important;
}

.footer__menu a,
.footer__contacts a {
    color: #666 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer__menu a:hover,
.footer__contacts a:hover {
    color: var(--color-primary, #1a2b4a) !important;
}

.footer__contacts li {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.footer__contacts .material-icons {
    font-size: 1.25rem !important;
    color: var(--color-primary, #1a2b4a) !important;
}

.footer__copyright {
    margin-top: 2rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid #ddd !important;
    text-align: center !important;
    color: #999 !important;
    font-size: 0.875rem !important;
}

/* ============================================
   9. ИСПРАВЛЕНИЕ PAGINATION
   ============================================ */

.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem 0 0 !important;
}

.pagination li {
    margin: 0 !important;
}

.pagination .page-link {
    display: inline-block !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
    color: var(--color-primary, #1a2b4a) !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    background-color: #fff !important;
}

.pagination .page-link:hover {
    background-color: var(--color-primary, #1a2b4a) !important;
    color: #fff !important;
    border-color: var(--color-primary, #1a2b4a) !important;
}

.pagination .active .page-link {
    background-color: var(--color-primary, #1a2b4a) !important;
    color: #fff !important;
    border-color: var(--color-primary, #1a2b4a) !important;
}

/* ============================================
   10. АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 991px) {
    /* Исправление для grid на мобильных */
    .section-grid__item {
        margin-bottom: 1.5rem !important;
    }
    
    /* Улучшение форм на мобильных */
    .form__col {
        margin-bottom: 1rem !important;
    }
    
    /* Фильтры на мобильных */
    .filter__list {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter__link {
        display: block !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    /* Кнопки на мобильных */
    .button {
        padding: 0.625rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Footer на мобильных */
    .footer {
        padding: 2rem 0 1.5rem !important;
    }
    
    .footer__col {
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
}

/* ============================================
   11. ИСПРАВЛЕНИЕ ПРОБЛЕМ С ВЫРАВНИВАНИЕМ
   ============================================ */

/* Центрирование текста */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* Выравнивание по вертикали */
.align-items-center {
    align-items: center !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

/* Flex утилиты */
.d-flex {
    display: flex !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

/* ============================================
   12. ИСПРАВЛЕНИЕ ПРОБЛЕМ С ИЗОБРАЖЕНИЯМИ
   ============================================ */

img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

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

.lazy {
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

/* ============================================
   13. ИСПРАВЛЕНИЕ ПРОБЛЕМ С МЕНЮ
   ============================================ */

.menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
}

.menu li {
    margin: 0 !important;
}

.menu a {
    color: var(--color-primary, #1a2b4a) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
    position: relative !important;
}

.menu a:hover {
    color: var(--color-primary-dark, #0f1a2e) !important;
}

.menu a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background-color: var(--color-primary, #1a2b4a) !important;
    transition: width 0.3s ease !important;
}

.menu a:hover::after {
    width: 100% !important;
}

/* ============================================
   14. ИСПРАВЛЕНИЕ ПРОБЛЕМ С КАРТОЧКАМИ ПРОЕКТОВ И УСЛУГ
   ============================================ */

/* Исправление для col-gutters */
.col-gutters {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 2rem !important;
}

/* Исправление для figure-project */
.figure-project {
    position: relative !important;
    display: block !important;
    height: 100% !important;
    background-color: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.figure-project:hover {
    box-shadow: 0 12px 40px rgba(26, 43, 74, 0.15) !important;
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(26, 43, 74, 0.1) !important;
}

.figure-project__link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.figure-project__image {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

.figure-project__image::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.02) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.figure-project__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.figure-project:hover .figure-project__image img {
    transform: scale(1.1) !important;
}

.figure-project__content {
    padding: 1.5rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.figure-project__content h3,
.figure-project__content h4 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    color: var(--color-primary, #1a2b4a) !important;
}

.figure-project__content p {
    margin-bottom: 0.5rem !important;
    color: #666 !important;
    font-size: 0.875rem !important;
}

/* Скрытие фоновых букв */
.figure-project__letter,
.figure-project__wrapper-letter {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Исправление для figure-service - улучшенный UI/UX */
.figure-service {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background-color: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 auto !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.figure-service:hover {
    box-shadow: 0 12px 40px rgba(26, 43, 74, 0.15) !important;
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(26, 43, 74, 0.1) !important;
}

.figure-service__wrapper-bg {
    position: relative !important;
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

.figure-service__wrapper-bg::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.02) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.figure-service__wrapper-bg .slider__bg {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.figure-service:hover .figure-service__wrapper-bg .slider__bg {
    transform: scale(1.08) !important;
}

.figure-service__image {
    width: 100% !important;
    height: 100% !important;
}

.figure-service__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.figure-service:hover .figure-service__image img {
    transform: scale(1.1) !important;
}

.figure-service__content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.figure-service__heading {
    margin-bottom: 0.75rem !important;
}

.figure-service__heading h2,
.figure-service__heading h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    color: var(--color-primary, #1a2b4a) !important;
    font-weight: 600 !important;
}

.figure-service__heading h2 a,
.figure-service__heading h3 a {
    color: var(--color-primary, #1a2b4a) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.figure-service__heading h2 a:hover,
.figure-service__heading h3 a:hover {
    color: var(--color-primary-dark, #0f1a2e) !important;
}

.figure-service__text {
    flex: 1 !important;
    margin-bottom: 1rem !important;
}

.figure-service__text p {
    margin-bottom: 0.5rem !important;
    color: #4a5568 !important;
    line-height: 1.75 !important;
    font-size: 0.95rem !important;
}

.figure-service__text p:last-child {
    margin-bottom: 0 !important;
}

.figure-service__price {
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #1a2b4a) !important;
    font-size: 1.125rem !important;
}

.figure-service__footer {
    margin-top: auto !important;
    padding-top: 0.75rem !important;
}

/* Стили для слайдера услуг (section-slider-images) */
.section-slider-images .figure-service {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
}

.section-slider-images .figure-service:hover {
    transform: none !important;
    box-shadow: none !important;
}

.section-slider-images .figure-service__wrapper-bg {
    height: 100% !important;
    min-height: 500px !important;
    position: relative !important;
}

.section-slider-images .slider__bg {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.section-slider-images .slider__zoom-container {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.section-slider-images .figure-service__content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 3rem 2.5rem !important;
    height: 100% !important;
}

.section-slider-images .figure-service__heading h2 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

.section-slider-images .figure-service__text {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
}

.section-slider-images .figure-service__footer {
    margin-top: 2rem !important;
}

/* Адаптивные улучшения для слайдера услуг */
@media (max-width: 991px) {
    .section-slider-images .figure-service__wrapper-bg {
        min-height: 400px !important;
    }
    
    .section-slider-images .figure-service__content {
        padding: 2rem 1.5rem !important;
    }
    
    .section-slider-images .figure-service__heading h2 {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    .section-slider-images .figure-service__wrapper-bg {
        min-height: 300px !important;
    }
    
    .section-slider-images .figure-service__content {
        padding: 1.5rem 1rem !important;
    }
    
    .section-slider-images .figure-service__heading h2 {
        font-size: 1.75rem !important;
    }
}

/* Адаптивные стили для figure-service */
@media (max-width: 991px) {
    .figure-service__wrapper-bg {
        height: 240px !important;
        min-height: 240px !important;
    }
    
    .figure-service__content {
        padding: 1.5rem !important;
    }
    
    .figure-service__heading h2,
    .figure-service__heading h3 {
        font-size: 1.375rem !important;
    }
}

@media (max-width: 768px) {
    .figure-service {
        border-radius: 8px !important;
        margin-bottom: 1rem !important;
    }
    
    .figure-service__wrapper-bg {
        height: 220px !important;
        min-height: 220px !important;
    }
    
    .figure-service__content {
        padding: 1.25rem !important;
    }
    
    .figure-service__heading h2,
    .figure-service__heading h3 {
        font-size: 1.25rem !important;
    }
    
    .figure-service__text p {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    .slider-services {
        padding: 0 0.5rem !important;
        margin: 0 -0.5rem !important;
    }
    
    .figure-service {
        border-radius: 6px !important;
    }
    
    .figure-service__wrapper-bg {
        height: 200px !important;
        min-height: 200px !important;
    }
    
    .figure-service__content {
        padding: 1rem !important;
    }
    
    .figure-service__heading h2,
    .figure-service__heading h3 {
        font-size: 1.125rem !important;
    }
    
    .figure-service__text {
        margin-bottom: 1rem !important;
    }
    
    .figure-service__text p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }
}

/* Улучшение структуры слайдера на мобильных */
@media (max-width: 991px) {
    .figure-service .row.no-gutters {
        flex-direction: column !important;
    }
    
    .figure-service .col-lg-5,
    .figure-service .col-lg-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ============================================
   15. ИСПРАВЛЕНИЕ ПРОБЛЕМ С ГАЛЕРЕЕЙ
   ============================================ */

.gallery-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    background-color: #f5f5f5 !important;
}

.gallery-item__link {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.gallery-item__link img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.3s ease !important;
    max-width: 100% !important;
    object-fit: cover !important;
    /* Ограничиваем размер загружаемого изображения через CSS */
    max-height: 400px !important;
}

.gallery-item__link:hover img {
    transform: scale(1.05) !important;
}

/* ============================================
   16. ИСПРАВЛЕНИЕ ПРОБЛЕМ С НАВИГАЦИЕЙ ПРОЕКТОВ
   ============================================ */

.section-nav-projects__wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 2rem !important;
    padding: 2rem 0 !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
}

.section-nav-projects__item {
    flex: 1 !important;
}

.section-nav-projects__item_center {
    flex: 0 0 auto !important;
    text-align: center !important;
}

.section-nav-projects__link {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    text-decoration: none !important;
    color: var(--color-primary, #1a2b4a) !important;
    transition: all 0.3s ease !important;
}

.section-nav-projects__link:hover {
    color: var(--color-primary-dark, #0f1a2e) !important;
    transform: translateX(-5px) !important;
}

.section-nav-projects__item_next .section-nav-projects__link:hover {
    transform: translateX(5px) !important;
}

.section-nav-projects__arrow {
    font-size: 1.5rem !important;
}

.section-nav-projects__label {
    color: #999 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 0.25rem !important;
}

.section-nav-projects__title {
    margin: 0 !important;
    font-weight: 600 !important;
}

/* ============================================
   17. ИСПРАВЛЕНИЕ ПРОБЛЕМ С ИНФОРМАЦИЕЙ О ПРОЕКТЕ
   ============================================ */

.project-info {
    background-color: #f9f9f9 !important;
    padding: 2rem !important;
    border-radius: 8px !important;
    border: 1px solid #e9e9e9 !important;
}

.project-info__item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #e9e9e9 !important;
}

.project-info__item:last-child {
    border-bottom: none !important;
}

.project-info__label {
    font-weight: 600 !important;
    color: #666 !important;
}

.project-info__value {
    color: var(--color-primary, #1a2b4a) !important;
    font-weight: 500 !important;
}

.project-info__item_price {
    border-bottom: 2px solid #e9e9e9 !important;
}

.project-info__value_price {
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    color: var(--color-primary, #1a2b4a) !important;
}

.project-info__disclaimer {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e9e9e9 !important;
    font-size: 0.875rem !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

.project-info__disclaimer p {
    margin: 0 0 0.5rem 0 !important;
}

.project-info__disclaimer p:last-child {
    margin-bottom: 0 !important;
}

/* ============================================
   18. ИСПРАВЛЕНИЕ ПРОБЛЕМ С SIDEBAR УСЛУГ
   ============================================ */

.service-sidebar__card {
    background-color: #f9f9f9 !important;
    border-radius: 8px !important;
    border: 1px solid #e9e9e9 !important;
    position: sticky !important;
    top: 100px !important;
}

.service-price {
    padding: 1.5rem !important;
    background-color: #f9f9f9 !important;
    border-radius: 8px !important;
    border: 1px solid #e9e9e9 !important;
}

.service-price__label {
    color: #999 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 0.5rem !important;
}

.service-price__value {
    color: var(--color-primary, #1a2b4a) !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

/* ============================================
   19. ОБЩИЕ ИСПРАВЛЕНИЯ
   ============================================ */

/* Убираем лишние отступы */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* ============================================
   20. ИСПРАВЛЕНИЕ ПРОБЛЕМ С АНИМАЦИЯМИ SPLIT-TEXT
   ============================================ */

/* Убеждаемся, что split-text элементы видны */
.split-text,
.js-split-text {
    opacity: 1 !important;
    visibility: visible !important;
}

.split-text > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* ============================================
   21. ИСПРАВЛЕНИЕ ПРОБЛЕМ С COL-GUTTERS
   ============================================ */

.col-gutters {
    padding: 15px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 991px) {
    .col-gutters {
        padding: 10px !important;
    }
}

/* ============================================
   22. ИСПРАВЛЕНИЕ ПРОБЛЕМ С HERO ИЗОБРАЖЕНИЯМИ
   ============================================ */

.section-masthead_image {
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    min-height: 400px !important;
    /* Убеждаемся, что фоновое изображение видно */
    background-color: #f5f5f5 !important;
}

/* Дополнительное правило для гарантии отображения фонового изображения */
section.section-masthead.section-masthead_image[style*="background-image"],
section.section-masthead_image {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* Убеждаемся, что inline стиль background-image применяется */
section.section-masthead_image[style*="background-image"] {
    /* Inline стиль уже содержит background-image, просто убеждаемся что другие свойства применяются */
}

.section-masthead__overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    z-index: 1 !important;
}

.section-masthead_image .section-masthead__inner {
    position: relative !important;
    z-index: 2 !important;
}

.section-masthead_image h1,
.section-masthead_image .h1 {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   23. ИСПРАВЛЕНИЕ ПРОБЛЕМ С МАТЕРИАЛЬНЫМИ ИКОНКАМИ
   ============================================ */

.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    vertical-align: middle !important;
}

/* ============================================
   24. ИСПРАВЛЕНИЕ ПРОБЛЕМ С UTILITY КЛАССАМИ
   ============================================ */

.w-100 {
    width: 100% !important;
}

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

/* Утилитарные классы для отступов - оптимизированные значения */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.25rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.25rem !important; }

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-light,
.bg-light-1 {
    background-color: #f9f9f9 !important;
}

.bg-dark-3 {
    background-color: var(--color-primary, #1a2b4a) !important;
    color: #fff !important;
}

.bg-dark-3 h1,
.bg-dark-3 h2,
.bg-dark-3 h3,
.bg-dark-3 h4,
.bg-dark-3 h5,
.bg-dark-3 h6,
.bg-dark-3 p,
.bg-dark-3 .lead {
    color: #fff !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.text-muted {
    color: #6c757d !important;
}

.small {
    font-size: 0.875rem !important;
}

.small-caps {
    font-variant: small-caps !important;
    letter-spacing: 1px !important;
}

/* ============================================
   25. ИСПРАВЛЕНИЕ ПРОБЛЕМ С RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    /* Исправление для карточек на планшетах */
    .figure-project__image {
        height: 200px !important;
    }
    
    /* Исправление для навигации проектов */
    .section-nav-projects__wrapper {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .section-nav-projects__item {
        width: 100% !important;
    }
    
    .section-nav-projects__item_center {
        order: -1 !important;
    }
    
    /* Исправление для sidebar услуг */
    .service-sidebar__card {
        position: relative !important;
        top: auto !important;
        margin-top: 2rem !important;
    }
}

@media (max-width: 768px) {
    /* Исправление для карточек на мобильных */
    .figure-project__image {
        height: 180px !important;
    }
    
    .figure-project__content {
        padding: 1rem !important;
    }
    
    /* Исправление для project-info */
    .project-info {
        margin-top: 2rem !important;
        padding: 1.5rem !important;
    }
    
    /* Исправление для галереи */
    .gallery-item {
        margin-bottom: 1rem !important;
    }
    
    /* Исправление для счетчиков */
    .aside-counters__wrapper-item {
        margin-bottom: 2rem !important;
    }
}

/* ============================================
   26. ИСПРАВЛЕНИЕ ПРОБЛЕМ СО СЧЕТЧИКАМИ
   ============================================ */

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

.counter__number {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: var(--color-primary, #1a2b4a) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

[data-arts-theme-text="light"] .counter__number {
    color: #fff !important;
}

.counter__label {
    font-size: 1rem !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

[data-arts-theme-text="light"] .counter__label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   27. ИСПРАВЛЕНИЕ ПРОБЛЕМ С ПУСТЫМИ СОСТОЯНИЯМИ
   ============================================ */

/* Стили для пустых состояний */
.empty-state {
    text-align: center !important;
    padding: 3rem 1rem !important;
    color: #999 !important;
}

.empty-state__icon {
    font-size: 4rem !important;
    margin-bottom: 1rem !important;
    opacity: 0.5 !important;
}

.empty-state__text {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
}

.empty-state__subtext {
    font-size: 0.875rem !important;
    color: #999 !important;
}

/* ============================================
   28. ИСПРАВЛЕНИЕ ПРОБЛЕМ С LOADING STATES
   ============================================ */

.spinner-border {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    vertical-align: text-bottom !important;
    border: 0.125em solid currentColor !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    animation: spinner-border 0.75s linear infinite !important;
}

.spinner-border-sm {
    width: 0.875rem !important;
    height: 0.875rem !important;
    border-width: 0.1em !important;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg) !important;
    }
}

.mr-2 {
    margin-right: 0.5rem !important;
}

/* ============================================
   29. ИСПРАВЛЕНИЕ ПРОБЛЕМ С ACCESSIBILITY
   ============================================ */

/* Улучшение focus states */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary, #1a2b4a) !important;
    outline-offset: 2px !important;
}

/* Улучшение для screen readers */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ============================================
   30. ФИНАЛЬНЫЕ ИСПРАВЛЕНИЯ И УЛУЧШЕНИЯ UI/UX
   ============================================ */

/* Улучшение визуальной гармонии - плавное появление секций */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section {
    animation: fadeInUp 0.6s ease-out !important;
}

/* Улучшение контрастности ссылок */
a {
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a:hover {
    text-decoration: none !important;
}

/* Улучшение отступов для col-gutters в grid */
.section-grid .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
}

.col-gutters {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Улучшение мастхеда */
.section-masthead__heading h1 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Оптимизация отступов заголовка в masthead страницы портфолио */
.section-masthead__header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.section-masthead__heading {
    margin-bottom: 0.75rem !important; /* Уменьшено для более компактного вида */
}

.section-masthead__heading h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important; /* Более компактная высота строки */
}

/* КРИТИЧЕСКАЯ оптимизация декоративной линии под заголовком на странице портфолио */
.section-masthead .section__headline {
    margin-top: 0.25rem !important; /* Абсолютный минимум (4px) */
    margin-bottom: 0 !important;
    height: 2px !important; /* Тонкая линия */
}

/* Оптимизация внутренних отступов masthead для портфолио */
.section-masthead__inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.section-masthead__header {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* КРИТИЧЕСКАЯ оптимизация секции фильтров для страницы портфолио */
/* Для браузеров с поддержкой :has() */
@supports selector(:has(*)) {
    section.section.pt-medium:has(.filter_portfolio) {
        padding-top: 0.25rem !important; /* Абсолютный минимум (4px) */
        margin-top: 0 !important;
    }
    
    @media (max-width: 768px) {
        section.section.pt-medium:has(.filter_portfolio) {
            padding-top: 0.125rem !important; /* 2px на мобильных */
        }
    }
}

/* Fallback для браузеров без поддержки :has() - оптимизация фильтров */
section.section:not(.section-masthead).pt-medium {
    padding-top: 0.25rem !important;
}

/* Специфично для секции фильтров портфолио */
section.section:has(.filter_portfolio) {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    section.section:not(.section-masthead).pt-medium,
    section.section:has(.filter_portfolio) {
        padding-top: 0.125rem !important;
        padding-bottom: 0.125rem !important;
    }
}

/* Дополнительная оптимизация для pb-small в секции фильтров */
section.section.pb-small:has(.filter_portfolio) {
    padding-bottom: 0.25rem !important;
}

/* КРИТИЧЕСКАЯ оптимизация сетки портфолио */
.section-grid.pt-medium {
    padding-top: 0.5rem !important; /* Абсолютный минимум (8px) */
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .section-grid.pt-medium {
        padding-top: 0.375rem !important; /* 6px на мобильных */
    }
}

/* Общее улучшение визуальной иерархии на странице портфолио */
body .page-wrapper__content section.section-masthead + section {
    margin-top: 0 !important; /* Убираем лишний отступ между секциями */
}

/* Убираем все лишние отступы между секциями на странице портфолио */
body .page-wrapper__content section + section {
    margin-top: 0 !important;
}

/* Дополнительная оптимизация: уменьшаем отступы фильтра */
.filter_portfolio {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.filter_portfolio .filter__list {
    margin: 0 !important;
    padding: 0 !important;
}

/* МАКСИМАЛЬНАЯ оптимизация для страницы портфолио - переопределение всех базовых стилей */
/* Переопределяем padding-top из main.css для section-masthead */
body:has([data-arts-os-animation]) .section-masthead.pt-large {
    padding-top: calc(var(--gutter-vertical, 0px) + 10px) !important;
}

/* Переопределяем стили из theme-architects.css */
body .section-masthead.pt-large[data-background-color="var(--color-light-1)"] {
    padding-top: calc(var(--gutter-vertical, 0px) + 10px) !important;
    min-height: auto !important;
}

@media (max-width: 1400px) {
    body .section-masthead.pt-large[data-background-color="var(--color-light-1)"] {
        padding-top: calc(var(--gutter-vertical, 0px) + 10px) !important;
    }
}

@media (max-width: 1280px) {
    body .section-masthead.pt-large[data-background-color="var(--color-light-1)"] {
        padding-top: calc(var(--gutter-vertical, 0px) + 8px) !important;
    }
}

@media (max-width: 991px) {
    body .section-masthead.pt-large[data-background-color="var(--color-light-1)"] {
        padding-top: calc(var(--gutter-vertical, 0px) + 8px) !important;
    }
}

@media (max-width: 768px) {
    body .section-masthead.pt-large[data-background-color="var(--color-light-1)"] {
        padding-top: calc(var(--gutter-vertical, 0px) + 6px) !important;
    }
}

/* Дополнительные классы для гарантированного применения стилей на странице портфолио */
.portfolio-page-masthead {
    padding-top: calc(var(--gutter-vertical, 0px) + 10px) !important;
    padding-bottom: 0.25rem !important;
    min-height: auto !important;
}

.portfolio-page-masthead .section-masthead__inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.portfolio-page-masthead .section-masthead__header {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.portfolio-page-masthead .section-masthead__heading {
    margin-bottom: 0.25rem !important;
}

.portfolio-page-masthead .section__headline {
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .portfolio-page-masthead {
        padding-top: calc(var(--gutter-vertical, 0px) + 6px) !important;
        padding-bottom: 0.125rem !important;
    }
}

.portfolio-page-filters {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.portfolio-page-filters .filter_portfolio {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .portfolio-page-filters {
        padding-top: 0.125rem !important;
        padding-bottom: 0.125rem !important;
    }
}

.portfolio-page-grid {
    padding-top: 0.5rem !important;
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .portfolio-page-grid {
        padding-top: 0.375rem !important;
    }
}

.section-masthead__subheading .lead {
    font-size: 1.25rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.3px !important;
}

/* Улучшение кнопок в карточках */
.figure-service__footer .button,
.figure-project__content .button {
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.figure-service__footer .button:hover,
.figure-project__content .button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26, 43, 74, 0.25) !important;
}

/* Убираем проблемные transform на hover для карточек */
.figure-project:not(.figure-project_no-hover):hover:not(:focus) .figure-project__content {
    transform: none !important;
}

/* Исправление для section-content__image */
.section-content__image {
    margin-bottom: 1.5rem !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.section-content__image:last-child {
    margin-bottom: 0 !important;
}

.section-content__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.section-content__image:hover img {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Исправление для service-description */
.service-description {
    line-height: 1.8 !important;
    color: #333 !important;
}

.service-description p {
    margin-bottom: 1rem !important;
}

/* Исправление для mx-auto */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Исправление для justify-content-center */
.justify-content-center {
    justify-content: center !important;
}

/* Исправление для text-center */
.text-center {
    text-align: center !important;
}

/* Исправление для w-100 в формах */
.w-100 {
    width: 100% !important;
}

/* Исправление для pt-md-4 и pb-md-4 */
.pt-md-4 {
    padding-top: 2rem !important;
}

.pb-md-4 {
    padding-bottom: 2rem !important;
}

@media (max-width: 991px) {
    .pt-md-4 {
        padding-top: 1.5rem !important;
    }
    
    .pb-md-4 {
        padding-bottom: 1.5rem !important;
    }
}

/* Исправление для контейнеров */
.container {
    position: relative !important;
}

.container-fluid {
    position: relative !important;
}

/* Убеждаемся, что page-wrapper не влияет на позиционирование футера */
/* Но не переопределяем для smooth-scroll - ему нужен height: 100vh */
#page-wrapper:not(.smooth-scroll) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Футер должен быть после page-wrapper в потоке документа */
#page-wrapper + footer,
#page-wrapper + .footer,
[data-barba="wrapper"] > #page-wrapper + footer,
[data-barba="wrapper"] > #page-wrapper + .footer {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    clear: both !important;
}

/* Исправление для row */
.row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.row > * {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Улучшение видимости разделителей */
/* Улучшенные стили для заголовков секций */
.section__headline {
    background-color: var(--color-primary, #1a2b4a) !important;
    height: 2px !important;
    width: 60px !important;
    margin: 1rem auto !important;
    flex-shrink: 0 !important;
}

/* Улучшенные стили для заголовков h2 в секциях */
.section h2.h2,
.section .h2,
h2.h2,
.h2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    margin-top: 0 !important;
}

/* Стили для заголовков внутри section__headline контейнера */
.section__headline.text-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 2rem !important;
    background: none !important;
    height: auto !important;
    width: 100% !important;
}

.section__headline.text-center .h2,
.section__headline.text-center h2,
.section__headline.text-center .h1,
.section__headline.text-center h1 {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Декоративная линия под заголовком */
.section__headline.text-center::after {
    content: '' !important;
    display: block !important;
    order: 2 !important;
    background-color: var(--color-primary, #1a2b4a) !important;
    height: 2px !important;
    width: 60px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

/* Описание под заголовком */
.section__headline.text-center .lead,
.section__headline.text-center p {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* Адаптивные стили для заголовков */
@media (max-width: 991px) {
    .section h2.h2,
    .section .h2 {
        font-size: 1.75rem !important;
        line-height: 1.35 !important;
    }
    
    .section__headline.text-center .h2,
    .section__headline.text-center h2 {
        font-size: 1.75rem !important;
        padding: 0 0.75rem !important;
    }
}

@media (max-width: 768px) {
    .section h2.h2,
    .section .h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    
    .section__headline.text-center {
        margin-bottom: 1.5rem !important;
        gap: 0.75rem !important;
    }
    
    .section__headline.text-center .h2,
    .section__headline.text-center h2 {
        font-size: 1.5rem !important;
        padding: 0 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .section h2.h2,
    .section .h2 {
        font-size: 1.375rem !important;
        line-height: 1.45 !important;
    }
    
    .section__headline.text-center {
        margin-bottom: 1.25rem !important;
        gap: 0.5rem !important;
    }
    
    .section__headline.text-center .h2,
    .section__headline.text-center h2 {
        font-size: 1.375rem !important;
        padding: 0 0.5rem !important;
        line-height: 1.45 !important;
    }
    
    .section__headline.text-center::after {
        width: 50px !important;
    }
}