header { height: auto; position: relative;  z-index: 21; background: #501D50 url('images/index_light.svg') center center no-repeat; background-size: cover; overflow: hidden; }

header section > div {  padding: 2rem 0 8rem 0; position: relative; }

#house { width: 47%; aspect-ratio: 328 / 348; background: url('images/house_small.svg') center center no-repeat; background-size: contain; color: white; padding: 4rem 3rem; text-align: center; display: flex; align-items: center; z-index: 2; position: relative; }
#house > div { display: flex; flex-direction: column; gap: 2rem; }
#house > div > img { height: 7rem; }
#house > div > p { font-size: 1.7rem; font-weight: bold; line-height: 120%; margin-bottom: 0; }
#house > div > h2 { font-size: 1.1rem; margin-bottom: 1rem; max-width: 80%; margin-left: auto; margin-right: auto; }

#woman { position: absolute; right: -22%; bottom: 4rem; z-index: 1; height: 80%; }
#woman > img { height: 100%; display: block; }
#woman > img:last-child { display: none; }

#conveyor { height: 5.2rem; position: absolute; bottom: 0; left: 0; z-index: 10; width: 100%; background: url('images/conveyor.jpg') center center; background-size: contain; }
#conveyor > img { height: 100%; display: block; }

.marquee { display: flex; position: relative; bottom: 1rem; }
.scroll_left  .marquee__items { animation: scroll_left 10s linear infinite; display: flex; flex-shrink: 0;     align-items: baseline; }
.marquee__items > span { position: relative; display: inline-flex; padding-right: 9rem;  } 

.marquee__items > span:nth-child(1) img { height: 2.5rem; }
.marquee__items > span:nth-child(2) img { height: 3.4rem; }

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


main { height: initial; background: white; color: var(--siniy); position: relative; overflow: hidden; }
main section { padding-top: 2rem; padding-bottom: 2rem; display: block; height: initial; z-index: 20; }

footer { position: relative; }

article { position: relative; width: 100%; max-width: initial; height: initial; z-index: 5; }
article > div { width: 100%; }



.top_bg { background: url('images/top_bg_index.svg') top center no-repeat; background-size: contain; height: 100%; position: absolute; left: 0; top: 0; width: 100%; z-index: 5;  }

#hello { height: 20rem; text-align: center; margin: 2rem 0; }
#hello > div { display: inline-block; position: relative; padding: 2rem 0 0 12rem; height: 100%; }
#hello > div > img { height: 100%; position: absolute; left: 0; top: 0; }
#hello > div > div { display: inline-block;  background: #A25A9F; color: white; border-radius: 0 1.7rem 1.7rem 1.7rem; max-width: 31rem; padding: 1.5rem; text-align: left; z-index: 2; position: relative; }
#hello > div > p { margin-top: 1rem; text-align: left; padding-left: 1.5rem; }

h2 span { color: #A25A9F; }

#checkWrapper { margin-bottom: 2rem; }
#check { display: grid;  grid-template-columns: repeat(2, 1fr); gap: 1rem;  }
#check > div { background: white; height: 7.5rem; border-radius: 1.7rem; display: flex; align-items: center; gap: 0; cursor: pointer; }
#check > div > i { display: block; width: 1.7rem; height: 1.7rem; min-width: 1.7rem; border-radius: 6px; margin: 0 1rem 0 2rem; position: relative; }
#check > div > i::before { content: ''; display: block; width: 100%; aspect-ratio: 1/1; background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; bottom: 0; z-index: 2; opacity: 0; transition: 300ms; }
#check > div > span { padding: 1.5rem 0; flex: 1 1 0; }
#check > div div { position: relative; height: 100%; }
#check > div div img { height: 100%; display: block; }
#check > div div img:last-child { position: absolute; top: 0; left: 0; opacity: 0; }

#check * { transition: 300ms; }

#check > div:hover 		> i::before { opacity: 1; }
#check > div.check1 > i::before { background-image: url('images/ch1.svg') }
#check > div.check2 > i::before { background-image: url('images/ch2.svg') }
#check > div.check3 > i::before { background-image: url('images/ch3.svg') }
#check > div.check4 > i::before { background-image: url('images/ch4.svg') }
#check > div.check5 > i::before { background-image: url('images/ch5.svg') }
#check > div.check6 > i::before { background-image: url('images/ch1.svg') }

#check > div.checked { color: white !important; }
#check > div.checked 	> i { border-color: white !important; }
#check > div.checked  	> i::before{ background-image: url('images/ch.svg'); opacity: 1; }
#check > div.checked 	div img:first-child { opacity: 0; }
#check > div.checked 	div img:last-child { opacity: 1; }


#check > div.check1,
#check > div.check1 > i { border: solid 2px var(--siniy2); color: var(--siniy2); }
#check > div.check1.checked { background: var(--siniy2); }

#check > div.check2,
#check > div.check2 > i { border: solid 2px #501D50; color: #501D50; }
#check > div.check2.checked { background: #501D50; }

#check > div.check3,
#check > div.check3 > i { border: solid 2px #4C742C; color: #4C742C; }
#check > div.check3.checked { background: #4C742C; }

#check > div.check4,
#check > div.check4 > i { border: solid 2px #D2681A; color: #D2681A; }
#check > div.check4.checked { background: #D2681A; }

#check > div.check5,
#check > div.check5 > i { border: solid 2px #A7333C; color: #A7333C; }
#check > div.check5.checked { background: #A7333C; }

#check > div.check6,
#check > div.check6 > i { border: solid 2px var(--siniy2); color: var(--siniy2); }
#check > div.check6.checked { background: var(--siniy2); }



#if { background: white; border-radius: 1.7rem; box-shadow: 0px 18px 60px #00000022; position: relative; padding: 2rem; margin-top: 4rem; /*display: none;*/ }
#if > img { height: 113%; position: absolute; bottom: 5%; right: 5%; }

#if > div > div { display: flex; gap: 1rem; }
.to_vac button { background: white; border: solid 2px #26358C; color: #26358C; }
.to_vac button:hover { background: #26358C; color: white; }

#if h2 { max-width: 80%; }




@media (max-width: 1399px){
	#house > div > img { height: 6rem; }
	#house > div > p { font-size: 1.4rem; }
}
@media (max-width: 1099px){
	
	#house > div > p { font-size: 1.2rem; }
}

@media (max-width: 999px){
	#house { padding: 3rem 2rem; width: 50%; }
	#house > div { gap: 1.5rem; }
	#house > div > img { height: 4.9rem; }
	#house > div > p { font-size: 1rem; }
	#house button { font-size: 1rem; padding: 1rem 1.5rem; }

	#check { display: flex; gap: 0; }
	#check > div { height: 6.6rem; }
	#check > div > i { margin: 0 0.7rem 0 1rem; }
	#check > div div { height: 70%; position: relative; top: 0%; margin-left: 0.5rem; }
	.swiper { overflow: visible; }
	
	.swiper-pagination { position: relative; top: 0rem !important; bottom: auto !important; height: 1rem; margin-top: 1rem; }
	.swiper-pagination-bullet { height: 0.5rem; width: 0.5rem; display: inline-block; border-radius: 1rem;  opacity: 1; background: #A25A9F; transition: 300ms !important; }
	.swiper-pagination-bullet-active { width: 1.5rem; background: #501D50; }

	#if { padding: 1.5rem; margin-top: 0; }
	#if > img { position: relative; bottom: -1.5rem; right: auto; margin: 1rem auto 0 auto; height: 15.6rem; display: block; }
	#if > div > div { flex-direction: column; }
	#if h2 { font-size: 1.57rem; max-width: 100%; }
	#if button { font-size: 1rem; padding: 1rem; width: 100%; }

}
@media (max-width: 799px){
	#woman { right: -36%; }
	
	#house { padding: 3rem 2rem; width: 55%; }
}
@media (max-width: 677px){
	section { padding: 0 1.5rem; }
	
	header section { padding: 0; }
	header section > div { padding: 0; }
	
	.logo { position: absolute; top: 2rem; left: 1.5rem; z-index: 2; height: 3.9rem; }
	.ya_doma { position: absolute; top: 2rem; right: 1.5rem; z-index:2; height: 4.9rem; }
	
	#woman { position: relative; right: 0; bottom: 0; display: flex; justify-content: center; height: auto; background: #501D50; }
	#woman > img:first-child { display: none; }
	#woman > img:last-child { display: block; width: 100%; height: auto; }
	
	#house { position: static; background-image: none; background-color: #eea80c; width: 100%; aspect-ratio: initial; padding: 1.5rem 1.5rem 2rem 1.5rem; margin-top: -1px; }
	#house button { background: white; color: #421B42; }
	#house button:hover { background: #421B42; color: white; }
	#house > div > p { font-size: 1.4rem; }
	
	
	#conveyor { display: none; }

	#hello { height: initial; margin-bottom: 3rem; }
	#hello > div { padding: 8.5rem 0 0 0; height: initial; }
	#hello > div > img { height: initial; width: 40%; max-width: 130px; }
	#hello > div > p { width: 60%; position: absolute; top: 4rem; right: 0; }
	#hello > div > p b { display: block; }
	
	h2 { margin-bottom; 1.5rem; }

	
	
	
	


	/*
	#check > div div { position: absolute; right: 0; top: 0; height: 100%; opacity: 0.5; }
	#check > div > span { padding-right: 1rem; position: relative; z-index: 10; }*/
	
}

@media (max-width: 500px){
	
	
}