/* =================================================================
 * BASE STYLES
 * ================================================================= */

body {
    line-height: 1.2;
    font-family: var(--font-body);
    overflow-y: auto;
    overflow-x: hidden !important;
}

/* МОДАЛЬНОЕ ОКНО POPUP */
.custom-modal-content {
    border-radius: var(--btn-border-radius-50) !important;
    border: none;
    padding: 0;
}
.send_btn:disabled{
    opacity: 0.6;
    pointer-events: none;
}
.suc_text{
    padding: 4.1rem 1rem;
    text-align: center;
    font-size: 1.2rem;
}
/* 4. Кнопка закрытия */
.modal-content .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1060;
    background-image: none;
    filter: none;
    width: 30px;
    height: 30px; 
    padding: 0;
    opacity: 1;
    background-image: url('/img/close.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.modal-content .btn-close:hover {
    opacity: 1;
}

.modal-open {
    padding-right: 0px !important;
}

html.is-active, .modal-open {
    overflow: hidden !important;
}

@media (min-width: 992px) {
    .custom-modal-content {
        padding: 0rem; 
    }
}

@media (max-width: 991.98px) {
    .custom-modal-content {
        padding: 0rem;
    }
}

/* =================================================================
 * CUSTOM HERO STYLES (REM CONVERSION)
 * ================================================================= */

/* HERO MAIN */
.hero {
    background-image: url(../img/99e61a44c8749bd3cac8f58068cb4d1f5c6acc85.png);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 100%;
    /* Минимальная высота - весь экран */
    position: relative;
    overflow: hidden;
    padding-bottom: 5rem;
    border-bottom-left-radius: var(--btn-border-radius-50);
    border-bottom-right-radius: var(--btn-border-radius-50);
    z-index: 20;
}

/* Градиентное наложение (Overlay) для контраста текста */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Создаем темный градиент для контраста текста, имитирующий эффект на изображении */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

/* Весь контент Hero должен быть выше наложения */
.hero * {
    z-index: 2;
    position: relative;
}

/* Заголовок и Текст */
.hero h1 {
    /* Применяем стили H1 из root.css, переопределяя цвет для Hero */
    color: var(--color-white-base);
    text-transform: uppercase;
    /* КОНВЕРТАЦИЯ: 70px -> 4.375rem */
    font-size: 4.375rem;
    font-family: var(--font-heading);
    /* КОНВЕРТАЦИЯ: -1.4px -> -0.0875rem */
    letter-spacing: -0.0875rem;
    font-weight: 700;
    margin-block-start: 0;
    margin-block-end: 0;
}

.hero-h1-tag {
    font-family: var(--font-body);
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-white-base);
    position: absolute;
    bottom: 0.7rem;
    left: 23rem;
    margin-top: 0rem;
    text-transform: uppercase !important;
}

/* HERO PAGE */
.hero-page {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    min-height: 340px;
    position: relative;
    overflow: hidden;
    padding-bottom: 1.875rem;
    border-bottom-left-radius: var(--btn-border-radius-50);
    border-bottom-right-radius: var(--btn-border-radius-50);
}

/* Градиентное наложение (Overlay) для контраста текста */
.hero-page::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Создаем темный градиент для контраста текста, имитирующий эффект на изображении */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

/* Весь контент Hero должен быть выше наложения */
.hero-page * {
    z-index: 2;
    position: relative;
}

/* Заголовок и Текст */
.hero-page h1 {
    color: var(--color-white-base);
    text-transform: none;
    font-size: 3rem;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-block-start: 0;
    margin-block-end: 0;
}

.hero-page .breadcrumb-item {
    font-family: var(--font-body);
    color: var(--color-white-base);
    font-size: 0.75rem;
    font-weight: 400;
    background-color: transparent;
    padding: 0;
}

.hero-page .breadcrumb-item a {
    color: var(--color-white-base);
}

.hero-page .breadcrumb-item.active {
    color: var(--color-white-base);
}

.hero-page .breadcrumb-item+.breadcrumb-item::before {
    color: var(--color-white-base);
}

/* Header */
.hero-header {
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 6.25rem;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(45px);
}

.hero-lang-toggle {
    background-color: transparent !important;
    border: 1px solid var(--color-white-base);
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.hero-whatsapp-btn {
    /* Стили для кнопки WhatsApp в Header */
    background: var(--gradient-primary);
    border: none;
    font-weight: 700;
}

/* Кнопка Outline */
.hero-btn-outline {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: var(--color-white-base) !important;
    height: 3.125rem !important;
    padding: 0.625rem 1.5625rem !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.0175rem;
    text-transform: uppercase !important;
    border-radius: 3.125rem !important;
    transition: all 0.3s ease-in-out !important;
}

.hero-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white-base);
}

/* Card внизу секции */
.hero-card {
    display: inline-flex;
    padding: 1.25rem !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 1.875rem !important;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.50) 50%, rgba(255, 255, 255, 0.00) 260.6%) !important;
    backdrop-filter: blur(10px) !important;
    color: var(--color-white-base) !important;
    z-index: 5;
    position: relative;
}

.hero-card p {
    color: var(--color-white-base) !important;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}

