* { font-family: "Onest", sans-serif;
font-optical-sizing: auto;
font-style: normal;
margin:0;
padding:0;
box-sizing: border-box;
}
:root {
--color-main: #192025;
--color-containers:#0c0e106d;
--color-containers-light:#5b62694c;
--color-main-white-txt:#fff;
--radius-main:20px;
--padding-main:20px;
--padding-links:20px 25px;
--color-txt-light-gray:#95989a;
--transparent-main-50:#1920259d;
--buttons-color:#9c63ff;
--buttons-color-dark:#723dcc;
--buttons-color-tr:#b163ff84;

}
html {
scroll-behavior: smooth;
}
body { background:var(--color-main); color: var(--color-main-white-txt); }

::selection {
background: #150d15a0; color: rgb(255, 255, 255);
}
::-moz-selection {
background: #150d15a0; color: rgb(255, 255, 255);
}
.tg-download-cta {
display: block;
width: 100%;
max-width: 400px;
margin: 30px auto 0;
padding: 20px 30px;
background: var(--color-containers);
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
border-radius: 25px;
font-size: 24px;
font-weight: 600;
text-decoration: none;;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(182, 0, 227, 0.3);
box-sizing: border-box;
}

.tg-download-cta:hover,.tariffs-item:hover .tg-download-cta  {
background: #ab07de;
transform: translateY(-2px);
color: white;
text-decoration: none;
}

@media (max-width: 768px) {

.tg-download-cta {
font-size: 20px;
padding: 16px 25px;
margin-top: 20px;
}

}

/* ЯЧЕЙКИ 3/2, мобилы 2/3 */
.posing { font-size: 6em;
font-weight: 200;  }
#posing, #posing div, #posing span { text-align: center !important;  }
#posing { margin-bottom: 100px !important;  }

.grid {
display: grid;
grid-gap: 20px;
margin: 0 auto 100px auto;
grid-template-columns: repeat(3, 1fr); /* 3 столбца */
grid-template-rows: repeat(2, 1fr); /* 2 строки */
grid-auto-rows: min-content; /* Автоматическая высота строк */
overflow: hidden;
}

.grid-item {
padding: 10px;
overflow: hidden;
box-sizing: border-box;
text-align: center; /* Текст по центру для примера */
font-size: medium;
}

/* Media query для мобильных устройств */
@media (max-width: 767px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* 2 столбца */
grid-template-rows: repeat(3, 1fr); /* 3 строки */
}

.grid-item {
font-size: small; 
font-weight: 200;
}

}

.grid-icons { max-width: 100px; height: auto; margin-bottom: 20px;}
.grid-item h2 { margin-bottom: 10px; font-weight:600; }
.grid-item h3 { margin-bottom: 15px; font-weight:400; }

@media (max-width: 768px) {
.grid-icons {
max-width: 50px;
}
.posing { font-size: 5em; }
}

/* ЯЧЕЙКИ 3/2, мобилы 2/3 */


/* МЕНЮ САЙТА */
.header {
display: flex;
align-items: center;
padding: 55px 10px 10px 20px;
transition: 0.3s;
position: relative;

}
.scrolling .header { padding-top: 10px; backdrop-filter: blur(8px); background-color: var(--transparent-main-50); border-radius: 0 0 var(--radius-main) var(--radius-main); }
.scrolling #city { display: none; }
.main-menu { position: fixed;
z-index: 100;  width: 100%; top:0;box-sizing: border-box; left: 0; }

.logo {
width: 350px;
}

.logo img {
max-width: 100%;
height: auto;
}

