* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.d-none {
    display: none;
}
body {
    background-color: #0E0C17;;
}

@media (max-width: 768px) {
  .clients__tabs {
    flex-direction: column;
    align-items: center;
  }

  .clients__tab {

  }
  .clients {
        padding: 0 10px!important;

    }
    clients__tab {
    font-size: 15px;

}
}





.clients__tabs {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 40px;
}

.clients__tab {
    padding: 3px 33px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid transparent;
    cursor: pointer;
    font-size:20px;
    font-weight: 300;
    transition: 0.3s ease;
}

/*.clients__tab.is-active {*/
/*  color: #fff;*/
/*  border: 1px solid transparent;*/
/*  border-radius: 20px;*/

/*background: linear-gradient(90deg, rgba(30, 79, 255, 0.1) 0%, rgba(30, 79, 255, 0.5) 100%);*/
/*border-image: linear-gradient(90deg, #1E4FFF 0%, #FFFFFF 100%) 1;*/
/*}*/

.clients__tab.is-active {
  position: relative;
  border-radius: 40px;
  background: linear-gradient(
    90deg,
    rgba(30, 79, 255, 0.1) 0%,
    rgba(30, 79, 255, 0.5) 100%
  );
}

.clients__tab.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 40px;
  background: linear-gradient(90deg, #1E4FFF 0%, #FFFFFF 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.clients__tab.is-active {
  color: #ffffff;
}





.main-banner {
    position: absolute;
    top: 0vh;
    left: 0;
    width: 100%;
    z-index: -2;
}
.main-banner__descr {
    width: 1255px;
    margin: 176px auto 0;
    font-family: 'Montserrat';
    color: #FFFFFF;
}
.main-banner__header {
    position: relative;
    margin-bottom: 10px;
    max-width: 685px;
}
.main-banner__header h1 {
    max-width: 685px;
    font-weight: 700;
    font-size: 48px;
    line-height: 70px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
}
.main-banner__stripe {
    position: absolute;
    top: 30px;
    left: -10px;
    z-index: -1;
}
.main-banner__stripe2 {
    position: absolute;
    top: 100px;
    right: 16px;
    z-index: -1;
}
.main-banner__subheader {
    position: relative;
    max-width: 603px;
}
.main-banner__subheader h2 {
    max-width: 603px;
    font-weight: 700;
    font-size: 20px;
    line-height: 40px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
}
.main-banner__stripe3 {
    position: absolute;
    top: 12.5px;
    right: 14px;
    z-index: -1;
}
.vid {
    margin: 245px auto 160px;
    width: 877px;
    display: flex;
    flex-direction: column;
}
.about-us__subtitle {
    margin: 0;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 48px;
    line-height: 50px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 15px 18px 25px #1e4fff;
    position: absolute;
    bottom: -4vw;
    left: 36vw;
}
.vid__video {
    width: 877px;
    min-height: 516px;
}

.clients {
    width: 1255px;
    margin: 0 auto;
}
.clients img {
    width: 0;
}
.clients__title {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    position: relative;
    width: fit-content;
    margin: 0 auto 60px;
}
.clients__title .clients__stripe {
    position: absolute;
    right: -1px;
    bottom: 2px;
    z-index: -1;
    width: 400px;
}
.clients__logo {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    margin-bottom: 70px;
}
.clients__img {
    width: 13%;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .3s;
    margin: 35px;
}
.clients__img:hover {
    transform: scale(1.1);
}


/* Ukr-China */
.clients__img_ukrch {
    background-image: url('../image/clients/client_logo_uachine_white.png');
}
.clients__img_ukrch:hover {
    background-image: url('../image/clients/client_logo_uachine_color.png');
}

/* Inverita */
.clients__img_inver {
    background-image: url('../image/clients/client_logo_enverita_white.png');
}
.clients__img_inver:hover {
    background-image: url('../image/clients/client_logo_enverita_color.png');
}

/* Courabie (только white версия, color нет) */
.clients__img_coura {
    background-image: url('../image/clients/client_logo_courabie_white.png');
}
.clients__img_coura:hover {
    background-image: url('../image/clients/client_logo_courabie_white.png');
}

