body {
    margin: 0%;
    padding: 0%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}


.first-screen {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}



.first-screen__heading {
    position: absolute;
    top: 20%;
    padding-left: 16.5%;
    color: white;
    z-index: 2;
    width: 45%;
    font-size: 65px;
    letter-spacing: 5px;
    font-family: 'GraphikLCG-Medium', sans-serif;
}

.first-screen__list {
    position: absolute;
    top: 55%;
    left: 0%;
    padding-left: 18%;
    color: white;
    z-index: 2;
    font-size: 20px;
    font-family: 'GraphikLCG-Regular', sans-serif;
}

.first-screen__item {
    margin-bottom: 5%;
    /* Отступ между пунктами */
}

.carousel-images {
    display: flex;
    overflow: hidden; 
    width: 100%;
    height: 100%;
    position: relative; /* Чтобы дочерние элементы могли быть спозиционированы относительно этого контейнера */
}

.carousel-images img {
    width: 100%;
    height: auto;

    opacity: 0%; /* Исходная прозрачность изображений */
    transition: opacity 1s ease-in-out;
    position: absolute;
}


.carousel-images img.active {
    opacity: 1; /* Прозрачность активного изображения */
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none; /* Слой не мешает взаимодействию с изображениями */
    z-index: 1; /* Слой затемнения находится поверх изображений */
}

.about {
    padding: 10% 16.5% 10% 16.5%;
}

.about__heading {
    font-size: 30px;
    margin-left: 10%;
    font-family: 'GraphikLCG-Bold', sans-serif;
    color: #333;
}

.about__lead {
    margin-left: 40%;
    margin-top: -10%;
    margin-bottom: 4%;
    font-size: 20px;
    font-family: 'GraphikLCG-SemiBold', sans-serif;
    color: #333;
}

.about__paragraph {
    margin-left: 40%;
    font-size: 16px;
    font-family: 'GraphikLCG-Regular', sans-serif;
    color: #333;
}
.videos {
    background-color: #333;
    padding-top: 5%;
    padding-bottom: 5%;
}

.videos__heading {
    margin: 0% auto 4%;
    margin-left: 15%;
    color: #fff;
    font-size: 20px;
    font-family: 'GraphikLCG-Medium', sans-serif;
}

.videos__heading::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #fff;
    margin: 30px auto 0px;
    margin-right: 15%;
}

.videos__heading::before {
    content: '';
    display: block;
    position: absolute;
    right: 13%;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    background-color: #fff;
}

.videos__list {
    display: flex;
    gap: 1.8%;
    list-style: none;
    padding: 0%;
    margin: 0%;
    margin-left: 17%;
}

/* Элемент для каждого видео */
.videos__item {
    position: relative;
    /* Для абсолютного позиционирования иконки */
    width: 40.5%;
    /* Ширина каждого видео */
    text-align: center;
    /* Выравнивание текста по центру */
}

/* Превью изображения */
.videos__preview {
    width: 100%;
    /* Ширина изображения = ширине контейнера */
    height: auto;
    /* Сохраняем пропорции изображения */
}

.videos__item:hover .videos__preview {
    filter: brightness(50%);
    /* Затемнение изображения при наведении */
}