.menu {
display: flex;
list-style: none;
width: calc(100% - 350px);
justify-content: space-around;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

.menu li {
text-align: center;
}

.menu a {
text-decoration: none;
color: #ffffffce;
padding: var(--padding-links);
display: block;
border-radius: var(--radius-main);
white-space: nowrap;
}
.menu a:hover,.menu a:active { background: #00000040; color: white; text-decoration: none; }

.menu-toggle {
display: none;
font-size: 30px;
cursor: pointer;
margin-left: auto;
}

.menu-toggle {
display: none;
width: 40px;
height: 40px;
position: relative;
z-index: 101;
border: none;
background: none;
padding: 0;
margin-left: auto;
cursor: pointer;
}

.menu-toggle span {
position: absolute;
height: 3px;
width: 100%;
background: #fff;
border-radius: 2px;
left: 0;
transition: 0.3s;
}

.menu-toggle span:nth-child(1) { top: 8px; }
.menu-toggle span:nth-child(2) { top: 18px; }
.menu-toggle span:nth-child(3) { bottom: 8px; }

.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2) {
opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
}

@media (max-width: 992px) {
.menu-toggle {
display: block;
}

.header {
padding-top: 20px;
}

.scrolling .header {
padding-top: 20px;
}

.menu a {
font-size: 24px;
padding: 15px 30px;
transition: 0.3s;
}

.menu a:hover {
background: rgba(255,255,255,0.1);
transform: scale(1.05);
}
}

@media (max-width: 992px) {
.logo {
width: 150px;
}
.menu {
display: none;
flex-direction: column;
position: fixed; /* Фиксируем положение меню */
top: 0;
left: 0; /* Растягиваем меню до левого края */
right: 0;
width: 100vw;
height: 100vh;
text-align: center; /* Центрируем текст */
justify-content: center; /* Центрируем пункты по вертикали */
align-items: center; /* Центрируем пункты по горизонтали */
z-index: 100; /* Помещаем меню поверх остальных элементов */
background: var(--color-main);
}
.menu.active {
display: flex;
width: 100vw;
margin: 0;
padding: 0;
}
.menu li {
margin: 10px 0; /* Отступы между пунктами */
font-size: 20px; /* Увеличиваем размер шрифта */
} 
.menu-toggle {
display: block;
z-index: 101;

}
.menu-toggle.active::before { /* Меняем иконку на крестик */


}
.header { padding-top: 63px ; }


}

/* МЕНЮ САЙТА */



/* Медиа-запросы для мобильных устройств */


.txt_gradient_main {
background: linear-gradient(90deg, #0090de 0%, #ff00e5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #0B2349;
}

.regula { font-weight: normal; font-size: 2em; }

.txt_gradient2 {
background: linear-gradient(90deg, #0090de 0%, #ff00e5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #0B2349;
}

.div_gradient_main {
background: linear-gradient(90deg, #0090de 0%, #ff00e5 100%);
}


.tariffs,.footer-nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /*Адаптивная сетка*/
grid-gap: 20px;
}
.footer-nav,footer { overflow: hidden; }
.h150 { font-size:clamp(30px, 3.5vw, 150px); font-weight: 300; margin: 40px 0; } 
.tariffs-item {
background-color:var(--color-containers);
border-radius:var(--radius-main);
padding: 20px;
box-sizing: border-box;
cursor: pointer;
position: relative;
text-align: center;
}
.tariffs-item p,.tariffs-item h3,.tariffs-item h2,.discount-term { text-align: left; }
.tariffs-icon { max-width: 50%; height: auto; margin: auto; transform: scale(0.7); transition: transform 0.2s ease;  }
.tariffs-item:hover .tariffs-icon { transform: scale(0.9); }

.footer-item {

box-sizing: border-box;
position: relative;

}
.tariffs-item:hover {background-color:var(--color-containers-light);}

.tariffs-item h2 {
font-size: 2.2em;
margin-bottom: var(--padding-main);
word-wrap:break-word;
font-weight: 200;
}
.tariffs-item p{ margin-bottom: var(--padding-main); }
.margin90px  {margin-bottom: 200px !important;  }
.abs_track { position: absolute;
left: 22px;
bottom: 112px; }

.tariffs-item span small{ font-size: small; }
.discount-term { margin-bottom: 10px !important;  color: var(--color-txt-light-gray); font-weight: 300; }
.tariffs-item b { font-weight: 400; color:var(--color-txt-light-gray); text-decoration: line-through; margin-left: 10px; font-size: 20px; }

.tariffs-item button,.tariffs-item a {
background:none;
display: inline-block;
border-radius: var(--radius-main);
padding: var(--padding-main);
text-align: center;
border: 0;
width: 90%;
color:var(--color-main-white-txt);
font-size: 1.5em; box-sizing: border-box;
cursor: pointer;
position: absolute;
left: 0;
right: 0;
bottom: var(--padding-main);
margin: 0 auto;
border: 2px solid var(--color-containers-light);
}
.tariffs-item:hover button,.tariffs-item:hover a { background: linear-gradient(90deg, #005d90 0%, #e600ff 80%);  border: 2px solid #222224; color: white; text-decoration: none; }
.tariffs-item button:active,.tariffs-item a:active  { background: linear-gradient(90deg, #005d90 0%, #e600ff 40%); border: 2px solid #fff ;  }

.tariffs-item span {
font-size: 3em;
display: inline-block;
}


@media (max-width: 768px) { /*Медиа-запрос для мобильных*/  
.tariffs,.footer-nav {
grid-template-columns: 1fr; /*Одна колонка*/
}

}

.menu-modal-content::-webkit-scrollbar {
width: 5px; /* Ширина всего элемента навигации */
}

.menu-modal-content::-webkit-scrollbar-track {
background:rgba(255, 255, 255, 0); /* Цвет дорожки */
}

.menu-modal-content::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.233); /* Цвет бегунка */
border-radius: 50px; /* Округление бегунка */
border:0; /* Оформление границ бегунка */
}
.menu-modal-content::-webkit-scrollbar-track  { border-radius: 50px; }

ul.menu_header {
padding: 0;
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
a { color:#b5d8ff; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: underline; }


ul.products li { 
list-style: none; 
float: left;
display: block;
width: 20%;
height: 100px;
background: #cecece;
}
ul.products li div { border-radius: 10px;  background: white; }



ul.menu_header li {
display:table-cell;
text-align:center;
align-items:center;
justify-content:center;
}

ul.menu_header li a { color:white; text-align:center; display:block; width: 80px; height: 68px; margin: auto; background:none; border-radius: 10px; font-size: 12px; font-weight:bold; padding: 5px; overflow: hidden; opacity: .6;}
ul.menu_header li a:hover { color:white; background: #ffffff1e; opacity: 1;}
ul.menu_header li a svg { fill:white; transform: scale(0.6); width: 36px; height:40px;}
ul.menu_header li a svg:hover { fill:red; }


.whiiterow { border-radius:var(--radius-main); background:var(--color-containers);
padding:40px; margin-bottom:20px; float: left; clear: both; width: 100%; color:white;}



.footerrow { color:#ffffff3e; background:var(--color-containers); border-radius: var(--radius-main) var(--radius-main) 0 0;
padding:40px; margin:20px 0 0 0; float: left; clear: both; width: 100%; box-sizing: border-box;
}
footer a { color:#ffffff96;  }
footer a:hover { color:white; }
footer  ul { list-style: none; margin: 20px 0 0 0; box-sizing: border-box; }
footer  ul li { margin: 0 0 10px 20px; box-sizing: border-box; }

input::placeholder { color:#99a3ae; }
input, textarea { outline:none; border:0; }
.headersearch { font-size:18px; padding:15px 20px; border-radius:var(--radius-main); border:0; width:100%; z-index: 2;  position: relative;
}

#main_search input[type=submit]:hover { background:url('search.svg') center center  no-repeat #f5f7fa; background-size: 35%;}
#main_search input[type=submit]:active { background:url('search.svg') center center  no-repeat #cfd6e1; background-size: 35%;}
#main_search { position:absolute; width:35%; left:45%; bottom:15px;
}



.overlay,.overlay-order {
position: fixed; 
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 102; /* Слой ниже меню */
display: none;
}

#navigation {
width: 20%;
position: absolute;
right: 20px;
bottom: 10px;
}


a { text-decoration:none;}


.slider {
width: 100%;
margin: 20px auto;
}



.container {
margin: 0 auto;
padding:0 10px;
max-width: 1400px;
width:100%;
box-sizing: border-box;
position:relative !important;
}
.aheader { background:none; height: 120px;}
.aheader .container {  height: 120px;}
#city {transition: 0.3s;}



#city a { color:white;  opacity: .40; padding-left:20px;  background:url('city.svg') left center  no-repeat;  background-size: 12px; font-size:16px; position:absolute; top:10px; left:30px; font-size:14px; }
#city a:hover { opacity: 100; }

#help a { color:white;  opacity: .40; padding-left:20px; font-size:16px; position:absolute; top:10px; right:38px; font-size:14px; }
#help a:hover { opacity: 100; }

#logo {
position: absolute;
display: inline-block;
left:0;
bottom:10px; text-align:center !important;
}

#logo a { color:white; text-decoration:none; font-size:18px;}

#logo a, #logo a svg {
width:230px;}

@media only screen and (min-width: 601px) {
.container {
width: 85%;
}

#logo a, #logo a svg { width: 85%; }
#logo a {font-size:14px;}
}

@media only screen and (min-width: 993px) {
.container {
width: 80%;
}
#logo a, #logo a svg { width: 80%; }
#logo a {font-size:18px;}
}

#rectangle {
width: 100% ;
max-width: 1600px;
margin: 20px auto ;
}
#vidproj { border-radius:var(--radius-main) ; object-fit: contain ;
overflow-clip-margin: content-box ;
overflow: clip ; }


.menu-button {
background-color: white;
border: none;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.menu-icon {
width: 25px;
height: 25px;
fill: black;
}

.menu-modal,.menu-order {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:var(--color-main);
border-radius: var(--radius-main);
padding: 20px;
z-index: 120;
display: none;
width: 60%;height: min(90%,600px);
margin:min(20%,20px);

}

.menu-modal-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 100%;
margin:40px auto 0 auto;
padding: 0 20px 0 20px;  overflow-y: scroll;
height: inherit;
}

.close-button {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
z-index: 121;
}

.close-icon {
width: 40px;
height: 40px;
fill: rgba(255, 255, 255, 0.35);
}
.close-icon:hover { fill: rgb(255, 255, 255); }

.categories {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}

.category {
margin-bottom: 15px;
width: 28%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}

.category-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
color: white;
}

.subcategories {
list-style: none;
padding: 0;
}

.subcategory {
margin-bottom: 5px;
}
.subcategory a { color:#bebebe;}
.subcategory a:hover { color: white;}

.expand-link {
display: inline-block;
margin-top: 10px;
cursor: pointer;
}

.expand-icon {
width: 15px;
height: 15px;
fill: #333;
}

@media (max-width: 768px) {
.menu-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
padding: 0;
transform: none;
margin:0;
}

.menu-modal-content {
padding: 20px;
flex-direction: column;
overflow-y: scroll;
height: inherit;
}

.categories {
flex-direction: column;
}

.category {
width: 48%;
margin-bottom: 15px;
}
}
.slick-slide { border-radius: var(--radius-main); }


/* ТАБЫыыыыыыыыыыыыыыыыыыыыыыыыы */
.tabs-section {
margin: 40px 0;
overflow: hidden;
position: relative;
}
.tabs-header {
position: relative;
margin-bottom: 40px;
}

.tabs-list {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
}

.tab-item {
flex: 1;
text-align: center;
cursor: pointer;
padding: 20px;
transition: all 0.3s ease;
color:#ffffff8e;
font-size:24px;
}

.tab-item.active,.tab-item.active:hover {
color:var(--buttons-color);
font-weight:600;
}

.tab-item:hover .tab-icon,.tab-item:hover   { color: #ffffff; /* Цвет активной иконки */
filter: none; }

.tab-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
transition: all 0.3s ease;
color: #ffffff8e;
}



.tab-item.active .tab-icon {
color: var(--buttons-color); /* Цвет активной иконки */
filter: none; /* Убираем предыдущий фильтр */
}

.tab-icon path {
fill: currentColor;
}

.indicator-line {
height: 3px;
background: #ffffff2d;
position: absolute;
bottom: -10px;
left: 0;
right: 0;
}

.active-line {
height: 3px;
background: var(--buttons-color);
position: absolute;
bottom: -10px;
left: 0;
transition: all 0.3s ease;
}

.tab-content {
display: none;
opacity: 0;
position: relative;
width: 100%;
}
.slide-in-left {
animation: slideInLeft 0.4s ease forwards;
}

.slide-in-right {
animation: slideInRight 0.4s ease forwards;
}

.tab-content.active {
display: flex;
gap: 60px;
align-items: center;
}

.tab-text {
flex: 1;
}

.tab-text h2, .tab-text p, .tab-text a { margin-bottom: 20px;}
.tab-ul  { list-style-type: disc;
padding-left: 20px; 
margin-left: 0;  }
.tab-ul li  { margin-bottom: 10px; }


.tab-image {
flex: 1;
border-radius: 20px;
overflow: hidden;
max-height: 400px;
}

.tab-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.tab-button {
display: inline-block;
padding: 20px 42px;
background:var(--color-containers);
color: white;
border-radius: 15px;
text-decoration: none;
transition: all 0.3s ease;
font-size: 18px;
}

.tab-button:hover {
background: var(--color-containers-light);
transform: translateY(-2px);
color: white;
text-decoration: none;
}

@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* Для первоначального состояния */
.tab-content.active:not(.slide-in-left):not(.slide-in-right) {
animation: slideInRight 0.01s ease forwards;
}



@media (max-width: 768px) {
.tab-content.active {
flex-direction: column;
}

.tab-image {
order: -1;
max-height: 250px;
width: 100%;
}

.tabs-list {
display: flex;
justify-content: space-between; /* Равномерное распределение */
flex-wrap: nowrap;
gap: 8px; /* Небольшой отступ между вкладками */
}


.tab-item {
flex: 1; /* Равные доли ширины */
min-width: auto; /* Убираем фиксированную ширину */
width: auto;
padding: 12px 8px; /* Уменьшаем отступы */
font-size: 14px; /* Уменьшаем размер шрифта */
}
/* Скрываем scrollbar */
.tabs-list::-webkit-scrollbar {
display: none;
}
.tabs-list {
-ms-overflow-style: none;
scrollbar-width: none;
}
}

@media (max-width: 480px) {
.tab-item {
padding: 10px 5px;
}

.tab-icon {
width: 32px;
height: 32px;
}

.tab-button {
width: 100%;
text-align: center;
}
}

.tab-content {
transition: transform 0.3s ease-out;
}


@keyframes slideFromLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@keyframes slideFromRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}


/* Оптимизация для касаний */
.tabs-section {
touch-action: pan-y; /* Блокируем горизонтальную прокрутку */
}
/* ТАБЫыыыыыыыыыыыыыыыыыыыыыыыыы */


.image-text-block {
display: flex;
gap: 0; 
align-items: center;
}

/* Респонсив часть */
@media (max-width: 768px) {
.image-text-block {
flex-direction: column;
}
}

.image-wrapper {
flex: 0 0 50%; /* Фиксированные 50% ширины */
position: relative;
padding-bottom: 50%; /* Создаем квадрат */
overflow: hidden;
}
.image-wrapper:hover img {
transform: scale(1.1); /* Увеличиваем картинку на 10% */
}

.image-wrapper img {
position: absolute;
transition: transform 0.3s ease;
width: 100%;
height: 100%;
object-fit: cover;
padding: 10%; 
box-sizing: border-box; /* Важно! */
border-radius: 50%; /* Делаем круг */
}

.text-block {
flex: 1;
min-width: 0; /* Фикс для переполнения текста */
padding: 20px;
}

/* Для мобильной версии */
@media (max-width: 768px) {
.image-wrapper {
width: 100%;
padding-bottom: 100%; /* Квадрат на всю ширину */
flex: none;
}
.image-wrapper img { padding: 20px;}


.text-block {
width: 100%;
}
}

.h2main { font-weight: 300; font-size: 64px; margin: 50px 0;  }
@media (max-width: 768px) {
.h2main { font-size: 40px;  margin: 30px 0;  }
}
@media (max-width: 480px) {
.h2main { font-size: 32px;  margin: 20px 0; }
.mdct-modal-overlay,.mdct-city-modal__content,.mdct-city-modal { height: calc(var(--vh, 1vh) * 100) !important; }
}

/* МОДАЛКА КОНТАКТЫ */
.mdct-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
box-sizing: border-box;
overflow-y: auto;

}