.hero-card-img {
    border-radius: 1.25rem !important;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.navigation-frame {
    gap: 0.625rem;
}

.navigation-frame .nav {
    display: flex;
    gap: 0.625rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.navigation-frame a {
    color: var(--color-white-base) !important;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 120%;
    padding: 0.5rem
}

.fixed-top {
    z-index: 9999 !important;
}

.fixed-top .navigation-frame a {
    color: var(--color-black-base) !important;
}

.fixed-top .social-icons img {
    width: 30px;
    height: 30px;
    background-color: var(--color-red-base) !important;
    padding: 5px;
    border-radius: 5px;
}

.fixed-top .dropdown_select_lang .btn {
    color: var(--color-black-base) !important;
}

.navigation-frame ul {
    margin-top: 0rem;
}

.dropdown_select_lang {
    display: flex;
    border: none;
    outline: none;
}

.dropdown_select_lang .btn {
    background-color: transparent;
    color: var(--color-white-base);
    font-weight: 500;
    align-content: center;
    align-items: center;
    border: none;
    outline: none;
}

.dropdown_select_lang .btn:hover {
    background-color: transparent;
    color: var(--color-white-base);
    border: none;
    outline: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: var(--color-white-base) !important;
    background-color: transparent !important;
    border: none !important;
}

.dropdown-menu {
    background-color: var(--color-red-base) !important;
    color: var(--color-white-base) !important;
    min-width: auto !important;
    min-height: auto;
    border-radius: 0.625rem !important;
    padding-left: 0 !important;
    border: 1px solid transparent !important;
}

.dropdown-item {
    background-color: transparent !important;
    color: var(--color-white-base) !important;
}

.dropdown-item:hover {
    background-color: transparent !important;
    outline: 0 !important;
    border: none !important;
}

.plane_animate {
    padding: 0 !important;
    position: relative;
    z-index: 100;
}

.plane_animate svg {
    z-index: 1000;
    position: relative;
    overflow: initial;
}

.plane img {
    max-width: 18.75rem;
    height: auto;
    position: absolute;
    top: 1.75rem;
    left: -3.125rem;
    z-index: 2 !important;
}

.dashed_line img {
    max-width: 16.875rem;
    height: auto;
    position: absolute;
    top: 3.125rem;
    left: -1.25rem;
    z-index: 0 !important;
}

/* =================================================================
 * Стили для Секции О КОМПАНИИ (About Us) 
 * ================================================================= */

/* Общие отступы для секции */
.about-us {
    padding-top: 5rem;
    /* 80px */
    padding-bottom: 0rem;
    /* 0px */
    background-image: url(/img/about-us-bg-pattern.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Стили для маленького текста "О компании" */
.section-tag-line {
    width: fit-content;
    font-size: 1rem;
    /* 16px */
    font-weight: 400;
    color: var(--color-red-base);
    padding: 5px 15px;
    border: 1px solid var(--color-red-base);
    border-radius: var(--btn-border-radius-50)
}

/* Стили для h2 в секции */
.about-us h2 {
    font-size: 3rem;
    color: var(--color-black-base);
    letter-spacing: -0.96px;
    text-transform: none;
    line-height: 1.2;
}

.about-us-header {
    background-image: url(/img/logo-icon-bg.png);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

/* Стили для параграфа-описания */
.about-us .content {
    color: var(--color-black-base);
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: -0.02rem;
}

/* Обеспечение одинаковой ширины для 3-х фоток в row без использования Bootstrap col-* */
.about-us-photos-desktop .photo-item,
.about-us-photos-mobile .photo-item {
    width: calc(33.333% - 0.666rem);
    /* 100% / 3, минус половина отступа gap-3 */
}

.about-us-photos-desktop .photo-item img {
    border-radius: var(--btn-border-radius-30);
}

.about-us-photos-mobile .photo-item img {
    border-radius: var(--btn-border-radius-30);
}

/* Стили для изображений, чтобы они не растягивались */
.about-us-main-photo .ratio img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: var(--btn-border-radius-50);
}

/* =================================================================
 * Стили для карточек услуг (Service Card)
 * ================================================================= */

.service-cards-container {
    padding-top: 5rem;
    padding-bottom: 0rem;
}

.service-card {
    /* Базовые параметры карточки */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    padding: 1.875rem;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    /* Плавный переход всех свойств */
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease, max-height 0.4s ease;
}

/* -----------------------------------
 * 1. ДЕФОЛТНОЕ (БЕЛОЕ) СОСТОЯНИЕ
 * ----------------------------------- */

.service-card.default-state {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: var(--color-white-base);
    color: var(--color-black-base);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05);
    /* Легкая тень */
    max-height: 13.75rem;
    /* Ваше ограничение высоты для дефолтного состояния */
    border-top-left-radius: var(--btn-border-radius-50);
    border-top-right-radius: var(--btn-border-radius-50);
    border-bottom-left-radius: var(--btn-border-radius-50);
    border-bottom-right-radius: var(--btn-border-radius-50);
}

/* Иконка в дефолтном состоянии */
.service-card .icon-circle-bg {
    fill: var(--color-red-base-30);
    /* Фон: Красный с 30% прозрачностью */
    stroke: none;
    /* Без бордера */
}

.service-card .card-icon {
    stroke: var(--color-red-base);
    /* Цвет иконки: Красный */
    fill: none;
}

/* * Стили для плавного смещения контента */
.service-card .card-content-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    transition: transform 0.4s ease;
    /* Плавное смещение */
    transform: translateY(0);
}

/* Описание скрыто в дефолтном состоянии (используем max-height и opacity для плавности) */
.service-card .card-description {
    opacity: 0;
    max-height: 0;
    /* Высота 0 для скрытия */
    margin-top: 0;
    padding-top: 0;
    /* Увеличил время для max-height, чтобы переход был более заметным */
    transition: opacity 0.4s ease 0.1s, max-height 0.5s ease, margin-top 0.4s ease;
}


/* -----------------------------------
 * 2. СОСТОЯНИЕ ПРИ НАВЕДЕНИИ (HOVER / КРАСНОЕ)
 * ----------------------------------- */

.service-card:hover {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-image: url(/img/bg-active-card.png);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--color-red-base);
    /* Фон: Красный */
    color: var(--color-white-base);
    /* Текст: Белый */
    transform: translateY(-5px);
    /* Небольшой подъем */
    box-shadow: 0 0.625rem 1.875rem rgba(237, 50, 55, 0.5);
    /* Выразительная тень */
    max-height: 100%;
    /* Ваше увеличение высоты при наведении */
    border-top-left-radius: var(--btn-border-radius-50);
    border-top-right-radius: var(--btn-border-radius-50);
    border-bottom-left-radius: var(--btn-border-radius-50);
    border-bottom-right-radius: 0;
}

/* Смещаем контент вверх при HOVER */
.service-card:hover .card-content-wrap {
    /* Смещаем вверх, чтобы освободить место для описания */
    transform: translateY(-2.5rem);
    padding-top: 1.875rem;
}


/* Иконка в состоянии HOVER */
.service-card:hover .icon-circle-bg {
    fill: transparent;
    /* Фон: Прозрачный */
    stroke: var(--color-white-base);
    /* Бордер: Белый */
    stroke-width: 0.0625rem;
}

.service-card:hover .card-icon {
    stroke: var(--color-white-base);
    /* Цвет иконки: Белый */
    fill: none;
}

/* Описание показано плавно при HOVER */
.service-card:hover .card-description {
    opacity: 1;
    max-height: 9.375rem;
    /* Достаточная высота для описания */
    margin-top: 1.25rem;
    color: var(--color-white-base);
    font-size: 0.875rem;
}

/* Заголовок при HOVER */
.service-card:hover .card-title {
    color: var(--color-white-base);
}


/* -----------------------------------
 * 3. ОБЩИЕ СТИЛИ КОМПОНЕНТОВ
 * ----------------------------------- */

.card-icon-wrapper {
    position: relative;
    width: 4.375rem;
    height: 4.375rem;
    margin-bottom: 1.25rem;
}

.card-icon-wrapper svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.card-icon {
    width: 2.1875rem !important;
    height: 2.1875rem !important;
    transition: stroke 0.4s ease;
}

.icon-circle-bg {
    transition: fill 0.4s ease, stroke 0.4s ease;
}

.card-title {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.3;
    padding-right: 2.5rem;
}

/* Финальная структура для контента, чтобы он был поверх фона */
.service-card>* {
    position: relative;
    z-index: 1;
}

.preim-flot {
    background-image: url(/img/bg-preim-flot.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: 40%;
    background-attachment: fixed;
    padding-bottom: 5rem;
}

/* =================================================================
 * Стили для Секции ФЛОТ
 * ================================================================= */

.about-us-fleet .bg-logo {
    background-image: url(/img/logo-icon-bg.png);
    background-size: 50%;
    background-position: 0% 48%;
    background-repeat: no-repeat;
}

/* --- Стили для самолета с position absolute --- */
.plane-absolute {
    position: absolute;
    height: auto;
    opacity: 1;
    pointer-events: none;
}

/* --- Стили для Карточек Флота (Горизонтальные) --- */
.beige-card {
    background-color: var(--color-beige-base) !important;
    border: none !important;
    border-radius: var(--btn-border-radius-50) !important;
    padding: 1.25rem 1.5625rem !important;
}

/* Контейнер для изображения, чтобы сделать его квадратным */
.beige-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--btn-border-radius-30);
}

