@keyframes blurIn {
    0% {
        filter: blur(10px);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        opacity: 200;
    }
}

.my-title {
    animation: blurIn 3s ease forwards; /* Применяем анимацию */
}

.my-title2 {
    animation: blurIn 7s ease forwards; /* Применяем анимацию */
}


.glass-effect {
    width: 300px;
    padding: 20px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    color: white;
    text-align: center;
}

.blure-b {
    animation: blurIn 1.5s ease forwards; /* Применяем анимацию */
}

.GOLDGRADIENT  {        /*Прописываем свой класс*/
    background: linear-gradient(315deg, #d2a813 0%, #000000 74%);       /*Задаем свои цвета для градиента*/
    background: -webkit-linear-gradient (315deg, #d2a813 0%, #000000 74%);      /*Задаем свои цвета для градиента*/
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    -webkit-animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    background-size: 400% 200%;
}
@keyframes dbm-animation {
   0% {
    background-position: 0%  center;
    }
   50% {
    background-position: 100%  center;
    }
   100% {
    background-position: 0%  center;
    }
}

  
:root{
  --dbmSliderRunPadding: 40px; /*Отступ всего контейнера от края экрана на десктопе*/
  --dbmSliderRunPaddingMobile: 10px; /*Отступ всего контейнера от края экрана на мобилке*/
  --dbmSliderRunBorderRadiusContainer: 16px; /*Скругление углов у контейнера*/
  --dbmSliderRunBorderRadiusLogo: 16px;
  --dbmSliderRunOverflow:hidden;   /*visible - если нужно, чтобы карточки выходили за предел контейнера*/
  --dbmSliderRunWidthLogo: 100%;
  --dbmSliderRunAspectRation: 2/1; /*Соотношение сторон у логотипа*/
  --dbmSliderRunGap: 20px; /*Отступ между логотипами на декстопе*/
  --dbmSliderRunGapMobile: 10px; /*Отступ между логотипами на мобилке*/
}
[class*="uc-run-logo"] .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
        transition-timing-function: linear !important;
}
[class*="uc-run-logo"] .t774__container {
    max-width: calc(100vw - var(--dbmSliderRunPadding) * 2); 
    margin: 0 auto;
    border-radius: var(--dbmSliderRunBorderRadiusContainer) !important; 
    overflow:var(--dbmSliderRunOverflow) !important; 
    
}  
[class*="uc-run-logo"] .swiper-wrapper{
    display: flex !important;
    gap: var(--dbmSliderRunGap);
}

[class*="uc-run-logo"] .t774__content{
    display:none;
}
[class*="uc-run-logo"] .t774__imgwrapper{
    width: var(--dbmSliderRunWidthLogo);
    aspect-ratio: var(--dbmSliderRunAspectRation);
    padding-bottom:0% !important;
    border-radius: var(--dbmSliderRunBorderRadiusLogo) !important;
    overflow: hidden !important;
}
[class*="uc-run-logo"] .t774__wrapper{
    background-color: transparent;
}
/*Убираем отступ снизу */
[class*="uc-run-logo"] .t774__col {
    max-width: 420px !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media screen and (max-width: 480px){
    [class*="uc-run-logo"] .swiper-wrapper{
        gap: var(--dbmSliderRunGapMobile);
    }    
    [class*="uc-run-logo"] .t774__container {
        max-width: calc(100vw - var(--dbmSliderRunPaddingMobile) * 2); 
    }  
}

/*Если для второго слайдера нужно поменять сотношение сторон у логотипа*/
[class*="uc-run-logo-2"] .t774__imgwrapper{ /*Указываем название класса нужного слайдера*/
    aspect-ratio: 1 / 1; 
}
   
  document.addEventListener('DOMContentLoaded', () => {
    const containersRun = document.querySelectorAll('.t774__container');

    containersRun.forEach((containerRun) => {
      const parentRun = containerRun.closest('[class*="uc-run-logo"]');
      if (parentRun) {
        initializeSwiper(containerRun, parentRun);
      }
    });

    function initializeSwiper(containerRun, parentRun) {
      const slidesRun = containerRun.querySelectorAll('.t774__col');

      containerRun.classList.add('swiper');
      const wrapperRun = document.createElement('div');
      wrapperRun.classList.add('swiper-wrapper');

      slidesRun.forEach((slideRun) => {
        slideRun.classList.add('swiper-slide');
        wrapperRun.appendChild(slideRun);
      });

      containerRun.innerHTML = '';
      containerRun.appendChild(wrapperRun);

      let swiperConfigRun = {
        loop: true,
        autoplay: {
          delay: 0,
          disableOnInteraction: false,
          reverseDirection: false,  // значение true меняет направление движения
        },
        effect: 'slide',
        speed: 5000,    //Скорость пролистывания слайдов, чем больше значение, тем медленнее двигаются слайды
        slidesPerView: 6,   //Количество карточек на экране
        spaceBetween: 20,   //Отступ между карточками, если меняем здесь, то меняем и в переменных root
        slidesPerGroup: 1,  //Пролистывание слайдов за раз
        breakpoints: {
          320: {
            slidesPerView: 3,
            slidesPerGroup: 1,
            spaceBetween: 10,
          },
          480: {
            slidesPerView: 3,
            slidesPerGroup: 1,
            spaceBetween: 10,
          },
          640: {
            slidesPerView: 4,
            slidesPerGroup: 1,
          },
          768: {
            slidesPerView: 4,
            slidesPerGroup: 1,
          },
          1000: {
            slidesPerView: 4,
            slidesPerGroup: 1,
          },
          1360: {
            slidesPerView: 5,
            slidesPerGroup: 1,
          },
          1920: {
            slidesPerView: 6,
            slidesPerGroup: 1,
          }
        }
      };
// Вторая бегущая строка на странице
      if (parentRun.classList.contains('uc-run-logo-2')) {
        swiperConfigRun.speed = 6000;
        swiperConfigRun.effect = "slide";
        swiperConfigRun.autoplay = {
          delay: 0,
          disableOnInteraction: false,
          reverseDirection: true, // значение true меняет направление движения
        };
        swiperConfigRun.breakpoints = {
          320: {
            slidesPerView: 3,
            slidesPerGroup: 1,
          },
          480: {
            slidesPerView: 3,
            slidesPerGroup: 1,
          },
          640: {
            slidesPerView: 4,
            slidesPerGroup: 1,
          },
          768: {
            slidesPerView: 4,
            slidesPerGroup: 1,
          },
          1000: {
            slidesPerView: 4,
            slidesPerGroup: 1,
          },
          1360: {
            slidesPerView: 5,
            slidesPerGroup: 1,
          },
          1920: {
            slidesPerView: 6,
            slidesPerGroup: 1,
          }
        };
      }
// Конец кода второй бегущей строки
      const swiperRun = new Swiper(containerRun, swiperConfigRun);
      window.addEventListener('resize', () => swiperRun.update());
    }
  });