.mdct-modal-overlay, 
.mdct-city-modal {
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Для плавного скролла на iOS */
}

.mdct-modal,
.mdct-city-modal__content {
max-height: 100vh;
overflow-y: auto;
}

.mdct-modal {
background:var(--color-main);
padding: 40px;
border-radius:var(--radius-main);
width: 800px;
position: relative;
color: #fff;
font-size: 18px;
box-sizing: border-box;
max-height: 100vh; /* Ограничиваем высоту */
overflow-y: auto; 
}

.mdct-modal-close {
position: absolute;
top: 0px;
right: 11px;
background: none;
border: none;
color: #fff;
font-size: 62px;
cursor: pointer;
line-height: 1;
padding: 10px;
}

.mdct-form-group {
margin-bottom: 25px;
}

.mdct-form-group input, 
.mdct-form-group textarea {
width: 100%;
padding: 16px;
font-size: 16px;
background: var(--color-containers);
color: #fff;
border-radius: var(--radius-main);
transition: all 0.3s ease;
}

.mdct-form-group textarea {
height: 120px;
resize: vertical;
}

.mdct-switch-group {
display: flex;
gap: 30px;
margin: 30px 0;
}

/* Исправленные radio-кнопки */
input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

.mdct-radio-label {
display: flex;
align-items: center;
cursor: pointer;
gap: 12px;
}

