@font-face {
    font-family: Qanelas;
    src: url("fonts/Qanelas/Qanelas-ExtraBold.ttf");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Qanelas;
    src: url("fonts/Qanelas/Qanelas-SemiBold.ttf");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Qanelas;
    src: url("fonts/Qanelas/Qanelas-Regular.ttf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root{
    --accent-color: #4D7CB2;
}
body{
    position: relative;
    color: #000;
    font-family: Qanelas;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

a{
    color: #000;
    text-decoration: none !important;
}

section{
    padding: 70px 0px;
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1240px;
    }
}

h1{
    color: #FFFFFF;
    leading-trim: both;
    text-edge: cap;
    font-size: 45px;
    font-weight: 800;
    line-height: 140%; /* 70.4px */
    text-transform: uppercase;
    max-width: 900px;
}

h2{
    color: #413B3B;
    leading-trim: both;
    text-edge: cap;
    font-size: 25px;
    font-weight: 600;
    line-height: 110%;
    text-transform: uppercase;
    margin-bottom: 40px;
}

h3{
    color: #000;
    leading-trim: both;
    text-edge: cap;
    font-size: 35px;
    font-weight: 600;
    line-height: 140%;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.button{
    display: block;
    cursor: pointer;
    width: max-content;
    border-radius: 40px;
    background: var(--accent-color);
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 100%;
    text-align: center;
    padding: 16px 60px;
    transition: all 0.2s ease;
    border: 2px solid var(--accent-color);
}

.button:hover{
    transform: scale(0.96);
    background: transparent;
    color: var(--accent-color);
}

.button.out{
    background: transparent;
    color: var(--accent-color);
}

.button.out:hover{
    background: var(--accent-color);
    color: #FFF;
}

.def-h{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;
    margin-bottom: 40px;
}


/* header */
header{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    padding: 16px 0px;
}

.header-div{
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 30px;
    align-items: center;
}

.header-right{
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: flex-end;
}

.main-menu{
    padding: 0px;
    margin: 0px;
    display: flex;
    gap: 30px;
    align-items: center;
    list-style-type: none;
}

.header-div a{
    color: #FFF;
    transition: all 0.2s ease;
}
.header-div.dark{
    border-bottom: 1px solid #181818;
    padding-bottom: 20px;
}
.header-div.dark a{
    color: #181818;
}
.header-div.dark .h-phone{
    background: rgba(24,24,24,0.2);
}
.main-menu a:hover{
    text-decoration: underline !important;
}

.logo img{
    display: block;
    width: 100%;
}

.h-phone{
    background: #ffffff4b;
    border-radius: 10px;
    padding: 6px 22px;
}

.h-phone:hover{
    background: var(--accent-color);
}



/* main */

.main{
    height: 100vh;
    max-height: 1600px;
    background: url("../img/main.jpg") center no-repeat;
    background-size: cover;
}

.main .container{
    height: 100%;
    display: grid;
    grid-gap: 40px;
    align-content: flex-end;
}


/* about-sec */

.aboutSwiper img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
}

.swiper-pagination {
    position: relative;
    top: unset;
    left: unset;
    margin-top: 20px;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #000;
}

.mission-div{
    background: #4d7cb2d0;
    border-radius: 20px;
    text-align: center;
    padding: 40px 20px;
    margin-top: 80px;
}

.mission-div h2{
    color: #FFF;
}

.mission-div p{
    color: #FFF;
    max-width: 800px;
    display: block;
    margin: 0px auto;
}


/* command-sec */

.commandSwiper img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 10px;
}

.commandSwiper .name{
    font-weight: 600;
    text-transform: uppercase;
}

.swiper{
    width: 100%;
}

.swiper-nav{
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.swiper-button-next,
.swiper-button-prev {
  position:relative;
  top:unset;
  right: unset;
  left: unset;
  width:55px;
  height:55px;
  margin-top:0px;
  padding: 10px;
  border: 1px solid #000;
  border-radius: 5px;
}

.swiper-button-next::after, .swiper-button-prev::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/icons/swiper-arrow.svg") center no-repeat;
    background-size: contain;
}

.swiper-button-prev::after{
    transform: rotate(180deg);
}


/* services-sec */

.accordion-button:focus{
    box-shadow: none;
}

.accordion-item {
    border: 0px;
    border-bottom: 1px solid #D9D9D9;
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: transparent;
    box-shadow: none;
}

.accordion-button{
    color: #000;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.accordion-body ul{
    list-style-type: none;
}

.accordion-body ul li{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;
    padding: 10px 0px;
}

.accordion-body ul li:last-child{
    border-bottom: 0px;
}

