*{

    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;

}

body.font-vn section[data-name="utp"] .headline,
body.font-vn section[data-name="about-us"] .headline,
body.font-vn section[data-name="utp"] .offer .desc,
body.font-vn section[data-name="services"] .headline,
body.font-vn section[data-name="portfolio"] .headline,
body.font-vn .menu .links a,
body.font-vn footer .headline,
body.font-vn .popup .title{

    font-family: 'Inter', sans-serif !important;
    font-weight: bold;

}
body.font-vn .menu .links a{

    font-size: 24px;
    line-height: 150%;

}

body.font-vn .menu .info .text{

    font-size: 14px;

}


body.font-vn section[data-name="utp"] .headline{

    font-size: 80px;
    line-height: 150%;
    margin-top: 340px;

}

body.font-vn section[data-name="utp"] .offer .desc{

    font-size: 32px;
    line-height: 150%;
    font-weight: 600;

}

body.font-vn section[data-name="about-us"] .headline{

    font-weight: bold;
    font-size: 42px;
    line-height: 150%;

}

body.font-vn section[data-name="services"] .headline{

    font-weight: bold;
    font-size: 42px;
    line-height: 150%;

}

body.font-vn section[data-name="portfolio"] .headline{

    font-weight: bold;
    font-size: 42px;
    line-height: 150%;

}

body.font-vn section[data-name="portfolio"] .headline.sub{

    font-size: 32px;

}

body.font-vn section[data-name="series"] .card .params li .value{

    padding-left: 128px;

}

body.font-vn footer .headline{

    font-size: 50px;

}

body.font-vn .popup .title{

    font-size: 32px;

}

@media all and (max-width: 1440px){

    body.font-vn section[data-name="utp"] .headline{

        font-size: 72px;
        line-height: 150%;
        margin-top: 346px;
    
    }

    body.font-vn section[data-name="utp"] .offer .desc{

        font-size: 28px;
        line-height: 150%;
        font-weight: 600;
    
    }

    body.font-vn section[data-name="about-us"] .headline{

        font-size: 38px;
        line-height: 150%;
    
    }

    body.font-vn section[data-name="services"] .headline{

        font-size: 38px;
        line-height: 150%;
    
    }

    body.font-vn section[data-name="portfolio"] .headline{

        font-size: 38px;
        line-height: 150%;
    
    }

    body.font-vn section[data-name="portfolio"] .headline.sub{

        font-size: 32px;
    
    }
    body.font-vn section[data-name="series"] .card .params li .name{

        width: auto;
        max-width: 50%;

    }

    body.font-vn section[data-name="series"] .card .params li .value{

        padding-left: 84px;
    
    }

    body.font-vn footer .headline{

        font-size: 50px;
    
    }
    
    body.font-vn .popup .title{
    
        font-size: 32px;
    
    }

}
@media all and (max-width: 1200px){

    body.font-vn section[data-name="utp"] .headline{

        font-size: 48px;
        line-height: 64px;
        margin-top: 304px;
    
    }

    body.font-vn section[data-name="about-us"] .headline{

        font-size: 28px;
        line-height: 150%;
    
    }

    body.font-vn section[data-name="services"] .headline{

        font-size: 28px;
        line-height: 150%;
    
    }

    body.font-vn section[data-name="portfolio"] .headline{

        font-size: 28px;
        line-height: 150%;
    
    }

    body.font-vn section[data-name="portfolio"] .headline.sub{

        font-size: 20px;
        
    }

    body.font-vn section[data-name="series"] .card .params li .name{

        width: auto;
        max-width: 50%;

    }

    body.font-vn section[data-name="series"] .card .params li .value{

        padding-left: 0px;
    
    }

    body.font-vn footer .headline{

        font-size: 28px;
        line-height: 34px;
    
    }
    
    body.font-vn .popup .title{
    
        font-size: 24px;
    
    }

}



.mobile-hamburger{

    display: none;

}