.mdct-custom-radio {
display: inline-block;
width: 24px;
height: 24px;
border: 2px solid var(--buttons-color-dark);
border-radius: 50%;
position: relative;
flex-shrink: 0;
}

input[type="radio"]:checked + .mdct-custom-radio::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--buttons-color-dark);
border-radius: 50%;
transform: scale(1);
transition: all 0.2s ease;
}

.mdct-radio-text {
font-size: 16px;
}

.mdct-submit-btn,.mdct-ok-btn {
background: var(--buttons-color-dark);
color: white;
padding: 18px 40px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
}


.mdct-submit-btn:hover,.mdct-ok-btn:hover {
background: var(--buttons-color);
transform: translateY(-3px);

}

.mdct-success-message {
display: none;
text-align: center;
padding: 20px;
}

.mdct-success-message h3 {
font-size: 22px;
margin: 30px 0;
}

.mdct-success-message svg {
width: 100px;
height: 100px;
margin: 30px auto;
}

.mdct-ok-btn {
padding: 15px 50px;
font-size: 18px;
}



@media (max-width: 768px) {
.mdct-modal {
width: 100%;
height: auto;
min-height: 100vh;
border-radius: 0;
padding: 30px 20px;
}

.mdct-switch-group {
flex-direction: column;
gap: 20px;
}

.mdct-modal-close {
top: 15px;
right: 15px;
font-size: 50px;
}
}