.beige-card .card-img-left img {
    /*width: 100%;
    height: 250px;
    aspect-ratio: 16 / 9;*/
    width: 100%;
    min-height: 350px;
    aspect-ratio: 4 / 3;
    border-radius: var(--btn-border-radius-30);
}

/* Стили для контента (текста) */
.beige-card .card-body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0;
}

.beige-card .card-title {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
}

.beige-card .content {
    font-size: 0.875rem;
    color: var(--color-black-base);
}

/* =================================================================
 * STYLE ANIMATE MAP & PLANE
 * ================================================================= */

/* Общие стили */
.map {
    padding-top: 5rem;
    /* 80px */
    padding-bottom: 0rem;
    /* 0px */
}

/* Обертка списка стран */
.countries-list-wrapper {
    padding: 0rem;
    height: 100%;
}

.countries-list {
    display: flex;
    flex-direction: column;
}

.countries-list:hover {
    background-color: transparent !important;
    width: fit-content !important;
}

/* Элемент страны */
.country-item {
    display: flex;
    align-items: center;
    padding: 0rem;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
    cursor: pointer;
    width: fit-content;
    padding-right: 0.9375rem;
}

.country-item:hover {
    background: transparent;
}

.country-item.active {
    background: var(--color-beige-base);
    border-radius: var(--btn-border-radius-30);
    
}

.country-flag {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    margin-right: 0.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--color-white-base);
}

.country-name {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-black-base);
    font-weight: 700;
}

.country-name:hover {
    color: var(--color-red-base);
}

.country-item.active .country-name {
    color: var(--color-red-base);
    font-weight: 700;
}

/* Обертка карты */
.map-wrapper {
    padding: 0;
}

/* Контейнер карты */
.map-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0.75rem;
    overflow: visible;
}

#worldMap {
    width: 100%;
    height: auto;
    display: block;
}

/* Самолет */
.plane {
    position: absolute;
    width: 3.125rem;
    height: 3.125rem;
    transition: none;
    z-index: 100;
    filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.plane img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Точки на карте */
.point {
    position: absolute;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%);
    z-index: 50;
    animation: pulse 2s ease-in-out infinite;
}

.point img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
}

@keyframes pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Линия полета */
.flight-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 991px) {
    .countries-list-wrapper {
        margin-bottom: 20px;
    }

    .countries-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .country-item {
        flex: 0 0 auto;
        margin-bottom: 0;
    }
}

@media (max-width: 576px) {
    .plane {
        width: 2.1875rem;
        height: 2.1875rem;
    }

    .point {
        width: 0.75rem;
        height: 0.75rem;
    }
}

/* =================================================================
 * STYLE FOR PARTNERSHIP SECTION
 * ================================================================= */

.partnership {
    margin-top: 6.25rem;
    margin-bottom: 2.5rem;
    padding: 1.5625rem 1.25rem;
    /* Градиентный фон */
    background: linear-gradient(88.84deg, #D2AE6D 23.17%, #ED3237 135%);
    /* Установим светлый цвет текста по умолчанию для контраста */
    color: #ffffff;
    border-radius: var(--btn-border-radius-50);
}

.partnership .section-tag-line {
    color: var(--color-white-base);
    border: 1px solid var(--color-white-base);
}

.partnership h3 {
    /* Убедимся, что заголовок белый */
    color: #ffffff;
}

.partnership img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--btn-border-radius-50);
}

/* =================================================================
 * STYLE FOR PARTNERS LOGOS SECTION
 * ================================================================= */
/* Контейнер карусели Swiper, задаем его границы */
.partners-carousel {
    width: 100%;
    /* Добавляем горизонтальный отступ, чтобы крайние слайды были видны лишь частично */
    padding-left: 1.25rem;
    /* Базовый offset для мобильных */
    padding-right: 1.25rem;
    overflow: hidden;
}

