body {
    background-color: #000000;
    color: #FFF;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    align-items: center;
    overflow-x: hidden;

}


a {
    text-decoration: none;
    color: inherit;
}
.main-container {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-image: url("/assets/bk-3.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100%;

}
.wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*max-width: 1440px;*/


}
.container {
    display: flex;
    padding: 3vw 8vw 3vw 8vw ;
    flex-direction: column;
    align-items: center;
    margin: 0px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}




.header {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: -12px;
    background: #000;
}
.header-sc {
    display: flex;
    height: 5.5625rem;
    padding: 0px 4.86vw;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
}
.mobile-section {
    display: none;
}
.mobile_menu{
    display: none;
}
.header-sc .left-section{
    display: flex;
    padding: 0.875rem 0px;
    align-items: flex-end;
    gap: 0.315rem;
    align-self: stretch;
}
.header-logo-sc{
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 0.8125rem;
}

.heder-logo{
    width: 4.25rem;
    height: 2.375rem;
}

.right-section{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9vw;
    align-self: stretch;
}
.menu-sc{
    display: flex;
    align-items: flex-end;
    align-self: stretch;
}
.menu-item{
    display: flex;
    height: 3.5312rem;
    padding: 0px 0.76vw;
    justify-content: flex-end;
    align-items: center;
    gap: -6.6vw;
}
.menu-item .menu-btn{
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 0px 0.80vw;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    /*flex: 1 0 0;*/

}
.menu-btn div{
    height: 0px;
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.menu-btn:hover div{
    height: 0.0625rem;
    flex-shrink: 0;
    align-self: stretch;
    stroke-width: 0.0625rem;
    background: #8178E7;
}

.menu-btn.active div{
    height: 0.0625rem;
    flex-shrink: 0;
    align-self: stretch;
    stroke-width: 0.0625rem;
    background: #8178E7;
}

.menu-buttons{
    display: flex;
    align-items: center;
}
.lang-btn-sc{
    display: flex;
    height: 5.5625rem;
    padding: 0.8125rem 1vw;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.625rem;
}
.lang-btn{
    display: flex;
    padding: 0.4375rem 0.5625rem;
    align-items: center;
    gap: 0.3231rem;
    border-radius: 2.1875rem;
    background: rgba(255, 255, 255, 0.10);
}
.lang-btn:hover{
    background: rgba(255, 255, 255, 0.20);

}
.header .contact-form{
    display: flex;
    height: 5.5625rem;
    padding: 0.8125rem 0px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.625rem;
}
.contact-form-btn{
    display: flex;
    padding: 0.6875rem 2vw;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 49px;
    border: 0.0625rem solid transparent;
    background: linear-gradient(#171918,#171918) padding-box, linear-gradient(90deg, #26BEC8, #6C51A2) border-box;
    transition: background 2s cubic-bezier(0.77,0.2,0.05,1.0);
    text-align: center;
    white-space: nowrap;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.10);
    font-size: 0.825rem;
    font-weight: 500;
    opacity: 0.8;
}


.contact-form-btn:hover{
    background: linear-gradient(90deg, #26BEC8 0%, #6C51A2 100%) padding-box, linear-gradient(90deg, #26BEC8, #6C51A2) border-box;
}









.slogan-sc {
    padding-bottom: 90px;
}

.slogan-sc .container{
    height: 35.625rem;
    display: flex;
    padding: 8.4375rem 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    position: relative;
}

.slogan1 {
    top: 36%;
    left: 17%;
    display: flex;
    flex-direction: column;
    position: absolute;
    gap: 20px;
    z-index: 25;
}

.triangle-img {
    top: 27px;
    left: 21%;
    display: flex;
    z-index: 24;
    position: absolute;
    width: 31.125rem;
    height: 31.125rem;
    flex-shrink: 0;
}
.slogan2{
    display: none;
}
.slogan3 {
    position: absolute;
    color: #FFF;
    text-align: right;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 80px;
    font-style: normal;
    font-weight: 900;
    line-height: 75%; /* 75% */
    right: 21%;
    top: 76%;
}
.slogan3 .agency {
    color: #353535;
    font-size: 60px;
    font-weight: 700;
}
.scrolltext {
    color: #A2A4A9;
    text-align: center;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    line-height: 23px; /* 230% */
    letter-spacing: 0.0625rem;
    transform: rotate(-90deg);

}
.scroll-element svg{
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}
.scroll-element {
    position: absolute;
    right: 15%;
    display: flex;
    flex-direction: column;
    width: 42px;
    height: 146px;
    flex-shrink: 0;
    gap: 80px;
    top: 68%;

}

.team {
    max-height: 514px;
    background: rgba(214, 211, 214, 0.05);
}

.team-row{
    display: grid;
    grid-template-areas:
    "team-img aboutcard1"
    "team-img aboutcard2";
    grid-template-rows: 3fr 1fr;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;
}
.about-sc1 .team-row{
    display: grid;
    grid-template-areas:
    "team-img aboutcard1";
    grid-template-rows: 3fr;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;

}

.team-img{
    grid-area: team-img;
    display: flex;
    justify-content: center;
}
.teamimg{
    width: 100%;
    max-width: 485.143px;

}

.aboutcard1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
.aboutcard1 h1{
    font-size: 25px;
}
.aboutcard1 p{
    margin-bottom: 10px;
}
.aboutcard1 p:nth-child(2){
    font-size: 25px;
    font-weight: 600;
}
.aboutcard1 p:nth-child(3){
    color: #A2A4A9;
    line-height: 25px; /* 138.889% */
    letter-spacing: 0.18px;
}




.aboutcard2 {
    grid-area: aboutcard2;
    z-index: 27;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    align-self: stretch;
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.aboutcard2:hover{
    text-decoration: underline;
}
.aboutcard2 circle{
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.aboutcard2 path{
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.aboutcard2:hover circle {
    fill: #8178E6;
}
.aboutcard2:hover path {
    fill:#111;;
}

.about-sc2 .container {
    gap:34px
}

.g53{
    gap: 53px;
}
.container .title {
    align-self: stretch;
    text-align: center;
    font-size: 30px;
    font-weight: 600;

}
.container .text {
    align-self: stretch;
    text-align: center;
    color: #A2A4A9;
    line-height: 25px; /* 138.889% */
    letter-spacing: 0.18px;

}
.services-card{
    min-width: 301px;
    width: 100%;
    max-width: 329px;

}
.services-card .card-body{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-width: 301px;
    width: 100%;
    max-width: 329px;
    height: 335px;
    padding: 43px;

    align-items: flex-start;
    border-radius: 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.247);
    background-clip: padding-box;
    background: rgba(27, 30, 29, 0.61);
}
.services-card .card-text {
    color: #A2A4A9;
    text-align: center;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: 0.45px;
    align-self: stretch;
}
.services-card .card-title {
    text-align: center;
    font-size: 25px;
    line-height: 25px; /* 92% */
    letter-spacing: 0.75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5625rem;
    align-self: stretch;
    margin-bottom: 20px;
    min-height: 130px;
}
.services-card .card-title img{
    width: 3.4375rem;
}
.services-card .blink{
    position: absolute;
    border-radius: 50%;
    width: 31.25rem;
    height: 31.25rem;
    background: yellow;
    top: -15.625rem;
    right: -15.625rem;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.1) 30%, rgba(0, 0, 0, 0) 60%);

}
.services-card .more{
    display: none;
}
.services-card:hover .blink{
    opacity: 0.4;
    transform: translateX(-300px);
  }
.btn-more{
    justify-content: center;
    align-items: center;

    padding: 0.8125rem 2.4375rem;
    border-radius: 5px;
    border: 0.0625rem solid transparent;
    -webkit-font-smoothing:antialiased;
    background: linear-gradient(#171918,#171918) padding-box, linear-gradient(90deg, #26BEC8, #6C51A2) border-box;
    transition: background 2s ease;

}
.btn-more:hover{
    background: linear-gradient(90deg, #26BEC8 0%, #6C51A2 100%) padding-box, linear-gradient(90deg, #26BEC8, #6C51A2) border-box;
}
.card-row{
    display: flex;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}
.card-row .col,.card-grid .col{
    max-width: 329px;
    padding: 0px;
}
.careers-card {
    max-width: 329px;
}
.careers-card .card-body{
    overflow:hidden;
    position: relative;
    display: flex;
    width: 100%;
    min-width: 162px;
    max-width: 329px;
    padding: 43px;
    gap:20px;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.625rem;
    border: 0.7px solid rgba(255, 255, 255, 0.247);
    background-clip: padding-box;
    background: linear-gradient(107deg, rgba(255, 255, 255, 0.36) -120.72%, rgba(27, 30, 29, 0.36) 43.24%);

}
.careers-card-h{
    display: flex;
    flex-direction: column;
    gap:31px;
    line-height: 1.1;
}
.careers-card .cb{
    align-self: start;
}
.careers-card .lm{
    display: flex;
    align-items: center;
    gap: 1.125rem;
    align-self: stretch;
}


.careers-card .card-title{
    align-self: stretch;
    font-size: 25px;
    line-height: 23px; /* 153.333% */
    letter-spacing: 0.25px;
    min-height: 50px;
}
.careers-card .card-img{
    display: flex;
    padding: 0px 11.375rem 0.3125rem 0px;
    align-items: center;
    align-self: stretch;
}
.careers-card .card-img img{
    width: 3.4375rem;
    height: 3.4375rem;
}
.careers-card .blink{
    position: absolute;
    border-radius: 50%;
    width: 31.25rem;
    height: 31.25rem;
    background: yellow;
    top: -15.625rem;
    right: -15.625rem;
    opacity: 0;
    -webkit-font-smoothing: antialiased;
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.1) 30%, rgba(0, 0, 0, 0) 60%);
    }

.careers-card:hover .blink{
    opacity: 0.4;
    transform: translateX(-300px);
}
.careers-card-h .more{
    display: none;
}
.careers-card .lm circle{
    transition: all 0.5s  cubic-bezier(0.77,0.2,0.05,1.0);
}
.careers-card:hover .lm circle{
    fill: #8178E6;
}
.careers-card:hover .lm path{
    fill: #111;;
}
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4.375rem 1.4vw;
    background-color: #000 !important;
}
.footer .row{
    gap: 8.7vw;
}

.footerlogo-sc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
}
.footerlogo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8125rem;
}
.footerlogo img{
    width: 12.4325rem;
    height: 6.4375rem;
}
.footer-social{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    align-self: stretch;
    white-space: nowrap;
}
.social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    align-self: stretch;
}
.social-icons img{
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
}
.footerlinks-sc{
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    align-items: flex-start;
    gap: 3.5vw;
}
.tg {
    color: #A2A4A9;
}
.tv {
    color: #8178E7;
}
.tg a:hover{
    color: #FFFFFF;
}
.t15{
    font-size: 0.9375rem;
}
.t12{
    font-size: 12px;
}
.t25{
    font-size: 25px;
}
.footerlinks{
    display: flex;
    align-items: flex-start;
    gap: 3.5vw;
}
.footerlinks1{
    display: flex;
    flex-direction: row;
    gap: 3.5vw;
}
.footerlinks .footer-col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.footerlinks .footer-col .ll{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9375rem;


}
.footerlinks .contacts{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
.contacts .r1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.adresses{
    display: flex;
    align-items: center;
    gap: 14.8vw;
    align-self: stretch;
}
.adresses div{
    display: flex;
    width: 200px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4375rem;
    align-self: stretch;
}
.adresses span{
    width: 200px;
    white-space: initial;
}
.companyname{
    align-self: center;
    font-size: 24px;
    font-weight: 700;
}

.line{
    width: 100%;
    height: 0.0625rem;
    background: rgba(162, 164, 169, 0.30);
}


.services-main .container{
    gap: 5vw;
}
.card-grid {
    display: flex;

    justify-content: center;

    gap: 34px;
    flex-wrap: wrap;
}
.services-details {
    overflow: hidden;
}
.services-details .desc-rect{
    height: auto;
    min-height: 250px;
    top: 0;
    left:0;
    width: 1123.973px;
}
.services-details .desc-rect.vacancies{
    min-height: 310px;
}
.services-details .container .row{
    display: flex;

    justify-content: center;
    align-items: center;
    gap: 74px;
    align-self: stretch;
}
.image-sc {
    display: flex;
    width: 280px;
    height: 280px;
    padding: 58px 68px;
    align-items: center;
    gap: 0.625rem;
    border-radius: 12.5rem;
    background: rgba(27, 30, 29, 0.61)
}

.image-sc img{
    width: 143px;
    height: 143px;
    flex-shrink: 0;
    opacity: 0.8;
}
.services-details .description{
    position: relative;
    display: flex;
    padding: 2.1875rem 36px;
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
    flex: 1 0 0;
    border-radius: 0.625rem;


}
.desc-rect{
    position: absolute;
    right: -180px;
    top: -30px;
    padding:  16px;
    width: 958.973px;
    height: 41vh;
    border-radius: 10px;
    border: 1px solid rgba(250, 248, 248, 0.17);
    opacity: 0.37;
    background: linear-gradient(299deg, #000 39.72%, #666 151.13%);
}
.services-details .container .sd_mob{
    display: none;
}
.desc-text {
    min-width: 350px;
    display: flex;
    flex-direction: column;
    z-index: 25;
    color: #ffffff;
    opacity: 1;
    gap: 10px;
}
.desc-text .tg{
    line-height: 25px; /* 138.889% */
    letter-spacing: 0.18px;
}
.cases-card {
    min-width: 301px;
    width: 100%;
    max-width: 329px;
    border-radius: 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.247);
        background-clip: padding-box;

}

.cases-card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-width: 162px;
    width:100%;
    max-width: 329px;
    height: 330px;

    border-radius: 0.625rem;
    background: rgba(27, 30, 29, 0.61);



}
.cases-card-body-img{
    overflow: hidden;
    width: 100%;

}
.cases-card-body-img img{
    display: block;
    width: 100%;
    border-radius: 0.625rem;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.cases-card-content{
    position: absolute;
    bottom: 0;
    display: flex;
    padding: 23.406px 30.094px;
    flex-direction: column;
    align-items: flex-end;
    gap: 24.521px;
    align-self: stretch;
    border-radius: 0.625rem;
    background: linear-gradient(180deg, rgba(14, 13, 13, 0) 0%,rgba(14, 13, 13, 0.81) 30%, rgb(27, 30, 29) 100%);
    width: 100%;

}
.card-title{
    display: flex;
    align-self: stretch;

}
.card-title .card-title-row{
    display: flex;
    align-items: center;
    gap: 10.031px;
}
.card-title .card-title-row .ctr-order{
    display: flex;
    font-size: 32.323px;
    font-weight: 400;
    line-height: 24.283px; /* 75.128% */
    letter-spacing: 0.97px;
}
.card-title .card-title-row .ctr-name{
    font-size: 21.116px;
    font-weight: 400;
    line-height: 24.283px; /* 115% */
    letter-spacing: 0.633px;
}
.card-text {
    color: #A2A4A9;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.635px; /* 153.333% */
    letter-spacing: 0.45px;
}
.card-text ul{
    padding-left: 13px;
}
circle{
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.cases-card:hover circle{
    fill: #8178E6;
    fill-opacity: 1;
  }
.cases-card:hover .cases-card-body-img img{
    transform: scale(1.1);
}
.blink{
    position: absolute;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: yellow;
    bottom: -30px;
    right: -30px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.1) 30%, rgba(0, 0, 0, 0) 60%);
}