.mdct-error-message {
background: #d400202c;
border-radius: var(--radius-main);
padding: 20px;
margin-bottom: 25px;
color: #ffffff;
}

.mdct-error-icon {
font-size: 24px;
margin-bottom: 10px;
}

.mdct-error-list {
list-style: none;
padding-left: 0;
margin: 0;
}

.mdct-error-list li {
margin: 8px 0;
padding-left: 10px;
border-left: 3px solid #ff5252;
}

/* Анимация загрузки */
.mdct-loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 5px solid var(--color-containers-light);
border-top: 5px solid var(--buttons-color-dark);
border-radius: 50%;
animation: mdct-spin 1s linear infinite;
z-index: 9999;
}

@keyframes mdct-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Анимация успеха */
.mdct-success-message {
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
}

.mdct-success-message.show {
opacity: 1;
transform: translateY(0);
}

.mdct-success-message {
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s ease;
}

.mdct-success-message.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* Блокировка интерфейса */
.mdct-modal-overlay.mdct-loading {
backdrop-filter: blur(40px); 
cursor: wait;
}

.mdct-modal-overlay.mdct-loading .mdct-modal {
opacity: 0.5;
pointer-events: none;
}

/* Закрытие по клику на оверлей */
.mdct-modal-overlay {
cursor: pointer;
}

.mdct-modal {
cursor: default;
}

/* Добавить в CSS */
.mdct-social-links {
display: flex;
justify-content: center;
gap: 25px;
margin-top: 30px;
padding: 15px 0;


}


.mdct-social-links a{  opacity: 0.5;  transition: opacity 0.3s ease;}

.mdct-social-links a:hover {
opacity: 1;
}
.mdct-modal-form h2 { margin-bottom: 20px; }

.mdct-social-icon {
width: 40px;
height: 40px;
fill: #fff;
transition: fill 0.3s ease;
}

.mdct-social-link:hover .mdct-social-icon {
fill: #fff !important;
opacity: 1;
}

/* Адаптивность */
@media (max-width: 768px) {
.mdct-social-links {
gap: 20px;
margin-top: 25px;
}

.mdct-social-icon {
width: 40px;
height: 40px;
}
}

/* МОДАЛКА КОНТАКТЫ КОНЕЦ */


/* Стили модалки города */
.mdct-city-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1001;
align-items: center;
justify-content: center;
}

.mdct-city-modal__content {
background: var(--color-main);
border-radius: 12px;
width: 800px;
max-height: 80vh;
/* Добавили для анимации */
transition: all 0.3s ease;
padding: 20px;
position: relative;
}

.mdct-city-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.mdct-city-modal__close {
background: none;
border: none;
color: #fff;
font-size: 54px;
cursor: pointer;
padding: 0 10px;
}

.mdct-city-search input {
width: 100%;
padding:20px 30px;
background:var(--color-containers);
border-radius: var(--radius-main);
color: #fff;
margin-bottom: 15px;
box-sizing: border-box;
}

.mdct-city-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-height: 60vh;
overflow-y: auto;
padding-right: 10px;
}
.mdct-body-no-scroll {
overflow: hidden !important;
position: fixed;
width: 100%;
height: 100%;
}

@media (max-width: 768px) {
.mdct-body-no-scroll {
position: fixed;
width: 100%;
height: 100%;
}
}
body.no-scroll {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}




.mdct-city-item {
padding: 12px;
border-radius: var(--radius-main);
cursor: pointer;
transition: all 0.2s ease;
}
/* Стили для ссылок */
.mdct-city-item {
display: block; /* Важно для ссылок */
text-decoration: none;
color: inherit;
}

.mdct-city-item:hover {
background: var(--buttons-color-dark);
color: white;
text-decoration: none;
}

/* Кастомный скроллбар */
.mdct-city-list::-webkit-scrollbar {
width: 8px;
}

.mdct-city-list::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
border-radius: 50px;
}

.mdct-city-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
border-radius: 4px;
}

/* Адаптивность */
@media (max-width: 768px) {
.mdct-city-modal__content {
width: 100% !important;
height: 100vh !important;
max-height: none !important;
border-radius: 0 !important;
}

.mdct-city-list {
grid-template-columns: 1fr;
max-height: calc(100vh - 270px);
}
}

@media (max-width: 480px) {
.mdct-city-list {
grid-template-columns: 1fr;
}
}
/* Стили модалки города */

/* ANIM BG */
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}

.background {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: var(--color-main);
overflow: hidden;
z-index: -99999;
}

.background span {
width: 42vmin;
height: 42vmin;
border-radius: 42vmin;
backface-visibility: hidden;
position: absolute;
animation: move;
animation-duration: 42;
animation-timing-function: linear;
animation-iteration-count: infinite;
}


