header {position: sticky; top: 0; margin-top: 0.5em; background-color: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); z-index: 99;}
header .flex {flex-direction: row; align-items: center; justify-content: space-between; padding: 0.5em 0 0.75em;}
header .flex figure {display: flex; align-items: center; z-index: 2;}
header .flex figure img {width: 2.5em;}
header .flex figure figcaption {font-size: 0.8em; font-weight: 600; line-height: 1; color: var(--bgcolor1); padding: 0.5em 0.25em 0;}
header .flex menu {width: 70%; display: flex; align-items: center; justify-content: space-between; }
header .flex menu .header-menu {display: flex; align-items: center; font-size: 1em; padding: 0.5em 0 0; gap: 1.5em;}
header .flex menu .header-menu li {line-height: 1;}
header .flex menu  .header-contacts {display: flex; align-items: center; font-size: 0.8em; padding: 0.5em 0 0; gap: 1.5em;}
header .flex menu  .header-contacts .phone {font-weight: 600;}
header .flex menu  .header-contacts .phone:hover {color: var(--bgcolor1);}
header .flex .mobile {display: none;}
.camera {position: relative;}
.camera .slide-box {position: absolute; width: 100%; height: calc(100vh - 4em);}
.camera .slide-box::after {position: absolute; left: 0; width: 100%; top: 0; height: 100%; content: ""; background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.01) 100%);}
.camera .slide-box .slide {position: absolute; left: 0; width: 100%; top: 0; height: 100%;}
.camera .flex {position: relative; width: 60%; height: calc(100vh - 4em); flex-direction: column; justify-content: center; color: var(--bgcolorW); padding: 0 2em;}
.camera h1 {margin-bottom: 0.5em;}
.camera h1 span {font-size: 50%; font-weight: 600; display: block; padding: 0.5em 0.15em 0.25em;}
.camera p, .camera li {font-size: 1em; margin-bottom: 0.25em;}
.camera ul {list-style: disc; padding: 0 0 0 1em;}
.camera .button {width: 45%; margin-top: 1.5em; background-color: var(--bgcolor2); border-color: var(--bgcolor2);}
.camera .button:hover {color: var(--bgcolorW); background-color: var(--bgcolor1); border-color: var(--bgcolor1);}

.scroll {padding: 0 0 3em;}
.scroll-body {position: relative;}
.scroll-body .scroll-content {position: sticky; top: 6em;}
.scroll-body .scroll-content .head-block {text-align: center; padding: 0 0 2em;}
.scroll-body .scroll-content .head-block h2 {color: var(--bgcolor1); margin-bottom: 0.5em;}
.scroll-body .scroll-content .head-block p {display: block; width: 50%; margin: 0 auto;}
.scroll-body .scroll-content .scroll-track {width: 100%; position: relative; overflow: hidden;}
.scroll-body .scroll-content .scroll-track .scroll-line {position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3em; padding: 0 8em;}
.scroll-body .scroll-content .scroll-track .scroll-line section {display: flex; flex-direction: column; width: 30%; min-width: 30%; padding: 0 2em 0 0;}
.scroll-body .scroll-content .scroll-track .scroll-line section figure {width: 100%; position: relative; aspect-ratio: 1 / 1; transition: all 0.35s ease-out; border-radius: 0.5em; overflow: hidden;}
.scroll-body .scroll-content .scroll-track .scroll-line section:hover figure {transform: translateY(-0.25em)}
.scroll-body .scroll-content .scroll-track .scroll-line section figure img {height: 100%; object-fit: cover; object-position: center; }
.scroll-body .scroll-content .scroll-track .scroll-line section .legal {padding: 0.5em;}
.scroll-body .scroll-content .scroll-track .scroll-line section p > b {font-size: 2em; color: var(--bgcolor1);}
.scroll-body .scroll-content .scroll-track .scroll-line section h4 {font-size: 1em; font-weight: 600; }
.note {padding: 3em 0;}
.note .note-body {background-color: var(--bgcolor3);}
.note .note-body .flex {flex-direction: row-reverse; gap: 3em;}
.note .note-body .flex .items {display: flex; flex-direction: column; width: 50%; padding: 2em 0;}
.note .note-body .flex .items figure {width: 100%; margin-top: -6em;}
.note .note-body .flex .items h2 {color: var(--bgcolor1);}
.note .note-body .flex .items h2 span {font-size: 50%; font-weight: 600; display: block; color: var(--bgcolorD); padding: 0 0.15em 0.25em;}
.note .note-body .flex .items .text-item {padding: 1em 0 0;}
.note .note-body .flex .items .text-item p,
.note .note-body .flex .items .text-item li {margin-bottom: 0.5em;}
.note .note-body .flex .items .text-item ul {list-style: disc; padding: 0 0 0 1em;}
.note .note-body .flex .items .button {width: 45%; margin-top: 1.5em; background-color: var(--bgcolor1); border-color: var(--bgcolor1);}
.note .note-body .flex .items .button:hover {color: var(--bgcolorW); background-color: var(--bgcolor2); border-color: var(--bgcolor2);}