/* Polpharma */
.clients__img_polp {
    background-image: url('../image/clients/client_logo_cdolpharma_white.png');
}
.clients__img_polp:hover {
    background-image: url('../image/clients/client_logo_cdolpharma_color.png');
}

/* Nadiia */
.clients__img_nadia {
    background-image: url('../image/clients/client_logo_nadiia_white.png');
}
.clients__img_nadia:hover {
    background-image: url('../image/clients/client_logo_nadiia_color.png');
}

/* Citronelle */
.clients__img_citro {
    background-image: url('../image/clients/client_logo_citronelle_white.png');
}
.clients__img_citro:hover {
    background-image: url('../image/clients/client_logo_citronelle_color.png');
}

/* Dataforest */
.clients__img_dataf {
    background-image: url('../image/clients/client_logo_dataforest_white.png');
}
.clients__img_dataf:hover {
    background-image: url('../image/clients/client_logo_dataforest_color.png');
}






.clients__img_allo {
    background-image: url('../image/clients/allo_icon.png');
    background-position-y: 48%;
}
.clients__img_allo:hover {
    background-image: url('../image/clients/02_allo_icon.png');
}

.clients__img_iqos {
    background-image: url('../image/clients/iqos_icon.png');
}
.clients__img_iqos:hover {
    background-image: url('../image/clients/02_iqos_icon.png');
}

.clients__img_kiev {
    background-image: url('../image/clients/kievstar_icon.png');
    background-position-y: 42%;
}
.clients__img_kiev:hover {
    background-image: url('../image/clients/02_kievstar_icon.png');
}

.clients__img_bett {
    background-image: url('../image/clients/betterme_icon.png');
}
.clients__img_bett:hover {
    background-image: url('../image/clients/02_betterme_icon.png');
}

.clients__img_exim {
    background-image: url('../image/clients/eximbank_icon.png');
}
.clients__img_exim:hover {
    background-image: url('../image/clients/02_eximbank_icon.png');
}

.clients__img_peni {
    background-image: url('../image/clients/peninsula_icon.png');
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}
.clients__img_peni:hover {
    background-image: url('../image/clients/peninsula_icon.png');
    filter: none;
}

.clients__img_tis {
    background-image: url('../image/clients/tis_icon.png');
}
.clients__img_tis:hover {
    background-image: url('../image/clients/02_tis_icon.png');
}

.clients__img_free {
    background-image: url('../image/clients/freedom_icon.png');
}
.clients__img_free:hover {
    background-image: url('../image/clients/02_freedom_icon.png');
}

.clients__img_serv {
    background-image: url('../image/clients/serventa_icon.png');
}
.clients__img_serv:hover {
    background-image: url('../image/clients/02_serventa_icon.png');
}

.clients__img_comp {
    background-image: url('../image/clients/compass_icon.png');
}
.clients__img_comp:hover {
    background-image: url('../image/clients/02_compass_icon.png');
}

.clients__img_kredo {
    background-image: url('../image/clients/kredobank_icon.png');
}
.clients__img_kredo:hover {
    background-image: url('../image/clients/02_kredobank_icon.png');
}

.clients__img_minimal {
    background-image: url('../image/clients/minimalist_icon.png');
}
.clients__img_minimal:hover {
    background-image: url('../image/clients/02_minimalist_icon.png');
}

.clients__img_foxtrot {
    background-image: url('../image/clients/foxtrot_icon.png');
}
.clients__img_foxtrot:hover {
    background-image: url('../image/clients/02_foxtrot_icon.png');
}

.clients__img_farmak {
    background-image: url('../image/clients/farmak_icon.png');
}
.clients__img_farmak:hover {
    background-image: url('../image/clients/02_farmak_icon.png');
}

.clients__img_znak {
    background-image: url('../image/clients/znak_icon.png');
}
.clients__img_znak:hover {
    background-image: url('../image/clients/02_znak_icon.png');
}

.clients__img_ley {
    background-image: url('../image/clients/ley_icon.png');
}
.clients__img_ley:hover {
    background-image: url('../image/clients/02_ley_icon.png');
}