.background span:nth-child(0) {
color: #0079b92b;
top: 46%;
left: 29%;
animation-duration: 50s;
animation-delay: -17s;
transform-origin: -1vw 18vh;
box-shadow: 84vmin 0 10.833651776168207vmin currentColor;
}
.background span:nth-child(1) {
color: #007a9037;
top: 10%;
left: 97%;
animation-duration: 61s;
animation-delay: -8s;
transform-origin: -22vw 17vh;
box-shadow: -84vmin 0 10.832609479642331vmin currentColor;
}
.background span:nth-child(2) {
color: #ff00cc39;
top: 93%;
left: 8%;
animation-duration: 64s;
animation-delay: -18s;
transform-origin: 13vw 14vh;
box-shadow: -84vmin 0 11.419487703880698vmin currentColor;
}
.background span:nth-child(3) {
color: #ff006236;
top: 60%;
left: 5%;
animation-duration: 22s;
animation-delay: -10s;
transform-origin: -18vw -6vh;
box-shadow: 84vmin 0 11.355876279445262vmin currentColor;
}
.background span:nth-child(4) {
color: #ff00b338;
top: 70%;
left: 10%;
animation-duration: 82s;
animation-delay: -32s;
transform-origin: -13vw 1vh;
box-shadow: 84vmin 0 10.925187328857895vmin currentColor;
}
.background span:nth-child(5) {
color: #6c00902f;
top: 63%;
left: 94%;
animation-duration: 84s;
animation-delay: -18s;
transform-origin: 15vw -1vh;
box-shadow: -84vmin 0 10.982754442891343vmin currentColor;
}
.background span:nth-child(6) {
color: #005e9034;
top: 37%;
left: 20%;
animation-duration: 21s;
animation-delay: -33s;
transform-origin: 1vw 2vh;
box-shadow: 84vmin 0 10.959471397764458vmin currentColor;
}
.background span:nth-child(7) {
color: #e600ff36;
top: 54%;
left: 88%;
animation-duration: 72s;
animation-delay: -60s;
transform-origin: -12vw -12vh;
box-shadow: -84vmin 0 10.854081553642825vmin currentColor;
}
.background span:nth-child(8) {
color: #005e903a;
top: 50%;
left: 4%;
animation-duration: 60s;
animation-delay: -29s;
transform-origin: 22vw 15vh;
box-shadow: -84vmin 0 10.894589336552237vmin currentColor;
}
.background span:nth-child(9) {
color: #e600ff37;
top: 82%;
left: 32%;
animation-duration: 70s;
animation-delay: -48s;
transform-origin: 13vw -7vh;
box-shadow: -84vmin 0 10.731277898360826vmin currentColor;
}
.background span:nth-child(10) {
color: #005e9041;
top: 48%;
left: 17%;
animation-duration: 58s;
animation-delay: -35s;
transform-origin: -4vw 25vh;
box-shadow: 84vmin 0 10.574433865926757vmin currentColor;
}
/* ANIM BG */

/* ПОРТФОЛИО */



.tmt-portfolio-heading {
font-size: clamp(2rem, 4vw, 3rem);
text-align: center;
margin-bottom: 3rem;
color: #fff;
position: relative;
padding-bottom: 1rem;
animation: tmt-fadeUp 0.8s ease-out;
}

.tmt-portfolio-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: clamp(40px, 8vw, 60px);
height: 3px;
background: #e74c3c;
}

.tmt-portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 2400px;
margin: 0 auto;
}

@media (min-width: 3000px) {
.tmt-portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
}

.tmt-portfolio-item {
background: transparent;
border-radius: var(--radius-main);
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
text-decoration: none;
color: #fff;
position: relative;
}
.tmt-portfolio-item {
transform: translateZ(0);
will-change: transform;
}
.tmt-portfolio-item:hover { color: white; text-decoration: none; transform: translateY(-10px); }

.tmt-work-media {
position: relative;
padding-top: 100%;
overflow: hidden;
border-radius: var(--radius-main);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.tmt-media-slider {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tmt-work-video,
.tmt-work-image {
flex: 1 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
.tmt-dot {
transition: all 0.1s linear !important; /* Уменьшили время анимации */
}
@media (max-width: 768px) {
.tmt-media-slider {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}

.tmt-work-video,
.tmt-work-image {
scroll-snap-align: start;
}
}

.tmt-slider-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 2;
}

@media (max-width: 768px) {
.tmt-slider-dots {
display: flex !important; /* Добавьте это */
}
}

.tmt-dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: rgba(255,255,255,0.3);
transition: all 0.3s ease;
}

.tmt-dot.active {
background: #fff;
width: 20px;
}

.tmt-work-info {
padding: 1.5rem;
background: var(--color-containers);
margin-top: -15px;
border-radius: 0 0 var(--radius-main) var(--radius-main);
}

.tmt-work-title {
font-size: 1.25rem;
margin-bottom: 1rem;
margin-top: 1rem;
line-height: 1.3;
}

.tmt-work-desc {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 0.5rem;

}

@keyframes tmt-fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@media (max-width: 768px) {
.tmt-portfolio-grid {
padding: 0;
gap: 1.5rem;
}

.tmt-media-slider {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}

.tmt-media-slider::-webkit-scrollbar {
display: none;
}

.tmt-work-video,
.tmt-work-image {
flex: 0 0 100%;
width: 100%;
scroll-snap-align: start;
}
}

.tmt-portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
gap: 2rem;
max-width: 2400px;
margin: 0 auto;
width: 100%;
}


@media (min-width: 3000px) {
.tmt-portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 768px) {
.tmt-portfolio-grid {
padding: 0 1rem;
gap: 1.5rem;
grid-template-columns: 1fr;
}

.tmt-portfolio-item {
max-width: 100%;
margin: 0 auto;
}

.tmt-work-media,
.tmt-media-slider {
border-radius: calc(var(--radius-main) - 2px);
}
}

.tmt-work-video,
.tmt-work-image {
max-width: 100%;
height: auto;
}



.tgx-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0;
line-height: 1;
}

