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

body {
    font-family: 'Roboto', sans-serif;
    background-color: #03102D;
    background-image: url('../img/bgtxtru.png'), url('../img/point.png');
    background-position: center 300px, left 300px; /* Размещаем каждую текстуру с отступом 300px сверху */
    background-repeat: repeat, repeat; /* Повторяем текстуру, если это необходимо */
    background-size: cover, contain; /* Настройка размеров текстур */
    overflow-x:hidden;
    flex-direction: column;
    padding-top: 96px;
    display: flex;
}

.decorative-img {
    position: absolute;
    top: 0; /* Располагаем картинки у верхней границы */
    z-index: -1; /* Устанавливаем картинки за всем содержимым */
    pointer-events: none;
    transition: left 0.5s ease, right 0.5s ease; /* Плавное изменение для левого и правого края */
}

.decorative-left {
    left: calc(0% - 50px); /* Динамически вычисляем позицию слева */
    top: 150px; /* Указываем отступ сверху */
    z-index: 1;
    height: 900px;
}

.decorative-right {
    right: calc(0% - 0px); /* Динамически вычисляем позицию справа */
    top: 209px; /* Указываем отступ сверху */
    z-index: 1;
    height: auto;
    width: 22vw;
}

/* Уменьшаем размеры окна */
@media (max-width: 1600px) {
    .decorative-left {
        left: calc(0% - 100px); /* Увеличиваем отрицательный сдвиг слева */
    }
}



@media (max-width: 500px) {
    .decorative-left {
        left: calc(0% - 190px); /* Еще больше увеличиваем отрицательный сдвиг */
    }
    .decorative-right {
        right: calc(0% - 190px); /* Еще больше увеличиваем отрицательный сдвиг */
    }
}

.middle-right-decor {
    right: 0; /* Прижимаем к правому краю */
    top: 800px; /* Приблизительно по середине страницы */
    z-index: -1;
    pointer-events: none;
    height: auto;
    width: 35vw;
    max-width: 438px; ;
}

.bottom-decor {
    position: absolute;
    bottom: 0; /* По умолчанию прижимаем к нижнему краю */
    z-index: -1; /* Отправляем назад, за содержимое */
    pointer-events: none;
}

.bottom-left {
    left: 0px; /* Пример расположения от левого края, измените на ваше значение */
    top: 1060px;
    
    
}

.bottom-right {
    position: absolute;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    right: 0px;
    height: 50vw;
    /* top: 885px; */
    
}



.container {
    display: flex; /* Убедитесь, что контейнер использует flexbox */
    justify-content: space-between; /* Размещает элементы на противоположных сторонах */
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: auto; /* Центрирует контейнер на странице */
    padding: 0 20px; /* Отступы справа и слева внутри контейнера */
}

header {
    width: 100%;
    height: 96px; /* Исходная высота */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #03102D;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: height 0.5s ease; /* Увеличенное время анимации и более плавная функция времени */
}

header.scrolled {
    height: 60px; /* Уменьшенная высота */
}

.logo {
    height: 44px; /* Пример размера, настраиваемый */
}

.join-btn {
    background-color: #FF7C1E;
    border: none;
    padding: 10px 20px;
    color: white;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    max-width: 136px;
    max-height: 48px;
    width: 100%;
    height: 48px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: inset 0 4px 4px rgba(255, 255, 255, 0.3), inset 0 -5px 4px rgba(0, 0, 0, 0.2);
}

.join-btn:hover {
    background-color: #E56A1F; /* A slightly darker shade of the original orange */
}


.hero-container {
    background-image: url('../img/bg.png');
    background-size: cover;
    position: relative; /* Новое добавление */
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 496px;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: auto;
    height: 95%;
}

.hero-image.left {
    left: 50%;
    transform: translate(-150%, -52%);
}

.hero-image.right {
    right: 50%;
    transform: translate(139%, -50%);
}

/* Медиа-запрос для экранов шире 1200px */
@media (min-width: 1900px) {
    .hero-image.left {
        left: 0; /* Прижимаем к левому краю */
        transform: translateY(-50%); /* Убираем горизонтальное смещение */
    }
    .hero-image.right {
        right: 0; /* Прижимаем к правому краю */
        transform: translateY(-50%); /* Убираем горизонтальное смещение */
    }
}