html{

    overflow-x: hidden;

}
html.no-scroll{

    overflow: hidden;

}

body{

    font-family: 'Inter', sans-serif;
    width: 100vw;
    overflow-x: hidden;

}

body.no-scroll{

    overflow: hidden;

}

input{

    font-family: 'Inter', sans-serif;

}

a{

    text-decoration: none;

}

[data-action="scroll"]{

    cursor: pointer;

}

ul{

    list-style: none;

}

.link-hover{

    transition: all 0.2s;

}

.link-hover:hover{

    transition: all 0.2s;
    opacity: 0.7;

}

.fx{

    display: flex;
    flex-wrap:wrap;

}

.fx-jc-c{

    justify-content: center;

}

.fx-jc-sb{

    justify-content: space-between;

}

.fx-jc-e{

    justify-content: flex-end;

}

.fx-ai-e{

    align-items: flex-end;

}

.fx-ai-c{

    align-items: center;

}

.fx-ai-s{

    align-items: flex-start;

}

.fx-ac-sb{

    align-content: space-between;

}

.mt-30{

    margin-top: 30px;

}

.container{

    width: 1440px;
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin: auto;

}

.btn{

    padding: 0px 50px;
    height: 50px;
    cursor: pointer;
    background: none;
    position: relative;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: capitalize;
    color: #424341;
    z-index: 0;

}

.btn .icon-arrow{

    width: 11px;
    height: 14px;
    margin-left: 10px;

}

.btn::after{

    content:'';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    box-sizing: border-box;
    border: 1px solid #424341;
    transition: all 0.2s linear;

}

.btn:hover::after{

    transition: all 0.2s linear;
    opacity: 0.7;
    transform: scale(1.08);

}

.relative{

    position: relative;

}

header{

    width: 100vw;
    height: 70px;
    position: absolute;
    top:20px;
    left:0px;
    z-index: 2;

}

header .logo,header .logo img{

    height: 70px;

}

header nav{

    height: 50px;
    position: relative;

}

header nav ul{

    gap:0px 47px;

}

header nav a{

    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #424341;
    transition: all 0.2s linear;
    display: block;
    text-align: center;

}

header nav a:hover{

    transition: all 0.2s linear;
    opacity: 0.7;
    transform: scale(1.08);

}

header .lang{

    position: absolute;
    right: 40px;
    top:90px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

}

header .lang .icon{

    width: 21px;
    height: 21px;
    object-fit: contain;
    object-position: 50% 50%;
    margin-right: 8px;

}

header .lang .list{

    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    color: #424341;

}

header .lang .list .select{

    display: flex;
    flex-wrap: wrap;
    
}

header .lang .list .select .sep{

    margin-left: 4px;
    margin-right: 4px;

}

header .lang .list .select a{

    color: #424341;
    opacity: 0.4;
    transition: all 0.4s;

}

header .lang .list .select a:hover{

    transition: all 0.4s;
    opacity: 1;

}

footer{

    padding: 100px 0px;
    background: #424341;

}

footer .headline{

    width: 100%;
    font-family: "Bebas Neue", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    line-height: 72px;
    color: #FFFFFF;
    text-transform: uppercase;

}

footer .headline span{

    color: #6E9ED4;

}

footer .info{

    margin-top: 40px;
    width: 340px;
    display: flex;
    flex-wrap: wrap;
    gap:40px;
    
}

footer .info.mobile{

    display: none;

}

footer .info .text{

    width: 100%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;

}

footer .info .text.medium{

    font-weight: 500;

}

footer .info .text.sub-icon{

    position: relative;

    padding-left: 32px;

}

footer .info .text.sub-icon img{

    position: absolute;
    width: 20px;
    left:0;
    top:50%;
    transform: translateY(-50%);

}

footer .form{

    width: 670px;
    max-width: 100%;
    gap:46px;
    margin-top: 30px;

}

footer .form .field-input{

    width: 100%;

}

