* { margin:0; padding:0; box-sizing: border-box; font-size: inherit; font-family: inherit; line-height: inherit; }
table { border-collapse:collapse; border-spacing:0; }
input, select, textarea, button {  border: 0; background: none; outline: none; }
button { cursor: pointer; }
a { text-decoration: none; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom:0; }

/* --------------- */

:root {
  --beliy:	 #f8f8f8;
  --seriy:	 #6F7D7D;
  --zeleniy: #17876E;
  --zel:		#2CC295;
  
  scroll-behavior: smooth;
}
/* --------------- */


html { font-family: 'Montserrat', Arial; font-size: 20px;  line-height: 120%; }
body { background: #030F0F; color: #f8f8f8; min-width: 320px; }

h1 { font-size: 4.5rem; font-weight: 600;  margin-bottom: 0rem; line-height: 100%; }
h2 { font-size: 3.0rem; font-weight: 600;  margin-bottom: 1rem; line-height: 100%; }
h3 { font-size: 1.3rem; font-weight: bold; margin-bottom: 1rem; line-height: 110%; }

a { color: var(--seriy); }
a:hover { color: black; }

button {
	font-size: 1.1rem;
	font-weight: bold;
	border-radius: 999px;  
	line-height: 100%;
	padding: 0.9rem 2rem 1.0rem 2rem;
	transition: 300ms;
	color: #501D50;
	border: 0;
	top: 0;
	position: relative;
	background:  var(--jeltiy);
	color: white;
	border: solid 2px var(--jeltiy);
}
button:hover { background: var(--fiolet); border-color: var(--fiolet);  }


section { margin: 0 auto; max-width: 1800px; padding: 8rem 4rem; }
section > div { position: relative; height: 100%; }
section img { max-width: 100%; }

section+section { padding-top: 0; }


.videoContainer { overflow: hidden;  display: flex; align-items: center; justify-content: center; }
.videoContainer video { object-fit: cover; height: 100%; width: 100%; }

header .videoContainer { position: absolute; top: 0; left:0; height: 100%; width: 100%; }
footer .videoContainer { position: absolute; top: 0; left:0; height: 100%; width: 100%; }


header { background: url('images/fountain.jpg') center center no-repeat; background-size: cover; height: 100vh; color: var(--beliy); overflow: hidden; }
header section {  height: 100%; position: relative; z-index: 10; padding-top: 4rem; }

#panel { width: 100%; position: absolute; top: 0; left: 0; width: 100%; }

.link {
    text-decoration: none;
    white-space: nowrap;
    background: #021A1A;
    border-radius: 2rem;
    transition: 300ms;
    display: inline-flex;
    align-items: center;
	justify-content: center;
	height: 3rem;
	aspect-ratio: 1/1;
	position: relative;
	z-index: 100;
	padding: 0;
}
.link:hover { cursor: pointer; background: var(--zeleniy); }
.link img { height: 33.3%; }

header .menu { 
	position: absolute; 
    top: 0;
    left: -2000px;
    background: #000;
    z-index: 5;
    height: 100vh;
	transition: 600ms linear;
}
header.open .menu { top: 0;  left: 0; }
header .menu::before {content: '';display: block;position: absolute;left: -3000px; width: 3000px;height: 100%;background: #000; top: 0;}

.menu ul { margin-top: 6rem;  }
.menu li { list-style: none; font-size: 1.5rem; margin-bottom: 2rem; }
.menu a { color: var(--beliy); text-decoration: none; }
.menu a:hover {  text-decoration: underline; }

.social { display: flex; gap: 0.5rem; }

#panel .social {  position: absolute; top: 0rem; right: 0; }
.menu .social { margin-top: 3rem; }

.social button { display: none; }



.logo { position: absolute; top: 0rem; left: 50%; width: 8rem; margin-left: -4rem;  }

header article { position: absolute; bottom: 0; left: 0; width: 100%; }

h1 span {
	background: #4AA3EB linear-gradient(90deg, #4AA3EB 0%, #30B9D0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

header article > div { position: absolute; bottom: 0; right: 0; line-height: 130%; }

header article p { font-size: 1.2rem; }
header article a { border: solid 1.5px var(--zeleniy); border-radius: 99px; padding: 1rem; display: inline-block; color: var(--beliy); margin-top: 0.5rem; transition: 300ms; min-width: 14rem; text-align: center; font-size: 0.9rem; }
header article a:hover { background: var(--zeleniy); }

header::before { content: ""; display: block; position: absolute; bottom: 0; left:0; height:  35%; width: 100%; z-index: 2; background: linear-gradient(180deg, #04071800 0%, #040718 100%); }
header::after  { content: ""; display: block; position: absolute; bottom: 0; left:0; height: 100%; width: 100%; z-index: 2; background: #04071866; }


#about { background: url('images/grid2_1.png') center center no-repeat; background-size: cover; color: var(--seriy); }
#about section { /*min-height: 100vh;*/ display: flex; align-items: center; }

#about aside { margin-bottom: 3rem; max-width: 50%; }

#about .items { display: flex; gap: 2rem; padding-bottom: 4rem; }

.about { border-radius: 2rem; border: solid 1px #043B2E; overflow: hidden; padding: 1.5rem; width: 100%; position: relative; }
.about 	{ background: url('images/about_bg.jpg') center center no-repeat; background-size: cover; }


#about h2, 
#about h3 { color: white; }

.about { font-size: 0.9rem; }
.about > div { display: flex; align-items: start; /*margin-bottom: 2rem;*/ gap: 1rem; }
.about > div span { flex: 1 1 0; }
.about > div img { height: 4.5rem; }


p { font-size: 1.1rem; line-height: 130%; }
.item p,
	.about p { font-size: 0.8rem; }

#about .items p { color: var(--seriy); }





main { background: #EDF8F4; color: var(--seriy); border-radius: 3rem; overflow: hidden; }
main h2 { color: #040718; }

#what { display: flex; gap: 2rem; flex-direction: column; }

#what aside 	{ width: 100%; position: relative; }
#what article 	{ width: 100%; }

#what aside h2 { line-height: 100%; }
#what aside > img { width: 12.5rem; position: absolute; bottom:0; left: 0; }


#what .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0rem 0; }
/*#what .item { width: 100%; }*/
#what .items > div { background: #fff; border-radius: 1.5rem; padding: 1.5rem 1.3rem; }
#what h3 { color: var(--zel); display: flex; gap: 1rem; }
#what h3 span { flex: 1 1 0; }
#what h3::after { content: ''; min-width: 2.5rem; width: 2.5rem; height: 1.7rem; background: url('images/switcher.svg') top center no-repeat; background-size: contain; display: block; }


.marquee { display: flex; /*overflow: hidden;*/ position: relative; z-index: 3; margin: 3rem -4rem; }
.marquee__items { display: flex; flex-shrink: 0; }

.scroll_left  .marquee__items { animation: scroll_left 15s linear infinite; }

.marquee__items > div { position: relative; display: inline-flex; } 
.marquee__items > div > span { display: flex; align-items: center; border: solid 1px #EAECFA; border-radius: 0.8rem; margin-right: 2.5rem; }
.marquee__items > div > span > img { height: 3rem; aspect-ratio: 1 / 1; display: inline-block; } 
.marquee__items > div > span > span { padding: 0.7rem 1.5rem; line-height: 1rem; border-radius: 2rem; white-space: nowrap; font-size: 1.5rem; }

@keyframes scroll_left {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-100%));	}
}

#portfolio .items { display: flex; gap: 2rem; margin-bottom: 2rem; }
#portfolio p+.items { margin-top: 2rem; }

#portfolio aside { display: flex; align-items: center; margin-bottom: 1rem; gap: 2rem; }
#portfolio h2 { flex: 1 1 0; margin: 0; }
#portfolio .arrows { /*position: absolute; top: 0.5rem; right: 0; z-index: 2;*/ }

.arrows { display: flex; }
.arrows span { height: 2.875rem; width: 2.875rem; padding: 0; margin: 0 0.2rem; display: inline-block; border-radius: 0.625rem; transition: 300ms linear; background: var(--zel); position: relative;  }
.arrows span::before { content: ''; height: 100%; aspect-ratio: 1/1; background: url('images/arrow.svg') center center no-repeat; display: block; background-size: 20%; }
.arrows span.left { transform: scaleX(-1); }
.arrows span:hover { opacity: 1 !important; background: var(--zeleniy) !important; }

.arrows span.left { left: 0; }
.arrows span.left:hover { left: -0.2rem !important; }
.arrows span.right { right: 0; }
.arrows span.right:hover { right: -0.2rem !important; }


.swiper { /*overflow: visible;*/ max-width: 100%; }
.swiper-slide { /* border: solid 1px #EAECFA; background: white; border-radius: 1.5rem; padding: 1.5rem;*/}

.swiper-slide img { display: block; }

a.swiper-slide { cursor: pointer;  }
a.swiper-slide img,
	a.swiper-slide h3,
	a.swiper-slide p { transition: 600ms;  }

a.swiper-slide:hover img { scale: 1.05; }

.swiper-slide > div { position: relative; /*display: inline-flex;*/ margin-bottom: 1.5rem; border-radius: 2rem; overflow: hidden; } 
/*.swiper-slide > div > span { display: flex; align-items: center; border: solid 1px #EAECFA; border-radius: 0.8rem; }
.swiper-slide > div > span > img { height: 3rem; aspect-ratio: 1 / 1; display: inline-block; } 
.swiper-slide > div > span > span { padding: 0.7rem 1.5rem; line-height: 1rem; border-radius: 2rem; white-space: nowrap; font-size: 1.5rem; }*/

.swiper-slide i { font-style: normal; font-weight: 600; }

#portfolio p { font-size: 0.9rem; }



#clients { 
	height: 26rem; border-radius: 3rem; overflow: hidden; position: relative; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; margin-bottom: 7rem; 
	background: url('images/clients.jpg') top right no-repeat; background-size: cover;
}
#clients aside { width: 40%;  position: relative; z-index: 2; }
#clients aside h2 {  }
#clients aside p { font-size: 0.9rem; }
#clients aside p a { text-decoration: underline; }

#clients .videoContainer { position: absolute; height: 100%; width: 100%; top: 0; left: 0; }
#clients video { background: url('images/clients.png') center center no-repeat; background-size: cover;  }




#looking { display: flex; gap: 4rem; align-items: center; }
#looking h2 { margin: 0; }

#looking > div:last-child { display: flex; align-items: center; border: solid 2px #fff; border-radius: 1.6rem; gap: 0; }
#looking picture { height: 100%; min-width: 11rem; aspect-ratio: 1/1; background: white; border-radius: 1.6rem; display: flex; align-items: center; justify-content: center; }
#looking img { height: 55%; }
#looking > div:last-child > p { padding: 1rem 1.5rem; font-size: 0.9rem; }



footer { background: url('images/footer_bg.jpg') top right no-repeat; background-size: cover; color: var(--seriy); position: relative; overflow: hidden; }
footer section { position: relative; z-index: 50; }
footer h2 { color: var(--beliy); }
footer article { max-width: 60%; }
.address { display: block; /*height: 12rem;*/ margin: 3rem 0; background-color: #043B2Ebb; border-radius: 2rem; border: solid 1px #043B2E; overflow: hidden; padding: 1.5rem; }
.address > div { float: right; margin-left: 1.5rem; border-radius: 1.1rem; max-width: 40%; height: 100%; overflow: hidden; }
.address > div > img { object-fit: cover; height: 100%; width: 100%; }

.address a { color: var(--seriy); }
.address a:hover { color: var(--beliy); }

.the_last { display: flex; align-items: center;     justify-content: space-between; }
.the_last .link { height: 2rem; }

.copyright { font-size: 0.7rem; }

footer::after  { content: ""; display: block; position: absolute; bottom: 0; left:0; height: 100%; width: 100%; z-index: 2; background: #04071866; }



nowrap { white-space: nowrap; }

@media (max-width: 1499px){
	#what .items { display: grid; grid-template-columns: repeat(2, 1fr);
}


@media (max-width: 1399px){
	html { font-size: 19px; }
	
	#looking { gap: 3rem; }
	#looking picture { min-width: 13rem; }
	
	footer article { max-width: 100%; }

}

@media (max-width: 1199px){
	html { font-size: 18px; }
	section { padding: 6rem 3rem; }
}
@media (max-width: 1099px){
	html { font-size: 17px; }
	
	
}

@media (max-width: 999px){
	html { font-size: 16px; }
	
	
	
	header article > div { position: relative; margin-top: 2rem; }
	
	#about aside { max-width: 100%; margin-bottom: 3rem; }
	#about .items { flex-direction: column; gap: 2rem; padding-bottom: 0; }
	#about .items > div.about { width: 100%; }
	
	#about .about:nth-child(1) { bottom: 0; } 
	#about .about:nth-child(3) { top: 0; }
	/*#about .about:nth-child(odd) { right: -1rem; }
	#about .about:nth-child(even) { left: -1rem; }*/

	
	#about h3 { margin-bottom: 1rem; }
	#about h3 br { display: none; }
	.about h3 img { height: 3rem; }
	
	#what { flex-direction: column; gap: 2rem; }
	#what aside { width: 100%; }
	#what aside h2 br { display: none; }
	#what aside img { display: none; }
	
	#what article { width: 100%; }
	
	#portfolio .items { flex-direction: column; gap: 1rem; }
	#portfolio .items > div.about { width: 100%; }
	.items+.items { margin-top: -1rem; }

	#portfolio .videoContainer { margin-left: -3rem; margin-right: -3rem;  }
	#portfolio video { height: 33rem; border-radius: 0;  }

	#clients aside { width: 60%; }


	#looking { flex-direction:column; }
	#looking h2 br { display: none; }
	#looking picture { min-width: 9rem; }
	#looking > div:first-child { min-width: 100%; }


	footer article { max-width: 100%; }
}

@media (max-width: 800px){
	#looking > div:last-child { flex-direction: column; }
	#looking picture { min-width: 100%; aspect-ratio: initial; height: 6rem; }
}

@media (max-width: 677px){
	
	h1 { font-size: 3.0rem; }
	h2 { font-size: 2.0rem; }
	h3 { font-size: 1.2rem; }
	
	section { padding: 4rem 2rem; }

	.social button { display: flex; }
	#panel .social { flex-direction: column; }
	#panel .social a { display: none; }


	#what .items { display: flex; flex-direction: column; gap: 1rem; }

	#portfolio video { height: 25rem; }
	
	#clients aside { width: 100%; }
	
	
	
	.address { height: auto; }
	.address > div { max-width: 100%; width: 100%; float: none; margin: 0 0 1.5rem 0; height: 10rem; }
}
@media (max-width: 499px){
	html { font-size: 15px; }
	
	
	

	#panel .social { flex-direction: column; }
	
	.menu li { font-size: 1.2rem; }
	
	header article > div br { display: none; }
	header article > div a { display: block; margin-top: 2rem; }

	.marquee { margin: 1.5rem -2rem; }
	.scroll_left  .marquee__items { animation: scroll_left 10s linear infinite; }
	.marquee__items > div > span { margin-right: 1rem; }
	.marquee__items > div > span > img { height: 2rem; }
	.marquee__items > div > span > span { font-size: 1rem; padding: 0rem 0.5rem; }
	
	.swiper-slide > div { aspect-ratio: 3/2;  }
	.swiper-slide > div img { object-fit: cover; width: 100%; height: 100%; }
	
	#portfolio .videoContainer { margin-left: -2rem; margin-right: -2rem;  }
	
	.the_last { flex-direction: column; gap: 1rem; }
}

@media (max-width: 399px){
	html { font-size: 14px; }
}
@media (max-width: 359px){
	html { font-size: 13px; }
}