.hero-text {
    text-align: center;
    flex: 1; /* Занимает доступное пространство между изображениями */
   
}

.hero-text {
    text-align: center;
    flex: 1; /* Занимает доступное пространство между изображениями */
    max-width: 650px; /* Максимальная ширина контента */
    margin: auto; /* Автоматическое выравнивание по центру */
    z-index: 2;
}

.hero-text h1 {
    font-family: 'Recursive', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    color: #FFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Четкая тень для текста */
    text-transform: uppercase;
    margin-bottom: -30px;
    margin-top: -30px;
}

.hero-text .highlight {
    color: #FF4D00; /* Уточнение цвета для года */
}

.hero-text p {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: white; /* Цвет дополнительного текста */
    margin: 0px 40px; /* Отступ сверху для разделения от заголовка */
}

.decorative-line.top, .decorative-line.bottom {
    background-position: center;
    background-size: contain;
}



.section-divider {
    height: 50px; /* Высота разделителя, может быть изменена по вашему усмотрению */
    background-image: url('../img/line.png'); /* Путь к изображению разделителя */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Или можно использовать 100% ширины если нужно растянуть на всю ширину */
    width: 100%; /* Убедитесь, что разделитель тянется на всю ширину */
}


.section2 {
    text-align: center; /* Центрируем содержимое */
    font-family: 'Recursive', sans-serif; /* Используем шрифт Recursive */
}

.title-container h1 {
    font-size: 64px;
    font-weight: 900;
    font-style: italic;
    color: white; /* Цвет текста, можно изменить по вашему желанию */
    margin: 10px 0; /* Добавляем отступы вокруг заголовка */
}

.decorative-line {
    height: auto; /* Сохраняем пропорции изображения */
}

.title-container img:first-of-type {
    margin-bottom: -45px; /* Поднимаем верхнюю линию ближе к заголовку */
}

.title-container img:last-of-type {
    margin-top: -40px; /* Опускаем нижнюю линию ближе к заголовку */
}

.subtitles {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 690px; /* Максимальная ширина блока подзаголовков */
    margin: 20px auto; /* Центрируем блок */
    font-family: 'Roboto', sans-serif; /* Используем шрифт Roboto для всего блока */
    flex-wrap: wrap;
}
.subtitle-devider {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.date-label, .now-playing-label {
    font-size: 20px; 
    color: #8AB1F1; 
    margin-right: 8px; /* Уменьшаем отступ справа */
}

.date-value, .group-label  {
    color: white; 
    font-size: 36px; 
    margin-right: 30px; /* Уменьшаем отступ справа */
}

.group-marker {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0), rgba(0, 255, 0, 0));
    border: 1px solid rgba(0,255,0,0.8);
    box-shadow: 0 0 10px rgba(0,255,0,0.5);
    color: rgba(0,255,0,0.8); 
    padding: 5px 10px; 
    border-radius: 10px; /* Увеличиваем скругление углов */
    display: inline-block; 
    font-weight: bold; 
    font-size: 36px;
    transform: skew(-10deg); /* Добавляем наклон */
}

.matches-background {
    background-image: url('../img/bg2.png');
    background-size: cover; /* Покрывает весь контейнер */
    background-position: center; /* Центрирует изображение */
    padding: 0px 0; /* Добавляет отступы для внутреннего содержимого */
    color: white; /* Устанавливает цвет текста */
    text-align: center; /* Центрирует текст внутри секции */
    font-size: 24px; /* Устанавливает размер шрифта для текста */
}

.matches-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 20px;
}

.match {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 0px;
}


.score, .team {
    background-image: url('../img/bgm.png'); /* Изначальное фоновое изображение */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-size: cover;
    border-radius: 10px;
    padding: 0 0px 0px 58px;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
    transition: background-image 0.3s ease-in-out;
    
}
.score:hover {
    background-image: url('../img/bgmh.png'); /* Фоновое изображение при наведении */
    cursor: pointer;
}
.score {
    width: 235px;
    height: 150px;
    font-family: 'Roboto', sans-serif; /* Указываем семейство шрифтов Roboto */
    font-weight: 900; /* Жирность шрифта */
    font-size: 58px; /* Размер шрифта */
    color: white; /* Цвет текста */
    margin-right: 10px; /* Отступ справа */
    text-shadow: -1px -1px 0 #5D9AFF, 1px -1px 0 #5D9AFF, -1px 1px 0 #5D9AFF, 1px 1px 0 #5D9AFF; /* Обводка текста */
}