/* Слайд-контейнер для каждого логотипа */
.swiper-slide {
    flex-shrink: 0;
}

/* Класс, который вы задали для элемента логотипа */
.logo-item {
    height: 7.5rem;
    /* Используем Flexbox для горизонтального и вертикального центрирования */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Блок внутри слайда, который задает фон и закругленные углы */
.logo-item-content {
    /* Используйте нужную вам переменную или цвет */
    background-color: var(--color-card-grey, #f4f4f4);
    border-radius: var(--btn-border-radius-30);
    width: 100%;
    height: 100%;
    /* Flexbox для центрирования логотипа внутри карточки */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem;
    box-sizing: border-box;
}

/* Стилизация самого изображения логотипа */
.logo-item-content img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: 5rem;
    object-fit: contain;
}

/* Медиазапросы для увеличения offset на десктопе */
@media (min-width: 992px) {
    .partners-carousel {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* =================================================================
 * STYLE FOR NEWS SECTION
 * ================================================================= */
.homepage .news {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Стилизация СЕКЦИИ НОВОСТЕЙ (.news) */
.news .container-fluid {
    padding-left: 0;
    padding-right: 0;
    width: max-content;
}

.news .card-text {
    line-height: 1.4em;
    max-height: 4.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news .card-title {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 1.125rem;
    color: var(--color-black-base);
    text-decoration: none !important;
    text-transform: uppercase;
}

.scroll-news-wrapper {
    width: 82.25rem;
    margin-left: auto;
    margin-right: 0 !important;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: 0;
    overflow-y: visible !important;
    /* ДОБАВЛЕНО: для позиционирования кнопок относительно этого блока */
    position: relative;
}

.scroll-news {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 1.25rem;
    margin-right: -15rem;
}

.scroll-news::-webkit-scrollbar {
    display: none;
}

/* Стили элемента карточки новостей (.news-item) */
.news .card {
    padding: 0.9375rem;
    border: none !important;
    background-color: var(--color-beige-base);
    border-radius: var(--btn-border-radius-50);
}

.news .news-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    margin-right: 1.875rem;
    width: 21.875rem;
    min-height: 31.25rem;
    max-height: none;
    transition: none;
    cursor: pointer;
}

/* Стили для кнопок навигации (общий класс для позиционирования) */
.news .news-nav-btn {
    /* ПОЗИЦИОНИРОВАНИЕ И ЦЕНТРИРОВАНИЕ */
    position: absolute;
    top: 50%;
    /* Сдвиг сверху на половину */
    transform: translateY(-50%);
    /* Подъем на половину высоты кнопки для центрирования */
    z-index: 10;

    /* Стили кнопки из вашего кода, но с удалением gap */
    display: flex;
    width: 3rem;
    height: 3rem;
    padding: 0.625rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    /* Скрываем кнопки на мобильных, где нет места, чтобы не ломать верстку */
    display: none;
}

.news .news-nav-btn img {
    width: 1.5rem;
    height: 1.5rem;
}

/* Стили для позиционирования кнопок по бокам */
.news .news-prev-slide-btn {
    left: -2.5rem;
    /* Сдвиг влево от контейнера */
    background-color: var(--color-grey) !important;
}

.news .news-next-slide-btn {
    right: -2.5rem;
    /* Сдвиг вправо от контейнера */
    background-color: var(--color-grey) !important;
}

.news button:focus,
.news button:hover,
.news button:active {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    background-color: var(--color-black-base) !important;
}

/* Изображение в карточке */
.news .card-img-top {
    height: 15.625rem;
    width: 100%;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
    border-radius: var(--btn-border-radius-30);
}

/* Стили для даты публикации */
.news-date {
    font-family: var(--font-body);
    position: absolute;
    top: 0.9375rem;
    /* Отступ сверху от картинки */
    left: 0.9375rem;
    /* Отступ слева от картинки */
    z-index: 1;
    background-color: var(--color-grey, #777777);
    color: var(--color-white-base);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4375rem 1.875rem;
    border-radius: var(--btn-border-radius-40);
}

/* Медиа-запрос для отображения кнопок навигации на десктопе */
@media (min-width: 1200px) {
    .news .news-nav-btn {
        display: flex;
        /* Показываем навигацию на больших экранах */
    }
}

/* =================================================================
 * STYLE FOR CTA SECTION
 * ================================================================= */
.cta-section {
    margin-bottom: 5rem;
}

.cta-block {
    padding: 2.8125rem 3.75rem 0 0.75rem;
    /* Градиентный фон */
    background: linear-gradient(88.84deg, #D2AE6D 23.17%, #ED3237 135%);
    color: var(--color-white-base);
    border-radius: var(--btn-border-radius-50);
}

.row-with-background {
    border-radius: var(--btn-border-radius-50);
    background-image: url('/img/cta-form-bg.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 58%;
    min-height: 13.4375rem;
    background-clip: border-box;
}

.cta-block h2 {
    font-size: 3rem;
    color: #ffffff;
    line-height: 100%;
    padding-left: 3.75rem;
}

.cta-block .content {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: var(--color-white-base);
    line-height: 150%;
    padding-left: 3.75rem;
}

/* =================================================================
 * СТИЛИ ДЛЯ ФОРМЫ ОБРАТНОЙ СВЯЗИ
 * ================================================================= */

/* Общая обертка для иконок и полей */
.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Стили для иконок */
.input-icon {
    background-color: var(--color-card-grey, #f4f4f4);
    border-radius: var(--btn-border-radius-50);
    position: absolute;
    left: 1.5625rem;
    /* 25px */
    width: 1.875rem;
    height: 1.875rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0.6;
    padding: 0.3125rem;
}

.contact-form {
    padding-bottom: 2.8125rem;
}

/* Стили для полей ввода (.form-control) */
.contact-form .form-control {
    height: 3.75rem;
    border-radius: var(--btn-border-radius-40, 40px);
    padding-top: 1.0625rem;
    padding-bottom: 1.0625rem;
    padding-left: 4.0625rem !important;
    padding-right: 3.125rem !important;
    /* Стили рамки и фона */
    border: 0rem solid var(--color-grey);
    background-color: var(--color-white-base);
    width: 100%;
    box-shadow: none !important;
}

/* Стили для плейсхолдера (текста внутри поля) */
.contact-form .form-control::placeholder {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--color-black-base);
    opacity: 1;
}

/* Стили для текста согласия */
.contact-form .privacy-text {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-white-base);
    margin-top: -0.3125rem;
    margin-bottom: 1.25rem;
}

.contact-form .privacy-text a {
    color: var(--color-white-base);
    text-decoration: underline !important;
}

/* Адаптивные стили для мобильных */
@media (max-width: 576px) {
    .contact-form .form-control {
        padding-left: 2.8125rem !important;
        padding-right: 1.875rem !important;
    }

    .contact-form .input-icon {
        left: 1.25rem;
	z-index: 0;
    }
}

/* =================================================================
 * СТИЛИ ДЛЯ СЕКЦИИ КОНТАКТЫ
 * ================================================================= */

.contacts {
    padding-top: 0rem;
    padding-bottom: 5rem;
}

.contacts-page .contacts {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}

/* Стили для заголовка */
.contacts h2 {
    font-size: 3rem;
    color: var(--color-black-base);
}

/* Стили для элементов contact-item */
.contacts .contact-item .subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: var(--color-black-base);
}

.contacts .contact-item small a {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-grey);
    transition: color 0.3s;
}

.contacts .contact-item small a:hover {
    color: #000;
}

/* Стили для обертки карты */
.contacts .map-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: var(--btn-border-radius-50);
}

/* Стили для социальных иконок */
.contacts .social-icons .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Опционально: можно добавить фон или рамку, если иконки это требуют */
}

/* =================================================================
 * СТИЛИ ДЛЯ ФУТЕРА
 * ================================================================= */
.footer {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
    background-color: var(--color-black-base);
    color: var(--color-white-base);
}

.copyright-text {
    font-size: 0.875rem;
    color: var(--color-grey);
}

.privacy-links a {
    font-size: 0.875rem;
    color: var(--color-grey);
    transition: color 0.3s;
    text-decoration: none;
}

.footer-text small {
    font-size: 0.875rem;
    color: var(--color-grey) !important;
}

/* =================================================================
 * СТИЛИ ДЛЯ ФОРМЫ ПОДПИСКИ (Newsletter)
 * ================================================================= */

.newsletter-form {
    max-width: 28.125rem;
    /* Ограничиваем ширину для лучшего вида */
    margin: 0 auto;
    /* Центрируем форму, если она в отдельной колонке */
}

/* Обертка для поля и кнопки */
.newsletter-input-group {
    display: flex;
    width: 100%;
    border-radius: var(--btn-border-radius-50);
    overflow: hidden;
    border: none;
}

/* Стили для поля ввода */
.newsletter-form .newsletter-input {
    flex-grow: 1;
    border-radius: 0;
    border: none;
    /* Высота поля и отступы */
    height: 3.125rem;
    /* 50px */
    padding: 1rem 1.5rem;
    /* ~16px по высоте, 24px по горизонтали */
    background-color: var(--color-white-base);
    box-shadow: none !important;
}

.newsletter-form .newsletter-input:focus {
    outline: none !important;
    border-color: transparent;
}

/* Стили для кнопки */
.newsletter-form .newsletter-btn {
    flex-shrink: 0;
    border-radius: 0;
    border: none;
    /* Ширина кнопки: ~140px, padding: 20px по бокам */
    padding: 0 24px;
    height: 3.125rem;
    /* Высота, равная полю */
    /* Стили текста кнопки */
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    /* Цвет кнопки (используем ваш класс btn-primary-red) */
    background-color: var(--color-primary-red, #ED3237);
    color: var(--color-white-base);
}

/* Стили текста плейсхолдера (повторяем предыдущие требования) */
.newsletter-form .newsletter-input::placeholder {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--color-grey);
    opacity: 1;
}

/* Стили для текста согласия */
.newsletter-form .privacy-text {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-grey);
    margin-bottom: 0;
    /* Убираем лишний отступ */
    text-align: left;
}

.newsletter-form .privacy-text a {
    color: var(--color-grey);
    border-bottom: 1px solid var(--color-grey);
}

/* =================================================================
 * СТИЛИ ДЛЯ БЛОКА "MADE BY" В ФУТЕРЕ
 * ================================================================= */

.media-peace-tag img {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    object-fit: contain;
    margin-right: 0.5rem;
}

/* Общий класс для маленького текста в нижней части футера */
.media-peace-tag .small-text {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Стили для ссылки/текста */
.media-peace-tag .media-peace-link .media-peace-text {
    color: var(--color-grey) !important;
    transition: color 0.3s;
}

.media-peace-tag .media-peace-link:hover .media-peace-text {
    color: var(--color-grey) !important;
}

/* Адаптивность: на мобильных устройствах центрируем все */
@media (max-width: 991.98px) {
    .media-peace-tag .footer-bottom-row {
        text-align: center !important;
    }

    .media-peace-tag .col-lg-6 {
        text-align: center !important;
    }
}

/* =================================================================
 * СТРАНИЦА О КОМПАНИИ
 * ================================================================= */
.history-company {
    padding-top: 2.5rem;
    padding-bottom: 0rem;
}

.history-company img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--btn-border-radius-50);
}