.clients__img_okko {
    background-image: url('../image/clients/okko_icon.png');
}
.clients__img_okko:hover {
    background-image: url('../image/clients/02_okko_icon.png');
}

.clients__img_bob {
    background-image: url('../image/clients/bob_snail_icon.png');
}
.clients__img_bob:hover {
    background-image: url('../image/clients/02_bob_snail_icon.png');
}

.clients__img_biosphera {
    background-image: url('../image/clients/biosphera_logo_white.png');
}
.clients__img_biosphera:hover {
    background-image: url('../image/clients/biosphera_logo_blue.png');
}
.clients__img_formi {
    background-image: url('../image/clients/formi-logo_white.png');
}
.clients__img_romantica {
    background-image: url('../image/clients/romantica-project_logo_white.png');
}
.clients__img_sa-pase {
    background-image: url('../image/clients/sa-pase_logo-white.png');
}
.clients__img_childrens-cities {
    background-image: url('../image/clients/clients__img_childrens-cities.png');
}
.clients__img_childrens-cities:hover {
    background-image: url('../image/clients/02_clients__img_childrens-cities.png');
}

.clients__img_cdd-j {
    background-image: url('../image/clients/cdd-j-logo_white.png');
}
.clients__img_logo-uk {
    background-image: url('../image/clients/logo-white-uk.png');
}
.clients__img_logo-uk:hover {
    background-image: url('../image/clients/logo-uk.png');
}
.clients__img_LR {
    background-image: url('../image/clients/LR_logo_white.png');
}
.clients__img_LR:hover {
    background-image: url('../image/clients/LR_logo_color.png');
}


.clients__img_auchan {
    background-image: url('../image/clients/Auchan-Logo_white.png');
}
.clients__img_auchan:hover {
    background-image: url('../image/clients/Auchan-Logo_color.png');
}
.clients__img_favbet {
    background-image: url('../image/clients/Favbet_logo_white.png');
}
.clients__img_favbet:hover {
    background-image: url('../image/clients/Favbet_logo_color.png');
}
.clients__img_invog {
    background-image: url('../image/clients/invogue_fashion-group_white.png');
}
.clients__img_invog:hover {
    background-image: url('../image/clients/invogue_fashion-group_white.png');
}
.clients__img_mamah {
    background-image: url('../image/clients/mamahohotala_logo_white.png');
}
.clients__img_mamah:hover {
    background-image: url('../image/clients/mamahohotala_logo_color.png');
}
.clients__img_mhp {
    background-image: url('../image/clients/mhp_logo_icon_white.png');
}
.clients__img_mhp:hover {
    background-image: url('../image/clients/mhp_logo_icon_color.png');
}
.clients__img_nestle {
    background-image: url('../image/clients/nestle_logo_white.png');
}
.clients__img_nestle:hover {
    background-image: url('../image/clients/nestle_logo_color.png');
}
.clients__img_prosp {
    background-image: url('../image/clients/prosperitas_logo_white.png');
}
.clients__img_prosp:hover {
    background-image: url('../image/clients/prosperitas_logo_color.png');
}
.clients__img_aaa {
    background-image: url('../image/clients/siena_clients_aaa_ua_white.png');
}
.clients__img_aaa:hover {
    background-image: url('../image/clients/siena_clients_aaa_ua_color.png');
}
.clients__img_davinesl {
    background-image: url('../image/clients/siena_clients_davinesl_ua_white.png');
}
.clients__img_davinesl:hover {
    background-image: url('../image/clients/siena_clients_davinesl_ua_color.png');
}
.clients__img_gunia {
    background-image: url('../image/clients/gunia_projects_ua_siena_clints_white.png');
}
.clients__img_gunia:hover {
    background-image: url('../image/clients/gunia_projects_ua_siena_clints_blue.png');
}
.clients__img_promova {
    background-image: url('../image/clients/siena_clients_promova_ua_white.png');
}
.clients__img_promova:hover {
    background-image: url('../image/clients/siena_clients_promova_ua_color.png');
}
.clients__img_teus {
    background-image: url('../image/clients/siena_clients_teus-terminal_ua_white.png');
}
.clients__img_teus:hover {
    background-image: url('../image/clients/siena_clients_teus-terminal_ua_color.png');
}
.clients__img_vilia {
    background-image: url('../image/clients/siena_clients_vilia_ua_white.png');
}
.clients__img_vilia:hover {
    background-image: url('../image/clients/siena_clients_vilia_ua_color.png');
}
.clients__img_mangovua {
    background-image: url('../image/clients/siena_clients_mangovua_ua_white.png');
}
.clients__img_mangovua:hover {
    background-image: url('../image/clients/siena_clients_mangovua_ua_white.png');
}
.clients__img_ferro {
    background-image: url('../image/clients/FERRO_siena_clients_white.png');
}
.clients__img_ferro:hover {
    background-image: url('../image/clients/FERRO_siena_clients_white.png');
}