.team {
    background-image: url('../img/ma.png');
    background-repeat: no-repeat;
    width: 290px;
    height: 135px;
    padding:  0 35px;
    transition: background-image 0.3s ease-in-out;
}
.team:hover {
    background-image: url('../img/mah.png');
    cursor: pointer;
}

.team img {
    width: 59px;
    margin-right: 10px;
}

.vs {
    padding: 0 20px;
}

.next-section {
    background-color: #021D37; /* Темный фон секции */
    color: #ffffff; /* Белый текст */
    padding: 40px 0; /* Паддинг для секции */
}

.next-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.next-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.features {
    display: flex;
    justify-content: space-around;
    width: 90%;
}

.feature-item {
    text-align: center;
    width: 200px; /* Фиксированная ширина для каждого элемента */
}

.feature-item img {
    width: 60px; /* Размер иконок */
    margin-bottom: 10px;
}

.feature-item h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.feature-item p {
    font-size: 16px;
    line-height: 1.4;
}


.deposit-section .container {
    display: flex;
    flex-direction: column; /* Элементы стекаются вертикально */
    align-items: center; /* Центрирует содержимое по горизонтали */
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
}

.title-container {
    align-self: center; /* Центрирует заголовки */
    margin-top: 75px;
}

.title-container h2 {
    color: #ffffff;
    font-family: 'Recursive', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 40px;
    margin: 20px 0;
}

.bonus-info {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #6385D2;
    margin-bottom: 40px;
}

.features {
    display: flex;
    justify-content: space-around;
    width: 90%;
    flex-wrap: wrap; /* Позволяет элементам переноситься при нехватке пространства */
}

.feature {
    background-image: url('../img/bgd.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 20px;
    width: 328px;
    border-radius: 10px;
    margin: 10px; /* Добавляет пространство между блоками */
}

.feature img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-top: 4px;
}

.feature span {
    font-size: 18px;
    color: white;
    text-align: left;
    margin-right: 10px;
}

@media (max-width: 768px) {
    .features {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
    }

    .feature {
        margin-bottom: 20px;
         /* Увеличиваем ширину для лучшего отображения на мобильных */
    }
}

.divider {
    height: 61px; /* Высоту можно настроить по вашему усмотрению */
    background-image: url('../img/line2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Или установите конкретные размеры */
}


footer {
    background-color: #04102B;
    color: #2D4272;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.footer-logo {
    height: 50px; /* Размер лого */
}

.footer-text {
    color: #2D4272;
    font-size: 16px;
}

.command-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
/* Для адаптивности, можно добавить медиа-запросы */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
    }

    .hero-super-image {
        width: 100%;
        z-index: 3;
    }
    .hero-image {
        max-width: 100%;
        margin-bottom: 20px;
    }
}



@media (max-width: 1250px) {
    .vs {
        width: 100px;
        margin-left: 7px;
        padding: 0 0px;
    }
    .score {
        width: 204px;
        height: 132px;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        font-size: 42px;
        color: white;
        margin-right: -10px;
        margin-left: -10px;
    }
    .team {
        background-image: url(../img/ma.png);
        background-repeat: no-repeat;
        width: 250px;
        height: 119px;
        padding: 0 35px;
        transition: background-image 0.3s ease-in-out;
    }
    .team img {
        width: 40px;
        margin-right: 10px;
    }
    .middle-right-decor {
        
        top: 800px;
        z-index: -1;
        pointer-events: none;
    }
    .bottom-right {
        /* top: 1000px; */
    }
}