/* Элемент тега */
.tgx-item {
display: inline-flex; /* Меняем на flex-контейнер */
align-items: center; /* Вертикальное выравнивание */
justify-content: center; /* Горизонтальное выравнивание */
min-height: 32px; /* Фиксированная минимальная высота */
padding: 6px 14px;
border: 2px solid rgba(255, 255, 255, 0.233);
border-radius: 100px;
color: #ffffff88;
font-size: 14px;
cursor: pointer;
transition: all 0.25s ease;
user-select: none;
line-height: 1.3; /* Единый межстрочный интервал */
text-align: center; /* Центрирование текста */
box-sizing: border-box; /* Учет padding в ширине */
vertical-align: middle; /* Для соседних элементов */
white-space: normal; /* Всегда переносим текст */
word-break: break-word; /* Корректный перенос слов */
}

/* Состояние ховера */
.tgx-item:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.6);
text-decoration: none;
color:white;
}

/* Для длинных текстов */
.tgx-item.multiline {
white-space: normal;
word-break: break-word;
line-height: 1.3;
}

/* Адаптивность */
@media (max-width: 768px) {
.tgx-container {
gap: 6px;
}
.tgx-item {
font-size: 13px;
padding: 5px 12px;
min-height: 28px; /* Адаптивная высота */
}
}
/* Добавить в конец CSS */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

.tmt-work-media {
contain: strict;
backface-visibility: hidden;
}

.portfolio-more {
text-align: center;
margin: 40px 0;
}

.portfolio-more .button {
width: 100%;
display: inline-block;
padding: 20px 40px;
border: 2px solid white;
color: white;
background: var(--color-containers);
border-radius: 50px;
font-size: 22px !important;
text-decoration: none;
font-weight: 400;
transition: transform 0.3s ease;
font-size: 18px;
}

.portfolio-more .button:hover {
transform: translateY(-3px);
background: #ffffff1a;
}
/* Стили для кастомного скроллбара */
.mdct-modal::-webkit-scrollbar {
width: 12px;
height: 12px;
}

.mdct-modal::-webkit-scrollbar-track {
background: rgba(255,255,255,0.08);
border-radius: 20px; /* Увеличиваем радиус */
margin: 8px 2px; /* Добавляем отступы */
border: 2px solid transparent; 
background-clip: padding-box;
}



.mdct-modal::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #9c63ff 0%, #ff00e5 100%);
border-radius: 20px; /* Увеличиваем радиус */
border: 3px solid rgba(255,255,255,0.15); /* Добавляем белую границу */
background-clip: padding-box; /* Фиксим отображение градиента */
box-shadow: inset 0 0 6px rgba(0,0,0,0.1); /* Добавляем глубину */
}

.mdct-modal::-webkit-scrollbar-thumb:hover {
border-color: rgba(255,255,255,0.25);
}

/* Для Firefox */
@supports (scrollbar-color: auto) {
.mdct-modal {
scrollbar-width: thin;
scrollbar-color: #9c63ff rgba(255,255,255,0.08);
scrollbar-gutter: stable;
}

.mdct-modal * {
scrollbar-color: inherit;
}
}

.portfolio-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin: 40px 0;
flex-wrap: wrap;
}

.portfolio-pagination a {
padding: 12px 18px;
background: var(--color-containers);
border-radius: var(--radius-main);
transition: all 0.3s ease;
text-decoration: none;
color: white;
}

.portfolio-pagination a:hover {
background: var(--buttons-color-dark);
transform: translateY(-2px);
color: white;
}

.portfolio-pagination .active {
background: var(--buttons-color);
cursor: default;
}


/* Стили только для верхних категорий */
.topcats {
display: inline-flex;
align-items: center;
padding: 10px 20px;
margin: 5px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50px;
color: #fff;
font-size: 16px;
transition: all 0.3s ease;
text-decoration: none;
background: var(--color-containers);
position: relative;
line-height: 1.4;
}

.topcats:hover {
background: var(--buttons-color-dark);
border-color: var(--buttons-color);
transform: translateY(-2px);
color:white;
text-decoration: none;
box-shadow: 0 5px 15px rgba(156,99,255,0.2);
}

.topcats.multiline {
line-height: 1.2;
padding: 12px 15px;
font-size: 14px;
}

.works-count {
font-size: 0.85em;
margin-left: 8px;
opacity: 0.8;
font-weight: 300;
}

/* Анимация раскрытия */
.categories-container {
max-height: 115px;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}

.categories-container.expanded {
max-height: 1000px;
}

/* Кнопка показа */
.show-more-btn {
display: block;
width: max-content;
margin: 25px auto 0;
padding: 12px 35px;
background: var(--color-containers);
border: 2px solid rgba(255,255,255,0.2);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}

.show-more-btn:hover {
background: var(--buttons-color-dark);
border-color: var(--buttons-color);
transform: translateY(-2px);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
.topcats {
font-size: 14px;
padding: 8px 15px;
margin: 3px;
flex: 1 0 45%;
text-align: center;
}

.categories-container {
max-height: 95px;
}

.show-more-btn {
width: 100%;
text-align: center;
padding: 15px;
margin-top: 15px;
}

.topcats.multiline {
font-size: 12px;
padding: 10px 12px;
}
}

@media (max-width: 480px) {
.topcats {
flex: 1 0 100%;
margin: 3px 0;
font-size:13px;
}
}
/* Добавить в CSS */
/* Стили для активной категории */
.topcats.active-category {
background: var(--buttons-color) !important;
border-color: var(--buttons-color) !important;
box-shadow: 0 4px 15px rgba(156,99,255,0.4);
}

