* { 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:	 	#969198;
  --bl_fio:	 	#8E7B9C;
  --fiolet	: 	#8751B6;
  --fiolet2	: 	#791E98;
  
  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:  transparent;
	color: white;
	border: solid 2px var(--fiolet);
}
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/night.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: #100418;
    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(--fiolet); }
.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: 9rem; margin-left: -4.5rem;  }

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(--fiolet); 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(--fiolet); }

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/about_bg.jpg') center center no-repeat; background-size: cover; color: var(--bl_fio); }
#about section { /*min-height: 100vh;*/ display: flex; align-items: center; }

#about article { display: flex; gap: 4rem; margin-bottom: 3rem; }

#about aside { white-space: nowrap; }

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

.about { border-radius: 2rem; border: solid 1px #411F69; overflow: hidden; padding: 1.5rem; width: 100%; position: relative; }



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

.about { font-size: 0.9rem; background: url('images/about_block.svg') 0 0 no-repeat; background-size: cover; }
.about > div { display: flex; align-items: start; gap: 1rem; flex-direction: column; }
.about > div span { flex: 1 1 0; }
.about > div img { height: 4.5rem; }

#about h2 { margin-bottom: 0; } 
#about h3 { margin-bottom: 0; margin-top: 0.3rem; }

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

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





main { background: #F5F3F9; 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 .items > div { background: #fff; border-radius: 1.5rem; padding: 1.5rem 1.3rem; }
#what h3 { color: var(--fiolet2); 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; }



#portfolio { display: flex; gap: 4rem; }

#portfolio aside { position: relative; }
#portfolio aside img { height: 12rem; position: absolute; bottom: 0; left: 0; }
#portfolio aside h2 {  }


#portfolio .videoContainer { height: 20rem; border-radius: 1.5rem; flex: 1 1 0; }
#portfolio video { background: url('images/portfolio_bg.jpg') center center no-repeat; background-size: cover; height: 100%; width: 100%; }

#portfolio .des { position: absolute; bottom: 0; width: 100%; padding: 2rem; display: flex; gap: 2rem; }
#portfolio .des p { font-size: 0.8rem; color: white; margin:0; }

#looking { }
#looking h2 { margin-bottom: 1rem; }

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


footer { background: url('images/footer_bg.jpg') top right no-repeat; background-size: cover; color: var(--bl_fio); 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: url('images/about_block.svg') 0 0 no-repeat; background-size: cover; border-radius: 2rem; border: solid 1px #8359A4; 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(--bl_fio); }
.address a:hover { color: white; }

.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){
	#about .items,
	#what .items { display: grid; grid-template-columns: repeat(2, 1fr);
}


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

}

@media (max-width: 1199px){
	html { font-size: 18px; }
	section { padding: 6rem 3rem; }
	
	#portfolio .des { flex-direction: column; gap: 1rem; }
}
@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 .items { flex-direction: column; gap: 2rem; padding-bottom: 0; }
	#about .items > div.about { width: 100%; }
	



	#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%; }
	


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


	#contacts .videoContainer video { object-fit: contain; }

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

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

@media (max-width: 750px){
	
	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; }

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

	#portfolio { flex-direction: column; gap: 2rem; }
	#portfolio aside h2 { margin-bottom: 0; }
	#portfolio aside h2 br { display: none; }
	#portfolio aside img { display: none; }
	#portfolio .videoContainer { flex: initial; }
	#portfolio video { height: 25rem; }
	
	
	
	
	
	.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; }
	
	.logo { width: 7rem; margin-left: -3.5rem; }
	

	#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; }
}