@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
	padding: 0px;
	margin: 0px;
    font-family: "Open Sans", sans-serif;
    background-color: #050117;
}
ul{
	padding: 0px;
	margin: 0px;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	color: unset;
	cursor: pointer;
}
h1, h2, h3, h4, h5{
	margin: 0px;
    font-weight: unset;
}
p{
    margin: 0px;
}
input, button, textarea, select{
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
    font-family: "Open Sans", sans-serif;
}

.center{
    width: 90%;
    max-width: 1260px;
    height: auto;
    margin: 0 auto;
}

/* HEADER */
header{
    width: 100%;
    height: auto;
    float: left;
    padding: 37px 0 28px;
    border-bottom: 1px solid #a257f6;
}
header.index{
    border-bottom: unset;
}
.header__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.header__item{
    width: fit-content;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.header__item-logo{
    width: fit-content;
    height: auto;
    float: left;
}
.header__item-logo img{
    width: fit-content;
    height: auto;
    float: left;
    object-fit: contain;
    object-position: center;
}
.header__item-menu{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 45px;
    align-content: center;
    align-items: center
}
.header__item-close{
    width: 20px;
    height: 20px;
    float: right;
    background-image: url("../images/icon/close.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    display: none;
    border: unset;
    background-color: unset;
}
.header__item-menu > li{
    width: fit-content;
    height: auto;
    float: left;
}
.header__item-menu > li:last-child{
    display: none;
}
.header__item-menu > li > a{
    width: fit-content;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    transition: .2s;
}
.header__item-menu > li > a:hover{
    color: #6a64f1;
    transition: .2s;
}
.header__item-menu > li > a > img{
    width: 35px;
    height: 35px;
}
.header__item-menu > li > a > img:hover{
    fill: #6a64f1;
}
.header__item-phone{
    width: fit-content;
    height: 46px;
    float: right;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    position: relative;
    padding: 0 37.5px 1px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.header__item-phone::before{
    content: '';
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background-color: #050117;
    border-radius: 5px;
}
.header__item-phone:hover::before{
	background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
}
.header__item-phone span{
    width: fit-content;
    height: auto;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}
.header__item-phone:hover span{
	background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(255 255 255) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.header__item-lang{
    width: fit-content;
    height: auto;
    margin: 0 40px 0 0;
    position: relative;
}
.header__item-lang span{
    width: fit-content;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    padding: 0 13px 0 0;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
}
.header__item-lang span::before{
    content: "";
    position: absolute;
    width: 8px;
    height: 5px;
    right: 0%;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    background-image: url("../images/icon/drop.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.header__item-lang span.active::before{
	-webkit-transform: translate(0%, -50%) rotate(180deg);
	transform: translate(0%, -50%) rotate(180deg);
}
.header__item-lang ul{
    width: 100%;
    height: auto;
    position: absolute;
    top: 30px;
    border: 1px solid #805ef4;
    border-radius: 3px;
    background-color: #050217;
    overflow: hidden;
    display: none;
}
.header__item-lang ul > li{
	width: 100%;
    height: auto;
}
.header__item-lang ul > li > a{
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	padding: 5px;
	box-sizing: border-box;
	color: #ffffff;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
}
.header__item-lang ul > li > a.active{
	color: #6864f1;
}
.header__item-bar{
    display: none;
}
/* HEADER */

/* MAIN */
.main{
    width: 100%;
    height: auto;
    float: left;
    padding: 0 0 125px;
    background-image: url("../images/vectory/main.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
}
.main-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 101, 241, 1) 0%,
        rgba(164, 86, 246, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
    font-size: 220px;
    font-weight: 700;
    line-height: 235px;
}
.main__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    margin: -58px 0 0 0;
    padding: 0 0 0 104px;
    box-sizing: border-box;
}
.main__item:nth-child(1){
    width: 60%;
    height: auto;
    position: relative;
}
.main__item:nth-child(1)::before{
    content: "";
    position: absolute;
    background: #a257f6;
    width: 451px;
    height: 133px;
    filter: blur(201.9px);
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.main__item:nth-child(2){
    width: calc(41% - 88px);
    height: auto;
    margin: 76px 0 0 0;
}
.main__item-vectory{
    width: 100%;
	height: auto;
    float: left;
    position: relative;
}
.main__item p{
    width: 100%;
	height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    line-height: 25px;
    font-weight: 600;
}
.main__item a{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(104, 100, 241, 1) 0%, rgba(164, 86, 247, 1) 100%);
    border-radius: 5px;
    border: unset;
    cursor: pointer;
    padding: 14px 0 15px;
    margin: 24px 0 0 0;
}
/* MAIN */

/* BREADCRUMBS */
.breadcrumbs{
    width: 100%;
	height: auto;
    float: left;
    padding: 40px 0 0;
}
.breadcrumbs__row{
    width: 100%;
    height: auto;
    float: left;
    overflow: hidden;
}
.breadcrumbs__item{
    width: 100%;
	height: auto;
    float: left;
}
.breadcrumbs__item ul{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: nowrap;
    justify-content: left;
    gap: 26px;
    flex-direction: row;
}
.breadcrumbs__item ul > li{
    width: fit-content;
    height: auto;
    float: left;
    position: relative;
}
.breadcrumbs__item ul > li > a{
    width: fit-content;
	height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
}
.breadcrumbs__item ul > li:first-child > a{
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.breadcrumbs__item ul > li::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url("../images/icon/breadcrumbs.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    right: -18px;
    top: 9px;
}
.breadcrumbs__item ul > li:last-child::before{
    display: none;
}
/* BREADCRUMBS */

/* DOCUMENTS */
.documents{
    width: 100%;
    height: auto;
    float: left;
    padding: 60px 0 100px;
}
.documents-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 60px;
    font-weight: 700;
}
.documents-description{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0 0 0;
}
.documents__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0 0 0;
}
.documents__item{
    width: 100%;
    max-width: 800px;
    height: auto;
}
.documents__item table{
    width: 100%;
    height: auto;
    float: left;
    border-collapse: collapse;
    font-size: 14px;
}
.documents__item table > thead {
    background: #1B1C40;
}
.documents__item table th:last-child{
	text-align: center;
}
.documents__item table th,
.documents__item table td {
    padding: 14px 30px;
    text-align: left;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    line-height: 25px;
    font-weight: 400;
}
.documents__item table > th {
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}
.documents__item table > td {
    border-bottom: 1px solid #e5e7eb;
}
.documents__item table > tbody tr:hover td,
.documents__item table > tbody tr:hover td > .documents__item-file{
    color: #a257f6;
    transition: 0.2s ease;
}
.documents__item table > tbody tr:hover td > .documents__item-file::before{
    filter: brightness(0) saturate(100%) invert(36%) sepia(41%) saturate(3896%) hue-rotate(246deg) brightness(103%) contrast(93%);
}
.documents__item table > tbody tr:nth-child(even) {
    background: #141124;
}
@media (max-width: 768px) {
    .documents__item table > th, .documents__item table > td {
        padding: 10px;
        font-size: 13px;
    }
}
.documents__item-file{
    width: fit-content;
    height: auto;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    line-height: 25px;
    font-weight: 400;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    position: relative;
}
.documents__item-file::before{
    content: "";
    position: absolute;
    width: 13.65px;
    height: 14.49px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0%;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.documents__item-file[data-type="pdf"]::before{
    background-image: url("../images/icon/pdf.svg");
}
.documents__item-file[data-type="pcb"]::before{
    background-image: url("../images/icon/pcb.svg");
}
.documents__item-file[data-type="stp"]::before{
    background-image: url("../images/icon/stp.svg");
}
.documents__item-download{
    width: 21px;
    height: 19px;
    background-image: url("../images/icon/download.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .2s;
    display: block;
    margin: 0 auto;
}
.documents__item-download:hover{
    background-image: url("../images/icon/download-hover.svg");
    transition: .2s;
}
/* DOCUMENTS */

/* PORTFOLIO */
.portfolio{
    width: 100%;
    height: auto;
    float: left;
    padding: 60px 0 100px;
}
.portfolio-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 60px;
    font-weight: 700;
    text-transform: uppercase;
}
.portfolio-description {
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin: 41px 0 0 0;
}
.portfolio__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 40px 0 0 0;
    gap: 13px;
}
.portfolio__item{
    width: calc(25% - 10px);
    height: auto;
    background-color: #1b1c40;
    border-radius: 5px;
}
.portfolio__item-poster{
    width: 100%;
    height: 180px;
    float: left;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
}
.portfolio__item-content{
    width: 100%;
    height: auto;
    float: left;
    padding: 0 0 20px;
    background-image: url("../images/vectory/portfolio-border.svg");
    background-position: 6px 6px;
    background-repeat: no-repeat;
    background-size: calc(100% - 9px) calc(100% - 13px);
}
.portfolio__item-title{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 23px 20px 0;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.portfolio__item-description{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 300;
    padding: 10px 20px 0;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.portfolio__item-button{
    width: fit-content;
    height: auto;
    color: #a257f6;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    float: right;
    margin: 11px 20px 0 0;
}
.portfolio-more{
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    border-radius: 5px;
    margin: 25px 0 0 0;
    border: unset;
    cursor: pointer;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
/* PORTFOLIO */

/* PORTFOLIO PAGE */
.portfoliopage{
    width: 100%;
    height: auto;
    float: left;
    padding: 60px 0 100px;
}
.portfoliopage-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 60px;
    font-weight: 700;
    text-transform: uppercase;
}
.portfoliopage__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin: 20px 0 0 ;
}
.portfoliopage__item{
    width: 100%;
    max-width: 967px;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.portfoliopage__box:nth-child(1){
    width: 44%;
    height: auto;
}
.portfoliopage__box:nth-child(2){
    width: calc(56% - 30px);
    height: auto;
}
.portfoliopage__item.max .portfoliopage__box:nth-child(1){
    width: 100%;
}
.portfoliopage__item.max .portfoliopage__box:nth-child(2){
    display: none;
}
.portfoliopage__item.grid .portfoliopage__box:nth-child(1){
    width: calc(56% - 30px);
    height: auto;
}
.portfoliopage__item.grid .portfoliopage__box:nth-child(2){
    width: 44%;
    height: auto;
}
.portfoliopage__box-title{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #1b1c40;
    border-radius: 0px 5px 5px 0px;
    padding: 9px 20px;
    box-sizing: border-box;
}
.portfoliopage__box-description{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    margin: 20px 0 0 0;
}
.portfoliopage__box-poster{
    width: 100%;
    height: auto;
    min-height: 100%;
    float: left;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
}
.portfoliopage__controler{
    width: 100%;
    max-width: 967px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    gap: 30px;
    margin: 0 auto 0;
    padding: 40px 0 0;
}
.portfoliopage__controler a{
    width: fit-content;
    height: auto;
    float: right;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    transition: .2s;
}
.portfoliopage__controler a:hover{
    color: #a257f6;
    transition: .2s;
}
/* PORTFOLIO PAGE */

/* PRODUCT */
.product{
    width: 100%;
    height: auto;
    float: left;
    padding: 40px 0 0;
}
.product .center{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 101, 241, 1) 0%,
        rgba(164, 86, 246, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
    font-family: "OpenSans-Bold", sans-serif;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
}
.product-subject{
    width: 100%;
    max-width: 860px;
    height: auto;
    color: #ffffff;
    text-align: center;
    font-size: 18px;
    line-height: 25px;
    font-weight: 600;
    margin: 10px auto 0;
    display: block;
}
.product-description{
    width: 100%;
    max-width: 860px;
    height: auto;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    line-height: 25px;
    font-weight: 300;
    margin: 0 auto 0;
    padding: 30px 0 0 0;
    display: block;
}
.product-image{
    width: 564px;
    height: auto;
    margin: 40px 0 0;
    position: relative;
}
.product-image::before{
    content: "";
    position: absolute;
    background: #a257f6;
    width: 90%;
    height: 121px;
    filter: blur(201.9px);
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.product-image img{
    width: 100%;
    height: auto;
    float: left;
    position: relative;
}
.product__row{
    width: 100%;
    height: auto;
    float: left;
    margin: 51px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}
.product__item{
    width: calc(25% - 8px);
    padding: 30px;
    box-sizing: border-box;
    background-color: #1b1c40;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 96% 96%;
    position: relative;
}
.product__item::before{
    content: "";
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    position: absolute;
    left: 7px;
    top: 7px;
    border: 1px solid #8047ca;
    box-sizing: border-box;
    border-radius: 5px;
}
.product__item:nth-child(1)::after{
    content: "";
    width: 154px;
    height: 77px;
    position: absolute;
    right: 4.5px;
    top: 4.5px;
    background-image: url("../images/vectory/product-1.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.product__item:nth-child(1)::after{
    content: "";
    width: 154px;
    height: 77px;
    position: absolute;
    right: 4.5px;
    top: 4.5px;
    background-image: url("../images/vectory/product-1.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.product__item:nth-child(2)::after{
    content: "";
    width: 135px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 4.5px;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    background-image: url("../images/vectory/product-2.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.product__item:nth-child(3)::after{
    content: "";
    width: 135px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 4.5px;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    background-image: url("../images/vectory/product-2.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.product__item:nth-child(4)::after{
    content: "";
    width: 154px;
    height: 77px;
    position: absolute;
    left: 4.5px;
    top: 4.5px;
    background-image: url("../images/vectory/product-4.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* .product__item:nth-child(2)::after{
    background-image: url("../images/vectory/product-2.svg");
}
.product__item:nth-child(3)::after{
    background-image: url("../images/vectory/product-2.svg");
}
.product__item:nth-child(4)::after{
    background-image: url("../images/vectory/product-3.svg");
} */
.product__item p{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
    font-family: "OpenSans-Bold", sans-serif;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.product__item span{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0 0 0;
    position: relative;
    z-index: 1;
}
.product__item span > em > b{
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product__item span > em{
    font-style: normal;
}
/* PRODUCT */

/* DESIGN */
.design{
    width: 100%;
    height: auto;
    float: left;
    padding: 60px 0 40px;
}
.design .center{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.design-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 101, 241, 1) 0%,
        rgba(164, 86, 246, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
    font-family: "OpenSans-Bold", sans-serif;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
}
.design-description{
    width: 100%;
    max-width: 860px;
    height: auto;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    line-height: 25px;
    font-weight: 300;
    margin: 0 auto 0;
    padding: 30px 0 0 0;
    display: block;
}
.design__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0 0 0;
    gap: 10px;
}
.design__item{
    width: calc(33.3% - 7px);
    height: auto;
    padding: 20px 30px 60px;
    box-sizing: border-box;
    background-color: #1b1c40;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: auto;
}
.design__item:nth-child(1){
    background-image: url("../images/vectory/design-1.svg");
    background-position: right calc(100% - 32px);
}
.design__item:nth-child(2){
    background-image: url("../images/vectory/design-2.svg");
    background-position: center calc(100% - 34px);
}
.design__item:nth-child(3){
    background-image: url("../images/vectory/design-3.svg");
    background-position: left calc(100% - 31px);
}
.design__item p{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    padding: 0 0 0 80px;
    box-sizing: border-box;
    position: relative;
}
.design__item p::before{
    content: "";
    position: absolute;
    background-color: #a257f6;
    border-radius: 3px;
    width: 60px;
    height: 60px;
    left: 0%;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}
.design__item:nth-child(1) p::before{
    background-image: url("../images/icon/des-1.svg");
}
.design__item:nth-child(2) p::before{
    background-image: url("../images/icon/des-2.svg");
}
.design__item:nth-child(3) p::before{
    background-image: url("../images/icon/des-3.svg");
}
.design__item span{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    margin: 20px 0 0 0;
}
.design__button{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 0 0;
}
.design__button a{
    width: fit-content;
    height: auto;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    border-radius: 5px;
    padding: 14px 81.5px;
}
.design__button a[data-type="download"] span{
    background-image: url("../images/icon/download.svg");
    background-position: right;
    background-repeat: no-repeat;
    background-size: 19px;
    padding: 0 28px 0 0;
}
/* DESIGN */

/* CONTACTS */
.contacts{
    width: calc(100% - 40px);
    height: auto;
    float: left;
    margin: 0 20px;
    padding: 15px 0 113px;
    background-color: #1b1c40;
    background-image: url("../images/vectory/contacts.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: bottom;
}
.contacts-subtitle{
    width: fit-content;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    margin: 100px 0 0 0;
}
.contacts-step{
    width: fit-content;
    height: auto;
    float: right;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    margin: 100px 0 0 0;
}
.contacts-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 140px;
    font-weight: 700;
    text-transform: uppercase;
}
.contacts-description{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin: 23px 0 0 0;
}
.contacts__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0 0 0;
}
.contacts__item{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.contacts__item form{
    width: 100%;
    max-width: 650px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.contacts__item form > label{
    width: calc(50% - 5px);
    height: auto;
}
.contacts__item form > label:nth-child(3){
    width: 100%;
    margin: 20px 0 0 0;
}
.contacts__item form > label > input,
.contacts__item form > label > textarea{
    width: 100%;
    height: 50px;
    float: left;
    background-color: #050117;
    border-radius: 5px;
    border: 1px solid #050117;
    box-sizing: border-box;
    color: #e2e2e2;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    resize: unset;
    transition: .2s;
}
.contacts__item form > label > textarea{
    height: 230px;
}
.contacts__item form > label > input::placeholder{
    color: #e2e2e2;
}
.contacts__item-checkbox{
    width: 100%;
    height: auto;
    float: left;
    margin: 14px 0 0 0;
    position: relative;
}
.contacts__item-checkbox p{
    width: 100%;
    height: auto;
    float: left;
    color: #effcfc;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    padding: 0 0 0 26px;
    box-sizing: border-box;
    position: relative;
}
.contacts__item-checkbox p::before{
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(90deg, rgba(104, 100, 241, 1) 0%, rgba(164, 86, 247, 1) 100%);
    border-radius: 1px;
    left: 0px;
    top: 1px;
}
.contacts__item-checkbox p::after{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #1b2346;
    border-radius: 1px;
    left: 1px;
    top: 2px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: inherit;
}
.contacts__item form > button{
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    border-radius: 5px;
    margin: 20px 0 0 0;
    padding: 14px 0;
    border: unset;
    cursor: pointer;
}
.contacts__item-checkbox input{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    margin: 0;
    z-index: 1;
    cursor: pointer;
}
.contacts__item form > label > input:focus,
.contacts__item form > label > textarea:focus{
    border-color: rgba(104, 100, 241, 1);
    transition: .2s;
}
.contacts__item-checkbox input:checked + p::after{
    background-image: url("../images/icon/checked.svg");
}
.contacts__item-err{
    width: 100%;
    height: auto;
    float: left;
    color: #effcfc;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    margin: 20px 0 0 0;
}
.contacts__item-err.success{
    color: #6a64f2;
}
/* CONTACTS */

/* FOOTER */
footer{
    width: 100%;
    height: auto;
    float: left;
    padding: 40px 0 26px;
    position: relative;
    background-color: #001722;
}
footer::before{
    content: "";
    position: absolute;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    width: 100%;
    height: 6px;
    left: 0;
    bottom: 0;
}
.footer__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer__item{
    width: 100%;
    max-width: 873px;
    height: auto;
    float: left;
}
.footer__item ul{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 30px;
}
.footer__item ul > li{
    width: fit-content;
    height: auto;
    float: left;
}
.footer__item ul > li > a{
    width: fit-content;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    transition: .2s;
}
.footer__item ul > li > a:hover{
    color: #6a64f1;
    transition: .2s;
}
.footer__item-copyright{
    width: 100%;
    height: auto;
    float: left;
    color: #f1fdfc;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    padding: 21px 0 0;
    position: relative;
}
.footer__item-copyright::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
}
/* FOOTER */

/* ABOUT */
.about{
    width: 100%;
    height: auto;
    float: left;
    padding: 100px 0 0;
}
.about .center{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.about-title{
    width: 50%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
}
.about-step{
    width: 50%;
    height: auto;
    color: #ffffff;
    text-align: right;
    font-size: 18px;
    font-weight: 400;
}
.about-description{
    width: 100%;
    max-width: 886px;
    height: auto;
    color: #e2e2e2;
    text-align: left;
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    margin: 40px auto 0;
}
.about__row{
    width: 100%;
    max-width: 867px;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 37px auto 0;
}
.about__item:nth-child(1){
    width: 44%;
    height: auto;
}
.about__item:nth-child(2){
    width: calc(56% - 30px);
    height: auto;
}
.about__item-title{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #1b1c40;
    border-radius: 0px 5px 5px 0px;
    padding: 9px 20px;
    box-sizing: border-box;
}
.about__item-description{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    margin: 20px 0 0 0;
}
.about__item-poster{
    width: 100%;
    height: auto;
    min-height: 100%;
    float: left;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
}
/* ABOUT */

/* PARTNERS */
.partners{
    width: 100%;
    height: auto;
    float: left;
    padding: 100px 0;
}
.partners-title{
    width: fit-content;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
}
.partners-step{
    width: fit-content;
    height: auto;
    float: right;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
}
.partners__row{
    width: 100%;
    height: auto;
    float: left;
    margin: 40px 0 0 0;
}
.partners__item{
    width: 100%;
    height: 240px;
    float: left;
    background-color: #1b1c40;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 255px 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.partners__item:hover{
    background-image: url("../images/vectory/partners-vectory.svg");
}
.partners__item img{
    width: fit-content;
    height: auto;
    object-fit: scale-down;
    object-position: center;
}
/* PARTNERS */

/* CASE */
.case{
    width: calc(100% - 40px);
    height: auto;
    float: left;
    margin: 0 20px;
    padding: 60px 0 0;
    background-color: #1b1c40;
}
.case-title{
    width: fit-content;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
}
.case-step{
    width: fit-content;
    height: auto;
    float: right;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
}
.case-step a{
    width: fit-content;
    height: auto;
    float: right;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 0 20px;
}
.case__row{
    width: 100%;
    height: auto;
    float: left;
    margin: 52px 0 0 0;
}
.case__item{
    width: 100%;
    height: auto;
    float: left;
    padding: 30px 40px;
    border-bottom: 1px solid #6B63F1;
    box-sizing: border-box;
    transition: .3s;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
}
.case__item:hover{
    background-color: #050117;
    border-bottom: 1px solid #050117;
    border-radius: 5px;
    transition: .3s;
}
.case__box:nth-child(1){
    width: 226px;
}
.case__box:nth-child(2){
    width: calc(100% - 461px);
    box-sizing: border-box;
    position: relative;
}
.case__box:nth-child(3){
    width: 125px;
}
.case__box p{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.case__box span{
    width: 100%;
    height: auto;
    float: left;
    color: #e2e2e2;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 0 49% 0 0;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.case__box em{
    width: fit-content;
    height: auto;
    float: left;
    color: #e2e2e2;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    display: none;
}
.case__box a{
    width: fit-content;
    height: auto;
    float: right;
    background: linear-gradient(
        90deg,
        rgb(255, 255, 255) 0%,
        rgb(255, 255, 255) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 0 20px;
}
.case__box-vectory{
    width: 180px;
    height: 180px;
    position: absolute;
    right: 10%;
    top: 50%;
    background-color: #050117;
    -webkit-transform: translate(0%, -50%) scale(0.65);
    transform: translate(0%, -50%) scale(0.65);
    transition: .3s;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-radius: 200px;
    background-image: url("../images/vectory/case.svg");
    background-position: 1.5px center;
    background-repeat: no-repeat;
    background-size: 175px;
}
.case__box-vectory > img{
    width: 160px;
    height: 160px;
    border-radius: 200px;
    object-fit: cover;
    object-position: center;
}
.case__item:hover .case__box > a{
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* CASE */

/* AUTH */
.auth{
    width: calc(100% - 40px);
    height: auto;
    min-height: 50vh;
    float: left;
    margin: 0 20px;
    padding: 100px 0;
    background-color: #1b1c40;
}
.auth-subtitle{
    width: fit-content;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    margin: 100px 0 0 0;
}
.auth-step{
    width: fit-content;
    height: auto;
    float: right;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    margin: 100px 0 0 0;
}
.auth-title{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
}
.auth-description{
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin: 23px 0 0 0;
}
.auth__row{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0 0 0;
}
.auth__item{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.auth__item form{
    width: 100%;
    max-width: 650px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}
.auth__item form > label{
    width: 100%;
    height: auto;
}
.auth__item form > label:nth-child(3){
    width: 100%;
    margin: 20px 0 0 0;
}
.auth__item form > label > input{
    width: 100%;
    height: 50px;
    float: left;
    background-color: #050117;
    border-radius: 5px;
    border: 1px solid #050117;
    box-sizing: border-box;
    color: #e2e2e2;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    resize: unset;
    transition: .2s;
}
.auth__item form > label > input::placeholder{
    color: #e2e2e2;
}
.auth__item-checkbox p::after{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #1b2346;
    border-radius: 1px;
    left: 1px;
    top: 2px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: inherit;
}
.auth__item form > button{
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    border-radius: 5px;
    margin: 15px 0 0 0;
    padding: 14px 0;
    border: unset;
    cursor: pointer;
}
.auth__item form > label > input:focus,
.auth__item form > label > textarea:focus{
    border-color: rgba(104, 100, 241, 1);
    transition: .2s;
}
/* AUTH */

/* CPANEL */
.cpanel{
    width: 100%;
    height: auto;
    float: left;
    padding: 60px 0;
}
.cpanel-title {
    width: 100%;
    height: auto;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
}
.cpanel__row{
    width: 100%;
    height: auto;
    float: left;
    margin: 40px 0 0 0;
}
.cpanel__item{
    width: 100%;
    height: auto;
    float: left;
}
.cpanel__about{
    width: 100%;
    height: auto;
    float: left;
}
.cpanel__about form{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.cpanel__about form > label{
    width: 100%;
    height: auto;
    float: left;
    position: relative;
}
.cpanel__about form > label > input,
.cpanel__about form > label > textarea{
    width: 100%;
    height: 50px;
    float: left;
    background-color: #050217;
    border-radius: 5px;
    border: 1px solid #6964f2;
    box-sizing: border-box;
    color: #e2e2e2;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    resize: unset;
    transition: .2s;
}
.cpanel__about form > label > input[type='file']{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    cursor: pointer;
}
.cpanel__about form > label > textarea{
    height: 230px;
}
.cpanel__about form > label > input::placeholder,
.cpanel__about form > label > textarea::placeholder{
    color: #868686 !important;
}
.cpanel__about form > button{
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(
        90deg,
        rgba(104, 100, 241, 1) 0%,
        rgba(164, 86, 247, 1) 100%
    );
    border-radius: 5px;
    margin: 15px 0 0 0;
    padding: 14px 0;
    border: unset;
    cursor: pointer;
}
.cpanel__about__media{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 10px;
}
.cpanel__about__media__box{
    width: calc((100% - 70px) / 8);
    height: auto;
    position: relative;
}
.cpanel__about__media__box img{
	width: 100%;
	height: 100px;
	float: left;
	border-radius: 10px;
	object-fit: cover;
	object-position: center;
}
.cpanel__about__media__box button{
	width: 22px;
	height: 22px;
	border-radius: 5px;
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
	border: unset;
	background-color: #6a65f3;
	background-image: url("../images/icon/delete.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
    transition: .2s;
}
.cpanel__about__media__box button:hover{
    transform: scale(1.2);
    transition: .2s;
}
.cpanel__about-uplaod{
    width: 100%;
    height: 50px;
    float: left;
    background-color: #050217;
    border-radius: 5px;
    border: 1px solid #6964f2;
    box-sizing: border-box;
    color: #868686;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    resize: unset;
    transition: .2s;
}
.cpanel__documents{
    width: 100%;
    height: auto;
    float: left;
}
.cpanel__documents__tools{
    width: 100%;
    height: auto;
    float: left;
}
.cpanel__documents__tools form{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cpanel__documents__tools form > label{
    width: 20%;
    height: auto;
}
.cpanel__documents__tools form > label > input,
.cpanel__documents__tools form > label > select{
    width: 100%;
    height: 50px;
    float: left;
    background-color: #050217;
    border-radius: 5px;
    border: 1px solid #6964f2;
    box-sizing: border-box;
    color: #e2e2e2;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    resize: unset;
    transition: .2s;
}
.cpanel__documents__tools form > button{
    width: 15%;
    height: 50px;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(104, 100, 241, 1) 0%, rgba(164, 86, 247, 1) 100%);
    border-radius: 5px;
    padding: 14px 0;
    border: unset;
    cursor: pointer;
}
.cpanel__documents table,
.cpanel__portfolio table,
.cpanel__product table{
    width: 100%;
    height: auto;
    float: left;
    border-collapse: collapse;
    font-size: 14px;
    margin: 30px 0 0 0;
}
.cpanel__portfolio table,
.cpanel__product table{
	margin: 0;
}
.cpanel__documents table > thead,
.cpanel__portfolio table > thead,
.cpanel__product table > thead{
    background: #1B1C40;
}
.cpanel__documents table th:last-child,
.cpanel__portfolio table th:last-childб
.cpanel__product table th:last-child{
	text-align: center;
}
.cpanel__documents table th,
.cpanel__documents table td,
.cpanel__portfolio table th,
.cpanel__portfolio table td,
.cpanel__product table th,
.cpanel__product table td {
    padding: 14px 30px;
    text-align: left;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
    font-weight: 400;
}
.cpanel__documents table td:nth-child(1),
.cpanel__documents table th:nth-child(1),
.cpanel__portfolio table td:nth-child(1),
.cpanel__portfolio table th:nth-child(1),
.cpanel__product table td:nth-child(1),
.cpanel__product table th:nth-child(1),
.cpanel__documents table th:nth-child(2),
.cpanel__documents table td:nth-child(2),
.cpanel__portfolio table th:nth-child(2),
.cpanel__portfolio table td:nth-child(2),
.cpanel__product table th:nth-child(2),
.cpanel__product table td:nth-child(2){
    text-align: left;
}
.cpanel__documents table > th,
.cpanel__portfolio table > th,
.cpanel__product table > th {
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}
.cpanel__documents table > td,
.cpanel__portfolio table > td,
.cpanel__product table > td {
    border-bottom: 1px solid #e5e7eb;
}
.cpanel__documents table > tbody tr:hover td,
.cpanel__portfolio table > tbody tr:hover td,
.cpanel__product table > tbody tr:hover td,
.cpanel__documents table > tbody tr:hover td > .cpanel__documents-file{
    color: #a257f6;
    transition: 0.2s ease;
}
.documents__item table > tbody tr:hover td > .cpanel__documents-file::before{
    filter: brightness(0) saturate(100%) invert(36%) sepia(41%) saturate(3896%) hue-rotate(246deg) brightness(103%) contrast(93%);
}
.cpanel__documents table > tbody tr:nth-child(even),
.cpanel__portfolio table > tbody tr:nth-child(even),
.cpanel__product table > tbody tr:nth-child(even) {
    background: #141124;
}
.cpanel__portfolio-add,
.cpanel__portfolio-add{
    width: fit-content;
    height: auto;
    float: right;
    font-size: 14px;
    color: #7b5ff3;
    text-decoration: underline;
    cursor: pointer;
    margin: -62px 0 0 0;
}
.cpanel__documents-file{
    width: fit-content;
    height: auto;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    line-height: 25px;
    font-weight: 400;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    position: relative;
}
.cpanel__documents-file::before{
    content: "";
    position: absolute;
    width: 13.65px;
    height: 14.49px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0%;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.cpanel__documents-file[data-type="pdf"]::before{
    background-image: url("../images/icon/pdf.svg");
}
.cpanel__documents-file[data-type="pcb"]::before{
    background-image: url("../images/icon/pcb.svg");
}
.cpanel__documents-file[data-type="stp"]::before{
    background-image: url("../images/icon/stp.svg");
}
.cpanel__documents-download{
    width: 21px;
    height: 19px;
    background-image: url("../images/icon/download.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .2s;
    display: block;
    margin: 0 auto;
}
.cpanel__documents-download:hover{
    background-image: url("../images/icon/download-hover.svg");
    transition: .2s;
}
.cpanel__documents-edit,
.cpanel__portfolio-edit,
.cpanel__product-edit{
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 5px;
    cursor: pointer;
    border: unset;
    background-color: #6a65f3;
    background-image: url("../images/icon/edit.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    margin: 0 auto;
    transition: .2s;
}
.cpanel__documents-delete,
.cpanel__portfolio-delete,
.cpanel__product-delete{
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 5px;
    cursor: pointer;
    border: unset;
    background-color: #6a65f3;
    background-image: url("../images/icon/delete.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    margin: 0 auto;
    transition: .2s;
}
.cpanel__notification{
    width: fit-content;
    max-width: 300px;
    height: auto;
    background: #1B1C40;
    position: fixed;
    right: 30px;
    bottom: 30px;
    padding: 15px 20px 15px 50px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    border: 1px solid #6964f2;
    box-sizing: border-box;
    background-image: url("../images/icon/exclamation.svg");
    z-index: 1;
    background-position: 15px center;
    background-size: 24px;
    background-repeat: no-repeat;
    display: none;
}
.cpanel__portfolio{
    width: 100%;
    height: auto;
    float: left;
}
.cpanel__portfolio form,
.cpanel__product form{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.cpanel__portfolio form > label,
.cpanel__product form > label{
    width: 100%;
    height: auto;
    position: relative;
}
.cpanel__portfolio__sections{
	width: 100%;
	height: auto;
	float: left;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}
.cpanel__portfolio__sections__box{
	width: 49%;
	height: auto;
	float: left;
	background-color: #041722;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: right;
	gap: 15px;
	border-radius: 10px;
}
.cpanel__portfolio__sections__box > label{
	width: 100%;
	position: relative;
}
.cpanel__portfolio form > label > input,
.cpanel__portfolio__sections__box > label > input,
.cpanel__product form > label > input,
.cpanel__portfolio form > label > select,
.cpanel__portfolio__sections__box > label > select,
.cpanel__product form > label > select,
.cpanel__portfolio__sections__box > label > textarea,
.cpanel__product form > label > textarea{
    width: 100%;
    height: 50px;
    float: left;
    background-color: #050217;
    border-radius: 5px;
    border: 1px solid #6964f2;
    box-sizing: border-box;
    color: #e2e2e2;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    resize: unset;
    transition: .2s;
}
.cpanel__portfolio__sections__box > label > textarea,
.cpanel__portfolio form > label > textarea{
	height: 150px;
}
.cpanel__product form > label > textarea{
    width: 100%;
    height: 150px;
}
.cpanel__portfolio-uplaod,
.cpanel__product-uplaod{
    width: 100%;
    height: 50px;
    float: left;
    background-color: #050217;
    border-radius: 5px;
    border: 1px solid #6964f2;
    box-sizing: border-box;
    color: #868686;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    resize: unset;
    cursor: pointer;
    transition: .2s;
}
.cpanel__portfolio__sections-delete{
    width: fit-content;
    height: auto;
    float: right;
    font-size: 14px;
    color: #7b5ff3;
    text-decoration: underline;
    cursor: pointer;
    margin: 2px 0 0 0;
}
.cpanel__portfolio__sections__box-add{
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px;
    border: 1px solid #9b59f6;
    padding: 14px 0;
    cursor: pointer;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(104, 100, 241, 1) 0%, rgba(164, 86, 247, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cpanel__portfolio form > button,
.cpanel__product form > button{
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(104, 100, 241, 1) 0%, rgba(164, 86, 247, 1) 100%);
    border-radius: 5px;
    padding: 14px 0;
    border: unset;
    cursor: pointer;
}
.cpanel__product{
    width: 100%;
    height: auto;
    float: left;
}
.cpanel__product__tools{
    width: 100%;
    height: auto;
    float: left;
}
/* CPANEL */

@media screen and (max-width: 900px){
    header{
        padding: 10px 0;
        position: relative;
    }
    header.index::before{
        content: "";
        position: absolute;
        width: 90%;
        height: 1px;
        bottom: 0;
        left: 5%;
        background: linear-gradient(
            90deg,
            rgba(104, 100, 241, 1) 0%,
            rgba(164, 86, 247, 1) 100%
        );
    }
    .header__item-logo img {
        width: 106px;
    }
    .header__item-lang {
        margin: 0 32px 0 0;
    }
    .header__item-lang span{
        font-size: 14px;
    }
    .header__item-phone{
        display: none;
    }
    .header__item:nth-child(2){
        position: absolute;
        left: 0;
        top: 0;
        background-color: #050117;
        padding: 15px 5%;
        box-sizing: border-box;
        z-index: 1;
        display: none;
    }
    .header__item-close{
        display: block;
    }
    .header__item-menu{
        width: 100%;
        height: auto;
        float: left;
        margin: 25px 0 0 0;
        gap: 15px;
    }
    .header__item-menu li{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .header__item-menu li > a{
        font-size: 14px;
    }
    .header__item-menu > li:last-child{
        display: block;
    }
    .header__item-menu > li:last-child .header__item-phone{
        display: flex;
        float: left;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        background: linear-gradient(90deg, rgba(104, 100, 241, 1) 0%, rgba(164, 86, 247, 1) 100%);
        margin: 10px 0 0;
    }
	.header__item-menu > li:last-child .header__item-phone:before{
		background: linear-gradient(90deg, rgba(104, 100, 241, 1) 0%, rgba(164, 86, 247, 1) 100%);
	}
	.header__item-menu > li:last-child .header__item-phone > span{
		color: #fff;
		-webkit-background-clip: unset;
		-webkit-text-fill-color: unset;
		background-clip: unset;
		background: url();
	}
    .header__item-bar{
        display: block;
        width: 26px;
        height: 16.42px;
        background-image: url("../images/icon/bar.svg");
        border: unset;
        background-color: unset;
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .main{
        padding: 20px 0 0 0;
        background-image: unset;
        overflow: hidden;
    }
    .main-title{
        font-size: 60px;
        line-height: normal;
    }
    .main__row{
        padding: 0;
        margin: -25px 0 0;
    }
    .main__item:nth-child(1){
        width: 100%;
    }
    .main__item:nth-child(2){
        width: 100%;
        margin: 11px 0 0;
    }
    .main__item-vectory {
        width: 90%;
        margin: 0 5%;
    }
    .main__item p {
        text-align: center;
        font-size: 14px;
        line-height: 22px;
    }
    .main__item a{
        font-size: 14px;
        margin: 20px 0 0 0;
    }
    .about{
        padding: 40px 0 0 0;
    }
    .about-description {
        width: 100%;
        font-size: 14px;
        line-height: 22px;
        font-weight: 300;
        margin: 15px auto 0;
    }
    .about__row{
        margin: 15px 0 0 0;
    }
    .about__item:nth-child(1){
        width: 100%;
        margin: 0 0 20px 0;
        display: contents;
    }
    .about__item:nth-child(2){
        width: 100%;
        display: contents;
    }
    .about__item-title {
        font-size: 12px;
        font-weight: 600;
        padding: 7px 15px;
        order: 1;
    }
    .about__item-description{
        width: 100%;
        font-size: 14px;
        line-height: 22px;
        font-weight: 300;
        margin: 15px auto 0;
        order: 2;
    }
    .about__item-poster{
        order: 2;
        min-height: auto;
        margin: 15px 0 0 0;
    }
    .partners{
        padding: 40px 0;
    }
    .partners__row{
        margin: 20px 0 0 0;
        padding: 0 5%;
        box-sizing: border-box;
    }
    .partners__item{
        height: 83px;
    }
    .partners__item img {
        width: fit-content;
        max-width: 85%;
        height: 16px;
        object-fit: fill;
    }
    .case{
        width: calc(100% - 20px);
        margin: 0 10px;
        padding: 10px 0 40px;
    }
    .case-step a{
        display: none;
    }
    .case__row{
        margin: 15px 0 0 0;
    }
    .case__item {
        padding: 20px 5px;
    }
    .case__box:nth-child(1){
        width: 100%;
    }
    .case__box:nth-child(2){
        width: 100%;
    }
    .case__box:nth-child(3){
        width: 100%;
        margin: 15px 0 0 0;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: space-between;
    }
    .case__box p{
        font-size: 12px;
        padding: 0 33px 0 0;
        box-sizing: border-box;
    }
    .case__box span {
        text-align: left;
        font-size: 14px;
        padding: 0;
        margin: 10px 0 0 0;
    }
    .case__box-vectory{
        display: none;
    }
    .case__box em{
        display: block;
    }
    .case__box a {
        font-size: 14px;
        margin: 0;
    }
    .contacts {
        width: calc(100% - 20px);
        margin: 0 10px;
        padding: 10px 0 40px;
        background-image: unset;
    }
    .contacts-subtitle{
        margin: 0 0 15px;
    }
    .contacts-step{
        margin: 0 0 15px;
    }
    .contacts-title{
        font-size: 40px;
    }
    .contacts-description {
        font-size: 14px;
        margin: 5px 0 0 0;
    }
    .contacts__item form {
        max-width: 100%;
        gap: 15px;
    }
    .contacts__item form > label {
        width: 100%;
    }
    .contacts__item form > label:nth-child(3){
        margin: 0;
    }
    .contacts__item form > label > textarea{
        height: 160px;
    }
    .contacts__item form > label > input, .contacts__item form > label > textarea{
        font-size: 14px;
    }
    .contacts__item-checkbox{
        margin: 0;
    }
    .contacts__item-checkbox p{
        font-size: 12px;
    }
    .contacts__item form > button{
        margin: 5px 0 0 0;
        font-size: 14px;
    }
    footer {
        padding: 15px 0 15px;
    }
    .footer__item ul{
        margin: 0 0 10px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .footer__item ul > li:last-child{
        width: 100%;
        margin: 15px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer__item ul > li:last-child > a{
        color: #6A64F1;
    }
    .footer__item ul > li > a{
        font-size: 12px;
    }
    .footer__item-copyright{
        font-size: 10px;
        padding: 10px 0 0 0;
    }
    .breadcrumbs{
        padding: 20px 0 0 0;
    }
    .breadcrumbs__item ul > li > a{
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .breadcrumbs__item ul > li::before{
        top: 6px;
    }
    .documents{
        padding: 40px 0;
    }
    .documents-title{
        font-size: 30px;
    }
    .documents-description{
        font-size: 14px;
    }
    .documents__row{
        margin: 15px 0 0 0;
    }
    .documents table {
        border: 0;
    }
    .documents thead {
        display: none;
    }
    .documents tr {
        display: block;
        margin: 0 0 30px;
        border-bottom: unset;
    }
    .documents tr:last-child{
        margin: 0;
    }
    .documents td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 14px 10px !important;
        border-radius: 5px;
        line-height: normal !important;
    }
    .documents__item table > tbody tr:nth-child(even){
        background-color: unset;
    }
    .documents td:nth-child(odd) {
        background: #141124;
    }
    .documents td::before {
        content: attr(data-label);
        font-weight: 300;
    }
    .documents__item-download{
        float: right;
        margin: 0;
    }
    .documents__item-file::before{
        background-size: 100%;
    }
    .portfolio{
        padding: 40px 0;
    }
    .portfolio-title{
        font-size: 30px;
    }
    .portfolio-description {
        font-size: 14px;
        margin: 10px 0 0 0;
    }
    .portfolio__row {
        margin: 20px 0 0 0;
        gap: 15px;
    }
    .portfolio__item {
        width: calc(50% - 8px);
    }
    .portfolio__item-content{
        background-image: unset;
    }
    .product{
        padding: 40px 0 0;
    }
    .product-title{
        font-size: 30px;
    }
    .product-subject{
        width: 100%;
        max-width: 100%;
        font-size: 12px;
        line-height: 18px;
        font-weight: 600;
        margin: 0 auto 0;
        padding: 15px 0 0 0;
    }
    .product-description {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 20px;
        font-weight: 300;
        margin: 0 auto 0;
        padding: 15px 0 0 0;
    }
    .product-image {
        width: 100%;
        height: auto;
        margin: 20px 0 0 0;
    }
    .product__row{
        margin: 20px 0 0 0;
    }
    .product__item {
        width: 100%;
        padding: 25px 25px 30px;
        min-height: 163px;
        display: flex;
        align-content: center;
    }
    .product__item p{
        font-size: 16px;
    }
    .product__item span {
        font-size: 14px;
        margin: 10px 0 0 0;
        gap: 6px;
    }
    .design{
        padding: 40px 0;
    }
    .design-title{
        font-size: 30px;
    }
    .design-description {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 20px;
        font-weight: 300;
        margin: 0 auto 0;
        padding: 15px 0 0 0;
    }
    .design__row {
        margin: 25px 0 0 0;
        gap: 15px;
    }
    .design__item{
        width: 100%;
        padding: 15px 20px 38px;
    }
    .design__item p::before {
        width: 40px;
        height: 40px;
        background-size: 25px;
    }
    .design__button a{
        width: 100%;
        padding: 14px 0;
        font-size: 14px;
    }
    .design__item p {
        font-size: 16px;
        padding: 0 0 0 55px;
    }
    .design__item span {
        font-size: 14px;
        margin: 15px 0 0 0;
    }
    .design__button{
        margin: 20px 0 0 0;
    }
    .design__item:nth-child(1){
        background-image: url("../images/vectory/design-1-mobile.svg");
        background-position: right calc(100% - 15px);
    }
    .design__item:nth-child(2){
        background-image: url("../images/vectory/design-2-mobile.svg");
        background-position: calc(100% - 14px) bottom;
    }
    .design__item:nth-child(3){
        background-image: url("../images/vectory/design-3-mobile.svg");
        background-position: calc(100% - 14px) calc(100% - 19px);
    }
    .portfoliopage{
        padding: 40px 0;
    }
    .portfoliopage-title{
        font-size: 20px;
    }
    .portfoliopage__item{
        gap: 25px;
    }
    .portfoliopage__box-title {
        width: 100%;
        font-size: 12px;
        padding: 12px 14px;
    }
    .portfoliopage__box-description {
        font-size: 14px;
        line-height: 20px;
        margin: 10px 0 0 0;
    }
    .portfoliopage__box:nth-child(1){
        width: 100% !important;
    }
    .portfoliopage__box:nth-child(2){
        width: 100% !important;
    }
    .portfoliopage__box-poster{
        min-height: auto;
    }
    .portfoliopage__controler {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        margin: 0 auto 0;
        padding: 25px 0 0 0;
    }
    .portfoliopage__controler a{
        font-size: 14px;
    }
}
@media screen and (max-width: 600px){
    .portfolio__item {
        width: 100%;
    }
    .portfolio-more {
        width: 100%;
        height: 40px;
        font-size: 14px;
        border-radius: 5px;
        margin: 10px 0 0 0;
    }
    .portfolio__item-title{
        font-size: 12px;
    }
    .portfolio__item-description{
        font-size: 14px;
    }
    .portfolio__item-button {
        font-size: 14px;
        margin: 15px 20px 0 0;
    }
}
@media screen and (max-width: 320px){
    .main-title{
        font-size: 53px;
    }
}