.accordion-body ul li::before{
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    position: relative;
    background: var(--accent-color);
    margin-right: 10px;
    border-radius: 100%;
}


/* news-list-sec */

.news-list-div{
    background: #4D7CB280;
    padding: 20px;
    display: flex;
    gap: 20px;
}

.news-list-div .item{
    background: var(--accent-color);
    padding: 20px;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
    width: max-content;
    overflow: hidden;
    flex-grow: 1;
}

.news-list-div .title{
    display: block;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 400;
    color: #FFF;
    overflow: hidden;
      text-overflow: ellipsis;
      display: -moz-box;
      -moz-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      box-orient: vertical;
}

.news-list-div img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.news-list-div .desc{
    font-size: 16px;
    color: #FFF;
    overflow: hidden;
      text-overflow: ellipsis;
      display: -moz-box;
      -moz-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      box-orient: vertical;
}

.news-list-div .link{
    font-size: 16px;
    color: #FFF;
    text-transform: uppercase;
    text-decoration: underline;
}

.news-list-div .category{
    margin: 0px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #FFF;
    font-weight: 600;
}

.news-list-div .detail {
    width: 0px;
    overflow: hidden;
    transition: all 0.2s ease;
    opacity: 0;
}

.news-list-div .item:hover{
    padding: 20px;
    width: 400px !important;
}

.news-list-div .item:hover .detail{
    opacity: 1;
    width: 360px;
}

.news-list-div .item:hover .category{
    opacity: 0;
}

/* reviews-sec */

.reviews-head{
    width: calc(50% - 20px);
    display: block;
    margin: -80px auto 0px;
}

.reviews-head h3{
    text-align: center;
}

.reviews-head .desc{
    font-size: 24px;
    text-align: center;
}

.reviewsSwiper {
    margin-top: -100px;
}

.reviewsSwiper .swiper-slide{
    padding-top: 40px;
}

.reviewsSwiper .item{
    background: #4D7CB233;
    border-radius: 15px;
    padding: 20px;
}

.reviewsSwiper img{
    display: block;
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 100%;
    margin: -40px auto 15px;
}

.reviewsSwiper .name{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
}

.reviewsSwiper .job{
    font-size: 16px;
    color: #413B3B;
    text-align: center;
}

.reviewsSwiper .desc p{
    font-size: 16px;
    color: #413B3B;
    margin-bottom: 30px;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
}

.reviewsSwiper .link{
    font-size: 16px;
    color: #413B3B;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    gap: 5px;
    align-items: center;
    margin: auto;
    width: max-content;
	cursor: pointer;
}

.reviewsSwiper .link::after{
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    background: url("../img/icons/review-arrow.svg") center no-repeat;
    background-size: contain;
}

.swiper-slide{
    transition: all 0.2s ease;
}

.reviewsSwiper .swiper-slide-next, .reviewsSwiper .swiper-slide-next + .swiper-slide{
    margin: 100px 0px 0px;
}

.reviews-sec .swiper-nav{
    width: max-content;
    margin: 40px auto 0px;
}





/* widget */