/* Кнопка плеера (иконка) */
.videos__play {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    border: none;
    border-radius: 50%;
    padding: 0%;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.videos__item:hover .videos__play {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s 0s;

}

/* Название видео */
.videos__video-heading {
    margin-top: 2%;
    /* Отступ от видео */
    font-size: 16px;
    /* Размер шрифта */
    color: white;
    /* Цвет текста */
    font-family: 'GraphikLCG-Regular', sans-serif;
    margin-bottom: 6%;
    text-align: left;
}
/* Медиазапросы для адаптации на разных экранах */
@media (max-width: 1024px) {
    
    
    .callback-popup__content {
        width: 45%;
    }

    .first-screen__heading {
        top: 30%; /* Опускаем заголовок ниже для лучшего расположения */
        left: 50%;
        transform: translateX(-50%) translateY(-50%); /* Центрируем по горизонтали */
        width: 80%; /* Даем больше ширины */
        font-size: 65px; /* Уменьшаем размер текста */
        letter-spacing: 3px; /* Уменьшаем межбуквенный интервал */
    }

    .first-screen__list {
        top: 50%; /* Опускаем список ниже */
        left: 60%;
        transform: translateX(-50%); /* Центрируем список */
        padding-left: 0;
        font-size: 22px; /* Уменьшаем размер шрифта */
        width: 80%; /* Даем больше ширины */
    }
    .first-screen__item {
        margin-bottom: 3%;
    }
    .about {
        padding: 0% 15% 0% 15%;
    }
    
    .about__heading {
        font-size: 30px;
        margin-left: 0%;
        margin-top: -10%;
        align-items: center;
        text-align: center;
        font-family: 'GraphikLCG-Bold', sans-serif;
        color: #333;
    }
    
    .about__lead {
        margin-left: 0;
        margin-top: 10%;
        margin-bottom: 4%;
        font-size: 20px;
        align-items: center;
        text-align: center;
        font-family: 'GraphikLCG-SemiBold', sans-serif;
        color: #333;
    }
    
    .about__paragraph {
        margin-left: 0;
        font-size: 20px;
        margin-top: 10%;
        text-align: center;
        font-family: 'GraphikLCG-Regular', sans-serif;
        color: #333;

    }

    

}

@media (max-width: 800px) {
    

    .first-screen__heading {
        top: 18%; /* Опускаем заголовок ниже для лучшего расположения */
        left: 40%;
        transform: translateX(-50%) translateY(-50%); /* Центрируем по горизонтали */
        width: 60%; /* Даем больше ширины */
        font-size: 42px; /* Уменьшаем размер текста */
        letter-spacing: 3px; /* Уменьшаем межбуквенный интервал */
    }

    .first-screen__list {
        top: 35%; /* Опускаем список ниже */
        left: 60%;
        transform: translateX(-50%); /* Центрируем список */
        padding-left: 0;
        font-size: 15px; /* Уменьшаем размер шрифта */
        width: 80%; /* Даем больше ширины */
    }


    .first-screen__item {
        margin-bottom: 3%;
    }



    .carousel-images {
        display: block; /* Убираем флекс-контейнер для карусели */
    }

    .carousel-images img {
        width: 100%;
        height: auto;
        opacity: 1;
    }
    
    .about__heading {

        margin-top: -30%;

    }
    .about__lead {

        margin-top: 10%;

    }
    .about__paragraph:last-child {

        margin-bottom: 20%;

    }
    

    .videos__list {
        flex-direction: column; /* Меняем расположение элементов на колонку */
        align-items: center; 
        margin-left: 0px;
    }

    .videos__item {
        width: 450px; /* Уменьшаем ширину видео элемента */
        max-width: none; /* Убираем максимальную ширину */
        margin-bottom: 15px; /* Добавляем отступ между видео элементами */
    }

    .videos__video-heading {
        font-size: 18px; /* Уменьшаем размер шрифта для мобильных */
    }





}
@media (max-width: 650px) {
    
    .first-screen__heading {
        top: 17%; /* Опускаем заголовок ниже для лучшего расположения */
        left: 50%;
        transform: translateX(-50%) translateY(-50%); /* Центрируем по горизонтали */
        width: 80%; /* Даем больше ширины */
        font-size: 35px; /* Уменьшаем размер текста */
        letter-spacing: 3px; /* Уменьшаем межбуквенный интервал */
    }

    .first-screen__list {
        top: 30%; /* Опускаем список ниже */
        left: 60%;
        transform: translateX(-50%); /* Центрируем список */
        padding-left: 0;
        font-size: 14px; /* Уменьшаем размер шрифта */
        width: 80%; /* Даем больше ширины */
    }

    .first-screen__item {
        margin-bottom: 3%;
    }



    .carousel-images {
        display: block; /* Убираем флекс-контейнер для карусели */
    }

    .carousel-images img {
        width: 100%;
        height: 60hv;
        opacity: 1;
    }
    
    .about__heading {

        margin-top: -60%;

    }
    .about__lead {

        margin-top: 10%;

    }
    .about__paragraph:last-child {

        margin-bottom: 30%;

    }

    .videos__list {
        flex-direction: column; /* Меняем расположение элементов на колонку */
        align-items: center; 
        margin-left: 0px;
    }

    .videos__item {
        width: 325px; /* Уменьшаем ширину видео элемента */
        max-width: none; /* Убираем максимальную ширину */
        margin-bottom: 15px; /* Добавляем отступ между видео элементами */
    }

    .videos__video-heading {
        font-size: 14px; /* Уменьшаем размер шрифта для мобильных */
    }
    .videos__heading{
        font-size: 18px;
    }
    




}
@media (max-width: 550px) {
    
    .carousel-images{
        height: 100hv; 
    }
    .first-screen__heading {
        top: 18%; /* Опускаем заголовок ниже для лучшего расположения */
        left: 50%;
        width: 80%; /* Даем больше ширины */
        font-size: 30px; /* Уменьшаем размер текста */
    }

    .first-screen__list {
        display: none;
    }


    .first-screen__item {
        margin-bottom: 3%;
    }

    .about{
        padding: 0% 15% 0% 15%;
    }
    .about__heading{
        margin-top: -90%;
    }

    .about__lead {

        font-size: 17px;

    }
    .about__paragraph:last-child {

        margin-bottom: 30%;
        

    }
    .about__paragraph {

        font-size: 14px;

    
    }
    .videos__heading{
        font-size: 14px;
    }
    .videos__list {
        flex-direction: column; /* Меняем расположение элементов на колонку */
        align-items: center; 
        margin-left: 0px;
    }

    .videos__item {
        width: 270px; /* Уменьшаем ширину видео элемента */
        max-width: none; /* Убираем максимальную ширину */
        margin-bottom: 15px; /* Добавляем отступ между видео элементами */
    }

    .videos__video-heading {
        font-size: 15px; /* Уменьшаем размер шрифта для мобильных */
    }
    .videos__heading::after {
        content: '';
        display: block;
        height: 1px;
        background-color: #fff;
        margin: 20px auto 0px;
        margin-right: 20%;
    }
    
    .videos__heading::before {
        display: none;
    }
    
    




}
@media (max-width: 450px) {
    

    

    .carousel-images{
        height: 100hv; 
    }
    .first-screen__heading {
        top: 15%; 
        left: 50%;
        width: 80%; 
        font-size: 27px; 
    }

    .first-screen__list {
        display: none;
    }


    .first-screen__item {
        margin-bottom: 3%;
    }
    .about{
        padding: 10% 15% 0% 15%;
    }
    .about__heading{
        margin-top: -157%;
    }
    .about__lead {
        font-size: 17px;

    }
    .about__paragraph:last-child {

        margin-bottom: 30%;
        

    }
    .about__paragraph {

        font-size: 14px;

    
    }
    .videos__heading{
        font-size: 14px;
    }
    .videos__list {
        flex-direction: column; 
        align-items: center; 
        margin-left: 0px;
    }

    .videos__item {
        width: 270px; 
        max-width: none; 
        margin-bottom: 15px; 
    }

    .videos__video-heading {
        font-size: 15px; 
    }
    .videos__heading::after {
        content: '';
        display: block;
        height: 1px;
        background-color: #fff;
        margin: 20px auto 0px;
        margin-right: 20%;
    }
    
    .videos__heading::before {
        display: none;
    }
    
}
@media (max-width: 395px) {
    

    .carousel-images{
        height: 100hv; 
    }
    .first-screen__heading {
        top: 14%; 
        left: 50%;
        width: 80%; 
        font-size: 27px; 
    }

    .first-screen__list {
        display: none;
    }


    .first-screen__item {
        margin-bottom: 3%;
    }


    .about{
        padding: 10% 15% 0% 15%;
    }
    .about__heading{
        margin-top: -190%;
    }
    .about__lead {
        font-size: 17px;

    }
    .about__paragraph:last-child {

        margin-bottom: 30%;
        

    }
    .about__paragraph {

        font-size: 14px;

    
    }
    .videos__heading{
        font-size: 14px;
    }
    .videos__list {
        flex-direction: column; /* Меняем расположение элементов на колонку */
        align-items: center; 
        margin-left: 0px;
    }

    .videos__item {
        width: 270px; /* Уменьшаем ширину видео элемента */
        max-width: none; /* Убираем максимальную ширину */
        margin-bottom: 15px; /* Добавляем отступ между видео элементами */
    }

    .videos__video-heading {
        font-size: 15px; /* Уменьшаем размер шрифта для мобильных */
    }
    .videos__heading::after {
        content: '';
        display: block;
        height: 1px;
        background-color: #fff;
        margin: 20px auto 0px;
        margin-right: 20%;
    }
    
    .videos__heading::before {
        display: none;
    }
    
    
    




}
@media (max-width: 355px) {
    

    .carousel-images{
        height: 100hv; 
    }
    .first-screen__heading {
        top: 14%; /* Опускаем заголовок ниже для лучшего расположения */
        left: 50%;
        width: 80%; /* Даем больше ширины */
        font-size: 27px; /* Уменьшаем размер текста */
    }

    .first-screen__list {
        display: none;
    }


    .first-screen__item {
        margin-bottom: 3%;
    }


    .about{
        padding: 0% 15% 0% 15%;
    }
    .about__heading{
        margin-top: -200%;
    }
    .about__lead {
        font-size: 17px;

    }
    .about__paragraph:last-child {

        margin-bottom: 30%;
        

    }
    .about__paragraph {

        font-size: 14px;

    
    }
    .videos__heading{
        font-size: 14px;
    }
    .videos__list {
        flex-direction: column; /* Меняем расположение элементов на колонку */
        align-items: center; 
        margin-left: 0px;
    }

    .videos__item {
        width: 240px; /* Уменьшаем ширину видео элемента */
        max-width: none; /* Убираем максимальную ширину */
        margin-bottom: 15px; /* Добавляем отступ между видео элементами */
    }

    .videos__video-heading {
        font-size: 15px; /* Уменьшаем размер шрифта для мобильных */
    }
    .videos__heading::after {
        content: '';
        display: block;
        height: 1px;
        background-color: #fff;
        margin: 20px auto 0px;
        margin-right: 20%;
    }
    
    .videos__heading::before {
        display: none;
    }
    
    
    




}