.cases-card:hover .blink{
    opacity: 0.3;
    transform: translateX(-200px);
  }


.other-cases .container{
    display: flex;
    flex-direction: column;
    gap: 74px;

}
.other-cases .title{
    margin-left: 10vw;
    align-self: start;
}
.cases-f-sc {
    overflow: hidden;
}
.cases-image-sc{
    position: relative;
    width: 384px;
    height: 515px;
}
.cases-f-img1{
    position:absolute;
    width: 254px;
    height: 327px;
    border-radius: 0.625rem;
    top:0px;
    right:0px;
}
.cases-f-img2{
    position:absolute;
    width: 243px;
    height: 243px;
    border-radius: 0.625rem;
    left:0px;
    bottom: 0px;
}
.cases_item_num{
    display: flex;
    position: absolute;
    align-items: center;
    margin-bottom: 1.5vw;
    bottom: 0px;
    right: 0px;
    gap:0.625rem;
    width: 78px;
    height: 5.625rem;
    font-size: 50px;
    font-weight: 700;
    line-height: 23px; /* 46% */
    letter-spacing: 1.5px;
}
.vb_v{
    border-radius: 0.625rem;
    stroke-width: 0.625rem;
    background: #8178E6;
    width: 0.625rem;
    height: 5.625rem;
}
.cases-f-sc .container {
    display: flex;
    padding: 4vw 10vw 4vw 10vw;
}
.cases-f-sc .container .row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 74px;
}
.cases-f-sc .description{
    position: relative;
    display: flex;
    padding: 2.1875rem 36px;
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
    flex: 1 0 0;
    border-radius: 0.625rem;
}
.cases-f-sc .desc-rect{
    left:0px
}
.case-study-sc {
    display: flex;
    padding: 5vw 10vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 65px;
    align-self: stretch;
}