.whatsapp-widjet{
	position:fixed;
	bottom:25px;
	right:25px;
	border:1px solid var(--accent-color);
	width:60px;
	height:60px;
	border-radius:60px;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:140;
	transition:all .5s ease;
	background:var(--accent-color);
	cursor:pointer
}
.whatsapp-widjet-icon{
	width:60px;
	height:60px;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:10;
}
.whatsapp-widjet-icon svg{
	fill:#fff;
	width:30px;
	height:30px
}
.whatsapp-widjet-circle-left{
	position:absolute;
	width:50%;
	top:0;
	bottom:0;
	overflow:hidden;
	left:0
}
.whatsapp-widjet-circle-left{
	border:1px solid var(--accent-color);
	position:absolute;
	top:-7px;
	bottom:0;
	left:-7px;
	right:0;
	background-clip:padding-box;
	width:36px;
	height:72px;
	border-radius:76px 0 0 76px;
	border-right:none;
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
	-webkit-transform-origin:100% 50%;
	-moz-transform-origin:100% 50%;
	-ms-transform-origin:100% 50%;
	-o-transform-origin:100% 50%;
	transform-origin:100% 50%;
	-webkit-animation:pie-left 4s both linear infinite;
	-moz-animation:pie-left 4s both linear infinite;
	-ms-animation:pie-left 4s both linear infinite;
	-o-animation:pie-left 4s both linear infinite;
	animation:pie-left 4s both linear infinite
}
.whatsapp-widjet-circle-right{
	position:absolute;
	width:50%;
	top:0;
	bottom:0;
	overflow:hidden;
	right:0
}
.whatsapp-widjet-circle-right{
	border:1px solid transparent;
	position:absolute;
	top:-7px;
	bottom:0;
	left:0;
	right:-7px;
	background-clip:padding-box;
	width:36px;
	height:72px;
	border-radius:76px 0 0 76px;
	border-right:none;
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
	-webkit-transform-origin:100% 50%;
	-moz-transform-origin:100% 50%;
	-ms-transform-origin:100% 50%;
	-o-transform-origin:100% 50%;
	transform-origin:100% 50%;
	-webkit-animation:pie-right 4s both linear infinite;
	-moz-animation:pie-right 4s both linear infinite;
	-ms-animation:pie-right 4s both linear infinite;
	-o-animation:pie-right 4s both linear infinite;
	animation:pie-right 4s both linear infinite
}
@keyframes pie-left{
	0%{
		-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		transform:rotate(-180deg)
	}
	10%{
		-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		transform:rotate(-180deg)
	}
	20%{
		-webkit-transform:rotate(0);
		-moz-transform:rotate(0);
		-ms-transform:rotate(0);
		-o-transform:rotate(0);
		transform:rotate(0)
	}
	30%{
		-webkit-transform:rotate(0);
		-moz-transform:rotate(0);
		-ms-transform:rotate(0);
		-o-transform:rotate(0);
		transform:rotate(0)
	}
	40%{
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-o-transform:rotate(180deg);
		transform:rotate(180deg)
	}
	50%{
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
		-ms-transform:rotate(180deg)
	}
}
.call-widjet{
	position:fixed;
	bottom:108px;
	right:25px;
	border:1px solid var(--accent-color);
	width:60px;
	height:60px;
	border-radius:60px;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:140;
	transition:all .5s ease;
	background:var(--accent-color);
	cursor:pointer
}
.call-widjet-icon{
	width:60px;
	height:60px;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:10
}
.call-widjet-icon svg{
	fill:#fff;
	width:30px;
	height:30px
}
.call-widjet-circle-left{
	position:absolute;
	width:50%;
	top:0;
	bottom:0;
	overflow:hidden;
	left:0
}
.call-widjet-circle-left{
	border:1px solid var(--accent-color);
	position:absolute;
	top:-7px;
	bottom:0;
	left:-7px;
	right:0;
	background-clip:padding-box;
	width:36px;
	height:72px;
	border-radius:76px 0 0 76px;
	border-right:none;
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
	-webkit-transform-origin:100% 50%;
	-moz-transform-origin:100% 50%;
	-ms-transform-origin:100% 50%;
	-o-transform-origin:100% 50%;
	transform-origin:100% 50%;
	-webkit-animation:pie-left 4s both linear infinite;
	-moz-animation:pie-left 4s both linear infinite;
	-ms-animation:pie-left 4s both linear infinite;
	-o-animation:pie-left 4s both linear infinite;
	animation:pie-left 4s both linear infinite
}
.call-widjet-circle-right{
	position:absolute;
	width:50%;
	top:0;
	bottom:0;
	overflow:hidden;
	right:0
}
.call-widjet-circle-right{
	border:1px solid transparent;
	position:absolute;
	top:-7px;
	bottom:0;
	left:0;
	right:-7px;
	background-clip:padding-box;
	width:36px;
	height:72px;
	border-radius:76px 0 0 76px;
	border-right:none;
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
	-webkit-transform-origin:100% 50%;
	-moz-transform-origin:100% 50%;
	-ms-transform-origin:100% 50%;
	-o-transform-origin:100% 50%;
	transform-origin:100% 50%;
	-webkit-animation:pie-right 4s both linear infinite;
	-moz-animation:pie-right 4s both linear infinite;
	-ms-animation:pie-right 4s both linear infinite;
	-o-animation:pie-right 4s both linear infinite;
	animation:pie-right 4s both linear infinite
}
@keyframes pie-left{
	0%{
		-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		transform:rotate(-180deg)
	}
	10%{
		-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		transform:rotate(-180deg)
	}
	20%{
		-webkit-transform:rotate(0);
		-moz-transform:rotate(0);
		-ms-transform:rotate(0);
		-o-transform:rotate(0);
		transform:rotate(0)
	}
	30%{
		-webkit-transform:rotate(0);
		-moz-transform:rotate(0);
		-ms-transform:rotate(0);
		-o-transform:rotate(0);
		transform:rotate(0)
	}
	40%{
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-o-transform:rotate(180deg);
		transform:rotate(180deg)
	}
	50%{
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
		-ms-transform:rotate(180deg)
	}
}
.contacts-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;
}
.contacts-title{
    text-transform: uppercase;
    display: flex;
    grid-gap: 20px;
}
.contacts-title::before{
    content: '';
    background: var(--accent-color);
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.contacts-content{
    font-size: 50px;
    color: #413b3b;
    font-weight: 400;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
}
.contacts-item:hover .contacts-content{
    color: var(--accent-color);
    font-weight: 500;
}
.contacts-item:hover .contacts-content svg{
    opacity: 1;
    transform: translateX(0px);
}
.contacts-content svg{
    margin-right: 10px;
    opacity: 0;
    transition: all 0.4s ease;
    transform: translateX(-15px);
}
.contacts-item:hover .contacts-circle{
    opacity: 1;
    transform: translateY(0%);
}
.contacts-circle{
    background: rgba(0, 0, 0, 0.7);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    opacity: 0;
    transition: all 0.4s ease;
    transform: translateY(100%);
}
.contacts-content .contacts-circle svg{
    margin-right: 0;
    transform: unset;
}
footer{
    background: #090c16;
    border-radius: 25px;
    padding: 40px 0px 20px;
    margin-top: 70px;
}
.foot-top-title{
    font-size: 35px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 0;
}
.foot-nav-item a{
    color: #fff;
}
.foot-nav-item p{
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-bottom: 0;
}
.foot-nav-item{
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}
.foot-top{
    display: grid;
    grid-template-columns: 0.75fr 1fr;
}
.foot-nav{
    display: flex;
    justify-content: space-between;
}
.foot-logo img{
    width: auto;
    height: 68px;
}
.foot-bottom{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.foot-socio{
    display: flex;
    grid-gap: 20px;
}
.foot-socio a{
    transition: all 0.4s ease;
}
.foot-socio a:hover{
    transform: scale(1.1);
}
.foot-end{
    border-top: 1px solid #fff;
    padding-top: 20px;
}
.foot-wr{
    display: flex;
    flex-direction: column;
    grid-gap: 80px;
    padding-bottom: 30px;
}
.foot-end{
    display: flex;
    justify-content: space-between;
}
.foot-end p, .foot-end a{
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    margin-bottom: 0;
}
.temp-first-disp{
    background: #181818;
    padding-bottom: 40px;
}
.breadcrumbs{
    margin: 80px 0px;
    display: flex;
    grid-gap: 15px;
}
.breadcrumbs a{
    position: relative;
    padding-right: 25px;
    transition: all 0.4s ease;
}
.breadcrumbs a::after{
    content: '';
    position: absolute;
    top: 9px;
    width: 10px;
    height: 1.5px;
    border-radius: 10px;
    right: 0;
    background: #fff;
    transform: rotate(45deg);
}
.breadcrumbs a::before{
    content: '';
    position: absolute;
    bottom: 7px;
    width: 10px;
    height: 1.5px;
    border-radius: 10px;
    right: 0;
    background: #fff;
    transform: rotate(-45deg);
}
.breadcrumbs a, .breadcrumbs span{
    color: #fff;
    font-size: 18px;
}
.temp-first-disp-title{
    text-transform: unset;
    font-size: 45px;
    margin-bottom: 0;
}
.serv-patent-div{
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}
.serv-patent-div::before{
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    width: 1px;
    margin: auto;
    background: #D9D9D9;
}

.serv-patent-div-title{
    font-size: 35px;
    font-weight: 600;
    text-transform: uppercase;
    grid-column-start: 1;
    grid-column-end: 2;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 20px;
    padding-top: 70px;
    
    line-height: 45px;
}
.serv-patent-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 60px;
}
.serv-patent-title{
    font-size: 25px;
    font-weight: 500;
}
.serv-patent-inn{
    padding-left: 20px;
}
.serv-patent-inn div{
    display: grid;
    grid-template-columns: 25px 1fr;
    grid-gap: 10px;
}
.serv-patent-inn div::before{
    content: '';
    background: url(../img/icons/arrow.svg) center no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
}
.servs-sec{
    padding: 0;
}
.serv-patent-div:last-child{
    padding-bottom: 70px;
}
.callback-sec{
    background: var(--accent-color);
    border-radius: 50px;
    margin-bottom: 200px;
}
.callback-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
}
.callback-div p{
    font-size: 35px;
    color: #fff;
    font-weight: 600;
}
.callback-div .button{
    background: #fff;
    color: #000;
}
.news-cats-link{
    display: flex;
    justify-content: center;
    grid-gap: 10px;
    margin-top: 40px;
}
.news-cats-link a{
    color: rgba(255,255,255,0.5);
    font-size: 20px;
    display: flex;
    grid-gap: 10px;
}
.news-cats-link a::after{
    content: '/';
}
.news-cats-link a:last-child::after{
    display: none;
}
.news-cats-link a.active{
    color: #fff;
}
.news-page-title-div h1{
    text-align: center;
    max-width: 100%;
}
.news-page-item{
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
}
.news-page-image{
    width: 100%;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
}
.news-page-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}
.news-page-item:hover img{
    transform: scale(1.1);
}
.news-last-item:hover img{
    transform: scale(1.1);
}
.news-page-title{
    margin-bottom: 0;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.news-page-title svg{
    width: 20px;
    height: 20px;
    margin-top: 7px;
}
.news-page-date{
    color: rgba(9,12,22,0.5);
    font-size: 16px;
    margin-bottom: 0;
}
.news-last-item .news-page-image{
    height: 450px;
    border-radius: 0px 0px 10px 10px;
}
.news-page-inner{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 18px;
}
.news-page-item:nth-child(9n+3){
    grid-column: 4;
}
.news-page-item:nth-child(9n+6){
    grid-column-start: 3;
    grid-column-end: 5;
}
.news-page-item:nth-child(9n+7){
    grid-column: 2;
}
.news-page-item:nth-child(9n+9){
    grid-column: 5;
}
.news-last-item .news-page-title{
    font-size: 25px;
    font-weight: 600;
    justify-content: space-between;
    display: grid;
    grid-template-columns: 0.4fr 35px;
}
.news-last-item .news-page-title svg{
    width: 35px;
    height: 35px;
}
.news-last-item{
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.news-page-inner .button{
    grid-column-start: 1;
    grid-column-end: 6;
    margin: 20px auto 0px;
}
.news-page-sec{
    padding-top: 0;
}
.single-news-date{
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    margin-bottom: 0;
}
.single-news-image{
    width: 100%;
    height: 450px;
    border-radius: 0px 0px 10px 10px;
}
.single-news-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.single-news-sec{
    padding-top: 0;
}
.single-news-desc{
    column-count: 2;
    gap: 35px;
    margin-top: 40px;
    margin-bottom: 0;
}
.single-news-share{
    width: fit-content;
    margin-left: auto;
    margin-top: 50px;
}
.single-news-share p{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
}
.single-news-share-links{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.single-news-share-links a svg path{
    transition: all 0.4s ease;
}
.single-news-share-links a:hover svg path{
    fill: var(--accent-color);
}
.news-other-inner{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 35px;
}
.news-other-inner .news-page-item:nth-child(9n+3){
    grid-column: unset;
}
.projects-page-item{
    background: rgba(77, 124, 178, 0.2);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
.projects-page-image{
        width: 100%;
    height: 247px;
    overflow: hidden;
}
.projects-page-image img{
        width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}
.projects-page-item:hover .projects-page-image img{
    transform: scale(1.1);
}
.projects-page-con{
    padding: 20px;
    display: flex;
    flex-direction: column;
    grid-gap: 15px;
}
.projects-page-title{
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0;
    transition: all 0.4s ease;
}
.projects-page-item:hover .projects-page-title{
    color: var(--accent-color);
}
.projects-page-desc{
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 0;
    transition: all 0.4s ease;
}
.projects-page-item:hover .projects-page-desc{
    color: var(--accent-color);
}
.projects-page-link{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    grid-gap: 0px;
    transition: all 0.4s ease;
}
.projects-page-item:hover .projects-page-link{
    color: var(--accent-color);
}
.projects-page-link svg path{
    transition: all 0.4s ease;
}
.projects-page-item:hover .projects-page-link svg path{
    fill: var(--accent-color);
}
.projects-page-inner{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.proj-modal .modal-dialog{
    max-width: 877px;
}
.proj-modal .modal-header{
    padding-bottom: 0;
    border-bottom: unset;
    justify-content: flex-end;
    position: absolute;
    top: 10px;
    right: 16px;
    width: 100%;
    z-index: 1;
}
.proj-modal .modal-body{
    padding: 30px;
}
.proj-modal-inner{
    display: grid;
    grid-template-columns: 362px 1fr;
    grid-gap: 20px;
}
.proj-modal-image{
    width: 362px;
    height: 572px;
    border-radius: 15px;
    overflow: hidden;
}
.proj-modal-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.proj-modal-con{
    display: flex;
    flex-direction: column;
    grid-gap: 30px;
    margin-top: 35px;
}
.modal button.close{
    background: transparent;
    border: unset;
    padding: 0;
}
.modal button.close svg{
    width: 20px;
    height: 20px;
}
.modal button.close svg path{
    fill: #fff;
}
.proj-modal-title{
    font-size: 32px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}
.proj-modal-desc{
    color: #fff;
    margin-bottom: 0;
}
.proj-modal .modal-content{
    background: #87adda;
    border-radius: 20px;
}
.error-sec{
    padding: 140px 0px 70px;
}
.error-wr{
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.error-b{
    font-size: 36px;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 0;
}
.error-inn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.error-inn h1{
    font-size: 250px;
    color: var(--accent-color);
    margin-bottom: 0;
    font-style: italic;
    font-weight: 700;
    display: flex;
    line-height: 250px;
    grid-gap: 14px;
}
.error-inn h1 span{
    font-style: normal;
    font-weight: 600;
    margin-right: -30px;
}
.error-btn{
    color: var(--accent-color);
    font-size: 26px;
    display: flex;
    grid-gap: 10px;
    align-items: center;
}
.error-btn svg{
    transform: rotate(-135deg);
    margin-top: 5px;
    transition: all 0.4s ease;
}
.error-btn:hover svg{
    transform: rotate(-135deg) translate(10px, -10px);
}
.error-btn svg path{
    fill: var(--accent-color);
}
.error-inn.thanks-inn h1{
        font-size: 70px;
    text-transform: unset;
    font-style: normal;
    line-height: 70px;
    margin-bottom: 40px;
}
.call-modal .modal-dialog{
    max-width: 680px;
}
.call-modal .modal-content{
    background: var(--accent-color);
    border-radius: 20px;
}
.call-modal .modal-header{
    position: absolute;
    top: 25px;
    right: 25px;
    border-bottom: unset;
    padding: 0;
    z-index: 1;
}
.call-modal-title{
        color: #fff;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 0;
    text-align: center;
}
.call-modal-inner form{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}
.call-modal-inner form input{
        color: #fff;
    background: transparent;
    border: unset;
    border-bottom: 1px solid #fff;
    padding: 15px 0px;
	width: 100%;
}
.call-modal-inner form input:focus-visible{
    outline: unset;
}
.call-modal-inner form input::placeholder{
        color: rgba(255, 255, 255, 0.5);
}
.call-modal .modal-body{
    padding: 50px;
}
.call-modal-inner form .button{
        background: #fff;
    color: #000;
    width: 100%;
    margin-top: 50px;
}
.preloader-div{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 1000;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.preload-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    margin-top: -160px;
}
.preload-head{
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: end;
}
.preload-logo svg{
        width: 280px;
    height: 86px;
}
.preload-end{
    width: 100%;
    height: 4px;
    position: relative;
}
.preload-end span{
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--accent-color);
    top: 0;
    left: 0;
    animation-name: preloadline;
    -webkit-animation-name: preloadline;
    animation-duration: 5.5s;
    -webkit-animation-duration: 5.5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
    animation-delay: 0.3s;
}
.preload-count{
        font-family: 'Qanelas';
    color: #000;
    font-size: 60px;
    width: 100%;
    display: flex;
    justify-content: end;
	margin-bottom: 20px;
}

@keyframes preloadline{
    0%{
        width: 1%;
    }
    100%{
        width: 100%;
    }
}
body::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

body::-webkit-scrollbar
{
  width: 12px;
  background-color: transparent;
}

body::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: var(--accent-color);
}
.m-tog-menu{
	display: none;
}
.m-tog{
	display: none;
}

@media (max-width:767px){
	.m-tog{
		width: 20px;
		height: 12px;
		position: relative;
		display: grid;
		align-items: center;
	}
	.header-div .h-phone{
		display: none;
	}
	header:has(.m-tog.active) .header-div{
		border-bottom: unset;
	}
	.m-tog span{
		width: 20px;
		height: 1px;
		background: #fff;
		transition: all 0.4s ease;
	}
	.m-tog::before{
		top: 0;
		position: absolute;
		content: '';
		height: 1px;
		width: 20px;
		background: #fff;
		transition: all 0.4s ease;
	}
	.m-tog.active::before{
		transform: translate(0px, 6px) rotate(45deg);
	}
	.m-tog.active::after{
		display: none;
	}
	.m-tog.active span{
		transform: translate(0px, 1px) rotate(-45deg);
	}
	.m-tog::after{
		bottom: 0;
		position: absolute;
		content: '';
		height: 1px;
		width: 20px;
		background: #fff;
	}
	.m-tog-menu{
		position: fixed;
		background: #181818;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: 0px 15px;
	}
	.m-tog-ul{
		margin: 140px 0px;
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		grid-gap: 20px;
	}
	.m-tog-ul a{
		color: #fff;
		font-size: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.m-tog-ul a::after{
		content: '';
		width: 40px;
		height: 40px;
		background: url(../img/icons/m-tog-arrow.svg) center no-repeat;
		background-size: 18px;
		border: 1px solid #fff;
		border-radius: 5px;
	}
	.m-tog-phone{
		font-size: 20px;
		color: #fff;
	}
	.m-tog-socio{
		display: flex;
		grid-gap: 15px;
		margin-top: 35px;
	}
	.m-tog-socio a{
		transition: all 0.4s ease;
	}
	.m-tog-socio a:hover{
		transform: scale(1.1);
	}
	.main-menu{
		display: none;
	}
	.button{
		width: 100%;
		font-size: 20px;
		padding: 10px 30px;
	}
	.def-h{
		grid-template-columns: 1fr;
	}
	h3{
		font-size: 25px;
	}
	body{
		font-size: 16px;
	}
	.news-list-div{
		flex-direction: column;
	}
	.foot-top{
		grid-template-columns: 1fr;
		grid-gap: 20px;
	}
	.foot-nav{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20px;
	}
	.foot-nav-item:last-child{
		grid-column: 2;
		transform: translatey(-95px);
	}
	.foot-nav-item p{
		font-size: 16px;
	}
	.foot-nav-item a{
		font-size: 14px;
	}
	.main{
		height: 700px;
	}
	h1{
		font-size: 30px;
	}
	.news-list-div .item{
		height: 63px;
		max-width: 100%;
		width: 100%;
	}
	.news-list-div .item:hover{
		height: 100%;
	}
	.reviewsSwiper .swiper-slide-next, .reviewsSwiper .swiper-slide-next + .swiper-slide{
    	margin: 0;
	}
	.reviewsSwiper img{
		width: 60px;
		height: 60px;
	}
	.reviewsSwiper .desc p{
		font-size: 12px;
	}
	.reviewsSwiper .link{
		font-size: 14px;
		text-transform: unset;
	}
	.reviewsSwiper .link::after{
		width: 20px;
	}
	.reviews-head{
		margin: unset;
		width: 100%;
	}
	.reviewsSwiper{
		margin-top: unset;
	}
	.reviews-head .desc{
		font-size: 20px;
	}
	.swiper-button-next, .swiper-button-prev{
		width: 45px;
		height: 45px;
	}
	.contacts-item{
		padding: 10px 0px;
	}
	.contacts-title::before{
		width: 15px;
		height: 15px;
	}
	.contacts-content{
		font-size: 24px;
	}
	.contacts-circle{
		display: none;
	}
	.contacts-content svg{
		width: 20px;
	}
	.foot-bottom{
		flex-direction: column;
	}
	.foot-socio{
		position: absolute;
		bottom: 30px;
		right: 15px;
	}
	.foot-end{
		flex-direction: column;
	}
	.foot-top-title{
		font-size: 30px;
		line-height: 110%;
	}
	.foot-wr{
		grid-gap: 0;
	}
	.news-list-div .item{
		transition: unset;
	}
	.commandSwiper img{
		height: 200px;
	}
	.commandSwiper .name{
		font-size: 16px;
	}
	.commandSwiper p{
		font-size: 14px;
	}
	.accordion-button{
		display: grid;
		grid-template-columns: 0.8fr 20px;
		justify-content: space-between;
		align-items: flex-start;
	}
	.accordion-body ul{
		margin: 0;
		padding: 0;
	}
	.services-sec .button{
		width: fit-content;
		font-size: 16px;
	}
	.command-head{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.header-div{
		border-bottom: 1px solid #fff;
		padding-bottom: 20px;
	}
	.temp-first-disp-title{
		font-size: 35px;
	}
	.breadcrumbs{
		margin: 60px 0px;
	}
	.breadcrumbs a, .breadcrumbs span{
		font-size: 16px;
	}
	.breadcrumbs a::after{
		width: 8px;
	}
	.breadcrumbs a::before{
		width: 8px;
	}
	.serv-patent-div::before{
		display: none;
	}
	.serv-patent-div-title{
		font-size: 25px;
	}
	.serv-patent-item{
		grid-template-columns: 1fr;
	}
	.serv-patent-title{
		font-size: 20px;
	}
	.serv-patent-inn{
		padding-left: 0;
	}
	.serv-patent-inn div{
		grid-template-columns: 20px 1fr;
	}
	.serv-patent-inn div::before{
		width: 20px;
		height: 20px;
	}
	.callback-sec{
		border-radius: 15px;
		padding: 50px 0px;
	}
	.callback-div .button{
		font-size: 18px;
		padding: 20px;
	}
	.callback-div p{
		font-size: 25px;
		line-height: 120%;
		text-align: center;
	}
	.projects-page-inner{
		grid-template-columns: 1fr;
	}
	.projects-page-image{
		height: 232px;
	}
	.projects-page-title{
		font-size: 20px;
	}
	.projects-page-link{
		font-size: 14px;
		grid-gap: 5px;
	}
	.proj-modal .modal-body{
		padding: 60px 30px 30px
	}
	.modal button.close svg{
		width: 17px;
		height: 17px;
	}
	.proj-modal .modal-header{
		top: 6px;
		right: 13px;
	}
	.proj-modal-inner{
		grid-template-columns: 1fr;
	}
	.proj-modal-image{
		width: 100%;
		height: 283px;
	}
	.proj-modal-title{
		font-size: 26px;
		line-height: 130%;
	}
	.news-last-item .news-page-image{
		height: 250px;
		border-radius: 10px;
	}
	.news-last-item .news-page-title{
		font-size: 20px;
		grid-template-columns: 1fr 20px;
	}
	.news-last-item .news-page-title svg{
		width: 20px;
		height: 20px;
	}
	.news-page-inner{
		grid-template-columns: 1fr;
	}
	.news-page-item:nth-child(9n+3){
		grid-column: unset;
	}
	.news-page-item:nth-child(9n+6){
		grid-column-start: unset;
		grid-column-end: unset;
	}
	.news-page-item:nth-child(9n+7){
		grid-column: unset;
	}
	.news-page-item:nth-child(9n+9){
		grid-column: unset;
	}
	.news-page-title{
		font-size: 20px;
		display: grid;
		grid-template-columns: 1fr 20px;
		font-weight: 600;
	}
	.news-page-item {
    	border-bottom: 1px solid #d9d9d9;
    	margin-bottom: 5px;
    	padding-bottom: 20px;
	}
	.news-cats-link{
		flex-wrap: wrap;
		justify-content: flex-start;
		grid-gap: 15px;
	}
	.news-cats-link a{
		font-size: 18px;
	}
	.news-cats-link a::after{
		display: none;
	}
	.news-page-title-div h1{
		text-align: left;
		line-height: 110%;
		margin-bottom: 30px;
	}
	.single-news-image{
		height: 370px;
		border-radius: 10px;
		overflow: hidden;
	}
	.single-news-desc{
		column-count: 1;
	}
	.single-news-share p{
		font-size: 18px;
	}
	.news-other-inner{
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
	}
	.news-other-inner .news-page-image{
		height: 200px;
	}
	.news-other-inner .news-page-title{
		font-size: 18px;
		grid-template-columns: 1fr 57px;
		justify-items: flex-end;
	}
	.news-other-inner .news-page-title svg{
		width: 18px;
		height: 18px;
	}
	.error-inn h1{
		font-size: 200px;
		margin-left: -22px;
	}
	.error-b{
		font-size: 28px;
	}
	.error-btn{
		font-size: 22px;
	}
	.error-inn.thanks-inn h1{
		font-size: 40px;
		margin-left: 0;
		margin-bottom: 20px;
		text-align: center;
	}
	.error-inn.thanks-inn .button{
		font-size: 18px;
	}
	.news-list-div .item:hover{
		width: 100% !important;
	}
	
	
}

@media (max-width:360px){
    
}
.commandSwiper .link{
    font-size: 16px;
    color: #413B3B;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    gap: 5px;
	cursor: pointer;
    align-items: center;
    width: max-content;
}

.commandSwiper .link::after{
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    background: url("../img/icons/review-arrow.svg") center no-repeat;
    background-size: contain;
}
.team-modal-inner{
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-gap: 20px;
}
.team-modal-inner img{
	background: #fff;
    height: 240px;
    border-radius: 20px;
    width: 100%;
    object-fit: cover;
}
.team-modal-title{
	font-weight: 600;
    text-transform: uppercase;
    color: #fff;
}
.team-modal-desc{
	color: #fff;
}
.revs-modals .modal-dialog{
	max-width: 463px;
}
.revs-modal.item{
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
	justify-content: center;
	align-items: center;
}
.revs-modal.item img{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}
.revs-modal.item .name, .revs-modal.item .job, .revs-modal.item .desc{
	color: #fff;
}
.revs-modals .modal-content{
    background: var(--accent-color);
    border-radius: 20px;
}
.revs-modals .modal-header{
    position: absolute;
    top: 25px;
    right: 25px;
    border-bottom: unset;
    padding: 0;
    z-index: 1;
}
.team-desc{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
}
@media all and (max-width:768px){
	.news-list-div .item:hover .detail{
		width: 100%;
	}
	.command-sec{
		padding-bottom: 0;
	}
	.team-modal-inner{
		grid-template-columns: 1fr;
	}
}