footer {color: var(--bgcolorW); padding: 3em 0 1em; background-color: var(--bgcolor1);}
footer .flex {flex-direction: row; gap: 3em; padding: 0 0 3em;}
footer .flex .items {display: flex; flex-direction: column; width: 33%;}
footer .flex .items figure {display: flex; align-items: center; margin-bottom: 0.5em;}
footer .flex .items figure a {padding: 0.15em;background-color: var(--bgcolorW); border-radius: 0.5em;}
footer .flex .items figure img {width: 2.5em;}
footer .flex .items figcaption {font-size: 0.8em; font-weight: 600; line-height: 1; padding: 0.5em 0.35em 0;}
footer .flex .items h3 {font-size: 1.25em;}
footer .flex .items a {color: var(--bgcolorW); line-height: 1.5;}
footer .flex .items a:hover {color: var(--bgcolor3);}
footer .flex .items ul {padding: 1em 0;}
footer .flex .items ul li {display: flex; padding: 0.5em 0; align-items: baseline;}
footer .flex .items ul li i {font-style: normal; font-size: 0.8em; margin-right: 0.5em;}
footer .podval {font-size: 0.8em; color: var(--bgcolor3); padding: 1em 0 0; border-top: 1px solid rgba(255,255,255,0.2);}




.contacts {padding: 0 0 3em;}
.contacts .flex {flex-direction: row; gap: 2em;}
.contacts .flex .items {position: relative; width: 50%; display: flex; flex-direction: column;}
.contacts .flex .items h2 {line-height: 1.1; color: var(--bgcolor1);}
.contacts .flex .items h2 span {font-size: 50%; display: block; color: var(--bgcolorD); padding: 0 0.15em 0.25em;}
.contacts .flex .items ul {font-size: 1.2em; font-weight: 600; padding: 1em 0 0 1em;}
.contacts .flex .items ul li {line-height: 1.75;}
.contacts .flex .items ul li i {font-size: 1em; color: var(--bgcolor1); margin-left: -1.5em; margin-right: 0.25em;}
.contacts .flex .items .button {width: 45%; margin: 1em 0;}
.action {position: relative; margin-top: -2.5em;}
.action .slide-box {position: absolute; width: 100%; height: calc(90vh - 4em);}
.action .slide-box::after {position: absolute; left: 0; width: 100%; top: 0; height: 100%; content: ""; background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.01) 100%);}
.action .slide-box .slide {position: absolute; left: 0; width: 100%; top: 0; height: 100%;}
.action .flex {position: relative; width: 50%; height: calc(90vh - 4em); flex-direction: column; justify-content: center; color: var(--bgcolorW); padding: 4em;}
.action h2 {font-size: 2.5em; line-height: 1.1; margin-bottom: 0.5em;}
.action h2 span {font-size: 50%; display: block; padding: 0 0.25em;}
.action p {font-size: 1em;}
.action .button {width: 45%; margin-top: 1.5em; background-color: var(--bgcolor2); border-color: var(--bgcolor2);}
.action .button:hover {color: var(--bgcolorW); background-color: var(--bgcolor1); border-color: var(--bgcolor1);}