.about-us-fleet {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.about-us-fleet h2 {
    font-size: 3rem;
    color: var(--color-black-base);
    letter-spacing: -0.96px;
    text-transform: none;
    line-height: 1.2;
}

.about-page .partnership {
    margin-top: 0rem;
    margin-bottom: 2.5rem;
}

.about-page .partners-logos-container {
    padding-bottom: 5rem;
}

/* СТИЛИ ДЛЯ СЕКЦИИ МИССИЯ КОМПАНИИ */
.mission-company {
    padding-top: 0rem;
    padding-bottom: 5rem;
}

.mission-company img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--btn-border-radius-50);
}

.mission-cards-section {
    padding-top: 5rem;
    padding-bottom: 0rem;
}

.mission-card {
    /* Базовые параметры карточки */
    min-height: 18.4375rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
    padding: 1.25rem;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    /* Плавный переход всех свойств */
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease, max-height 0.4s ease;
}

.mission-card {
    background-color: var(--color-beige-base);
    color: var(--color-black-base);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05);
    /* Легкая тень */
    border-top-left-radius: var(--btn-border-radius-50);
    border-top-right-radius: var(--btn-border-radius-50);
    border-bottom-left-radius: var(--btn-border-radius-50);
    border-bottom-right-radius: var(--btn-border-radius-50);
}