@media (max-width: 1000px) {
    .vs {
        width: 80px;
        margin-left: 7px;
        padding: 0 0px;
    }
    .score {
        width: 195px;
        height: 119px;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        font-size: 37px;
        color: white;
        margin-right: -17px;
        margin-left: -17px;
    }
    .team {
        background-image: url(../img/ma.png);
        background-repeat: no-repeat;
        width: 240px;
        height: 113px;
        padding: 0 31px;
        transition: background-image 0.3s ease-in-out;
    }
    .team img {
        width: 40px;
        margin-right: 10px;
    }
    .middle-right-decor {
        
        top: 800px;
        z-index: -1;
        pointer-events: none;
    }
    .bottom-right {
        
        /* top: 1000px; */
    }
    .bottom-left {
        left: -70px;
        /* top: 1060px; */
        
    }
}

.hero-image-replacement {
    display: none;
    height: auto;
    margin: auto;
}

@media (max-width: 860px) {
    .score {
        width: 168px;
        height: 100px;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        font-size: 36px;
        color: white;
        margin-right: -20px;
        margin-left: -20px;
    }
    .score, .team {
        padding: 0 0px 0px 44px;
}
.team {
    background-image: url(../img/ma.png);
    background-repeat: no-repeat;
    width: 224px;
    height: 107px;
    padding: 0 31px;
    transition: background-image 0.3s ease-in-out;
}
}

@media (max-width: 768px) {
    .hero-container {
        background-image: url('../img/bg76.png');
        background-size: cover;
        position: relative; /* Новое добавление */
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 496px;
        overflow: hidden;
    }
    .hero-text {
        display: none; /* Скрываем блок с текстом */
    }
    .hero-image-replacement {
        display: block; /* Показываем картинку */
        z-index: 5;
    }
    .hero-image.right {
        right: 45%;
        transform: translate(139%, -50%);
    }
    .hero-image.left {
        left: 42%;
        transform: translate(-150%, -52%);
    }
    .decorative-left {
        left: calc(0% - 0px);
    }
    .decorative-right {
        right: calc(0% - 0px);
        top: 399px;
    }
    .middle-right-decor {
        
        top: 800px;
        z-index: -1;
        pointer-events: none;
    }
    .title-container h1 {
        font-size: 48px;
        font-weight: 900;
        font-style: italic;
        color: white;
        margin: 12px 0;
    }
    .date-value, .group-label {
        color: white;
        font-size: 32px;
        margin-right: 30px;
    }
     
    
    .decorative-line {
        height: auto;
        width: 519px;
    }
    

}

/* Стили для устройств с шириной экрана меньше 720px */
@media (max-width: 720px) {
    .matches-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin: 20px;
    }
    
    .match {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px; /* Увеличиваем отступ между матчами */
    }
    
    .team-info {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .score, .team {
        display: flex;
        align-items: center;
        justify-content: center; /* Центрирование содержимого */
        background-size: cover;
        border-radius: 10px;
        color: white;
        font-family: 'Roboto', sans-serif;
        text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
        transition: background-image 0.3s ease-in-out;
    }
    
    .score {
        width: 137px; /* Уменьшаем ширину для коэффициента */
        height: 85px; /* Уменьшаем высоту для коэффициента */
        font-size: 24px; /* Меньший размер шрифта для коэффициента */
        margin-right: 10px;
        text-align: center;
    }
    
    .team {
        width: 210px; /* Автоматическая ширина для управления размером команды */
        ; /* Высота блока команды */
        padding: 10px 35px; /* Внутренние отступы */
    }
    
    .team img {
        width: 25px; /* Меньший размер изображения */
        margin-right: 5px;
    }
    
    .divider {
        width: 100%; /* Ширина линии */
        
        margin-top: 10px; /* Отступ сверху для линии */
    }
    
}

.deposit-section {
    position: relative;
}

.bottom-right {
    position: absolute;
    bottom: -190px;
    right: 0px;
}

    .bottom-decor.bottom-left {
        position: absolute;
        top: -350px;
        left: -70px;
    }