.case-study-sc{
    display: flex;
    padding: 10vw 20vw;
    flex-direction: column;
    align-items: center;
    gap: 65px;
    align-self: stretch;
}
.case-study-sc .title {
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.video video{
    max-width: 56.25rem;
    width: 100%;
    max-height: 31.3125rem;
    height: 100%;
}
.gallery{
    display: flex;
    width: 100%;
    padding: 64px 0px 5.6875rem 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.1875rem;
    align-self: stretch;
}
.gallery .title{
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.long-card-sc{

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6vw;
    align-self: stretch;
}
.long-card{
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}
.lc-img img{
    width: 25.96rem;
    height: 17.3125rem;
    border-radius: 6.46px;
}
.lc-content{
    display: flex;
    min-width: 400px;
    padding: 8px 2.5rem;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
}
.lc-text{
    font-size: 0.9375rem;
    line-height: 23px; /* 153.333% */
    letter-spacing: 0.45px;
}
.summary{
    width: 100%;
    padding: 10vw 20vw;
    background: rgba(214, 211, 214, 0.05);

}
.summary-content{
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
}
.summary-title{
    font-size: 30px;
    font-weight: 600;
}
.summary-text{
    line-height: 23px; /* 153.333% */
    letter-spacing: 0.45px;
}
.about-sc2 .card-body {
    background: linear-gradient(107deg, rgba(255, 255, 255, 0.36) -120.72%, rgba(27, 30, 29, 0.36) 43.24%);
}
.title-o{
    text-align: start;
    align-self: stretch;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    white-space: nowrap;
}
.vacancies-main .container{
    flex-direction: column;
    gap:74px
}
.vacancies .btn-more{
    z-index: 30;
    border-radius: 49px;
}

/* YOU CAN CHANGE THIS max-width AS YOU NEED */
.parent-owl {
    max-width: 1000px;
    padding: 0 55px;
    margin: 0 auto;
}

.owl-dots {
    display: none;
}
.owl-nav{
    height: 0;
}

/* Carousel container */
.owl-carousel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* Optional: rounded corners for images */
}

/* Navigation buttons */
.custom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #444;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s;
}