footer .form .field-input input{

    padding:10px;
    width: 100%;
    background: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    transition: all 0.2s linear;
}
footer .form .field-input input:hover,footer .form .field-input input:focus{

    border-bottom: 1px solid #6E9ED4;
    transition: all 0.2s linear;

}

footer .form .btn{

    color:#fff;
    padding: 0px 32px;

}

footer .form .btn::after{

    border: 1px solid #fff;

}
footer .form .btn:hover::after{

    border: 1px solid #6E9ED4;

}


footer .copyright{

    width: 100%;
    margin-top: 100px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #FFFFFF;
    opacity: 0.7;

}

main{

    background: #fff;
    width: 100%;

}

section[data-name="utp"]{

    width: 100%;
    height: 800px;
    position: relative;
    z-index: 0;

}
section[data-name="utp"]::after{

    background-image: url('../image/background-utp.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    content:'';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top:0px;
    left:0px;
}

section[data-name="utp"]::before{

    background-image: url('../image/utp.webp');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    content:'';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top:0px;
    left:0px;

}


section[data-name="utp"] .headline{

    width: 100%;
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-size: 100px;
    line-height: 120px;
    text-align: center;
    text-transform: capitalize;
    color: #000000;
    margin-top: 340px;

}

section[data-name="utp"] .headline span{

    color: #ffffff;

}

section[data-name="utp"] .offer{

    width: 100%;
    margin-top: 184px;

}

section[data-name="utp"] .offer .desc{

    width: 440px;
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    text-transform: capitalize;
    color: #424341;
    transition: all 0.2s linear;

}

section[data-name="utp"] .offer .desc:hover{

    color:#787978;
    transition: all 0.2s linear;

}

section[data-name="utp"] .offer .desc .icon-play{

    margin-left: 30px;
    transition: all 0.2s;

}

section[data-name="utp"] .offer .desc:hover .icon-play{

    transform: translateX(10px);
    transition: all 0.2s;

}

section[data-name="utp"] .offer .text{

    width: 670px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #424341;

}

section[data-name="utp"] .offer-mobile{

    display: none;

}


section[data-name="about-us"]{

    width: 100%;
    padding: 100px 0;
    background: #424341;

}

section[data-name="about-us"] .headline{

    width: 100%;
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    line-height: 72px;
    color: #ffffff;
    text-transform: uppercase;

}

section[data-name="about-us"] .headline span{

    color:#6E9ED4;

}

section[data-name="about-us"] .headline.sub{

    margin-top: 60px;

}

section[data-name="about-us"] .desc{

    width: 100%;
    margin-top: 40px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    

}

section[data-name="about-us"] .grid{

    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:40px 20px;
    margin-top: 40px;

}

section[data-name="about-us"] .grid .block.ga-2{

    grid-column: 2 span / 3 span;

}

section[data-name="about-us"] .grid .block.ga-2 .text{

    width: 60%;

}

section[data-name="about-us"] .grid .icon{

    width: 85px;
    height: 85px;
    object-fit: contain;
    object-position: 50% 50%;

}

section[data-name="about-us"] .grid .title{

    width: 100%;
    margin-top: 24px;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-transform: capitalize;
    color: #FFFFFF;

}

section[data-name="about-us"] .grid .text{

    width:100%;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    margin-top: 12px;

}


section[data-name="services"]{

    width: 100%;
    padding: 100px 0;

}

section[data-name="services"] .headline{

    width: 100%;
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    line-height: 72px;
    color: #424341;
    text-transform: uppercase;

}

section[data-name="services"] .headline span{

    color: #6E9ED4;

}

section[data-name="services"] .desc{

    width: 100%;
    margin-top: 40px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #424341;

}

section[data-name="services"] .grid{

    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:40px 20px;

}

section[data-name="services"] .grid .block{

    height: 392px;
    position: relative;
    overflow: hidden;

}

section[data-name="services"] .card-back{

    width: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 20px;

}

section[data-name="services"] .card-back .text{

    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-transform: capitalize;
    color: #424341;

}

section[data-name="services"] .card-back .text .icon-play{

    margin-left: 20px;

}

section[data-name="services"] .card-front{

    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.2s linear;
    pointer-events: none;
    touch-action: none;

    background-image: url('../image/card-blue.webp');
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 40px 20px;
    transform: translateY(-100%);

}

section[data-name="services"] .block:hover .card-front{

    pointer-events: all;
    touch-action: auto;
    opacity: 1;
    transition: all 0.2s linear;
    transform: translateY(0%);

}

section[data-name="services"] .card-front .title{

    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-transform: capitalize;
    color: #FFFFFF;

}

section[data-name="services"] .card-front .text{

    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    margin-top: 20px;

}

section[data-name="services"] .card-front .btn{

    color:#fff;

}

section[data-name="services"] .card-front .btn::after{

    border: 1px solid #fff;

}

section[data-name="services"] .card-front .info{

    width: 100%;

}

section[data-name="portfolio"]{

    width: 100%;
    padding: 100px 0;
    background: #424341;

}

section[data-name="portfolio"] .headline{

    width: 100%;
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    line-height: 72px;
    color: #ffffff;
    text-transform: uppercase;

}

section[data-name="portfolio"] .headline span{

    color:#6E9ED4;

}

section[data-name="portfolio"] .headline.sub{

    margin-top: 40px;
    text-align: center;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 150%;
    text-transform: uppercase;

}

section[data-name="portfolio"] .features{

    width: 100%;
    margin-top: 20px;

}

section[data-name="portfolio"] .features .title{

    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 150%;
    text-transform: uppercase;
    color: #FFFFFF;

}

section[data-name="portfolio"] .features .list{

    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;


}

section[data-name="portfolio"] .features .list ul{

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap:20px 0px;

}

section[data-name="portfolio"] .features .list ul li{

    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    padding-left: 32px;
    position: relative;

}

section[data-name="portfolio"] .features .list ul li::before{

    content:'';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #6E9ED4;
    display: block;
    position: absolute;
    left:0px;
    top: 50%;
    transform: translateY(-50%);

}

section[data-name="portfolio"] .application{

    width: 100%;
    margin-top: 90px;

}

section[data-name="portfolio"] .application .title{

    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 150%;
    text-transform: uppercase;
    color: #FFFFFF;

}

section[data-name="portfolio"] .application .list{

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap:20px 0px;
    margin-top: 16px;

}

section[data-name="portfolio"] .application li{

    width: 100%;
    display: flex;
    flex-wrap: wrap;

}

section[data-name="portfolio"] .application li .text{

    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    color: #FFFFFF;
    padding-left: 32px;
    position: relative;
}

section[data-name="portfolio"] .application li .text::before{

    content:'';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #6E9ED4;
    display: block;
    position: absolute;
    left:0px;
    top: 50%;
    transform: translateY(-50%);

}

section[data-name="portfolio"] .application li .value{

    width: 100%;
    margin-top: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    
}

section[data-name="series"]{

    width: 100%;
    padding: 100px 0;

}

section[data-name="series"] .headline{

    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 150%;
    color: #424341;
    text-transform: uppercase;

}

section[data-name="series"] .headline span{

    color:#6E9ED4;

}

section[data-name="series"] .desc{

    width: 100%;
    margin-top: 40px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #424341;

}

section[data-name="series"] .list{

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap:80px 0px;

}

section[data-name="series"] .list .item{

    width: 100%;

}


section[data-name="series"] .cards{

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 60px;

}

section[data-name="series"] .card:not(.image){

    box-sizing: border-box;
    border: 1px solid #DCDCDC;
    padding: 50px 40px 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

section[data-name="series"] .card.image{

    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    position: relative;

}

section[data-name="series"] .card.image .logo{

    position: absolute;
    height: 67px;
    right: 0px;
    top:0px;
    z-index: 1;

}

section[data-name="series"] .card.image .product{

    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;

}


section[data-name="series"] .card .params{

    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;

}

section[data-name="series"] .card .params li{

    width: 100%;
    padding: 4px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}

section[data-name="series"] .card .params li:not(:last-child){

    border-bottom: 1px solid rgba(66,67,65,0.4);

}

section[data-name="series"] .card .params li .name{

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 250%;
    color: #424341;
    width: 50%;

}

section[data-name="series"] .card .params li .value{

    width: 50%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 250%;
    color: #424341;
    padding-left: 207px;

}

.menu{

    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    right: 0;
    z-index: 100;
    transition: all 0.2s;
    transform-origin: right center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

}

.menu .backdrop{
    content:'';
    width:100%;
    height: 100%;
    position: fixed;
    top:0px;
    left:0px;
    background-color: rgba(0, 0, 0, 0.50);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: -1;
    cursor: pointer;

}

.menu:not(.active){
    pointer-events: none;
    touch-action: none;
    transform: scale(0);

}

.menu .box{

    width: 280px;
    height: 100%;
    background: #424341;
    padding: 80px 20px 40px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;

}

.menu .close{

    width: 22px;
    height: 22px;
    position: absolute;
    right: 20px;
    top:20px;
    background: url('../image/icons/close.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    cursor: pointer;

}

.menu .links{

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap:10px 0px;

}

.menu .links a{

    width: 100%;
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    color: #FFFFFF;
    transition: all 0.2s;
    text-transform: uppercase;

}
.menu .links a:hover{

    opacity: 0.7;
    transition: all 0.2s;

}

.menu .info{

    width: 100%;
    display: flex;
    flex-wrap: wrap;

}

    

.menu .info .text{

    width: 100%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    position: relative;
    padding-left: 32px;
    display: flex;
    flex-wrap: wrap;

}

.menu .info .text:not(:first-child){

    margin-top: 20px;

}

.menu .info .text img{

    position: absolute;
    width: 20px;
    left:0;
    top:50%;
    transform: translateY(-50%);

}

.menu .info .btn{

    width: 100%;
    color:#fff;
    justify-content: center;
    margin-top: 40px;
    padding: 0px;

}

.menu .info .btn::after{

    border: 1px solid #fff;

}
.menu .info .btn:hover::after{

    border: 1px solid #6E9ED4;

}


.menu .lang-list{

    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    color: #FFFFFF;
    margin-top: 20px;
    margin-bottom: 20px;
    

}

.menu .lang-list .sep{

    margin-left: 4px;
    margin-right: 4px;

}

.menu .lang-list a{

    color: #FFFFFF;
    opacity: 0.4;
    transition: all 0.4s;

}

.menu .lang-list a:hover{

    transition: all 0.4s;
    opacity: 1;

}


.popup{

    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    right: 0;
    z-index: 100;
    transition: all 0.2s;
    transform-origin: center center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

.popup .backdrop{
    content:'';
    width:100%;
    height: 100%;
    position: fixed;
    top:0px;
    left:0px;
    background-color: rgba(229, 229, 229, 0.50);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: -1;
    cursor: pointer;

}

.popup:not(.active){
    pointer-events: none;
    touch-action: none;
    transform: scale(0);

}

.popup .box{

    width: 668px;
    padding: 60px 20px;
    background: #424341;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background-image: url('../image/popup-backdrop.webp');
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: contain;

}

.popup .title{

    width: 100%;
    font-family: "Bebas Neue", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;

}

.popup .title span{

    color: #6E9ED4;

}

.popup .text{

    width: 100%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    margin-top: 10px;
    text-align: center;

}

.popup .form{

    width: 670px;
    max-width: 100%;
    gap:46px;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.popup .form .field-input{

    width: 100%;

}

.popup .form .field-input input{

    padding:10px;
    width: 100%;
    background: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    transition: all 0.2s linear;
}

.popup .form .field-input input:hover,
.popup .form .field-input input:focus{

    border-bottom: 1px solid #6E9ED4;
    transition: all 0.2s linear;

}

.popup .btn{

    color:#fff;
    padding: 0px 32px;

}

.popup .btn::after{

    border: 1px solid #fff;

}

.popup .btn:hover::after{

    border: 1px solid #6E9ED4;

}

.popup .close{

    width: 22px;
    height: 22px;
    position: absolute;
    right: 20px;
    top:20px;
    background: url('../image/icons/close.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    cursor: pointer;
    

}

@media all and (max-width: 1440px){
    
    .container{
    
        width: 1200px;
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        margin: auto;
    
    }
    
    footer{
    
        padding: 80px 0px;
    
    }
    
    section[data-name="utp"]{
    
        height: 800px;
    
    }
    
    section[data-name="utp"]::before{
    
        background-size: auto 95%;
    
    }
    
    section[data-name="utp"] .headline{
    
        font-size: 90px;
        line-height: 90px;
        margin-top: 365px;
    
    }
    
    section[data-name="utp"] .offer{
    
        width: 100%;
        margin-top: 184px;
    
    }
    
    section[data-name="utp"] .offer .desc{
    
        width: 400px;
        font-size: 36px;
        line-height: 48px;
    
    }
    
    section[data-name="utp"] .offer .desc .icon-play{
    
        margin-left: 20px;
    
    }
    
    
    section[data-name="utp"] .offer .text{
    
        width: 560px;
    
    }
    
    section[data-name="about-us"]{
    
        padding: 80px 0;
    
    }
    
    section[data-name="about-us"] .grid{
    
        gap:40px 30px;
    
    }
    
    section[data-name="services"]{
    
        padding: 80px 0;
    
    }
    
    section[data-name="services"] .grid{
    
        gap:40px 20px;
    
    }
    
    section[data-name="services"] .grid .block{
    
        height: 392px;
        position: relative;
    
    }
    
    section[data-name="services"] .card-back .text{
    
        font-size: 18px;
        line-height: 29px;
    
    }
    
    section[data-name="services"] .card-front .title{
    
        font-size: 18px;
        line-height: 24px;
    
    }
    
    section[data-name="services"] .card-front .text{
    
        font-size: 15px;
        line-height: 150%;
    
    }
    
    section[data-name="portfolio"]{
    
        padding: 80px 0;
    
    }
    
    section[data-name="series"]{
    
        padding: 80px 0;
    
    }
    
    section[data-name="series"] .desc{
    
        font-size: 15px;
    
    }
    
    section[data-name="series"] .card:not(.image){
    
        padding: 40px 30px 30px;
    
    }
    
    
    section[data-name="series"] .card .params{

        margin-top: 30px;
        margin-bottom: 30px;
    
    }
    
    section[data-name="series"] .card .params li .name{
    
        font-size: 16px;
    
    }
    
    section[data-name="series"] .card .params li .value{
    
        font-size: 16px;
        padding-left: 160px;
    
    }

}


@media all and (max-width: 1200px){
    
    body{
    
        width: 100%;
    
    }
    
    .container{
    
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    
    }
    
    .btn{
    
        padding: 0px 50px;
        height: 50px;
        font-size: 14px;
        line-height: 17px;
    
    }
    
    
    header{
    
        width: 100%;
        height: 44px;
        top:30px;
    
    }
    
    header .logo,header .logo img{
    
        height: 44px;
    
    }
    
    header nav{
    
        display: none;
    
    }

    header .lang{

        right: 110px;
        top:11px;
    
    }
    
    header .lang .icon{
    
        margin-right: 12px;
    
    }
    
    header .lang .list{
    
        position: relative;
        z-index: 1;

    }
    
    header .lang .list .select{
    
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top:-2px;
        left:-8px;
        padding: 31px 8px 4px;
        gap: 10px;
        background: #FFFFFF;
        box-shadow: 2px 2px 10px rgba(66, 67, 65, 0.14);
        z-index: -1;
        width: max-content;
        transition: all 0.4s;
        transform-origin: left top;
        min-width: 90px;

    }

    header .lang:not(:hover) .list .select{

        transform: scale(0);
        opacity: 0;
        pointer-events: none;
        touch-action: none;

    }
    
    header .lang .list .select .sep{
    
        display: none;
    
    }

    .mobile-hamburger{

        width: 60px;
        height: 60px;
        background: url('../image/icons/menu.svg');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        display: block;
        position: fixed;
        top:20px;
        right:20px;
        z-index: 2;

    }

    footer{
    
        padding: 60px 0px;
    
    }
    
    footer .headline{
    
        font-size: 32px;
        line-height: 38px;


    }
    
    footer .info{
    
        margin-top: 40px;
        gap:20px;
        
    }

    footer .info.mobile{
    
        display: flex;
        margin-top: 60px;
    
    }

    
    footer .info:not(.mobile) .text:not(:first-child){
    
        display: none;
    
    }
    
    footer .form{
    
        gap:20px;
        margin-top: 40px;
        width: 100%;
    
    }
    
    footer .form .field-input{
    
        width: 100%;
    
    }
    
    footer .form .btn{
    
        color:#fff;
        padding: 0px 32px;

        width: 100%;
        justify-content: center;
    
    }
    
    footer .copyright{
    
        margin-top: 80px;
        font-size: 12px;
    
    }
    
    section[data-name="utp"]{
    
        height: 800px;
    
    }
    section[data-name="utp"]::after{
    
        background-size: auto 100%;

    }
    
    section[data-name="utp"]::before{
    
        background-size: 130% auto;
    
    }
    
    
    section[data-name="utp"] .headline{
    
        font-size: 50px;
        line-height: 64px;
        margin-top: 304px;
    
    }
    
    section[data-name="utp"] .headline span{
    
        color: #ffffff;
        width: 100%;
        display: block;
    
    }
    
    section[data-name="utp"] .offer{
    
        display: none;
    
    }


    section[data-name="utp"] .offer-mobile{
    

        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 130px;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 150%;
        color: #424341;

    
    }

    section[data-name="utp"] .offer-mobile .icon-play{

        width: 19px;
        height: 19px;
        margin-left: 10px;

    }


    
    
    section[data-name="about-us"]{
    
        padding: 60px 0;
    
    }
    
    section[data-name="about-us"] .headline{
    
        font-size: 30px;
        line-height: 34px;

    }
    
    section[data-name="about-us"] .headline br{

        display: none;

    }

    section[data-name="about-us"] .headline.sub{
    
        margin-top: 60px;
    
    }
    
    section[data-name="about-us"] .desc{
    
        margin-top: 20px;
        font-size: 14px;
    
    }
    
    section[data-name="about-us"] .grid{
    
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap:40px;
        margin-top: 40px;
    
    }
    
    section[data-name="about-us"] .grid .block.ga-2{
    
        grid-column: 1;
    
    }
    
    section[data-name="about-us"] .grid .block.ga-2 .text{
    
        width: 100%;
    
    }
    
    section[data-name="about-us"] .grid .icon{
    
        width: 80px;
        height: 80px;
    
    }
    
    section[data-name="about-us"] .grid .title{

        font-size: 20px;
        line-height: 24px;
    
    }
    
    section[data-name="about-us"] .grid .text{
    
        font-size: 14px;
    
    }
    
    
    section[data-name="services"]{
    
        padding: 60px 0;
    
    }
    
    section[data-name="services"] .headline{
    
        font-size: 30px;
        line-height: 34px;
    
    }
    
    section[data-name="services"] .desc{
    
        font-size: 14px;
    
    }


    
    section[data-name="services"] .grid{
    
        margin-top: 40px;
        display: grid;
        grid-template-columns: 1fr;
        gap:20px;
    
    }
    
    section[data-name="services"] .grid .block{
    
        height: 260px;
        position: relative;
    
    }
    
    section[data-name="services"] .card-back{
    
        padding: 20px 10px;
    
    }
    
    section[data-name="services"] .card-back .text{
    
        font-size: 18px;
        line-height: 24px;

    }
    
    section[data-name="services"] .card-back .text .icon-play{
    
        margin-left: 10px;
        width: 24px;
        height: 24px;
    
    }
    
    section[data-name="services"] .card-front{

        padding: 20px;
        padding-right: 10px;
    
    }
    
    section[data-name="services"] .card-front .title{

        font-size: 18px;
        line-height: 20px;
        
    
    }
    
    section[data-name="services"] .card-front .text{
    
        font-size: 12px;
        margin-top: 10px;
        
    
    }
    
    section[data-name="services"] .card-front .btn{
    
        height: 40px;
        width: 100%;
        justify-content: center;
        margin-right: 10px;
    
    }
    
    section[data-name="services"] .card-front .btn::after{
    
        border: 1px solid #fff;
    
    }
    
    section[data-name="services"] .card-front .info{
    
        width: 100%;
    
    }
    
    section[data-name="portfolio"]{
    
        padding: 60px 0;
    
    }
    
    section[data-name="portfolio"] .headline{
    
        font-size: 30px;
        line-height: 34px;
    
    }
    
    section[data-name="portfolio"] .headline.sub{
    
        width: 100%;
        margin-top: 40px;
        font-size: 20px;
        line-height: 150%;
        text-align: left;
    
    }
    
    section[data-name="portfolio"] .features .title{
    
        font-size: 14px;
    
    }
    
    section[data-name="portfolio"] .features .list{
    
        margin-top: 20px;
    
    
    }
    
    section[data-name="portfolio"] .features .list ul{
        
        width: 100%;
        gap:10px 0px;
    
    }

    section[data-name="portfolio"] .features .list ul:not(:first-child){

        margin-top: 10px;

    }
    
    section[data-name="portfolio"] .features .list ul li{
    
        font-size: 14px;
        padding-left: 20px;
    
    }
    
    section[data-name="portfolio"] .features .list ul li::before{
    
        width: 10px;
        height: 10px;
    
    }
    
    section[data-name="portfolio"] .application{
    
        margin-top: 40px;
    
    }
    
    section[data-name="portfolio"] .application .title{
    
        font-size: 14px;
    
    }
    
    section[data-name="portfolio"] .application .list{
    
        margin-top: 20px;
    
    }
    
    section[data-name="portfolio"] .application li .text{
    
        font-size: 14px;
        padding-left: 20px;
        
    }
    
    section[data-name="portfolio"] .application li .text::before{
    
        width: 10px;
        height: 10px;
    
    }
    
    section[data-name="portfolio"] .application li .value{

        font-size: 12px;

        
    }
    
    section[data-name="series"]{
    
        padding: 60px 0;
    
    }
    
    section[data-name="series"] .headline{
    
        font-size: 24px;
    
    }

    section[data-name="series"] .desc{
    
        margin-top: 20px;
        font-size: 14px;
        line-height: 150%;
    
    }
    
    section[data-name="series"] .list{
    
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap:60px 0px;
    
    }
    
    section[data-name="series"] .cards{

        grid-template-columns: 1fr;
        margin-top: 50px;
    
    }
    
    section[data-name="series"] .card:not(.image){
    
        width: 100%;
        padding: 40px 20px;
        order: 1;
    }
    
    section[data-name="series"] .card.image{
    
        order: 0;
        height: 230px;
    
    }
    
    section[data-name="series"] .card.image .logo{
    
        height: 35px;
    
    }
    
    section[data-name="series"] .card .params{
    
        margin-top: 30px;
        margin-bottom: 40px;
    
    }
    
    section[data-name="series"] .card .params li .name{
    
        font-size: 14px;
    
    }
    
    section[data-name="series"] .card .params li .value{
    
        width: 50%;
        font-size: 14px;
        line-height: 250%;
        padding-left: 0px;
        text-align: right;
    
    }
	
	.popup .box {
		width: 350px;
		max-width: 100%;
		padding: 45px 20px;
	}

}