@media (max-width: 620px) {
    .decorative-img {
        display: none;
    }
    .bottom-decor {
        display: none;
    }
    .bottom-right {
        display: none;
    }
    .title-container img:last-of-type {
    margin-top: -40px;
    width: 360px;
    }
    .title-container img:first-of-type {
        margin-bottom: -34px;
        width: 360px;
    }

    .title-container h1 {
        text-align: center;
        font-size: 38px;
        font-weight: 900;
        font-style: italic;
        color: white;
        margin: 25px 0 10px 0;
        
    }

    .footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    flex-direction: column;
    flex-wrap: wrap;
}
.hero-image.left {
        left: 20%;
        transform: translate(-55%, -52%);
    }
        .hero-image.right {
        
        transform: translate(110%, -50%);
    }
}
.line-glow {
    display: none;
}
@media (max-width: 620px) {
    .line-glow {
        display: block;
        max-width: 100%;  /* Пример: ограничение ширины */
        height: auto;     /* Пример: автоматическое определение высоты */
        margin: -20px 0px -20px -0;
    }
}

.cta-button {
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 20px;
    padding: 20px 40px;
    border-radius: 10px;
    background: linear-gradient(145deg, #00ff00, #009900);
    box-shadow: 0 4px 6px rgba(0, 255, 0, 0.2), 0 0 5px 4px rgba(0, 255, 0, 0.2); /* Более мягкое свечение */
    transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transform: skewX(-20deg);
}

.button-content {
    display: block;
    transform: skewX(20deg);
}

.cta-button:hover {
    background: linear-gradient(145deg, #ff8800, #e65100);
    box-shadow: 0 4px 6px rgba(255, 136, 0, 0.2), 0 0 8px 6px rgba(255, 136, 0, 0.2); /* Усиленное свечение при наведении */
}

a {
    text-decoration: none; /* Убирает подчеркивание */
    color:#fff;
}




.country-selector-section {
    text-align: center;
    padding: 20px 30px 150px 30px;
    color: white;
    height: 100%
}

.country-selector-section h2 {
    margin-bottom: 70px;
    font-size: 24px;
    margin-top: 80px;
}

.country-selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px; /* уменьшил расстояние между блоками до 2px */
    max-width: 1335px;
    margin: 0 auto;
}

.country {
    background-image: url('../img/flag/card.png');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 0; /* убрал padding */
    text-align: center;
    margin: 0 0 0px -35px;
    transition: transform 0.2s, box-shadow 0.2s, background-image 0.2s;
    width: 200px;
    height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.country img {
    max-width: 40%;
    border-radius: 65% 35% 65% 35%;
    margin-bottom: 10px;
}

.country p {
    margin: 0;
    font-weight: bold;
    color: white;
}

.country:hover {
    transform: scale(1.05);
    background-image: url('../img/flag/cardh.png');
    cursor: pointer;
}




.full-width-section {
    position: relative;
    width: 100vw; /* Ширина 100% окна */
    background: linear-gradient(91.35deg, rgba(12, 29, 65, 0.54) 0%, rgba(31, 75, 167, 0.54) 100%);
    padding: 20px 0; /* Дополнительный отступ для удобства */
    border-top: 1px solid #4189FF; /* Верхняя обводка */
    border-bottom: 1px solid #4189FF; /* Нижняя обводка */
    margin-top: 30px
}

.tournament-bracket {
    text-align: center;
    padding: 20px;
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1; /* Устанавливаем z-index для корректного отображения */
}


.tournament-bracket h2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.quarter-finals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.match {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../img/cf/tm.png') no-repeat center;
    background-size: cover;
    border-radius: 10px;
    padding: 0 29px;
    position: relative;
    transition: background 0.2s;
    height: 71px;
    width: 300px;
}

.team:hover {
    background: url('../img/cf/tmh.png') no-repeat center;
    background-size: cover;
}

.team img {
    max-width: 45px;
    border-radius: 50%;
    margin-right: 10px;
}

.team p {
    margin: 0;
    font-weight: bold;
    flex-grow: 1;
    font-size: 20px;
    text-align: left;
}

.team span {
    padding: 5px 15px;
    border-radius: 5px;
    margin-top: 3px;
    font-size: 18px;
    background: transparent;
    box-shadow: none;
}




.full-width-section2 {
    
    width: 100%; /* Ширина 100% окна */
    background: linear-gradient(91.35deg, rgba(12, 29, 65, 0.54) 0%, rgba(31, 75, 167, 0.54) 100%);
    padding: 20px 0; /* Дополнительный отступ для удобства */
    border-top: 1px solid #4189FF; /* Верхняя обводка */
    border-bottom: 1px solid #4189FF; /* Нижняя обводка */
    margin-top: 30px
}

.tournament-bracket2 {
    text-align: center;
    padding: 20px;
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
}

.tournament-bracket2 h2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #0E2B5B;
}

.quarter-finals2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 350px;
    justify-content: center;
    margin-bottom: 40px;
}