.mission-card:hover {
    background-color: var(--color-red-base);
    /* Фон: Красный */
    color: var(--color-white-base);
    /* Текст: Белый */
}

.mission-cards-section .bg-logo {
    background-image: url(/img/logo-bg-mission-card.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 10rem;
}

.mission-cards-section .bg-logo:hover {
    background-image: none;
}

.mission-cards-section img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: var(--btn-border-radius-50);
}

/* Иконка в дефолтном состоянии */
.mission-card .icon-circle-bg {
    fill: var(--color-red-base);
    /* Фон: Красный с 30% прозрачностью */
    stroke: none;
    /* Без бордера */
}

.mission-card .card-icon {
    stroke: var(--color-baige-base) !important;
    /* Цвет иконки: Белый */
    fill: none !important;
    stroke-width: 0rem;
}

/* * Стили для плавного смещения контента */
.mission-card .card-content-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}

/* Иконка в состоянии HOVER */
.mission-card:hover .icon-circle-bg {
    fill: transparent;
    /* Фон: Прозрачный */
    stroke: var(--color-white-base);
    /* Бордер: Белый */
    stroke-width: 0.0625rem;
}

.mission-card:hover .card-icon {
    stroke: var(--color-white-base);
    /* Цвет иконки: Белый */
    fill: none !important;
}

/* Описание показано плавно при HOVER */
.mission-card:hover .card-description {
    color: var(--color-white-base);
}

/* Заголовок */
.mission-card .card-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-black-base);
    padding-right: 0rem !important;
}

/* Заголовок при HOVER */
.mission-card:hover .card-title {
    color: var(--color-white-base);
}

/* =================================================================
 * СТРАНИЦА УСЛУГИ
 * ================================================================= */
.services-content {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.services-content .baige-card {
    min-height: 300px;
}

/* =================================================================
 * ШАБЛОН СТРАНИЦЫ ОДНОЙ УСЛУГИ
 * ================================================================= */
.cta-section-service-page {
    padding-top: 2.5rem;
    padding-bottom: 0rem;
}

.cta-section-service-page img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--btn-border-radius-50);
}

/* ПОЧЕМУ НАМ ДОВЕРЯЮТ */
.trusted-section {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}

.trusted-section h2 {
    font-size: 2.25rem;
    color: var(--color-black-base);
}

.trusted-card h5 {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-black-base);
    text-transform: uppercase;
}

/* ПРЕИМУЩЕСТВА И ВОЗМОЖНОСТИ */
.advantages-section {
    padding-top: 0rem;
    padding-bottom: 5rem;
}

.advantages-section h2 {
    font-size: 2.25rem;
    color: var(--color-black-base);
}

.advantages-section img {
    border-radius: var(--btn-border-radius-30);
}

.advantages-section .beige-card {
    padding: 1.25rem 1.25rem 2.5rem 1.25rem !important;
}

/* ЧТО МЫ ПЕРЕВОЗИМ */
.what-we-transport {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.accordion-button:hover {
    z-index: 0 !important;
}

/* --- Стилизация Аккордеона --- */
.accordion-item {
    background-color: #F4ECDD !important;
    border: none !important;
    border-radius: var(--btn-border-radius-30) !important;
}

/* Контейнер списка внутри аккордеона */
.transport-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    /* Убираем стандартные маркеры */
    padding-left: 0;
    margin-bottom: 0;
}

/* Элементы списка в аккордеоне */
.transport-list-item {
    font-family: var(--font-body) !important;
    padding: 0.9375rem 0.625rem !important;
    font-size: 0.875rem;
    background: var(--gradient-primary) !important;
    color: var(--color-white-base) !important;
    border-radius: var(--btn-border-radius-20);
}

.transport-list-item:last-child {
    border-bottom: none;
}

/* Базовый стиль кнопки аккордеона */
.custom-accordion .custom-button {
    width: 100%;
    text-align: left;
    display: flex;
    /* Для размещения иконки и заголовка в ряд */
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: var(--color-beige-base);
    /* Светлый фон для вкладки */
    border: none !important;
    transition: background-color 0.3s ease;
    border-top-left-radius: var(--btn-border-radius-30) !important;
    border-top-right-radius: var(--btn-border-radius-30) !important;
    border-bottom-left-radius: var(--btn-border-radius-30) !important;
    border-bottom-right-radius: var(--btn-border-radius-30) !important;
    outline: none !important;
}

.custom-accordion .custom-button:focus {
    box-shadow: none !important;
    outline: none !important;
    background-color: var(--color-beige-base) !important;
}

.custom-accordion .custom-button:not(.collapsed) {
    background-color: var(--color-beige-base);
    /* Фон для открытой вкладки */
    color: var(--color-black-base);
    box-shadow: none;
    border-top-left-radius: var(--btn-border-radius-30) !important;
    border-top-right-radius: var(--btn-border-radius-30) !important;
    outline: none !important;
}

.custom-accordion .custom-button:not(.collapsed):focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Стиль для Заголовка h5 внутри аккордеона */
.accordion-title {
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--color-black-base) !important;
    /* Убедимся, что заголовок не сжимается */
    flex-grow: 1;
    text-transform: uppercase;
}

/* Стиль для Иконки (Картинки) слева */
.accordion-icon {
    width: 64px;
    height: 64px;
}

/* --- Стилизация Стрелки Аккордеона и Анимация --- */

/* Базовый стиль для стрелки */
.accordion-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    /* Плавный переход для вращения */
    color: #E60023;
    /* Пример цвета для стрелки */
}

/* Вращение стрелки при открытии (вкладка закрыта, но кнопка активна) */
.custom-button:not(.collapsed) .accordion-arrow {
    transform: rotate(-180deg);
    /* Стрелка вверх */
}