.custom-nav.prev {
  left: -50px; /* Position to the left of the carousel */
}

.custom-nav.next {
  right: -50px; /* Position to the right of the carousel */
}

.custom-nav:hover {
  background-color: #222; /* Darker background on hover */
}

/* Adjust spacing for better visibility */
.owl-carousel .owl-stage-outer {
  padding: 10px 0;
}

/* Center the carousel */
.owl-carousel {
  position: relative;
  margin: 0 auto;
}
/*contact forms*/
.contact-form-section{
    display: flex;
    height: 100vh;
    max-width: 1440px;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding:10vh 8vw;
    position: fixed;
    top:0px;
    z-index: 60;
    background: #1616169d;
}
.cf-content1,.cf-content2,.cf-content3{
    border-radius: 10px;
    background: #161616;
}

.cf1 textarea{
    height: 141px;
    resize: none;
}
.cf1 .title{
    margin-bottom: 18px;
}
.cf1 {
    max-width: 500px;
    width: 100%;
    padding: 42px 35px;
    display: flex;
    flex-direction: column;
    gap:10px;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);

    background-image: linear-gradient(135deg ,rgba(7, 120, 185, 0.329)15%,rgba(0, 0, 0, 0.30)40%,rgba(0, 0, 0, 0.3)60%,rgba(7, 120, 185, 0.329)85%);
}
.cf1 input,.cf1 select,.cf1 textarea{
    width: 100%;
    display: flex;
    padding: 18px 22px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border:none;
    background: rgba(0, 0, 0, 0.16);


}
.wrap-input {
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.16);
}