/* Градиент для обрезки */
.categories-container {
position: relative;
max-height: 115px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, 
rgba(0,0,0,1) 70%, 
rgba(0,0,0,0.6) 85%, 
rgba(0,0,0,0));
mask-image: linear-gradient(to bottom, 
rgba(0,0,0,1) 70%, 
rgba(0,0,0,0.6) 85%, 
rgba(0,0,0,0));
}

.categories-container.expanded {
-webkit-mask-image: none;
mask-image: none;
}

/* Отступ для кнопки */
.show-more-btn {
margin: 25px auto 40px; /* Добавлен нижний отступ */
}

/* Адаптивность градиента */
@media (max-width: 768px) {
.categories-container {
-webkit-mask-image: linear-gradient(to bottom, 
rgba(0,0,0,1) 60%, 
rgba(0,0,0,0.5) 80%, 
rgba(0,0,0,0));
mask-image: linear-gradient(to bottom, 
rgba(0,0,0,1) 60%, 
rgba(0,0,0,0.5) 80%, 
rgba(0,0,0,0));
}
}

@supports not (mask-image: linear-gradient(to bottom, black, transparent)) {
.categories-container {
position: relative;
}
.categories-container:not(.expanded)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, 
rgba(25,32,37,0) 0%, 
rgba(25,32,37,1) 100%);
}
}

@keyframes blockAppear {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}

.content-block {
animation: blockAppear 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
opacity: 0;
}

.content-block:nth-child(1) { animation-delay: 0.1s; }
.content-block:nth-child(2) { animation-delay: 0.2s; }
.content-block:nth-child(3) { animation-delay: 0.3s; }
.content-block:nth-child(4) { animation-delay: 0.4s; }
.content-block:nth-child(5) { animation-delay: 0.5s; }
.content-block:nth-child(6) { animation-delay: 0.6s; }
.content-block:nth-child(7) { animation-delay: 0.7s; }
.content-block:nth-child(8) { animation-delay: 0.8s; }
.content-block:nth-child(9) { animation-delay: 0.9s; }
.content-block:nth-child(10) { animation-delay: 1s; }

.highlight1,.highlight2,.highlight3 {

border-radius: 5px; 
padding: 2px 8px; 
display: inline-block; 
}
.highlight1 {   background-color: #c20f9b44; }
.highlight2 {   background-color: #710fc248; }
.highlight3 {   background-color: #0f5dc248; }

/* Стили для заголовка с кнопкой */
.portfolio-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
gap: 20px;
}

.portfolio-all-button {
display: inline-block;
padding: 12px 25px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
flex-shrink: 0;
white-space: nowrap;
}

.portfolio-all-button:hover {
border-color: white;
background: rgba(255,255,255,0.1);
transform: translateY(-2px);
text-decoration: none;
color: white;
}

@media (max-width: 768px) {
.portfolio-header {
flex-wrap: wrap;
gap: 15px;
}

.portfolio-all-button {
padding: 10px 20px;
font-size: 14px;
}

.h2main {
margin-bottom: 0 !important;
}
}

@media (max-width: 480px) {
.portfolio-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.portfolio-all-button {
font-size: 13px;
padding: 8px 15px;
}
}

.audio-player {
margin: 20px 0;
}

.audio-player::-webkit-media-controls-panel {
}

.audio-player::-webkit-media-controls-play-button,
.audio-player::-webkit-media-controls-timeline {
filter: invert(1);
}
:root {
--stv-device-color: rgba(255,255,255,0.15);
--stv-device-radius: 40px;
--stv-device-width: 320px;
--stv-device-height: 650px;
}


/* Сторисы в работах */


:root {
--stf-frame-color: rgba(255, 255, 255, 0.1);
--stf-border-color: rgba(255, 255, 255, 0.2);
--stf-border-radius: 30px;
--stf-video-radius: 20px;
}

.stf-container {
max-width: 2000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap; /* Добавлено для переноса элементов */
gap: 20px;
justify-content: center;
}

.stf-video-container {
flex: 1 1 calc(33.333% - 40px); /* Базовая ширина для 3 элементов */
min-width: 300px; /* Минимальная ширина контейнера */
max-width: 500px; /* Максимальная ширина контейнера */
position: relative;
padding: 40px 20px 20px 20px;
background: var(--stf-frame-color);
border-radius: var(--stf-border-radius);
border: 2px solid var(--stf-border-color);
box-shadow: 0 0 15px rgba(0,0,0,0.1);
margin: 0 auto; /* Центрирование при переносе */
}

.stf-phone-top {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 6px;
background: var(--stf-border-color);
border-radius: 3px;
z-index: 1;
}

.stf-phone-button {
position: absolute;
right: -6px;
top: 24%;
transform: translateY(-50%);
width: 4px;
height: 110px;
background: var(--stf-border-color);
border-radius: 2px;
}
.stf-video-wrapper {
position: relative;
padding-top: 177.78%;
border-radius: var(--stf-video-radius);
overflow: hidden;
}

.stf-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--stf-video-radius);
}

@media (max-width: 1200px) {
.stf-video-container {
flex-basis: calc(50% - 40px); /* 2 элемента в ряд */
}
}

@media (max-width: 768px) {
.stf-container {
flex-direction: column;
}

.stf-video-container {
flex-basis: 100%;
max-width: 100%;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
margin-bottom: 15px;
}

.stf-phone-top,
.stf-phone-button {
display: none;
}

.stf-video-wrapper {
border-radius: var(--stf-video-radius);
}
}
/* Добавляем box-sizing для всех элементов с префиксом */
.stf-container *,
.stf-container *:before,
.stf-container *:after {
box-sizing: border-box;
}

@media (max-width: 768px) {
.stf-container {
padding: 0 !important; /* Убираем все отступы контейнера */
width: 100% !important;
}

.stf-video-container {
width: 100% !important;
max-width: 100% !important;
}

}