.accordion-button::after {
    background-size: 70% !important;
    background-position: center center !important;
    width: 2rem !important;
    height: 2rem !important;
    background-color: var(--color-white-base) !important;
    border-radius: var(--btn-border-radius-50) !important;
}

.accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    outline: 0;
    box-shadow: none !important;
}

/* Стиль содержимого аккордеона */
.accordion-body.custom-body {
    padding: 1rem 1.25rem;
    background-color: var(--color-beige-base);
    border-bottom-left-radius: var(--btn-border-radius-30) !important;
    border-bottom-right-radius: var(--btn-border-radius-30) !important;
}

/* Легкая анимация при открытии/закрытии содержимого */
/* Bootstrap 5 уже использует transition для .collapse, 
   но мы можем улучшить это: */
.accordion-collapse {
    transition: height 0.35s ease;
}

/* --- Адаптивность --- */
/* На мобильных устройствах обе колонки (col-lg-6) станут одной (col-12),
   что обеспечит стекирование в одну колонку по умолчанию. */
@media (max-width: 991.98px) {

    /* На планшетах и ниже, убираем верхний отступ у второй колонки */
    .col-lg-6:nth-child(2) {
        margin-top: 1rem !important;
        /* Отступ между колонками, когда они в столбик */
    }
}

/* =========================================== */
/* СТРАНИЦА ФЛОТ
/* =========================================== */
.fleet-section {
    background-image: url(/img/bg-fleet.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* --- Контейнер карточки (Фиксированная высота) --- */
.custom-card {
    background: var(--color-white-base);
    width: var(--card-width);
    height: var(--card-total-height);
    /* ФИКСИРОВАННАЯ ВЫСОТА! */
    border: none;
    border-radius: var(--btn-border-radius-40);
    padding: 1.25rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    /* Используем Flexbox */
    display: flex;
    flex-direction: column;
    /* Плавность для всей карточки, если анимируется box-shadow или transform */
    transition: transform var(--transition-speed) ease-out, box-shadow var(--transition-speed) ease-out;
    position: relative;
    /* Для правильного позиционирования дочерних элементов */
}

/* --- Обертка Изображения --- */
.card-image-wrapper {
    /* Используем flex-grow, чтобы изображение занимало большую часть пространства по умолчанию */
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.custom-card .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--btn-border-radius-30);
    /* Плавность для transform */
    transition: transform var(--transition-speed) ease-out;
}

/* --- Постоянная область заголовка --- */
.card-title-fixed-area {
    padding: 0.9375rem 0;
    flex-shrink: 0;
    /* Заголовок не должен сжиматься */
    z-index: 1;
    /* Чтобы быть выше скрытого контента, если он накладывается */
}

/* --- Скрываемый/Появляющийся Контент --- */
.card-hover-content {
    padding: 0;
    /* Фиксированный padding для плавности */
    /* Скрытие контента по умолчанию */
    opacity: 0;
    max-height: 0;
    overflow: hidden;

    /* Использование transform для плавного появления СНИЗУ */
    transform: translateY(100%);
    /* Единая плавная анимация */
    transition: opacity var(--transition-speed) ease-out,
        max-height var(--transition-speed) ease-out,
        transform var(--transition-speed) ease-out;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 10px;
}

.custom-card .content {
    font-size: 0.875rem;
}

/* Стили для элементов внутри */
.content {
    margin-bottom: 0.625rem;
}

.btn-primary-red {
    display: block;
    text-align: center;
}

/* =========================================== */
/* D HOVER СОСТОЯНИЕ КАРТОЧКИ */
/* =========================================== */

.custom-card:hover .card-image-wrapper {
    /* Вместо изменения height, мы сдвигаем весь контент вниз */
    /* Используйте фиксированное значение, чтобы изменить высоту изображения 
       и освободить место для контента */
    height: calc(var(--card-total-height) - 10rem);
}

.custom-card:hover .card-hover-content {
    /* 1. Контент появляется */
    opacity: 1;
    /* 2. Убираем ограничение высоты */
    max-height: 31.25rem;
    /* 3. Возвращаем контент в исходное положение (Убираем сдвиг) */
    transform: translateY(0);

    /* Добавляем нижний padding, чтобы кнопка не прижималась к краю */
    padding-bottom: 0.9375rem;
}

/* =========================================== */
/* СТРАНИЦА ОДНОГО ФЛОТА */
/* =========================================== */
.fleet-page-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.fleet-page-section h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-black-base);
    text-transform: none !important;
}

.specifications h6 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black-base);
    text-transform: uppercase;
}

.specifications .items li {
    color: var(--color-black-base);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: -0.02rem;
}

/* Стили для галереи (Десктоп) */
.thumbnails-wrapper {
    gap: 0.5rem;
    min-width: fit-content;
    max-height: 31.25rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.gallery-thumb {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.main-image img {
    max-height: 31.25rem;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: var(--btn-border-radius-50);
}

.transition-image {
    transition: opacity 0.3s ease;
}

.gallery-thumb {
    max-width: 5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--btn-border-radius-20) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none !important;
    display: block;
}

.gallery-thumb:hover {
    transform: scale(1.02);
}

.active-thumb {
    border: 0.0625rem solid var(--color-red-base) !important;
}

.fleet-specs {
    padding-bottom: 3.75rem;
}

/* Убедимся, что стандартные границы таблицы удалены */
.table-borderless td,
.table-borderless th,
.table-borderless thead th,
.table-borderless tbody+tbody {
    font-family: var(--font-body);
    border: 0 !important;
}

/* Добавляем тонкий разделитель между строками, как на макете */
.fleet-data-table tr {
    border-bottom: 1px dashed #dee2e6;
    /* Используйте цвет #dee2e6 или другой светлый цвет */
}
.chars_table td{
    width: 50%;
}
.fleet-data-table td {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.fleet-data-table .first {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.fleet-data-table .second {
    font-size: 14px;
    font-weight: 400 !important;
    color: var(--color-grey);
    text-transform: none;
}

/* =========================================== */
/* СТРАНИЦА НОВОСТИ */
/* =========================================== */
.news-section {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}

/* pagination */
.pagination .page-link {
    font-family: inherit;
    color: var(--color-grey);
    font-size: 16px;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    background: transparent;
    transition: 0.3s;
    z-index: 0;
}

.pagination .page-link.active {
    background: var(--color-grey);
    color: var(--color-white-base);
    border: none;
    z-index: 0;
}

.pagination .page-link:hover {
    background: var(--color-red-base);
    color: var(--color-white-base);
}

.pagination button,
.pagination a {
    outline: none !important;
}

.pagination button:focus,
.pagination a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================== */
/* СТРАНИЦА ОДНОЙ СТАТЬИ */
/* =========================================== */
.news-post-section {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}

.other-news {
    padding-bottom: 0rem;
}

/* =================================================================
 * ШАБЛОН СТРАНИЦЫ ОДНОЙ УСЛУГИ
 * ================================================================= */
.partners-section {
    padding-top: 2.5rem;
    padding-bottom: 0rem;
}

.partners-section img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--btn-border-radius-50);
}

.partners-section h1 {
    text-transform: none;
    font-size: 3rem;
}

/* ПОЧЕМУ НАМ ДОВЕРЯЮТ */
.types-partnership-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.types-partnership-card h5 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-black-base);
    text-transform: uppercase;
}