@media(max-width:760px) {
header  {height: 5.55em;}
header .flex figure img {width: 4em;}
header .flex figure figcaption {font-size: 14px; font-weight: 600; line-height: 1; color: var(--bgcolor1); padding: 0.5em 0.25em 0;}
header .flex menu {display: none; position: absolute; left: 0; width: 100%; top: 5.55em; flex-direction: column; padding-bottom: 1em; background-color: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px;}
header .flex menu.open {display: flex;}
header .flex menu .header-menu {flex-direction: column; gap: 0;}
header .flex menu li a {font-size: 14px; padding: 0.75em;}
header .flex menu .header-contacts {flex-direction: column; font-size: 14px; padding: 0.5em 0; gap: 1em;}
header .flex .mobile {display: block; font-size: 2em; padding: 0.25em 1.5em 0;}
.camera .slide-box::after {background-image: linear-gradient(to bottom, rgba(0,0,0,0.01) 10%, rgba(0,0,0,0.7) 90%, rgba(0,0,0,0.01) 100%);}
.camera .flex {width: 100%; padding: 0 1em;}
.camera p, .camera li {font-size: 14px;}
.camera .button {width: 100%;}

.scroll {height: auto;} 
.scroll-body .scroll-content {position: relative; top: 0;}
.scroll-body .scroll-content .scroll-track .scroll-line {padding: 0 0 2em; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;}
.scroll-body .scroll-content .scroll-track .scroll-line section {width: 100%; min-width: 100%; padding: 0 2em; scroll-snap-align: start; scroll-snap-stop: always;}
.scroll-body .scroll-content .head-block h2 {margin-bottom: 0.5em;}
.scroll-body .scroll-content .head-block p {width: 100%; }
.scroll-body .scroll-content .scroll-track .scroll-line section h4 {font-size: 14px;}
.note {padding: 0 0 3em;}
.note .note-body .flex {flex-direction: column;}
.note .note-body .flex .items {width: 100%; padding: 0;}
.note .note-body .flex .items figure {width: calc(100% + 6em); margin-top: 0; margin-left: -3em;}
.note .note-body .flex .items h2 {text-align: center;}
.note .note-body .flex .items h2 span {font-size: 14px;}
.note .note-body .flex .items .text-item p,
.note .note-body .flex .items .text-item li {font-size: 14px;}
.note .note-body .flex .items .text-item ul {padding: 0 0 0 1.25em;}
.note .note-body .flex .items .button {width: 100%; margin: 1.5em 0 2em;}


footer {font-size: 130%;}
footer .flex {flex-direction: column;}
footer .flex .items {width: 100%;}
footer .flex .items ul li {font-size: 14px;}
footer .podval {font-size: 12px;}




.contacts .flex {flex-direction: column;}
.contacts .flex .items {width: 100%;}
.contacts .flex .items h2 {text-align: center;}
.contacts .flex .items h2 span {font-size: 14px;}
.contacts .flex .items ul {font-size: 14px; }
.contacts .flex .items ul li i {margin-left: 0; margin-right: 0.25em;}
.contacts .flex .items .button {width: 100%;}
.contacts .flex .items .map {width: calc(100% + 6em); height: 350px; margin-left: -3em;}
.action .slide-box {position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9;}
.action .slide-box::after {background-image: linear-gradient(to bottom, rgba(0,0,0,00.1), rgba(0,0,0,0.5) 100%);}
.action .flex {width: 100%; height: auto; color: var(--bgcolorD); padding: 2em 0; margin-top: -9em;}
.action h2 {color: var(--bgcolorW); margin-bottom: 2em;}
.action p {font-size: 14px;}
.action .button {width: 100%; margin-bottom: 1.5em;}

}