.clients__img_begemoti {
    background-image: url('../image/clients/begemoti_logo_white.png');
}
.clients__img_begemoti:hover {
    background-image: url('../image/clients/begemoti_logo_color.png');
}
.clients__img_roseri {
    background-image: url('../image/clients/roseri_logo_white.png');
}
.clients__img_roseri:hover {
    background-image: url('../image/clients/roseri_logo_golor.png');
}
.clients__img_abank {
    background-image: url('../image/clients/Abank_logo_white.png');
}
.clients__img_abank:hover {
    background-image: url('../image/clients/Abank_logo_color.png');
}
.clients__img_petrykivka {
    background-image: url('../image/clients/Petrykivka-logo_white.png');
}
.clients__img_petrykivka:hover {
    background-image: url('../image/clients/Petrykivka-logo_color.png');
}
.clients__img_arterium {
    background-image: url('../image/clients/arterium-logo_white.png');
}
.clients__img_arterium:hover {
    background-image: url('../image/clients/arterium-logo_color.png');
}
.clients__img_citrus {
    background-image: url('../image/clients/citrus_logo_white.png');
}
.clients__img_citrus:hover {
    background-image: url('../image/clients/citrus_logo_color.png');
}
.clients__img_katycorso {
    background-image: url('../image/clients/katy-corso_logo_white.png');
}
.clients__img_katycorso:hover {
    background-image: url('../image/clients/katy-corso_logo_color.png');
}
.clients__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 60px;
    color: #fff;
    background: #1E4FFF;
    border-radius: 30px;
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 20px;
    margin: 0 auto;
}
.clients__btn:hover {
    color: #fff;
}




@media (max-width: 600px) {
    .d-mob-none {
        display: none;
    }
    .d-mob-block {
        display: block;
    }
    .main-banner {
        width: 100%;
        top: -5vh;
    }
    .main-banner__descr {
        width: 100%;
        margin-top: 115px;
        padding: 0 15px;
    }
    .main-banner__header h1 {
        width: 93%;
        font-size: 28px;
        line-height: 40px;
    }
    .main-banner__stripe {
        top: 21px;
        left: -2px;
    }
    .main-banner__stripe2 {
        top: 101px;
        left: 7px;
    }
    .main-banner__subheader {
        margin-top: 226px;
    }
    .main-banner__subheader h2 {
        width: 95%;
        margin: 0 auto;
        font-size: 15px;
        line-height: 24px;
        text-align: center;
    }
    footer {
        margin-top: 50px;
    }
    .vid {
        width: 100%;
        margin-top: 80px;
        flex-direction: column-reverse;
        margin-bottom: 0px;
    }
    .about-us__subtitle {
        margin: 15px auto 0px;
        font-size: 14px;
        line-height: 40px;
    }
    .vid__video {
        width: 100%;
        min-height: 250px;
    }

    .clients {
        width: 100%;
        padding: 0 30px;
        margin-bottom: 150px;
    }
    .clients__img {
        width: 41%;
        margin: 10px;
    }
    .clients__title {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 30px;
        margin-top: 70px;
    }
    .clients__title .clients__stripe {
        position: absolute;
        right: 0;
        bottom: 7px;
        z-index: -1;
        width: 265px;
    }
    .clients__logo {
        margin-bottom: 70px;
        justify-content: space-between;
    }
}