/* first-block star */
.first-block-section {background: url('/bitrix/templates/verfmos/images/fsp-bl1.jpg') center bottom no-repeat; min-height: 800px; position:relative; padding:40px 0px; background-size: cover;}
.first-block-section::before {content: ''; position: absolute; top: 0;left: 0;width: 100%; height: 100%;
background: linear-gradient(180deg, rgba(42, 67, 138, 0) 53.74%, #2A438A 100%); z-index: 1;}
.first-block-content {width: 95%; margin: 0 auto; padding-top: 480px; display: flex; flex-direction: column; position: relative; z-index: 50; max-width: 2000px;}
.first-block-content h1.first-block-title {color: #fff;font-size: 90px; line-height: 1;}
.first-block-content h1.first-block-title p:nth-of-type(1) {text-align: left;}
.first-block-content h1.first-block-title p:nth-of-type(2) {text-align: left;}
.first-block-content .first-block-subtitle { color:#fff; max-width:640px; padding:25px 5px 80px 0px;font-size: 24px;line-height: 1;}
.first-block-content .first-block-button-wrapper a {background:hsl(0deg 0% 100% / 20%);border:1px solid rgba(255, 255, 255, 0.3); padding:25px;border-radius:80px;
 width: 100%;backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);cursor: pointer;color:#fff;font-size:20px; text-transform:uppercase; text-decoration:none;
 display: inline-flex;justify-content: center; align-items: center;}
.first-block-content .first-block-button-wrapper a svg {margin-left:10px; transition: all 0.5s ease;}
.first-block-content .first-block-button-wrapper a:hover svg { transform: translateX(5px);}
/* first-block end */

/* four-block star */
.fourbl_excursions-section {width: 95%; margin: 0 auto; display: flex; align-items: flex-start; gap: 40px; position: relative;}
.fourbl_excursions-section .excurs-left {max-width: 905px;height: auto; flex-shrink: 0;}
.fourbl_excursions-section .excurs-left img {width: 100%; height: 100%; object-fit: cover; display: block;}
.fourbl_excursions-section .excurs-right {position: relative; overflow: visible !important;}
.fourbl_excursions-section .excurs-title {
    margin: 0 0 20px 0;
    font-size: 64px;
    line-height: 1;
    color: #2A438A;
    text-transform: uppercase;
    max-width: 800px;
}

.excurs-desc {
    margin: 0 0 140px 0; /* Отступ до зоны трамвая/кнопки */
    max-width: 688px;
    font-size: 24px;
    line-height: 28px;
    font-weight: 300;
    color: #2A438A;
}

/* Трамвайчик (PNG) */
.excurs-tram {
    position: absolute;
    top: 460px; /* Стартовая высота (подгоните ±15px под ваш монитор, чтобы встать в красный квадрат) */
    left: 0;    /* Старт строго слева от колонки */
    width: 382px;
    height: auto;
    pointer-events: none;
    z-index: 10;
    opacity: 0.9;
    will-change: transform; /* Оптимизация для плавности */
    transform: translateX(0); /* Начальная позиция */
}

/* Кнопка */
.excurs-btn {
    position: absolute;
    left: 2px;   /* 972px (Figma) - 970px */
    top: 603px;  /* 3613px (Figma) - 3010px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 908px;
    padding: 27px 277px;
    border: 1px solid #2A438A;
    border-radius: 77px;
    color: #2A438A;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s;
    box-sizing: border-box;
}

.excurs-btn:hover {
    background: #2A438A;
    color: #fff;
}

.excurs-btn .btn-arrow {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    transform: translateY(-2px);
}
@media (max-width: 768px){ 
    .first-block-content h1.first-block-title p:nth-of-type(1) {text-align: left;}
}

}
/* ==================== FIRST BLOCK: VIDEO BACKGROUND ==================== */

/* 1. Контейнер для видео и картинки-фолбэка */
.first-block-bg-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #2A438A; /* Цвет подложки на случай полной ошибки загрузки */
}

/* Видео: запускается сразу, занимает весь блок */
.first-block-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

/* Картинка-фолбэк: скрыта, показывается только если видео не загрузилось */
.first-block-bg-image {
    position: absolute;
    inset: 0;
    background: url('/bitrix/templates/verfmos/images/fsp-bl1.jpg') center bottom no-repeat;
    background-size: cover;
    z-index: 0;
    display: none;
}

/* Класс ошибки: переключает видимость */
.first-block-bg-container.video-failed .first-block-bg-video { display: none; }
.first-block-bg-container.video-failed .first-block-bg-image { display: block; }

/* 2. Основная секция (убран background, сохранены все оригинальные значения) */
.first-block-section {
    position: relative;
    min-height: 800px;
    padding: 40px 0px;
    overflow: hidden; /* Чтобы видео не вылезало за границы */
}

/* 3. Градиент поверх видео (точная копия оригинала) */
.first-block-section::before {
    content: ''; 
    position: absolute; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(42, 67, 138, 0) 53.74%, #2A438A 100%); 
    z-index: 2;
    pointer-events: none;
}

/* 4. Контент (точные оригинальные значения) */
.first-block-content {
    width: 95%; 
    margin: 0 auto; 
    padding-top: 480px; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
    z-index: 50; 
    max-width: 2000px;
}



.first-block-content .first-block-button-wrapper a {
    background: hsl(0deg 0% 100% / 20%);
    border: 1px solid rgba(255, 255, 255, 0.3); 
    padding: 25px;
    border-radius: 80px;
    width: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    color: #fff;
    font-size: 20px; 
    text-transform: uppercase; 
    text-decoration: none;
    display: inline-flex;
    justify-content: center; 
    align-items: center;
}

.first-block-content .first-block-button-wrapper a svg {
    margin-left: 10px; 
    transition: all 0.5s ease;
}

.first-block-content .first-block-button-wrapper a:hover svg { 
    transform: translateX(5px);
}

/* 5. Адаптив (сохранён оригинал) */
@media (max-width: 768px) { 
    .first-block-content h1.first-block-title p:nth-of-type(1) {
        text-align: left;
    }
}