/* =========================
   HEADER BASE STYLES
========================= */
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 16px); /* мінімум 14px, максимум 16px */
  background: linear-gradient(91deg, #0f172a 0%, #0a1123 100%)
}
a:visited{
  color: #fff;
}
#site-header {
  width: 100%;
  position: relative;
  z-index: 1000;
  box-shadow: 0 4px 12px #070a12;
  padding: 0px 0px 15px 0px;
  background: linear-gradient(135deg, #0f172a 0%, #0a1123 100%);
}
.iti{
  display: block!important;
}
.follow a svg{
  width: 50px;
  height: 50px;
}
.follow h5{
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 10px;
}

.iti__flag-container{
  background-color: #ededed;
    z-index: 9;
    border-radius: 10px 0px 0px 10px;
}
#phone{
  padding: 40px 26px 18px 50px!important;
}
.head.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  transition: padding 0.3s ease;
}
.icon-menu{
  width: 50px;
    height: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.error-message{
  color: red;
  font-size: 17px;
  font-weight: 500;
}
body.active{
  overflow-x: hidden !important;
overflow-y: hidden !important;
}
/* =========================
   LOGO
========================= */
.top-top{
  max-width: 1400px;
    margin: 0 auto;
    display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.top-top .left-top, .top-top .right-top{
  display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
}
.link-social a, .follow a{
  text-decoration: none;
}
.left-top span, .right-top span{
  color: #ff9800;
  font-size: 15px;
}
.top-top .right-top{
  display: flex;
flex-direction: row;
align-items: center;
}
.name-comp-footer div{
  margin-bottom: 10px;
  font-size: 18px;
  color: #e2e2e2;
}
.name-comp-footer .fop{
  font-weight: 500;
}
.link-social a{
  margin-left: 5px;
}
.left-top p, .left-top a{
  color: #fff;
}
.left-top a{
  text-decoration: none;
}
.left-top .add{
  color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}
.link-social svg{
  width: 25px;
  height: 25px;
}
.link-social svg:hover{
  fill:#ff9800;
}
.follow svg:hover{
  fill:#fff;
}
.right-form{
  width: 55%;
}
.input-tel .label-phone{
  left: 51px;
    top: 26%;
}
.left-text-form h4{
  color: #fff;
  font-size: 50px;
  letter-spacing: -1.8px;
      font-weight: 100;

}
.contact-bottom{
  position: relative;
}
.fon-message{
  width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    bottom: -10%;
}
.fon-message svg{
  height: 100%;
width: 100%;
}
.adr-kyiv, .adr-dnipto{
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    color: #fff;
}
.info-adr span{
  font-weight: 600;
  font-size: 20px;
}
.info-adr p{
  font-size: 18px;
}
.adr-right .info-adr{
  padding-left: 20px;
}
.left-text-form h4 span{
  color: #f87600;
  font-size: 50px;
    font-weight: 500;
}
#popup-success, #popup-error{
  display: none;
    opacity: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: #0c1325c9;
    transition: opacity 0.4s ease;
}
#popup-success.active, #popup-error.active{
  opacity: 1;
}
#popup-success.fade-out, #popup-error.fade-out{
  opacity: 0;
  transition: opacity 0.4s ease;
}
.close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.popup-content .close:hover svg .cls-4{
  fill: #ff7f00;
stroke: #ff7f00;
  transition: opacity 0.4s ease;
}
.popup-content .phone-popup{
  color: #ff7f00;
  text-decoration: none;
}
.popup-content .phone-popup:hover{
  text-decoration: underline;
}
.popup-main{
  width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.popup-content span, .popup-content p, .popup-content h5{
  font-size: 30px;
  color: #fff;
  font-weight: 600;
  display: block;
  text-align: center;
}
.popup-content p, .popup-content h5{
  font-size: 25px;
  font-weight: 100;
  margin: 0;
      padding-bottom: 15px;
}
.popup-content h5 span{
  color: #ff7f00;
  display: inline;
  font-size: 25px;
}
.popup-content p{
  font-weight: 500;
}
.popup-content span{
  margin-bottom: 25px;
}
.popup-content p{
  font-size: 23px;
}
.popup-content{
  border-radius: 10px;
background: linear-gradient(91deg, #0f172a 0%, #0a1123 100%);
max-width: 1000px;
overflow: hidden;
position: relative;
width: 100%;
border: 1px solid #ff7f00;
padding: 70px;
}
.smil svg{
  width: 30%;
}
.smil{
  text-align: center;
  margin-bottom: 25px;
}
.grecaptcha-badge{
  display: none;
}
.left-text-form{
  width: 45%;
}
#leadForm input, #leadForm textarea{
border-radius: 10px;
padding: 40px 26px 18px 18px;
color: #030b28;
font-size: 20px;
border: none;
width: 100%;
}
.btn-go:hover{
  cursor: pointer;
  background: #fff;
  color:  rgb(255, 101, 0);
transition: all .3s ease;
border: 2px solid rgb(255, 101, 0);
    transform: translateY(-4px);
}
.btn-go:hover .arrow-btn{
  background-color: rgb(255, 101, 0);
}
.btn-go{
  background: rgb(255, 101, 0);
    background: -webkit-linear-gradient(left, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    background: -o-linear-gradient(left, rgba(255,101,0,1) 0%, rgba(237,146,0,1) 97%);
    background: linear-gradient(to right, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    border: none;
    border-radius: 10px;
    align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 14px 14px 14px 24px;
    font-size: 18px;
    font-weight: 500;
    text-transform: none;
    line-height: 18px;
    transition: all .3s ease;
    color: #fff;
    position: absolute;
bottom: 0;
right: 0;
margin-bottom: 24px;
transition: all .3s ease;
margin-right: 20px;
}
.btn-go .arrow-btn{
  border-radius: 100%;
    display: inline-block;
    position: relative;
    background-color: #fff;
    height: 34px;
    width: 34px;
    margin-left: 10px;
    transition: inherit;
}
.arrow-btn svg{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.info-form p{
  font-size: 11px;
    margin-bottom: 5px;
    color: #ffffff99;
    line-height: 1.6;
}
.info-form p a{
  color: #ffffff99;
}
#leadForm input:focus, #leadForm textarea{
  outline: none;
}
#leadForm textarea{
  border-radius: 10px;
    resize: none;
    min-height: 11em;
    overflow-y: auto;
    padding-top: 40px;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 75px;
        display: block;
}
.logo img {
  height: 58px;
  width: auto;
  display: block;
}
.text-phone{
  margin-right: 5px;
}
.left-top .phone:hover{

  color: #ff9800;
}
.breadcrumb a{
  text-decoration: none;
}
.breadcrumb_last{
  color: #ff9800;
}
.player-container{
  width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.items-player iframe{
  position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 2px #000000
}

@supports (aspect-ratio: 16 / 9) {
    .player-container {
        padding-bottom: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .player-container iframe {
        position: static;
        width: 100%;
        height: 100%;
    }
}
/* =========================
   CALL TO ACTION BUTTON
========================= */

.button-top a {
  display: inline-block;
  background: rgb(255, 101, 0);
  background: -webkit-linear-gradient(left, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
  background: -o-linear-gradient(left, rgba(255,101,0,1) 0%, rgba(237,146,0,1) 97%);
  background: linear-gradient(to right, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
  color: #fff;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 16px);
  transition: all 0.3s ease;
  box-shadow: black 0px 0px 20px 5px;
}
.button-top a:hover {
  background-color: #e43f1b;
  transform: translateY(-4px);
}
.mobile-main-menu{
  display: none;
}
.icon-menu .icon-item{
  height: 3px;
   width: 100%;
   background: linear-gradient(to right, #ff6500 0%, #ed9200 97%);
   transition: transform 0.4s ease, opacity 0.3s ease;
}
.icon-menu.active .item1 {
  transform: rotate(45deg) translate(6px, 6px);
}

.icon-menu.active .item2 {
  opacity: 0;
}
.mobile-main-menu .active{
  justify-content: space-around;
}
.icon-menu.active .item3 {
  transform: rotate(-45deg) translate(6px, -6px);
}
.mobile-mainin-menu{
  width: 100vw;
    height: calc(100vh - 77px);
    z-index: 20;
    position: fixed;
    left: 0;
    top: 80px;
    transition: all .3s ease;
    transform: translateX(100%);
    overflow: initial;
}
.mobile-mainin-menu.active{
  transform: translateX(0);
}

.mobile-menu {
  width: 100%;
height: 100%;
border-radius: 30px 30px 0 0;
background: linear-gradient(359deg, #060912 0%, #0a1123 100%);
box-shadow: 0px 0px 7px 2px #070a12;
transition: all .3s linear;
overflow: scroll;
overflow-x: hidden;
}

.mobile-menu.active {
  max-height: 100%;
}

/* =========================
   PHONE LINK
========================= */

.header-navs {
    display: flex;
    align-items: center;
    gap: 30px;
}

.items-add-video{
  position: relative;
  height: 100%;
object-fit: cover;
width: 100%;
max-width: 420px;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
}
.video-overlay-singl .play-icon{
  color: #f87600;
}
.video-overlay-singl{
  transition: transform 0.4s ease;
}
.link-add-video h4{
  margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
}
.link-add-video{
  color: #fff;
  text-decoration: none;
}
.link-add-video:hover{
  color: #fc6d03;
}
.link-add-video:hover .video-overlay-singl{
  display: none;
  transition: transform 0.4s ease;
}
.link-add-video:hover .items-add-video img{
    transform: scale(1.03);
}
.items-add-video img{
  width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.video-overlay-singl{
  position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 55%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.4s ease-in-out;
pointer-events: none;
}
.main-menu, .language-switcher {
    display: flex;
    align-items: center;
}
.description-comp{
  display: flex;
flex-direction: row;
align-items: center;
margin-top: 2%;
}
.line-description{
  height: 1px;
    background: #525252;
    width: 90%;
    margin: auto;
        margin-top: 2%;
}
.name-comp h3{
  color: #fff;
}
.name-comp h4{
  color: #fff;
}
.name-comp{
  margin-left: 30px;
}
/* Стилі для основних списків меню */
/* Зауважте: .language-switcher ul буде перетворено JS на .language-switcher .menu */
.main-menu .menu, .language-switcher .menu {
    display: flex;
    list-style: none;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.main-menu .menu > li, .language-switcher .menu > li {
    position: relative;
    /* Фіксуємо тут прогалини, оскільки мовний перемикач має лише 1 видимий пункт */
    gap: 0;
}
.main-menu a{
  transition: all 0.3s ease;
}
.main-menu a, .language-switcher a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-size: 17px;
  }

.main-menu a:hover, .language-switcher a:hover {
    color: #fc6d03;
}
.main-menu a:hover{
      transform: translateY(-2px);
}

/* КОЛІР АКТИВНОСТІ: Батьківський пункт меню, коли підменю відкрите */
.menu-item-has-children.open > a {
    color: #ff4b2b;
}

/* Іконка-стрілка */
.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    /* SVG для стрілки (білий колір) */
    background: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/></svg>") no-repeat center;
    background-size: contain;
    transition: transform 0.3s ease;
}

/* Стрілка при відкритому меню (.open клас від JS) - перевернута та кольорова */
.menu-item-has-children.open > a::after {
    transform: rotate(180deg);
    /* Фільтр для зміни кольору стрілки на акцентний (#ff4b2b) */
    filter: brightness(0) saturate(100%) invert(24%) sepia(91%) saturate(3015%) hue-rotate(345deg) brightness(107%) contrast(105%);
}

/* Підменю (Спільні стилі для MAIN та LANGUAGE) */
.main-menu .sub-menu, .language-switcher .sub-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    background: #222;
    border-radius: 0 0 12px 12px;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
}

/* Позиціонування підменю для Головного меню */
.main-menu .sub-menu {
    left: 0;
    min-width: 220px;
}

/* Позиціонування підменю для Мовного перемикача (right: 0) */
.language-switcher .sub-menu {
    right: 0;
    left: auto;
    min-width: 120px;
}

/* СТИЛЬ ВІДКРИТОГО МЕНЮ (Клас .open додається JS) */
.menu-item-has-children.open > .sub-menu {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
}

/* Підпункти */
.main-menu .sub-menu a, .language-switcher .sub-menu a {
    padding: 10px 18px;
    color: #ddd;
    font-size: 15px;
}

.main-menu .sub-menu a:hover, .language-switcher .sub-menu a:hover {
    background: #333;
    color: #ff4b2b;
}

/* Стиль для поточної мови - вона є тригером */
.language-switcher .current-lang.menu-item-has-children.open > a {
    color: #ff4b2b !important;
}

/* перший екран */
#first-screen{
  padding-top: 3%;
  padding-bottom: 3%;
}
.first-screen-add, .main-portfolio{
  max-width: 1400px;
  margin: 0 auto;
}
.portfolio-items{
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.portfolio-items .items-player{
  width: 77%;
}
.portfolio-items .items-add{
  width: 20%;
}
.items-add-video img{
  border-radius: 10px;
}
.items-add-video h4{
  color: #fff;
}
.breadcrumb{
  margin-top: 20px;
  margin-bottom: 40px;
}
.flex-main{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    /* flex-flow: nowrap; */
    flex-wrap: nowrap;
    align-content: stretch;
    width:100%;
    height: 100%;
}
.flex-main > div{
    width:50%;
    display: grid;
    justify-content: end;
    align-content: space-between;
  }
.h1 span, .h2 span {
  color: #ff9800;
}
video{
  width: 100%;
}
.first-screen-video video{
  height: 100%;
  box-shadow: 0px 0px 15px 14px #070a12;
  border-radius: 20px;
}
.first-screen-info h1{
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  font-size: 27px;
  margin-top: 0;
}
.first-screen-info h2{
  color: #ffffff;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}

/* Обгортка з градієнтом */
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.main-slider{
  padding-top: 90px;
}

/* Контейнер слайдера (вікно перегляду) */
.slide {
    position: relative;
    width: 100%;
    height: 100px; /* Збільшена висота вікна */
    overflow: hidden; /* Обрізає списки, що знаходяться поза вікном */
}

/* Стилі списку (контейнерів для міст) */
.slide ul {
    list-style: none;
    display: flex; /* РОБИТЬ ЕЛЕМЕНТИ ГОРИЗОНТАЛЬНИМИ */
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%; /* Займає всю висоту вікна */
    position: absolute;
    justify-content: space-between; /* Розподіл елементів по ширині */
    /* Плавний вертикальний перехід для UL, контролюється JS */
    transition: top 0.5s ease-in-out;
    align-items: end;
}

/* Стилі для створення ефекту "хвилі" */
.slide ul li {
    height: 85px; /* Збільшена висота елемента */
    width: 120px;
    flex-shrink: 0;
    font-size: 1.75rem; /* Збільшений шрифт */
    color: #ECF0F1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

    /* Налаштування для анімації хвилі */
    opacity: 0; /* За замовчуванням приховано */
    /* Збільшена висота підйому на 200px (для більш виразного ефекту) */
    transform: translateY(200px);
    /* Плавний перехід з "пружним" ефектом (overshoot) */
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
}

/* Елементи стають видимими і піднімаються на місце */
.slide ul li.visible {
    opacity: 1;
    transform: translateY(0);
}
.main-slider h3{
  color: #fff;
  font-size: 19px;
  font-weight: 500;
}
.for{
padding-bottom: 43px;
padding-top: 86px;
}
.services{
  padding-bottom: 43px;
  padding-top: 86px;

}
.possibilities-main{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  margin-bottom: 50px;
    margin-top: 60px;
}
.possibilities-list{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.possibilities-add{
  width: 32%;
  transition: all 1.3s ease;
      margin-bottom: 30px;

      padding: 1px 13px 0px 13px;

}
.input-tel{
  display: inline-block;
}
.footer-form{
  max-width: 1400px;
    margin: 0 auto;
    display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
margin-top: 100px;
position: relative;
z-index: 9;
}
.right-form #input-name{
  width: 100%;
}
.input{
  margin-bottom: 30px;
  position: relative;
  --accent: #2563eb;
  --error: #dc2626;
  --success: #16a34a;
}

/* INPUT */
.input input, textarea {
  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

/* LABEL */
.input label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) scale(1);
  transform-origin: left top;
  font-size: 19px;
  color: #000000;
  pointer-events: none;
  padding: 0 6px;
 outline: none;
  transition:
    transform 0.35s cubic-bezier(.4,0,.2,1),
    color 0.25s ease;
}
.textarea label{
  top: 15%;
  background-color: #fff;
}
/* 2. ПІДЙОМ ЛЕЙБЛА (Коли є текст АБО фокус) */
.input input:focus + label,
.input input:not(:placeholder-shown) + label,
.input input:-webkit-autofill + label {
  transform: translateY(-31px) scale(0.85);
  font-size: 20px;
}

.input textarea:focus + label,
.input textarea:not(:placeholder-shown) + label {
  transform: translateY(-27px) scale(0.85);
}

/* 3. КОЛІР ЛЕЙБЛА ТА РАМКИ ПРИ ФОКУСІ (Активний стан) */
.input input:focus + label,
.input textarea:focus + label,
.input-tel:focus-within label {
  color: #fe6a00; /* Помаранчевий тільки коли клацнули */
}

.input input:focus,
.input textarea:focus {
  border-color: #fe6a00;
  /* ОСЬ ТВІЙ БОКС ШЕДОУ — тепер він тільки при фокусі! */
  box-shadow: 0 0 0 3px rgba(254, 106, 0, 0.15);
  transform: translateY(-1px);
}

/* 4. СТАН, КОЛИ ПРОСТО Є ТЕКСТ (Не у фокусі) */
.input input:not(:placeholder-shown):not(:focus),
.input textarea:not(:placeholder-shown):not(:focus) {
  border-color: #ccc; /* Рамка залишається спокійною */
}
.input-tel .iti:focus-within .iti__flag-container {
  transform: translateY(-1px);
}
/* MESSAGE */
.input .message {
  position: absolute;
  left: 12px;
  bottom: -18px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.25s ease;
}
.phone-footer-main a{
  color: #e2e2e2;
}
.phone-footer-main a:hover{
  color: rgb(248, 118, 0);
}
.animation-style .animation-style-block, .blog .blog-bloc{
  display: block;
}
.animation-style a, .blog a{
  color: rgb(226, 226, 226);
  font-size: 18px;
  text-decoration: none;
  margin-bottom: 10px;
}
.animation-style a:hover, .blog a:hover{
   color: rgb(248, 118, 0);
}
/* SAFARI AUTOFILL FIX */
input:-webkit-autofill + label, textarea:-webkit-autofill + label {
  transform: translateY(-28px) scale(0.85);
}

/* FALLBACK якщо :placeholder-shown не підтримується */
@supports not selector(:placeholder-shown) {
  .input label {
    transform: translateY(-28px) scale(0.85);
  }
}
.input-tel, .input-email{
  width: 48%;
}
.right-form .input-email{
  float: right;
}
/* Загальні стилі заголовка (аналог text-center mb-12) */
        .main-header {
            text-align: center;
            margin-bottom: 3rem; /* mb-12 (3rem) */
        }

        /* Стилі H1 (аналог text-4xl font-extrabold text-gray-800) */
        .header-title {
            font-size: 2.25rem;
            line-height: 2.5rem;
            font-weight: 800;
            color: #1f2937;
        }

        /* Стилі субтитру (аналог text-xl text-gray-600 mt-2) */
        .header-subtitle {
            font-size: 1.25rem;
            line-height: 1.75rem;
            color: #4b5563;
            margin-top: 0.5rem;
        }

        /* ======================================================= */
        /* Flexbox та Розміри (VANILLA) */
        /* ======================================================= */
        .portrolio-main, .services-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        .portrolio-flex {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        /* Спільний стиль для картки */
        .portrolio-item {
            /* 24% - залишаємо простір між блоками */
            width: 24%;
            margin-bottom: 20px;
            margin-top: 20px;
            min-height: 150px;
            position: relative;

            /* Важливо для Flexbox, щоб посилання заповнювало весь простір картки */
            display: flex;
            flex-direction: column;
        }

        /* Стилі для посилання, яке охоплює всю картку */
        .video-link {
            /* Базові стилі картки (аналог bg-white shadow-lg overflow-hidden transition duration-300) */
            border-radius: 0.75rem;
            transition: box-shadow 0.3s ease-in-out;
            overflow: hidden;
            text-decoration: none; /* Прибираємо підкреслення */
            color: inherit; /* Успадковуємо колір тексту */
            display: block; /* Важливо для посилання */
            height: 100%;
        }

        /* Стиль наведення (аналог hover:shadow-2xl) */
        .video-link:hover {
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
        }

        .first-item {
            /* Трохи зменшуємо до 49% для кращого розподілу простору */
            width: 49%;
        }

        .first-item .video-link {
            /* Стиль головного блоку (аналог shadow-2xl hover:shadow-3xl) */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
        }

        /* Стиль наведення для головного блоку (аналог hover:shadow-3xl) */
        .first-item .video-link:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
        }

        /* Адаптивність для мобільних пристроїв */
        @media (max-width: 768px) {
            .portrolio-item,
            .first-item {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }
        }

        /* ======================================================= */
        /* УПРАВЛІННЯ ВИСОТОЮ (Співвідношенням сторін) */
        /* ======================================================= */

        /* Базовий контейнер для співвідношення сторін (для малих блоків) */
        .portrolio-content-wrapper {
            position: relative;
            width: 100%;
            height: 0;
            overflow: hidden;
            border-radius: 0.75rem;
            /* Співвідношення сторін для малих блоків, щоб вони збігалися з висотою великого */
            padding-bottom: 115.67%;
        }

        /* Перевизначення радіусу для обгортки всередині посилання */
        .video-link .portrolio-content-wrapper {
             border-radius: 0; /* Прибираємо радіус у вкладеного елемента */
        }

        /* Перевизначення співвідношення для великого блоку (стандартний 16:9) */
        .first-item .portrolio-content-wrapper {
            padding-bottom: 56.25%;
        }

        /* Відео-плеєр, який заповнює 100% контейнера */
        .video-player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }

        /* Ефект наведення на контейнер, щоб відео трохи збільшувалося */
        .video-link:hover .video-player {
            transform: scale(1.03);
        }

        /* ======================================================= */
        /* СТИЛІ ДЛЯ ОБКЛАДИНКИ ВІДЕО */
        /* ======================================================= */
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.4s ease-in-out;
            /* Дозволяємо клік для мобільної логіки (хоча тепер ми від неї відмовились) */
            pointer-events: none;
        }
        .video-overlay.hidden {
            opacity: 0;
        }

        /* При наведенні миші оверлей зникає */
        .video-link:hover .video-overlay:not(.extra-overlay) {
             opacity: 0;
        }


        .video-overlay .play-icon {
            color: #f87600;
            font-size: 3rem;
            opacity: 0.9;
            transition: opacity 0.3s ease-in-out;
        }

        /* Спеціальні стилі для додаткового блоку */
        .portrolio-extra-block {
            padding: 0;
        }
        .logo-comp{
          width: 12%;
        }
.name-comp{
  width: 88%;
}
.problem, .solution{
  display: flex;
}
.problem-title, .solution-title{
  width: 15%;
}
.problem-add, .solution-add{
  width: 85%;
}
.problem-title h4, .solution h4{
  color: #fff;
font-size: 22px;
font-weight: 500;
}
.name-comp h4{
  font-size: 17px;
    font-weight: 500;
}
.name-comp h3{
  color: #f87600;
  font-size: 20px;
}
.problem-add h2, .solution-add p{
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  border-left: 1px solid #f87600;
padding-left: 15px;
}
.info-single, .solution{
  margin-top: 5%;
}
.logo-container{
  aspect-ratio: 1 / 1;
border-radius: 50%;
background: #000000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0px 0px 14px 0px #5c2302;
}
.logo-container img{
  width: 80%;
height: 80%;
object-fit: contain;
}
        .extra-overlay {
            pointer-events: auto;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .extra-block-title {
            font-size: 1.25rem; /* text-xl */
            line-height: 1.75rem;
            font-weight: 600; /* font-semibold */
            color: #1f2937; /* text-gray-800 */
        }
        .extra-block-subtitle {
            color: #6b7280; /* text-gray-500 */
            margin-top: 0.25rem; /* mt-1 */
        }

        /* Стилі для повідомлення про помилку */
        .error-content {
            position: absolute;
            inset: 0; /* top:0, right:0, bottom:0, left:0 */
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fee2e2; /* bg-red-50 */
            border-radius: 0.75rem;
            padding: 1rem;
        }
        .error-title {
            font-weight: bold;
            color: #dc2626; /* text-red-600 */
        }
        .error-subtitle {
            font-size: 0.875rem; /* text-sm */
            line-height: 1.25rem;
            color: #ef4444; /* text-red-500 */
            margin-top: 0.25rem; /* mt-1 */
        }
        h3 span{
            color: #ff9800;
        }
        .possibilities-add h3{
          font-weight: 600;
          font-size: 15px;
          text-transform: uppercase;
          margin-top: 0;
          color: #fff;
        }
        .possibilities-add h4{
          font-weight: 600;
          font-size: 30px;
          margin-top: 17%;
          color: #fff;
        }
        .possibilities-row span{
          color: #ff9800;
        }
        .possibilities-list .active{
                box-shadow: 1px 0px 18px 4px rgb(0 0 0);
            transform: scale(1.07);
          transition: all 1s ease;
        }
        .possibilities-js{
            border-radius: 0.75rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px #070a12;
      background: linear-gradient(
359deg, rgb(12, 20, 38) 47% 50%, rgb(92, 35, 2) 100%);

        }
        .possibilities-add p{
          color: #fff;
        }
        .items-add .add-info{
          display: flex;
          color: #fff;
          margin-top: 0;
        }
        .add-info span{
          width: 25px;
    margin-right: 12px;
    color: #f87600;
        }
        .possibilities-js h4{
          text-align: center;
          font-size: 19px;
          margin-top: 0;
        }
        .lottie-container{
          width: 100%;
          height: 180px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 1rem;
        }
        .portrolio-main h3{
          font-size: 30px;
          color: #ffff;
          text-align: center;
          margin-bottom: 0;
          margin-top: 50px;
          position: relative;

        }
        .portrolio-main h3::before, .services-container h3::before, .slider-main-rev h3::before{
          content: '';
    position: absolute;
    width: 50px;
    height: 4px;
    background: -webkit-linear-gradient(left, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    background: -o-linear-gradient(left, rgba(255,101,0,1) 0%, rgba(237,146,0,1) 97%);
    background: linear-gradient(to right, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    top: 50%;
margin-left: -70px;
        }
        .portrolio-main h3::after, .services-container h3::after, .slider-main-rev h3::after{
          content: '';
    position: absolute;
    width: 50px;
    height: 4px;
    background: -webkit-linear-gradient(left, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    background: -o-linear-gradient(left, rgba(255,101,0,1) 0%, rgba(237,146,0,1) 97%);
    background: linear-gradient(to right, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    top: 50%;
margin-left: 25px;
        }
        .portrolio-main p{
          font-size: 18px;
          color: #ffff;
          text-align: center;
          margin-bottom: 50px;
          font-weight: 500;
        }
        .portrolio-main p span{
          color: #ff9800;
        }
        .add-portfolio{
          text-align: center;
          margin-top: 50px;
          margin-bottom: 30px;
        }
        .add-portfolio a{
          display: inline-block;
          background: rgb(255, 101, 0);
          background: -webkit-linear-gradient(left, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
          background: -o-linear-gradient(left, rgba(255,101,0,1) 0%, rgba(237,146,0,1) 97%);
          background: linear-gradient(to right, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
          color: #fff;
          text-decoration: none;
          padding: 15px 30px;
          border-radius: 10px;
          font-weight: 400;
          font-size: clamp(14px, 1.2vw, 16px);
          transition: all 0.3s
          ease;
          box-shadow: black 0px 0px 14px 5px
          font-size: 18px;
        }
        .add-portfolio a:hover{
          background-color: #e43f1b;
          transform: translateY(-4px);
        }
        .button-header a{
          padding: 17px 35px;
          font-size: 18px;
        }
.services-item{
      background: linear-gradient(135deg, rgb(15, 23, 42) 0%, rgb(10, 17, 35) 100%);
      border-radius: 20px;
}
.services-item-video{
  border-radius: 20px 0 0 20px;
    overflow: hidden;
}
.services-item{
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 80px;
    box-shadow: 0 4px 12px #070a12;
}
.services-item-rg{
  background: linear-gradient(271deg, rgb(12, 20, 38) 18%, rgb(92, 35, 2) 100%);
}
.services-item-le{
    background: linear-gradient(90deg, rgb(12, 20, 38) 18%, rgb(92, 35, 2) 100%);
}
.services-item-video, .services-item-text{
  width: 50%;
}
.adr-main{
  display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top: 20px;
}
.adr-left{
  width: 60%;
}
.add-footer{
  display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.add-footer h4{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
.footer-line{
  height: 1px;
  width: 90%;
  background: rgb(82, 82, 82);
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.adr-right{
  width: 40%;
  display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-end;
}
.adr-left .meeting-off{
  font-weight: 500;
  font-size: 16px;
}
.meeting-off span{
  color: #f87600;
}
.adr-right svg{
  width: 100px;
}
.adr-left h4{
  color: #f87600;
  font-size: 22px;
  font-weight: 500;
}
.adr-left p {
  color: #fff;
    font-size: 18px;
    font-weight: 400;
}
footer{
  margin-top: 5%;
box-shadow: 1px -5px 12px #070a12;
padding: 0px 0px 15px 0px;
}
.site-info{
  max-width: 1400px;
      margin: 0px auto;
}
.services-item-video video{
  height: 100%;
    object-fit: cover;
}
.services-item-text span{
  color: #ff9800;
  font-weight: 500;
  font-size: 12px;
text-transform: uppercase;
}
.services-item-text h4{
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
    margin-top: 20px;
}
.services-item-text p{
  color: #c9c9c9;
  font-weight: 400;
  font-size: 17px;
}
.services-item-text{
  display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    padding-left: 6%;
    padding-right: 2%;
    padding-bottom: 90px;
    padding-top: 90px;
}
.services-link{
  display: inline-block;
    background: rgb(255, 101, 0);
    background: -webkit-linear-gradient(left, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    background: -o-linear-gradient(left, rgba(255,101,0,1) 0%, rgba(237,146,0,1) 97%);
    background: linear-gradient(to right, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 16px);
    transition: all 0.3s
ease;
    box-shadow: black 0px 0px 20px 4px;
}
.services-link:hover{
transform: translateY(-4px);
color: #fff;
}
.services .services-container h3{
  font-size: 30px;
    text-align: center;
    margin-bottom: 0px;
    color: #fff;
    position: relative;
}
.services .services-container p{
  font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 50px;
font-weight: 500;
color: #fff;
}
.services .services-container p span{
  color: #ff9800;
}
.services-item .services-item-text p{
  text-align: left;
  margin-top: 0px;
  margin-bottom: 25px;
  font-weight: 100;
  font-size: 18px;
}
.add-services-item a{
  display: inline-block;
background: rgb(255, 101, 0);
background: -webkit-linear-gradient(left, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
background: -o-linear-gradient(left, rgba(255,101,0,1) 0%, rgba(237,146,0,1) 97%);
background: linear-gradient(to right, rgba(255, 101, 0, 1) 0%, rgba(237, 146, 0, 1) 97%);
color: #fff;
text-decoration: none;
padding: 20px 35px;
border-radius: 10px;
font-weight: 400;
font-size: clamp(14px, 1.2vw, 16px);
transition: all 0.3s
ease;
font-size: 18px;
color: #fff;
box-shadow: black 0px 0px 20px 4px;
}
.add-services-item a:hover{
  background-color: #e43f1b;
  transform: translateY(-4px);
}
.add-services-item{
  text-align: center;
}
.services-item-video-right{
  border-radius: 0 20px 20px 0;
}
.slider-main-rev{

}
.client-manager{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
      justify-content: space-evenly;
      align-items: center;
}
.slider-main-items{
  display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 100px;
padding-bottom: 100px;
}
.text-slider-main-rev{
  width: 30%;
  padding-left: 2%;
}
.text-slider-main-rev p{
  color: #fff;
}
.slider-main-rev h3{
  color: #fff;
  text-align: center;
    font-size: 30px;
position: relative;
}

.slider-main-rev h4{
  color: #fff;
  font-weight: 500;
  text-align: center;
  font-size: 18px;
}
.slider-main-rev h4 span{
  color: #ff9800;
    text-transform: none;
}
.slider-slider-main-rev{
    width: 70%;
}
.text-client-manager{
  color: #fff;
}
.text-client-manager{
  width: 60%;
}
.img-client-manager{
  width: 40%;
}
.portfolio-title{
  color: #fff;
  font-size: 26px;
}
.client-manager-icon{
  position: absolute;
    z-index: 0;
    margin-top: -71px;
    margin-left: 15px;
}
.text-client-manager h4, .text-client-manager p, .text-client-manager span{
  position: relative;
  z-index: 1;
}
.carouseli {
  position: relative;
  width: 100%;
  height: 285px;
  margin: 0 auto;
}

.carousel-content {
  position: relative;
  overflow: hidden;
  transition: width .4s;
  height: 100%;
}

.sliders {
  height: 100%;
  position: absolute;
  z-index: 1;
  transition: left .4s cubic-bezier(.47,.13,.15,.89);
  padding-left: 10px;
}


.nav {
  position: absolute;
  background-color: rgba(150,150,150,.3);
  width: 20px;
  height: 20px;
  z-index: 2;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  outline: none;
  color: white;
  -webkit-user-select: none;
}
.carousel-arrow-icon-left {
  margin-left: 5px;
  margin-top: 2px;
}

.carousel-arrow-icon-right {
  margin-left: 7px;
  margin-top: 2px;
}

.client-manager-main{
  box-shadow: 0px 20px 11px 5px #090d18;
background: linear-gradient(177deg, #0e162900 18%, #5c2302 100%);
margin-top: 100px;
}
.img-client-manager img{
  display: flex;
}
.text-client-manager h4{
  font-size: 19px;
}
.text-client-manager p{
  font-size: 17px;
font-weight: 500;
}
.text-client-manager span{
  font-size: 15px;
color: #bfbfbf;
}
.carousel-content .sliders img{
  height: 100%;
  object-fit: contain;
}