.wrap-input input, .wrap-input textarea {
    color: #fff;
}
.cf1 .btn-more{
    display: flex;
    align-self: center;
    margin-top: 18px;
    padding: 10px;
    width: 136px;
    height: 45.333px;
    border-radius: 55.494px;
    border: 0.782px solid transparent;
    -webkit-font-smoothing: antialiased;
    background: transparent;
    transition: background 2s cubic-bezier(0.77,0.2,0.05,1.0);
    color: #FFF;
    font-weight: 500;
    opacity: 0.8;
    background: linear-gradient(90deg,#161616 0%, #161616 100%) padding-box, linear-gradient(90deg, #26BEC8, #6C51A2) border-box;
}
.cf1 .btn-more:hover{
    background: linear-gradient(90deg, #26BEC8 0%, #6C51A2 100%) padding-box, linear-gradient(90deg, #26BEC8, #6C51A2) border-box;
}
input:focus ,textarea:focus{
    outline: none;
    caret-color: white;
}

.wrap-input:has(input[type=text]:focus), .wrap-input:has(textarea[type=text]:focus){
    background: linear-gradient(90deg,#161616 0%, #161616 100%) padding-box, linear-gradient(90deg, #26BEC8, #6C51A2) border-box;
    border-image: linear-gradient(90deg, #26BEC8, #6C51A2);
    border-radius: 5px;
}


.cf-content2 .cf1,.cf-content3 .cf1{
    gap:28px;

}
.drag_drop{
    border-radius: 5px;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    width: 100%;
    height: 154px;
    background-image: url("assets/Drag_drop.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}
.cf-content3 .title2{
    text-align: center;
}



@media screen and (max-width: 1400px) {

    .vacancies .desc-rect{
        height: 39vw;
    }
}
@media screen and (max-width: 1000px) {

    .main-container {
        background-image: url("/assets/bk-mobile-2.png")
    }
    .desc-text{
        min-width: 300px;
    }
    .case-study-sc {
        padding: 15px;
        gap: 0;
        margin-bottom: 50px;
    }
    .gallery{
        padding: 0;
        gap: 0;
    }
    .case-study-sc .title {
        margin-top: 50px;
    }
    .case-study-sc .video {
        margin-top: 30px;
    }
    .lc-img img {
        height: auto;
        width: 100%;
        margin-top: 50px;
    }

    .container {
        padding: 40px 30px;
        flex-direction: column;
        justify-content: center;
    }
    .header{
        background: linear-gradient(180deg, #000 -29.21%, rgba(0, 0, 0, 0.00) 100%);
        -webkit-font-smoothing: antialiased;
        transition: all 0.8s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .header-sc{
        align-items: center;
        justify-content: right;
        gap: 14%;
        z-index: 51;
    }
    .mobile-section {
        position: relative;
        height: 5.5625rem;
        flex-direction: column;
        gap: 0.625rem;
        justify-content: flex-end;
        padding: 0.8125rem 1vw;
        display: flex;
    }
    .mobile-section input{
        display: flex;
        width: 40px;
        height: 47px;
        position: absolute;
        cursor: pointer;
        opacity: 0;
        z-index: 54;
    }
    .mobile-section span{
        display: flex;
        width: 38px;
        height: 2px;
        margin-bottom: 2px;
        position: relative;
        background: #ffffff;
        border-radius: 3px;
        z-index: 54;
        transform-origin: 5px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .mobile-section span:first-child{
        transform-origin: 0% 0%;
    }
    .mobile-section span:nth-last-child(2){
        transform-origin: 0% 100%;
    }
    input:checked ~ span{
        opacity: 1;
        transform: rotate(45deg) translate(-3px, -1px);
        background: #36383F;
    }
    input:checked ~ span:nth-last-child(3){
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    input:checked ~ span:nth-last-child(2){
        transform: rotate(-45deg) translate(5px, -5px);;
    }

    .mobile_menu{
        position: absolute;
        width: 87vw;
        display: flex;
        left: 17px;
    }
    .menu-sc {
        display: none;

    }

    .mb-menu_items{
        position: absolute;
        top:0;
        z-index: 50;
        width: 104vw;
        height: 100vh;
        left:-9vw;
        padding: 113px 9vw 0 9vw;
        display: flex;
        flex-direction: column;
        gap: 16px;
        font-size: 25px;
        -webkit-font-smoothing: antialiased;
        transform: translate(0, -120vh);
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

    }
    .mobile-section input:checked ~ .mb-menu_items{
        transform: none;
        background: linear-gradient(135deg, #000 60%, rgba(0, 0, 0, 0.00) 98.71%);
    }

    .slogan-sc .container{
        position: relative;
        padding: 11.7vw 7vw;
    }
    .slogan1{
        left: 115px;
        gap:unset;
    }
    .slogan1 svg{
        width: 42.3vw;
    }
    .triangle-img{
        top: 10%;
        left: 30%;
        display: flex;
        z-index: 24;
        position: absolute;
        width: 375px;
        height: 375px;
    }
    .slogan2{
        display: block;
    }
    .slogan2 img{
        display: block;
        position: absolute;
        width: 188px;
        height: 92px;
        bottom: 60px;
        left: 38px;
    }
    .slogan3{
        display: none;
    }
    .scroll-element{
        display: none;
    }
    .team{
        max-height: none;
    }
    .team-row{
        display: grid;
        grid-template-areas:
        "aboutcard1"
        "team-img"
        "aboutcard2";
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 40px;

    }
    .about-sc1 .team-row{
        display: grid;
        grid-template-areas:
        "team-img"
        "aboutcard1";
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 40px;

    }
    .teamimg{
        max-width: 368px;
    }
    .footer{
        display: block;
        width: 100%;
        padding: 30px;
    }
    .footerlogo-sc {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 33px;
    }

    .footerlogo img{
        width: 94.353px;
        height: 48.836px;
    }
    .footer-social{
        gap: 0px;
        font-size: 9.977px;
    }
    .footer-social .companyname{
        font-size: 15.964px;
    }

    .footer-social .social-icons{
        padding-top: 8px;
    }
    .footer-social .social-icons img{
        width: 16.629px;
        height: 16.629px;
    }
    .footer-social *{
        align-self: start;
    }
    .footerlinks-sc{
        align-items:normal;
        gap:2.08rem;
    }
    .footerlinks-sc .row{
        width:100%
    }
    .footerlinks{
        width:100%;
        flex-direction: column;
        padding-right: 0px;
        gap:2rem;
    }
    .footerlinks1{
        display: block;
        /*justify-content: space-between;*/
        /*align-items: flex-start;*/
        /*align-self: stretch;*/
        /*gap:initial;*/
    }
    .footerlinks .contacts{
        flex-direction: row;
        align-items: flex-start;
        gap: 59px;
    }
    .footerlinks .contacts *{
        font-size: 13px;
        color: #5B5B5B;
    }
    .footerlinks .footer-col{
        margin-top: 20px;
        gap: 0.7rem;
    }
    .footerlinks .footer-col .ll{
        gap:0.5rem;
    }
    .footerlinks-sc .line{
        width:100%;
    }
    .adresses {
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        padding-right: 0px;
        align-items: center;
        gap: initial;
        align-self: stretch;
    }
    .adresses *{
        width: 100%;

    }
    .adresses span{
        width: 100%;
    }
    .footer .ff{
        flex:none;
        flex-shrink:0 !important;
    }
    .desc-rect {
        height: 59vh;
    }
    .long-card{
        flex-wrap: wrap;
        justify-content: center;
        gap:24px
    }
    .rev{
        flex-wrap: wrap-reverse;
    }
    .lc-content {
        padding: 0px;
        width: 100%;
        min-width: 300px;
    }
    .summary{
        padding: 5vw 10vw;
    }
    .parent-owl {
        width: 100vw;
        padding: 15px;
    }
    .services-details .container .sd_mob{
        display: block;
        align-items: start;
    }

    .sd_mob .title,.sd_mob .text{
        text-align: start;
    }
    .services-details .image-sc{
        position: absolute;
        top: 31%;
        right:10vw;
        width: 128px;
        height: 128px;
        justify-content: center;
        background: rgba(55, 55, 55, 0.61);


    }
    .services-details .image-sc img {
        width: 65.337px;
        height: 65.337px;
      }
    .services-details .desc-text{
        max-width: 698px;
    }
    .vacancies .image-sc{
       top: 14%;
       z-index: 30;
    }
    .vacancies .description{
        margin-top: 23px;
     }
}
@media screen and (max-width: 850px) {
    .about-sc2 .card-body{
        min-width: 230px;
    }
    .services-details .image-sc{
        top: 31%;
    }
    .vacancies .image-sc{
        top: 13%;
     }
     .vacancies .desc-rect{
        height: 46vw
     }
}

@media screen and (max-width: 740px) {
    .container .text{
        text-align: start;
    }
    .container .title{
        text-align: start;
        white-space:unset;
    }

    .header-logo-sc .companyname{

        display: none;
    }
    .card-row{
        gap:25px;
    }
    .card-row .col {
        display: flex;
        justify-content: center;
        max-width: 100%;
        width: 100%;
        padding: 0px;
    }
    .card-grid .col{
        display: flex;
        justify-content: center;
        max-width: 100%;
        width: 100%;
        padding: 0px;
    }
    .services-card {
        max-width: 380px;
        width: 100%;

    }
    .services-card .card-body{
        display: flex;
        min-width: 100%;
        height: auto;
        padding: 24.054px 24.883px;
        flex-direction: column;
        align-items: center;
        gap: 22.395px;
        align-self: stretch;

        background: linear-gradient(107deg, rgba(255, 255, 255, 0.36) -120.72%, rgba(27, 30, 29, 0.36) 43.24%);
    }

    .services-card .more{
        display: block;
    }
    .services-card .card-title{
        font-size: 19px;
        flex-direction: row;
        justify-content: space-between;
        height: 33px;
        white-space: unset;
        text-align: left;
        gap: 10px;
        min-height: auto;
        margin-bottom: 0;
    }
    .careers-card .card-title{
        align-self: auto;
        min-height: auto;
    }
    .services-card .card-title img {
        width: 33px;
        height: 33px;

    }
    .services-card .card-text{
        text-align: start;
    }

    .services-card .blink{
        width: 378px;
        height: 292px;
        top: -128px;
        right: 120px;
        opacity: 0.5;
        transition:none;
    }
    .services-card:hover .blink{
        transform: none;
    }
    .cases-card {
        max-width: 380px;
        width: 100%;
    }
    .cases-card .cases-card-body{
        min-width: 100%;
        background: linear-gradient(35deg, rgba(255, 255, 255, 0.55) -143.92%, rgba(0, 0, 0, 0.55) 40.79%);
    }
    .careers-card{
        max-width: 350px;
        width: 100%;
        height: auto;
    }
    .careers-card .card-body{
        /*max-width: 100%;*/
        width: 100%;
        gap: 22px;
        padding: 24px;
    }
    .careers-card-h{
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap:10px;
    }
    .careers-card-h .card-title{
        text-align: left;
        /*white-space: nowrap;*/
        font-size: 18.945px;
    }
    .careers-card-h .card-text{
        font-size: 14px;
    }
    .careers-card-h .more{
        display: block;
    }
    .careers-card .lm{
        display: none;
    }
    .careers-card .card-img {
        padding: 0px;
    }
    .services-main .row-gap-3{
        padding: 9vw;
    }
    .cases_item_num{
        bottom:0px;
    }
    .cases-image-sc{
        height: 308px;
    }
    .cases-f-img1{
        width: 200px;
        height: auto;
        right: 30px;
    }
    .cases-f-img2{
        width: 120px;
        height: auto;
        left: 50px;
    }
    .vb_v {
        height: 50px;
    }
    .cases_item_num{
        right: 20%;
        bottom: -30px;
    }
    .title-o{
        text-align: start;

    }
    .services-details .image-sc{
        top: 34%;
    }
    .vacancies-main .container{
        /*padding: 5vw 7vh;*/
        gap: 34px;
    }

    .careers-card-h .card-img img{
        width: 33.178px;
        height: 33.178px;
    }
    .vacancies .image-sc{
        top: 13%;
     }
     .vacancies .desc-rect{
        height: 61vw;
     }
}


@media screen and (max-width: 600px) {
    .slogan-sc {
        padding-bottom: 30px;
    }
    .slogan-sc .container {
        height: 300px;
        padding-top: 0;
    }
    .slogan2 img {
        bottom: 0;
    }
    .slogan1 {
        /*left: 83px;*/
        top: 19%;
    }
    .triangle-img{
        /*top: 17%;*/
        display: flex;
        z-index: 24;
        position: absolute;
        width: 50vw;
        height: 50vw;
        left: 43%;
        top: 0;
    }
    .services-details .desc-rect {
        height: 49vh;
    }
    .services-details .image-sc{
        top: 37%;
    }
    .vacancies .image-sc{
        top: 13%;
     }
     .vacancies .desc-rect{
        height: 82vw;
     }

    }
    @media screen and (max-width: 500px) {
        .services-details .image-sc{
            top: 100px;
            z-index: 2;
            right: 10px;
        }
        .vacancies .image-sc{
            top: 13%;
         }
         .vacancies .desc-rect{
            height: 92vw;
         }
    }

/* Gallery Container */
.owl-carousel .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.3s ease-in-out;
}

.owl-carousel .gallery-item:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.lightbox .lb-image {
    border: 0 !important;
}
.lb-outerContainer {
    background: none !important;
}
.lb-details {
    display: none;
}

/* Image Styling */
.owl-carousel .gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.3s ease-in-out;
}

/* Lightbox Styling */
.lb-data .lb-caption {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
    color: #fff;
}

/* Lightbox Navigation Buttons */
.lb-outerContainer .lb-prev, .lb-outerContainer .lb-next {
    opacity: .3 !important;
}

.lb-close {
    position: absolute;
    top: -70px;
    right: 20px;
}

.lb-prev:hover, .lb-next:hover {
    /*background-color: rgba(255, 255, 255, 0.7) !important;*/
}