.partnership-process-info {
    background-color: var(--color-red-base);
    padding: 25px;
    color: var(--color-white-base);
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    text-align: start;
    gap: 10px;
    border-radius: var(--btn-border-radius-30);
    margin-bottom: 5rem;
}

.partnership-process h5 {
    text-transform: uppercase;
    font-size: 1.25rem;
}

.partners-page .cta-section {
    padding-top: 5rem;
}

.partners-page 
.cta-section 
.row-with-background {
    border-radius: var(--btn-border-radius-50);
    background-image: url(/img/prt-cta-bg.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 85%;
    min-height: 13.4375rem;
    background-clip: border-box;
}

.country-item{
    text-transform: uppercase;
}
.countries-list-wrapper{
    position: relative;
    z-index: 2;
}
.new_map{
    width: 1136px;
    margin-left: -100px;
    position: relative;
    font-size: 16px;
}
.new_map img{
    width: 100%;
    display: block;
    opacity: 0.8;
}


.map_dot{
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: all 0.5s;
}
.map_dot.active{
    opacity: 1;
}
.map_dot img{
    width: 1.406em;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.3em;
    opacity: 1!important;
}
.map_country_name{
    font-size: 0.75em;
    border-radius: 30px;
    padding: 0.3em 0.7em;
    background: #777777;
    color: white;
}

.KZ {
    left: 62.7%;
    top: 30%;
}

.TR {
    left: 39.5em;
    top: 15.5em;
}

.EU {
    left: 32.9em;
    top: 13.5em;
}
.MA {
    left: 30.6em;
    top: 17.6em;
}
.EG{
    left: 38.3em;
    top: 18.4em;
}
.KE{
    left: 40.2em;
    top: 24.1em;
}
.AE{
    left: 44.2em;
    top: 19.6em;
}
.GULF{
    left: 39.6em;
    top: 19.1em;
}
.PK{
    left: 46.2em;
    top: 17.4em;
}

.IN{
    left: 49.3em;
    top: 20em;
}
.CN{
    left: 54.3em;
    top: 16.4em;
}
.HK{
    left: 55.7em;
    top: 18.9em;
}

.TH{
    left: 52.9em;
    top: 20.9em;
}
.SEA{
    left: 53.2em;
    top: 24.8em;
}

.map_plane{
    position: absolute;
    z-index: 5;
    left: 44.8em;
    top: 9.6em;
    transition: all 1s ease-in-out !important;
    display: none;
}

.map_plane img{
    width: 6.313em;
    opacity: 1!important;
}

.to_TR{
    transform: rotate(-31deg);
    left: 38.3em;
    top: 12.8em;

}

.to_EU{
    transform: rotate(19deg);
    left: 32.3em;
    top: 11.3em;
}
.to_MA{

    transform: rotateY(-180deg);
    left: 29.3em;
    top: 15.3em;
}

/*@keyframes to_MA {*/
/*    0%   {*/
/*        transform: rotate(-21deg);*/
/*        left: 25.3em;*/
/*        top: 13.3em;*/
/*    }*/
/*    100%  {*/
/*        transform: rotateY(-180deg);*/
/*        left: 29.3em;*/
/*        top: 15.3em;*/
/*    }*/

/*}*/

.to_EG{
    transform: rotateY(-180deg);
    left: 36.9em;
    top: 16em;
}
.to_KE{
    transform: rotateY(-180deg);
    left: 38.9em;
    top: 21.5em;
}

.to_GULF{
    transform: rotateY(-180deg);
    left: 40.3em;
    top: 16.5em;
}

.to_AE{
    transform: rotateY(-180deg) rotate(12deg);
    left: 41.9em;
    top: 17.4em;
}
.to_PK{
    transform: rotateY(-180deg);
    left: 44.3em;
    top: 14.4em;
}
.to_IN{
    transform: rotateY(-180deg);
    left: 47.5em;
    top: 17.5em;
}
.to_CN{
    transform: rotateY(-180deg);
    left: 52.5em;
    top: 14em;
}
.to_HK{
    transform: rotateY(-180deg);
    left: 53.7em;
    top: 16.4em;
}
.to_TH{
    transform: rotateY(0);
    left: 52.7em;
    top: 18.4em;
}
.to_SEA{
    animation: to_SEA 1s forwards;
}

@keyframes to_SEA {
    0%   {
        transform: rotateY(0);
        left: 45.7em;
        top: 22.4em;
    }
    100%  {
        transform: rotateY(-180deg);
        left: 54em;
        top: 22.4em;
    }

}

.to_KZ{
    animation: to_KZ 1s forwards;
}

@keyframes to_KZ {
    0%   {
        top: 17.1em;
        left: 57em;
        transform: rotate(0deg);

    }
    100%  {
        left: 44.8em;
        top: 9.6em;
        transform: rotate(0deg) !important;

    }

}



@media (max-width: 992px) {
    .new_map{
        width: 500px;
        margin: 0 auto;
        margin-left: -100px;
        font-size: 6.9px;
    }
    .map_country_name{
        transform: scale(1.4);
        transform-origin: center center;
    }
}