/* USER VARIABLES SECTION */

:root {
	--accent: #1264FF;
	--text: #333;
	--regular-text: 16px;
	--lineheight: 1.65;
	--userfont: roboto, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* BOOTSTRAP SETTINGS SECTION */

/* gutter 20px (10px + 10px). Comment this code for default gutter start at 1.5rem (24px) wide. */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: .625rem; }
.row, .row > * { --bs-gutter-x: 1.25rem; }

/* FONTS LOAD SECTION */

@font-face {src: url("../fonts/AktivGroteskCorp-Light.woff2") format("woff2"); font-family: "Aktiv Grotesk Corp light"; font-weight: 200; font-style: normal;}
@font-face {src: url("../fonts/AktivGroteskCorp-Regular.woff2") format("woff2"); font-family: "Aktiv Grotesk Corp regular"; font-weight: 400; font-style: normal;}
@font-face {src: url("../fonts/AktivGroteskCorp-Medium.woff2") format("woff2"); font-family: "Aktiv Grotesk Corp medium"; font-weight: 700; font-style: normal;}

/* GENERAL CSS SETTINGS */

::placeholder { color: #666; }
::selection { background-color: var(--accent); color: #fff; }
input, textarea { outline: none; }
input:focus:required:invalid, textarea:focus:required:invalid { border-color: red; }
input:required:valid, textarea:required:valid { border-color: green; }

body {
	margin: 0;
	padding: 0;
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}

*, ::before, ::after {
	box-sizing: border-box;
}

/* USER STYLES */

.image {
	max-width: 100%;
}

.accent {
	color: var(--accent);
}

.container-grid {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
}

p {
	margin: 0 0 10px 0;
}

/*-------------------------------
   Flex
----------------------------------*/

.flex {
	display: flex;
/*	flex-wrap: wrap;*/
}

.aic {
  align-items: center;
}

.ais {
	align-items: start;
}

.jcsb {
	justify-content: space-between;
}

.jcs {
	justify-content: flex-start;
}

.jcc {
	justify-content: center;
}

.jce {
	justify-content: flex-end;
}

.aie {
	align-items: flex-end;
}

/*-------------------------------
   Misc
----------------------------------*/ 
.d-inline {
	display: inline !important;
}

.site_button {
	position: relative;
	padding: 17px 30px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
	background-color: #e87e35;
	background: linear-gradient(to right,#38BCF9 ,#3276F2 100%);
	min-width: 200px;
	z-index: 3;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	font-family: Aktiv Grotesk Corp regular;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
}

.button_main-block {
	margin-top: 60px;
}

/*-------------------------------
   hamburger
----------------------------------*/
.hamburger {  
display: block;
z-index: 100;
padding-top: 8px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	/*background-color: #1264FF;*/
	background-color: var(--accent);
}

/*-------------------------------
   mainblock
----------------------------------*/ 
.uslugi h2, .advant h2, .projects h2, .clients h2, .form-main h2 {
	margin: 0;
	color: #fff;
	font-size: 50px;
	font-family: Aktiv Grotesk Corp light;
	font-weight: 200;
	line-height: 50px;
}

.header-logo {
	width: 195px;
	height: 40px;
}

.header-logo img {
	width: 100%;
}

.menu_pyatifan {
	color: #fff;
	margin-right: 21px;
	margin-left: 47px;
}


.mainblock {
	position: relative;
	width: 100%;
	height: 100vh;
}

.index-block-dark {
	z-index: 2;
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: rgba(26, 25, 25, 0.4);
}

.bgvideo {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.header-pc {
	position: absolute;
	width: 100%;
	z-index: 2000;
}

.header-wrap {
	z-index: 1000;
	position: relative;
	height: 90px;
}

.header-dark {
	position: absolute;
	width: 100%;
	z-index: 2000;
	height: 110px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%);	
}

.logo-cherta {
	margin: 0 11px;
}

.logo-txt {
	color: #fff;
	font-size: 12px;
	font-weight: 500;
    font-family: 'Rubik', sans-serif;
    line-height: 14px;
}

.header-wrap-right {
	font-family: 'Rubik', sans-serif;
	color: #fff;
}

.mail-header a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #1264FF;
}

.mail-header a:hover {
	border-bottom: none;
}

.phone-header {
	margin-right: 47px;
}

.text-on-video-wrap {
	height: 100%;
	position: relative;
	z-index: 3;
	padding: 0 0 90px 0;
}

.main-txt-wrap {
	position: relative;
	z-index: 3;
}

.text-on-video-wrap h2 {
	color: #fff;
	font-size: 56px;
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	line-height: 120%;
	margin: 0;
	font-weight: 400;
}

.scrollbut {
	position: absolute;
	bottom: 55px;
	left: 50%;
	text-align: center;
	z-index: 3;
	color: #ffffff;
	margin-left: -12px;
}

.scrollbut span {
	cursor: pointer;
	display: block;
	margin: 10px auto 0;
	width: 23px;
	height: 52px;
	background: url(../images/mouse.svg) 0 0 no-repeat;
}

/*-------------------------------
   inner
----------------------------------*/
.header-pc-inner {
	position: relative;
	width: 100%;
	z-index: 2000;
	background-color: #1B1C20;
}

.path{
    height: 50px;
    background: #ececec;
    font-size: 14px;
    color: #2f2f2f;
}

.content {
padding: 40px 0 50px 0;
}

.content h2 {
	margin: 0 0 30px 0;
	color: #000;
	font-size: 50px;
	font-family: Aktiv Grotesk Corp light;
	font-weight: 200;
	line-height: 50px;
}

/*-------------------------------
   bread
----------------------------------*/
.bread_pj {
list-style: none;
margin: 0;
padding: 0;
}

.bread_pj li {
font-size: 14px;
display: block;
color: #000000;
float:left;
}

.bread_pj li a {
color: #919191;
text-decoration: none;
}

.bread_pj li a:hover {
    text-decoration: none;
}

.bread_pj li + li::before {
    content: ">";
    margin: 0 10px;
    font-size: 14px;
    display: block;
    color: #969696;
    float: left;
}


/*-------------------------------
   uslugi
----------------------------------*/
.uslugi {
	padding: 50px 0;
	background-color: #0E121C;
}

.wrap-uslugi {
	margin-top: 40px;
	display: grid;
   gap: 24px;
	grid-template-columns: repeat(4, 1fr);
}

.wrap-usluga-item {
	position: relative;
	height: 280px;
	background: linear-gradient(to bottom,#38BCF9 ,#004CDB 100%);
	z-index: 3;	
	cursor: pointer;
	overflow: hidden;
}

.wrap-usluga-item .all-uslugi {
	text-align: center;
}

.wrap-usluga-item .all-uslugi a{
	color: #fff;
	text-decoration: none;
	font-size: 19px;
	line-height: 20px;
}


.usluga-building-img {
	opacity: 0;
	position: absolute;
	max-width: 100%;
	z-index: 1;
	transition: opacity 0.3s ease-in-out;
}


.uslugi-icon {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 3;	
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
	max-width: 90px;
	max-height: 90px;
}

.uslugi-title {
	position: absolute;
	bottom: 22px;
	left: 22px;
	color: #fff;
	font-size: 19px;
	font-family: var(--userfont);
	line-height: 20px;
	transform: translate(0, 0);
	transition: transform 0.1s;
	z-index: 3;	
}

.uslugi-title .asutp-title {
	font-size: 16px;
}

.asutp-bottom {
	bottom:-75px;
}

.asutp-bottom p{
	margin: 18px 0;
}

.uslugi-arrow {
	position: absolute;	
	right: 22px;
	top: 22px;
	transform: rotate(0deg);
   transition: transform 0.1s ease; /* Настройка обратной анимации */
   z-index: 3;	
}

.wrap-usluga-item:hover .uslugi-arrow {
	transform: rotate(45deg);
	transition: transform 0.1s ease;
}

.wrap-usluga-item:hover .usluga-building-img {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.wrap-usluga-item:hover .move-up {
	transform: translate(0, -30px);
	transition: transform 0.3s;
} 

.wrap-usluga-item:hover .move-up-asutp {
	transform: translate(0, -80px);
	transition: transform 0.3s;
} 

.wrap-usluga-item:hover .uslugi-icon {
   opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.wrap-usluga-item:hover .uslugi-block-dark {
   opacity: 1;
}

/*
.uslugi-block-dark {
	z-index: 2;
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: rgba(26, 25, 25, 0.4);
	opacity: 0;
}
*/

/*-------------------------------
   advant
----------------------------------*/
.site_button_advants {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 60px;
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
	background-color: var(--accent);
	cursor: pointer;
	padding: 0 30px;
	border-radius: 3px;
	text-decoration: none;
	margin-top: 30px;
	font-family: "Aktiv Grotesk Corp regular";
}

.site_button_advants:hover {
	color: white;
	background-color: #206DFF;
}

.wrap-advant h3 {
	font-family: Rubik;
	font-size: 18px;
	color: #fff;
	text-transform: uppercase;
}

.wrap-advant {
	margin-top: 70px;
}

.wrap-advant .text {
	font-family: Aktiv Grotesk Corp regular;
	font-size: 16px;
	color: #fff;
}

.advant {
	width: 100%;
	position: relative;
}

.advant h2 {
	color: #fff;
}

.advant-content {
	padding: 60px 0;
	position: relative;
	background: none;
	z-index: 10;
	color: #fff;
}

.wrap-advant {
	display: grid;
   gap: 24px;
	grid-template-columns: repeat(4, 1fr);
}

.sectionbg video{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*-------------------------------
   projects
----------------------------------*/
.projects {
	padding: 20px 0 60px 0;
	background-color: #0E121C;
	overflow: hidden;
}

.projects h2 {
	line-height: 50px;
	margin-bottom: 40px;
}

.projects p {
	color: #fff;
	font-size: 16px;
	font-family: Aktiv Grotesk Corp regular;
}

/*-------------------------------
   numbers
----------------------------------*/
.numbers {
	padding: 70px 0;
	background-color: #0E121C;
}

.numbers h2 {
	color: #fff;
	font-size: 20px;
	font-family: Aktiv Grotesk Corp regular;
	font-weight: 400;
	line-height: 28px;
	margin: 0;
}

.wrap-numbers {
	display: grid;
   gap: 20px;
	grid-template-columns: repeat(4, 1fr);	
}

.numbers .number-bold {
	font-family: Aktiv Grotesk Corp regular;
	color: #fff;

	font-weight: 400;
	font-size: 50px;
	border-bottom: 1px solid #939393;
	line-height: 50px;
	padding-bottom: 18px;
}

.numbers p {
	color: #939393;
	margin: 18px 0;
	line-height: 18px;
	font-size: 18px;
	font-family: Aktiv Grotesk Corp regular;
}

.numbers .number-bold.width-projects {
	width: 140px;
}

.numbers .number-bold.width-units {
	width: 204px;
}

/*-------------------------------
   clients
----------------------------------*/
.clients {
	padding:0 0 70px 0;
	background-color: #0E121C;
}

.wrap-clients {
	margin-top: 60px;
	display: grid;
   gap: 20px;
	grid-template-columns: repeat(6, 1fr);	
}

.wrap-clients div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrap-clients > :first-child {
	justify-content: flex-start;
}

/*-------------------------------
   form-main
----------------------------------*/
.form-main {
	padding:0 0 70px 0;
	background-color: #0E121C;
}

.wrap-form-main {
	display: grid;
   gap: 20px;
	grid-template-columns: repeat(2, 1fr);		
}

/*-------------------------------
   footer
----------------------------------*/
footer {
	background-color: #1B1C20;
}

footer .copyright .bottom {
	justify-content: space-between;
	align-items: center;
}

footer .copyright .bottom .conf {
	text-decoration: none;
}

footer .bottom, footer .copyright .bottom .conf {	
	color: #616161;
}

.wrap-footer {
	padding:60px 0 55px 0;
	display: grid;
   gap: 20px;
	grid-template-columns: repeat(4, 1fr);		
}

.wrap-footer .contacts p{
	color: #fff;
	margin: 0;
}

.cont-icon {
	margin: 0 20px 0 0;
}

.cont-last-p {
	padding-top: 3px;
	margin-bottom: 30px;
}

.wrap-footer .contacts .contact-block {
	margin: 0 0 20px 0;
}

.wrap-footer .contacts :last-child {
	margin-bottom: 0;
}

footer .bottom {	
	height: 100px;
	border-top: 1px solid #4E4E4E;
}

footer .bottom-menu ul li a {
	list-style: none;
	color: #fff;
	text-decoration: none;
}

footer .bottom-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

footer .bottom-menu ul li{
	line-height: 30px;

}

/*-------------------------------
   menu-big
----------------------------------*/
.menu-big-wrap .contacts-menu {
   margin: 20px 0;
}

.menu-big-wrap .social-title {
	color: #939393; 
	margin: 0 0 20px 0;
}

.menu-big-wrap .contact-block {
	margin: 0 0 20px 0;
}

.menu-big-wrap .cont-icon {
  margin: 0 20px 0 0;
}

.container-grid-flex {
	width: 100%;
	height: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
	display: flex;
	}

.menu-copyright {
	position: absolute;
	bottom: 40px;
}

.menu-big-wrap {
	padding-bottom: 50px;
	display: grid;
   gap: 20px;
	grid-template-columns: repeat(2, 1fr);	
}

.fade-animation {
	background-color: #333333;
	position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
	height: 100vh;
	z-index: 99;
	overflow: hidden;
	display: none;
	}


.menu-big > ul {
	padding: 0;
	margin: 0;
}

.menu-big ul li {
	list-style: none;
}

.menu-big a{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
}

.menu-big > ul > li > a{
	font-size: 18px;
}

.menu-big > ul > li > ul > li > a{
	font-size: 15px;
}

/*-------------------------------
   parallax
----------------------------------*/
.welcome-right {
  right: -100px;
  top: 400px;
}

.welcome-left {
  left: -100px;
  top: 130px;
}


.welcome-img {
  position: absolute;
}

.welcome-img-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.img-move img {
	max-width: 100%;
}

.img-move {
  -webkit-transition: .1s;
  transition: .1s;
}

/*-------------------------------
   reshenie
----------------------------------*/
.blocks_wrap {
	margin-top: 40px;
}

.b_block {
	background-color: #F7F7F7;
	z-index: -1;
}

.wrap-reshenie {
	max-width: 1920px;
	display: grid;
   gap:0;
	grid-template-columns: repeat(2, 1fr);
	height: 330px;
}

.img-wrap {
	z-index: 2;
}

.b_block .wrap-reshenie .img{
	font-size: 0;
	line-height: 0;
	margin: 0 0 0 -360px;
	position: relative;
}

.blocks_wrap .b_block:nth-child(2n) > div .img {
	margin: 0 -360px 0 0;
}


.b_block .wrap-reshenie .img img{
	max-width: 100%;
}

.b_block .wrap-reshenie .wrap {
	padding-left: 85px;
	position: relative;
}

.blocks_wrap .b_block:nth-child(2n) > div .wrap {
	padding: 0 85px 0 0;
}

.b_block .wrap-reshenie .text {
	position: relative;
	z-index: 1;
}

.b_block .wrap-reshenie .text1::before{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	height: 195px;
	width: 218px;
	left: -75px;
	background: url(../images/icons/reshenie/home.svg) no-repeat center/contain;
	z-index: 0;
}

.b_block .wrap-reshenie .text2::before{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	height: 218px;
	width: 164px;
	right: -35px;
	background: url(../images/icons/reshenie/otel.svg) no-repeat center/contain;
	z-index: 0;
}

.b_block .wrap-reshenie .text3::before{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	height: 189px;
	width: 218px;
	left: -75px;
	background: url(../images/icons/reshenie/office.svg) no-repeat center/contain;
	z-index: 0;
}

.wrap-reshenie .text .wrap h3 {
	font-family: Aktiv Grotesk Corp light;
	color: #000;
	font-size: 30px;
	margin: 0 0 30px 0;
	line-height: 30px;
}

.wrap-reshenie .text .wrap p{
	margin: 0;
	font-size: 16px;
}

.wrap-reshenie .text .wrap p:last-child {
	margin-bottom: 0;
}

/*-------------------------------
   slider-projects
----------------------------------*/
.slider-projects .wrap-item{
	max-width: 844px;
	display: grid;
	gap: 117px;
	margin: 0 auto;
	grid-template-columns: 300px 1fr;
}

.slider-projects .intro p {
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	font-family: Roboto;
}

.slider-projects h2{
	font-size: 18px;
	color: #fff;
	line-height: 24px;
	font-family: Roboto;
	font-weight: 400;
	margin:0 0 20px 0;
}

.slider-projects .intro .place {
	color: #959393;
	font-size: 14px;
	margin-bottom: 20px;
}

.slider-projects .intro .link {
	color: #1264FF;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid #1264FF;
}

.slider-projects .intro .link:hover {
	border-bottom: none;
}

.wrap-item .img-slide {
	max-width: 300px;
}

.sliderarrow-project div {
	cursor: pointer;
	width: 39px;
	height: 20px;
	background: url(../images/slider-main/project-arrow.svg) 0 0 no-repeat;
}

.sliderarrow-project div:last-child {
	transform: rotate(180deg);
}

.wrap-slider-projects {
	position: relative;
	margin-top: 70px;
}

.wrap-slider-projects .sliderarrow-project {
	position: absolute;
	top: calc(50% - 18px);
	left: 0;
	right: 0;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	height: 0;
}

/*-------------------------------
   back-form
----------------------------------*/
.form-main h2 {
	margin-bottom: 30px;
}

#back-form .wrap-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

#back-form label {
	display: block;
	margin-bottom: 20px;
}

#back-form input, #back-form textarea {
	color: #fff;
	width: 100%;
	outline: none;
	border: none;
	background: rgba(0,0,0,0);
	border-bottom: 1px solid #9f9f9f;
	color: #fff;
	padding: 0 0 5px 0;
	font-weight: 400;
	line-height: 19px;
	border-radius: 0;
	padding: 12px 0;
}

#back-form input::placeholder, #back-form textarea::placeholder, #back-form input, #back-form textarea {
	font-size: 16px;
	color: #fff;
	font-family: inherit;
}

#back-form .btn-send {
	position: relative;
	padding: 20px 38px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
	background: #1264FF;
	z-index: 3;
	font-family: Aktiv Grotesk Corp regular;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	border: 0;
	transition: all 200ms ease-in-out;
}

#back-form .btn-send:hover {
	color: #000;
	background: #ffff;
	transition: all 200ms ease-in-out;
}

#back-form .btn-send:disabled {
    background: #ccc !important;
    cursor: text;
    color: #999999;
}