.match2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../img/cf/tm.png') no-repeat center;
    background-size: cover;
    border-radius: 10px;
    padding: 0 29px;
    position: relative;
    transition: background 0.2s;
    height: 71px;
    width: 300px;
    cursor: pointer;
}

.team2:hover {
    background: url('../img/cf/tmh.png') no-repeat center;
    background-size: cover;
}

.team2 img {
    max-width: 45px;
    border-radius: 50%;
    margin-right: 10px;
}

.team2 p {
    margin: 0;
    font-weight: bold;
    flex-grow: 1;
    font-size: 20px;
    text-align: left;
}

.team2 span {
    padding: 5px 15px;
    border-radius: 5px;
    margin-top: 3px;
    font-size: 18px;
    background: transparent;
    box-shadow: none;
}




.tournament-bracket3 {
    text-align: center;
    padding: 20px;
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
}

.tournament-bracket3 h2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #0E2B5B;
}

.quarter-finals3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 250px;
    justify-content: center;
    margin-bottom: 40px;
}

.match3 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../img/cf/tm.png') no-repeat center;
    background-size: cover;
    border-radius: 10px;
    padding: 0 29px;
    position: relative;
    transition: background 0.2s;
    height: 71px;
    width: 300px;
    cursor: pointer;
}

.team3:hover {
    background: url('../img/cf/tmh.png') no-repeat center;
    background-size: cover;
}

.team3 img {
    max-width: 45px;
    border-radius: 50%;
    margin-right: 10px;
}

.team3 p {
    margin: 0;
    font-weight: bold;
    flex-grow: 1;
    font-size: 20px;
    text-align: left;
}

.team3 span {
    padding: 5px 15px;
    border-radius: 5px;
    margin-top: 3px;
    font-size: 18px;
    background: transparent;
    box-shadow: none;
}
.lines {
    text-align: center; /* Center the content inside the .lines div */
    margin: 0 auto; /* Center the .lines div itself if it has a fixed width */
}

.lines img {
    display: inline-block; /* Ensure the image is treated as inline-block for centering */
}
.lines3 {
    text-align: center; /* Center the content inside the .lines div */
    margin: 0 auto; /* Center the .lines div itself if it has a fixed width */
}

.lines3 img {
    display: inline-block; /* Ensure the image is treated as inline-block for centering */
}
.win {
    text-align: center; /* Центрирование содержимого внутри div с классом .win */
    margin: 0 auto; /* Центрирование самого div, если у него фиксированная ширина */
}

.win img {
    display: inline-block; /* Обработка изображения как inline-block для центрирования */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы для увеличения и тени */
}

.win img:hover {
    transform: scale(1.1); /* Увеличение изображения при наведении */
    cursor: pointer;
}


/* Медиазапросы для адаптивности */
@media (max-width: 1200px) {
    .quarter-finals {
        grid-template-columns: repeat(2, 1fr);
    }
    .quarter-finals2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 5vw;
    }
    .lines {
       display: none;
    }
    .lines2 {
        display: none;
     }
}

@media (max-width: 900px) {
    .quarter-finals {
        grid-template-columns: repeat(2, 1fr);
    }

    .team {
        width: 260px;
        height: 60px;
    }

    .team img {
        max-width: 40px;
    }

    .team p {
        font-size: 18px;
    }

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

    .quarter-finals2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 5vw;
    }

    .team2 {
        width: 260px;
        height: 60px;
    }

    .team2 img {
        max-width: 40px;
    }

    .team2 p {
        font-size: 18px;
    }

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

@media (max-width: 600px) {
    .quarter-finals {
        grid-template-columns: repeat(1, 1fr);
    }
    .quarter-finals2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .team {
        width: 260px;
        height: 60px;
    }

    .team img {
        max-width: 40px;
    }

    .team p {
        font-size: 18px;
    }

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