:root {
    --primary-white: rgb(220 221 212 / 1);
    --primary-black:#25221c;
    --primary-bronze:rgb(142 119 71/1);
}
header h1 span {
font-size: 20px;
font-variation-settings: normal;
font-weight: 300;
line-height: 28px;
tab-size: 4;
text-transform: uppercase;
color:var(--primary-black);
}
.text-bronze {
color:var(--primary-bronze);
font-feature-settings: normal;
font-size: 48px;
font-variation-settings: normal;
font-weight: 300;
line-height: 48px;
tab-size: 4;
text-transform: uppercase;
}
header p {
font-size: 18px;
font-variation-settings: normal;
line-height: 28px;
}
.topwrapper header {
padding-top: 0;
}
.headertext {position:absolute; z-index:4;}
header h1 {padding-top:5rem;}
.w-full{position:absolute; width:102%;margin-top:-15px; margin-left:-3px;}
.image-container {
  margin-top: -40px;
  z-index: 5;
  position: relative;
}
.container1 {gap: 0;position:relative;}

.container1 .box {
border: none;
background: none;
}

.container1 .box1::after {
    display: block;
    content: '';
    width: 1px;
    height: 50%; /* Исправлено */
    position: absolute;
    background-color: var(--primary-bronze);
    top: 0; /* Расположение сверху */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Смещение для центрирования */
}
.container-wrapper{
  height: auto;
  overflow: hidden;
  background-image: url('/templates/images/about/bg-pricing-table.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
border-bottom: 1px solid var(--primary-bronze);
margin-top: -32px;
}

.box2 h2 {
  color: var(--primary-bronze);
  margin-left: auto;
  right: 0%;
  position: relative;
  font-size: 44px;
  font-weight: 300;
  tab-size: 4;
  text-transform: uppercase;
  line-height: 65px;
  margin-top: -88px;
  z-index: 5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
}
.box2 p {color: var(--primary-white);font-size: 18px;
  font-variation-settings: normal;
  line-height: 28px;}
.w-full {fill:rgba(37, 34, 28, 1);opacity: 0.95;}

.box2 { 
        margin: 0 auto;
        width:80%;
}
.separator {width:100%;height:1px;background: var(--primary-bronze);
}
.container2 {
        margin: 0 auto;
        max-width: 48rem;
        width:80%;
}
.container2 h2 {
  color: var(--primary-bronze);
  position: relative;
  font-size: 44px;
  font-weight: 300;
  tab-size: 4;
  text-transform: uppercase;
  line-height: 65px;
  z-index: 5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}.container2 ul {color: var(--primary-white);font-size: 18px;
  font-variation-settings: normal;
  line-height: 28px;}

.text-separator {
background-color: rgba(37, 34, 28, 1); color: var(--primary-white);    text-transform: uppercase;
    font-size: 24px;
}
.text-separator span {color: var(--primary-bronze);}
.vertline-reverse {
    transform: scaleY(-1);
opacity:1;
margin-top:-9px;
z-index:5;
}
.ender h2 {
    margin: 0 auto; /* Центрирует блок, если у него фиксированная ширина */
    color: var(--primary-bronze);
    text-transform: uppercase;
    position: relative;
    font-size: 44px;
    text-align: left; /* Текст остаётся выровненным по левому краю */
    left: 0; /* Сдвигаем блок на 50% ширины родителя */
    width: max-content; /* Задаём ширину по содержимому */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
padding-bottom:1rem;
font-size: 32px;
ine-height: 32px;
}
.text-connect {
color: var(--primary-white);font-size: 18px;
  font-variation-settings: normal;
  line-height: 28px;
background-color: rgb(37 34 28/1);
}
.text-connect ul {color: var(--primary-white);font-size: 18px;
  font-variation-settings: normal;
  line-height: 28px;}
.welcome-message {
background-color: rgba(37, 34, 28, 1);
  color: var(--primary-white);
  text-transform: uppercase;
  font-size: 32px;
  text-align: center;
padding-bottom: 5rem;
}
.final-separator {
  height: 1px;
background-color: var(--primary-bronze);
position:relative;
z-index: 2;
}
.crossline{
aspect-ratio: auto 1 / 1;
height: 20px;
left:50%;
position:absolute;
transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.crossline svg {fill:var(--primary-bronze);}
.crossline:before {
    content: ''; 
    position: absolute;
    top: -15px;
    left: -15px;
    width: calc(100% + 30px); 
    height: calc(100% + 30px); 
    background-color: rgba(37, 34, 28, 1);
    border: 1px solid var(--primary-bronze); /* Зелёная граница */
    z-index: -1; /* Уводим квадрат под содержимое */
    box-sizing: border-box; /* Учитываем границу внутри размеров */
    transform:rotate(-45deg);
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
}
.streamers-wrapper h2 {color: var(--primary-bronze);
  position: relative;
  font-size: 44px;
  font-weight: 300;
  tab-size: 4;
  text-transform: uppercase;
  line-height: 65px;
  z-index: 5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: center;
  padding-top: 5rem;
  padding-bottom: 1rem;
}
.streamers-wrapper h3, .streamers-wrapper a {color: var(--primary-white)!important;padding-bottom: 2rem;}
.streamers-wrapper .streamer {
    position: relative; /* Устанавливаем позиционирование */
}

.streamers-wrapper .streamer:nth-of-type(1)::after {
display: block;
  content: '';
  width: 1px;
  height: 80%;
  position: absolute;
  background-color: var(--primary-bronze);
  top: 10%;
  right: 0;
  transform: translateX(-50%);
}
.streamers-container {padding-bottom:2rem;}
.join-dev-block h2 {
  padding-top: 10vh;
color: var(--primary-bronze);
font-size:32px;
  font-weight: 300;
  tab-size: 4;
  text-transform: uppercase;
  line-height: 40px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
padding-bottom:5vh;
}
.join-dev-block p{
font-size: 18px;
  font-variation-settings: normal;
  line-height: 28px;}

.button-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
padding: 0 91px 0 91px;
height: 77px;
top:15vh;
transform: translateY(-50%);
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.06);
z-index:9;
}