.soglashenie-wrap {
	margin: 30px 0;
}

.soglashenie-wrap a {
	border-bottom: 1px solid #1264FF;
	text-decoration: none;
}

.soglashenie-wrap span, .soglashenie-wrap a {
	font-size: 15px;
	color: #939393;
	line-height: 24px;
}

.soglashenie-wrap a:hover {
	border-bottom:none;
}

.soglashenie-wrap label input:checked + span {
  background: rgba(0, 0, 0, 0) url(../images/checked-white.png) 50% 50% no-repeat;
}

.soglashenie-wrap label .grayspan {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0);
}

.soglashenie-wrap label input {
	display: none;
}

.soglashenie-wrap label {
	position: relative;
	display: block;
	float: left;
	cursor: pointer;
	margin-right: 15px;
	margin-top: 5px;
}

/*-------------------------------
   Cookies
----------------------------------*/
.cookie-box {
    display: none;
    width: 516px;
    height: 210px;
    position: fixed;
    right: 30px;
    bottom: 50px;
    background: #fff;
    border-radius: 8px;
    z-index: 33;
    padding: 40px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
}

.cookie-box .btn {
    display: inline-block;
    background: #202020;
    border-radius: 12px;
    padding: 17px 36px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;  transition: 0.3s;
    line-height: 1;
    border: 0;
}

.cookie-box_text {
    width: 100%;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 30px;
    font-size: 1rem;
}