:root { --primary-color:#9695E5; --secondary-color:#e6c3c1; }
html { scroll-behavior:smooth; }
body { font-family: 'Montserrat', sans-serif; }
h2 { font-weight: bold; font-size: 36px; margin-bottom: 30px; }
.container { width: 1180px; /*border: 1px solid #FFBEBE;*/ margin: 0 auto; }
.mx-auto { margin: 0 auto; }
.btn { background-color:var(--primary-color); color: #FFFFFF; text-decoration: none; font-size: 18px; font-weight: 600; padding: 18px 20px; /*+border-radius: 30px;*/ -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; border-radius: 30px; display: inline-block; min-width: 333px; text-align: center; transition: all 0.5s ease; }
.btn:hover { background-color: #61527B; color: #FFFFFF; }
.pulsating { animation: shadow-pulse 1.5s infinite; }
.swiper-button-disabled { opacity: 0.5; }
/*header*/
header { background: url(../images/top-bg-yar-min.jpg) center bottom repeat-x #EAF6FF; }
.header { display: flex; justify-content: space-between; align-items: flex-end; height: 120px; }
.header .logo-block { line-height: 0; margin-top: 8px; }
.header .phone-block { color: #000000; }
.phone-group { display: grid; grid-template-columns: 30px 1fr; gap: 0 15px; }
.phone-block label { font-size: 15px; }
.phone-block h3 { font-size: 30px; line-height: 1; }
.phone-block a { color: #000000; text-decoration: none; }
.wa-icon { align-self: self-end; }
.wa-icon a { display: block; line-height: 1; }
.wa-icon:hover { transform: scale(1.1); transition: all 0.2s ease; }
/*top block*/
.top-block-bg { min-height: 595px; display: flex; }
.top-block { margin-top: 110px; }
.top-block h1 { font-size: 80px; line-height: 0.9; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 40px; margin-left: -6px; }
.top-block .text { font-size: 19.4px; margin-bottom: 30px; font-weight: bold; }
.date { color:var(--primary-color); font-size: 52.5px; }
/* welcome*/
.welcome { display: grid; grid-template-columns: 1fr 0.81fr; gap: 10px 8.33%; padding: 100px 0; }
.welcome .image { background-color: #FDD8BE; /*+border-radius: 7px;*/ -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px; }
.welcome .image img { /*+border-radius: 7px;*/ -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px; opacity: 0.85; width: 100%; }
.welcome .text { font-size: 18px; line-height: 1.6; color: #7E7E7E; margin-bottom: 41px; }
/*gallery*/
.gallery-bg { background-color:var(--primary-color); background-image: radial-gradient(at 100% 100%, hsla(3, 43%, 83%, 1) 0px, transparent 50%), radial-gradient(at 7% 0%, hsla(233, 89%, 94%, 1) 0px, transparent 50%); padding: 80px 0; }
.gallery { color: #FFFFFF; }
.gallery h2 { text-align: center; margin-bottom: 60px; }
.images-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 20px 20px; }
.images-gallery a { overflow: hidden; display: block; /*+border-radius: 7px;*/ -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px; }
.images-gallery .thumb { transition: all 0.5s ease; object-fit: cover; width: 100%; height: 100%; opacity: 0.87; }
.images-gallery a:hover img { transform: scale(1.05); }
.images-gallery .thumb:hover { filter: saturate(0.7); opacity: 1; }
.features { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px 40px; margin-top: 70px; }
.feature { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px 30px; text-align: center; }
.feature .icon { grid-row: span 2; align-self: center; justify-self: center; }
.feature .caption { /*align-self: end;*/ font-weight: bold; font-size: 28px; line-height: 134.4%; }
.feature .text { font-style: normal; font-weight: 600; font-size: 15px; line-height: 134.4%; }
/*services*/
.services { padding: 85px 0 0; width: 90%; position: relative; }
.services h2 { margin-bottom: 25px; }
.services h3 { font-weight: bold; font-size: 36px; line-height: 134.4%; margin-bottom: 50px; }
.services .text { font-weight: 600; font-size: 17px; line-height: 179.9%; color: #646161; }
.services .slide ul { list-style: none; padding-left: 0; margin-top: 5px; }
.services .slide { height: 620px; display: grid; grid-template-columns: 1fr 1fr; }
.services .slide h3 { margin-top: 65px; }
.services .slide .image { align-self: end; }
.services-left-right { display: grid; grid-template-columns: 1fr 1fr; gap: normal 50px; position: absolute; bottom: 65px; left: 0; z-index: 25; }
.arrow-container { text-align: center; width: 45px; }
.services-right, .services-left { display: block; height: 25px; outline: none; }
.services-right { background: url("data:image/svg+xml,%3Csvg width='43' height='7' viewBox='0 0 43 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.7098 0.139208L42.8552 3.16392C43.0483 3.34953 43.0483 3.65047 42.8552 3.83608L39.7098 6.86079C39.5168 7.0464 39.2039 7.0464 39.0108 6.86079C38.8178 6.67518 38.8178 6.37424 39.0108 6.18863L41.3125 4.00001L0 4V3L41.3125 3.00001L39.0108 0.811367C38.8178 0.625755 38.8178 0.32482 39.0108 0.139208C39.2039 -0.0464029 39.5168 -0.0464027 39.7098 0.139208Z' fill='%23646161'/%3E%3C/svg%3E%0A") center left no-repeat; display: block; height: 25px; }
.services-left { background: url("data:image/svg+xml,%3Csvg width='43' height='7' viewBox='0 0 43 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.29017 0.139208L0.144764 3.16392C-0.0482545 3.34953 -0.0482545 3.65047 0.144764 3.83608L3.29017 6.86079C3.48319 7.0464 3.79613 7.0464 3.98915 6.86079C4.18217 6.67518 4.18217 6.37424 3.98915 6.18863L1.68749 4.00001L43 4V3L1.68749 3.00001L3.98915 0.811367C4.18217 0.625755 4.18217 0.32482 3.98915 0.139208C3.79613 -0.0464029 3.48319 -0.0464027 3.29017 0.139208Z' fill='%23646161'/%3E%3C/svg%3E%0A") center right no-repeat; }
/*footer*/
footer { background: url(../images/city-top-yaroslavl-min.jpg) center bottom repeat-x #A2A4CB; min-height: 750px; display: flex; align-items: center; }
.footer-blocks { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 25px; gap: 0px 175px; grid-template-areas: "form-container text" "form-container copyright"; }
.form-container { grid-area: form-container; align-self: flex-end; }
footer .text { grid-area: text; font-size: 20px; font-weight: 600; }
footer .phone-group { margin-top: 15px; margin-bottom: 25px; }
footer .text h3 { font-weight: 700; font-size: 30px; }
footer .text a { color: #000000; }
.copyright { grid-area: copyright; font-size: 21px; font-weight: 600; align-self: flex-end; }
/*form*/
.form { width: 480px; min-height: 480px; /*+border-radius: 7px;*/ -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px; background-color: rgba(255, 255, 255, 0.7); padding: 65px 75px; display: grid; }
.form .notify { font-weight: bold; text-align: center; align-self: center; display: none; font-size: 18px; height: auto; }
.form.sended .notify { display: block; }
.form.sended .fill { display: none; }
.form h2 { font-weight: 700; font-size: 36px; line-height: 1; margin-bottom: 45px; }
.form label { display: block; font-size: 16px; margin-bottom: 8px; }
.form input { background: #FFFFFF; box-shadow: inset -1px 4px 10px rgba(0, 0, 0, 0.1); border-radius: 30px; border: 1px solid rgba(98, 81, 123, 0.313); display: block; padding: 13px 25px; width: 100%; margin-bottom: 15px; font-size: 16px; }
.form input:focus { border: 1px solid #FFDDDD !important; outline: none; }
.form .btn { border: none; cursor: pointer; margin-top: 5px; }
.form .spacer { height: 15px; }
#registration:target { position: fixed; display: flex; align-items: center; justify-content: center; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; background-color:var(--primary-color); padding: 15px; animation: fadein 0.3s ease forwards; }
#registration .close { text-decoration: none; color: #FFFFFF; font-size: 55px; position: absolute; top: 0; right: 15px; display: none; }
#registration:target .close { display: block; }
@media (max-width: 1200px) {
	.container { width: 90%; }
	.feature .caption { font-size: 26px; }
}
@media (max-width: 990px) {
	body { font-size: 14px; }
	.container { width: calc(100% - 40px); margin: 0 20px; }
	.mobile-hide { display: none; }
	.btn { min-width: 250px; font-size: 15px; }
	h2 { font-size: 18px; font-weight: 600; }
	/*header*/
	header { background: url(../images/top-bg-yar-xs-min.jpg) center / cover repeat-x #EAF6FF; }
	.header { align-items: flex-end; height: 60px; }
	.header .logo-block { display: flex; align-items: flex-end; height: 56px; margin-top: 0; }
	.header .logo-block .logo { width: 65px; }
	.phone-group { grid-template-columns: 20px 1fr; gap: 0 15px; }
	.header .phone-block h3 { font-size: 15px; }
	.phone-block label { font-size: 9px; }
	.wa-icon svg { width: 24px; height: 24px; }
	/*top block*/
	.top-block-bg { background-position-x: 28%; min-height: 75vh; align-items: center; display: grid; }
	.top-block { display: grid; justify-self: right; }
	.top-block .btn { /*margin-bottom: 40px;*/ }
	.top-block h1 { font-size: 11.38vw; }
	.top-block .text { font-size: 3.9vw; margin-bottom: 30px; }
	.date { font-size: 7.47vw; }
	/* welcome*/
	.welcome { display: grid; grid-template-columns: 1fr; gap: 10px 0; padding: 0 0 60px 0; }
	.welcome .image { margin-left: -20px; margin-right: -20px; margin-bottom: 20px; aspect-ratio:1 / 1; /*+border-radius: 0;*/ -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; display: none; }
	.welcome .image img { /*+border-radius: 0;*/ -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
	.welcome h2 { margin-top: 30px; margin-bottom: 20px; }
	.welcome .text { font-weight: 300; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
	.welcome .btn { display: block; width: 180px; }
	/*gallery*/
	.gallery-bg { padding: 0 0 40px 0; background-color:var(--primary-color); background-image: none; /*background: linear-gradient(0deg, rgba(163, 165, 204, 1) 0%, rgba(97, 83, 121, 1) 100%);*/ }
	.gallery h2 { text-align: center; margin-bottom: 25px; display: none; }
	.gallery .swiper-container { margin-left: -20px; margin-right: -20px; }
	.slider-left-right { display: grid; grid-template-columns: 1fr 1fr; gap: normal 50px; margin: 20px 0 0; }
	.arrow-container { text-align: center; width: 100%; }
	.gallery-right, .gallery-left { display: block; height: 25px; outline: none; }
	.gallery-right { background: url("data:image/svg+xml,%3Csvg width='42' height='7' viewBox='0 0 42 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.1861 0.139215L41.2108 3.16393C41.3964 3.34954 41.3964 3.65047 41.2108 3.83609L38.1861 6.8608C38.0005 7.04641 37.6996 7.04641 37.5139 6.8608C37.3283 6.67519 37.3283 6.37425 37.5139 6.18864L39.7273 3.97529L-6.95061e-07 3.97529L-5.28858e-07 3.02471L39.7273 3.02472L37.5139 0.811373C37.3283 0.625762 37.3283 0.324827 37.5139 0.139215C37.6996 -0.0463963 38.0005 -0.0463962 38.1861 0.139215Z' fill='white'/%3E%3C/svg%3E%0A") center left no-repeat; display: block; height: 25px; }
	.gallery-left { background: url("data:image/svg+xml,%3Csvg width='42' height='7' viewBox='0 0 42 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.16399 0.139215L0.139279 3.16393C-0.0463335 3.34954 -0.0463334 3.65047 0.139279 3.83609L3.16399 6.8608C3.3496 7.04641 3.65054 7.04641 3.83615 6.8608C4.02176 6.67519 4.02176 6.37425 3.83615 6.18864L1.6228 3.97529L41.3501 3.97529L41.3501 3.02471L1.6228 3.02472L3.83615 0.811373C4.02176 0.625762 4.02176 0.324827 3.83615 0.139215C3.65054 -0.0463963 3.3496 -0.0463962 3.16399 0.139215Z' fill='white'/%3E%3C/svg%3E%0A") center right no-repeat; }
	.swiper-gallery .thumb { aspect-ratio:1 / 1; object-fit: cover; }
	.features { grid-template-columns: 1fr; gap: 50px 0; width: 100%; margin-top: 20px; }
	.feature { grid-template-columns: 1fr; gap: 10px 30px; }
	.feature img { max-width: 50px; max-height: 53px; }
	.feature .caption { justify-self: center; text-align: center; font-size: 18px; }
	.feature .text { width: 75%; justify-self: center; text-align: center; font-size: 14px; font-weight: 300; }
	/*services*/
	.services { padding: 60px 0 30px; width: 100%; }
	.services .slide { height: auto; grid-template-columns: 1fr; }
	.services .slide h3 { font-size: 14px; margin: 0 0 20px 0; }
	.services .text { font-size: 14px; font-weight: 300; }
	.services .slide .image { display: none; }
	.services-left-right { position: relative; bottom: 0; margin: 15px 0 30px; width: 140px; }
	/*footer*/
	footer { background: url(../images/city-top-yaroslavl-min.jpg) center bottom / contain repeat-x #EAF6FF; background-size: cover; min-height: auto; background-position-x: 66.4%; display: flex; align-items: center; padding: 40px 0 0; }
	.footer-blocks { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 30px 0px; grid-template-areas: "text" "form-container" "copyright"; }
	footer .text { font-size: 15px; }
	footer .text h3 { font-size: 22px; }
	.copyright { font-size: 13px; margin-bottom: 25px; }
	/*form*/
	.form { width: 100%; height: auto; min-height: auto; padding: 40px 20px; }
	.form h2 { font-size: 24px; }
	.form label { font-size: 13px; }
	.form .btn { width: 100%; }
}
@keyframes shadow-pulse {
	0% { box-shadow: 0 0 0px 0px #FBDFDF; }
	100% { box-shadow: 0 0 0 13px rgba(0, 0, 0, 0); }
}
@keyframes fadein {
	0% { opacity: 0; transform: translateY(-240px); }
	100% { opacity: 1; transform: translateY(0px); }
}