.button-mid {
    position: absolute;
    opacity: 0.95;
    background-color: rgb(87, 22, 30);
    background-image: url('/templates/images/btn-btm.png');
    background-repeat: repeat-x;
    background-size: contain;
    height: 77px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 65px;
    border: none;
    cursor: pointer;
padding-bottom:1px;
transition: 0.4s all ease;
font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 800;
color:rgb(209, 149, 68);
min-width:5%;
}
.button-mid span {position:absolute;z-index: 1;}
.button-mid:hover {opacity: 0.85; transition: 0.4s all ease;}

.button-mid::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -26px;
    transform: translateY(-50%);
    width: 26px;
    height: 100%;
    background-image: url('/templates/images/btn-left.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgb(87, 22, 30);
}

.button-mid::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -26px;
    transform: translateY(-50%);
    width: 26px;
    height: 100%;
    background-image: url('/templates/images/btn-right.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgb(87, 22, 30);
}

.button-mid::before, .button-mid::after {top:0; transform:translateY(0%);}
.paxlogolink{
  background: url('/templates/images/paxdei-logo-silver.png') no-repeat center center;
    background-size: auto;
  background-size: contain;
  color: #fff;
  text-align: center;
  height: 25vh;
  margin: 0 auto;
  margin-top: 20vh;
  max-width: 80%;
z-index:5;
position: relative;
opacity:0;
}
@media (max-width: 768px) {
    .paxlogolink{margin-top: 11vh;}
}
/* Общие стили */
.image-container {
    display: flex;
    justify-content: center; /* Центрирование изображений */
    gap: 5px;
    overflow: hidden; /* Убираем горизонтальный скролл */
min-width: 648px;
  display: flex; /* Элементы будут идти в строку */
  overflow-x: auto; /* Горизонтальная прокрутка */
  white-space: nowrap; /* Убирает переносы строк */
}

/* Изображения центрированы и масштабированы */
.image-container img {
    max-width: 100%; /* Ограничение ширины на десктопе */
    height: auto;
clip-path: url(#rough-edges);object-fit: cover;
}
.outer-container{
  display: flex;
  align-items: flex-start;
height:auto;clip-path: url(#rough-edges-top);}
.inner-container {width: 100%;height:100%;clip-path: url(#rough-edges-right);}

.image-container {
  cursor: grab;
  overflow-x: auto; /* Прокрутка */
  scrollbar-width: none; /* Убрать thumb в Firefox */
  -ms-overflow-style: none; /* Убрать thumb в IE */
}

.image-container::-webkit-scrollbar {
  display: none; /* Убрать scroll thumb в Chrome и Safari */
}
/* Для мобильных устройств */
@media (max-width: 767px) {
.image-container {
  display: flex; /* Элементы в ряд */
  gap: 10px; /* Отступы между изображениями */
  overflow-x: auto; /* Включаем горизонтальную прокрутку */
  white-space: nowrap; /* Запрещаем перенос элементов */
  cursor: grab;
  user-select: none;
  min-width: 100%; /* Удаляем фиксированную ширину */
}

.image-container.active {
  cursor: grabbing;
}.image-container.active {
  cursor: grabbing;
}

.outer-container {
  flex: 0 0 auto; /* Фиксированный размер */
}

.inner-container {
  display: block;
}
    /* Скрытие скроллбара для Webkit (Chrome, Safari) */
    .image-container::-webkit-scrollbar {
        display: none;
    }

    .image-container img {
        max-width: 100%; /* Размер изображений на мобильных */
        height: auto;
        flex: 0 0 auto; /* Запрещаем сжатие изображений */
    }
}

/* SVG маска */
.clip-svg {
    position: absolute;
    bottom: -1px; /* Привязка к нижней границе */
    left: -2px;
    width: 100%;
    height: auto;
    color: rgba(37, 34, 28, 1); /* Цвет инверсии */
    z-index: 3;
transform:scale(-1);
}
/* Стартовые стили для кнопки "Наверх" */
.back-to-top {
    position: fixed; /* Фиксированное позиционирование */
    bottom: -10vh; /* Начальное скрытое положение */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Центрирование сдвигом */
    background-color: rgba(37, 34, 28, 0.8); /* Фон кнопки */
    color: var(--primary-white, #fff); /* Цвет текста (с запасным значением) */
    text-align: center;
    padding: 1vh;
    border-radius: 6px;
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Тень */
    opacity: 0; /* Начальная прозрачность */
    visibility: hidden; /* Скрытие элемента */
    z-index: 1000; /* Поверх других элементов */
    transition: all 1.3s linear; /* Плавный переход для всех свойств */
}

/* Активное состояние кнопки */
.back-to-top-active {
    bottom: 9vh; /* Финальное положение */
    opacity: 0.7; /* Полупрозрачность кнопки */
    visibility: visible; /* Показываем элемент */
    transform: translateX(-50%) translateY(0); /* Сохранение центрирования */
}
/* Стили при наведении курсора */
.back-to-top:hover {
    opacity: 1; /* Увеличение непрозрачности */
    transform: translateX(-50%)translateY(-5px); /* Небольшой подъем */
transition: all .3s linear;
}
.streamer{opacity: 0.3!important;text-align: center; width: 45%; transition: opacity .6s linear;}
.streamer:hover,.streamer:focus,.streamer:active {opacity: 0.99!important;}