:root {
    --font-main: "Roboto Flex", system-ui, -apple-system, sans-serif;
    --font-accent: "MyFont", cursive;
    --accent-color: #F5EAC6;
    --header-height: 10vh;
}
body {
    margin: 0;
    font-family: var(--font-main);
    font-weight: 400;
    background: #fff;
    color: #111;
}
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/snellroundhand_black.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
a {
    text-decoration: none;
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
    font-weight: 300 !important;
}


button {
    border: none;
}

/* all */

.button {
    cursor: pointer;
    width: 285px;
    aspect-ratio: 4.6 / 1;
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 600;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    color: white;
    background-color: white;

    /* animation: shimmer 3s linear infinite; */

    transition: all 0.3s ease, opacity 0.2s ease;
    z-index: 3;
}


.button:hover {
    background: black !important;
    color: white !important;
}


@media (max-width: 768px) {
.button {
    width: 37.1vw;
    font-size: calc(1.8vw + 1vh);
}
}
@media (max-width: 620px) {
.button {
    /* width: 37.1vw; */
    width: 230px;
    font-size: calc(1.8vw + 1vh);
}
}
@media (max-width: 480px) {
.button {
    width: calc(30vw + 15vh);
}
}

h2, h3, h4 {
    margin-top: 0px;
    margin-bottom: 0px;

    font-size: unset;
}


html {
    scroll-behavior: smooth;
}

.title {
    font-family: var(--font-accent);
    font-weight: 900;
    font-size: 68px;
    line-height: calc(68px * 0.94);
    z-index: 2;
}
@media (max-width:1024px) {
.title {
    font-size: 7.81vw;
    line-height: calc(7.81vw * 0.94);
}
@media (max-width:480px) {
.title {
    font-size: 8.5vw;
    line-height: calc(10.4vw * 0.94);
}
}



}
.text {
    font-family: var(--font-main);
    font-weight: 300;
    z-index: 2;
}

.vertcal-align {
    margin-top: auto;
    margin-bottom: auto;
}
.accent-bg {
    background-color: var(--accent-color);
}
.default-section {
    margin-left: 0px;
    margin-right: 0px;
}

section {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative
}
section > * {
    --ident:5.5vw;

    margin-left: var(--ident);
    margin-right: var(--ident);
    width: 100%;

    --top-bottom:3.5vw;

    margin-top: var(--top-bottom);
    margin-bottom: var(--top-bottom);
}
@media (max-width:768px) {
section > * {
    --top-bottom:5.5vw;
}
}

.section-horizontal {
    margin-left: var(--ident);
    margin-right: var(--ident);
}

.top-bottom {
    --top-bottom:5.5vw;
    margin-top: var(--top-bottom);
    margin-bottom: var(--top-bottom);   
}
@media (max-width:768px) {
.top-bottom {
    --top-bottom:10vw;
}
}


.glass {
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.05)
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow:
        0 0px 10px rgba(0,0,0,0.1),
        inset 0 1px 1px rgba(255,255,255,0.3);
}

/* .blur {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: 2;
} */

















#naming {


    
    height: auto;

    .content {
        margin: 20px !important;
        width: 100vw;
        height: auto;

        img {
            width: 100vw;
        }
    }
}


#contacts > div {
    margin-bottom: 10px !important;
}



.contacts {
    display: flex;
    flex-direction: column;
}




.contacts .content {
    display: flex;
    flex-direction: row;

    box-sizing: border-box;
    padding-top: 53px;
    
    gap: 15px;

    .cnt {
        display: flex;
        flex-direction: column;
    }

    &>div {
        flex:1;
    }

    .media {
        border-radius: 20px;
        overflow: hidden;
    }

    .media img {
        width: 100%;
    }

    .cards {
        box-sizing: border-box;
        padding: 20px;
        padding-left: 0px;

        display: flex;
        flex-direction: column;

        gap: 50px;

        /* display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto); */

        /* row-gap: 60px;
        column-gap: 30px; */
        align-content: start;      
    }
}






.contacts .cards > * {
    font-weight: 300;
    font-size: 26px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    /* gap:10px; */
}

.contacts .cards > * :nth-child(1) {
    font-weight: 600;
}
.contacts .links {
    margin-top: 44px;
    display: flex;
    flex-direction: row;
    gap: 27px;
}
.contacts .links > * {
    border-radius: 100px;
    height: 81px;
    aspect-ratio: 1/1;
    background-color: var(--accent-color);
    margin-top: 44px;
    display: flex;
    flex-direction: row;
    gap: 27px;
    align-items: center;
    justify-content: center;
}
.contacts .links img {
    height: 70%;
    width: auto;
}
.naming {
    width: 100vw;
    position: absolute;
    z-index: 1;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(0, +70px);
}
.naming img {
    width: 94%;
    height: auto;
}
@media (max-width:1024px) {

.contacts .links {
    margin-top: 0px !important;
}

.contacts .content {
    /* margin-top: 6.9vw; */
    gap: 50px;
    flex-direction: column;
}


.contacts .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:768px) {
.contacts .cards {
    gap: 4.42vw;
}
.contacts .cards > * {
    font-size: 3.9vw;
}
.contacts .links {
    margin-top: 10vw;
}
.contacts .links > * {
    height: 10.5vw;
}
}
@media (max-width:480px) {
.contacts .links {
    margin-top: 0px;
    gap: 5vw;
}
.contacts .links > * {
    height: 50px;
}
/* .contacts .links img {
    height: 16.87vw;
} */
}


























/* cta */

.cta {
    display: flex;
    flex-direction: row;
    position: relative;
}
.cta .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 65px;
}
.cta img {
    width: 30vw;
    height: auto;
    border-radius: 50px;
    overflow: hidden;
    right: 0;
    position: absolute;
}
.cta .content .form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 650px;
}
.cta .content .form input {
    box-sizing: border-box;
    width: 100%;
    height: 59px;
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 30px;
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 400;
    padding-left: 53px;
}
.cta .content .button {
    color: #000000;
    background-color: var(--accent-color);
}
@media (max-width:1219px) {
.cta img {
    width: 25vw;
    bottom: 0;
}
.cta .content .form {
    width: 53.32vw;
}
}
@media (max-width:1013px) {
.cta img {
    height: calc(20% + 183px);
    width: auto;
    border-radius: 4.93vw;
}
}
@media (max-width:768px) {
.cta .content {
    gap: 8.46vw;
}
.cta .content .form {
    gap: 3.12vw;
}
.cta .content .form input {
    height: 7.68vw;
    min-height: 50px;
    padding-left: 6.9vw;
    font-size: 2.6vw;
    border-radius: 3.9vw;
}
.cta img {
    margin-bottom: calc((768px - 100vw) * 0.13);
    width: 36%;
    height: auto;
}
}
@media (max-width:480px) {
.cta img {
    display: none;
}
.cta .content .form input {
    border-radius: 19px;
    font-size: 3.73vw;
}
.cta .content .form {
    width: 100%;
}
.cta .content {
    gap: 16.66vw;
}
.cta .content .button {
    align-self: center;
}
}



.cta .content .form input.error {
  border-color: rgb(168, 26, 26);
  background: #fff0f0;
}
.cta .content .form input.error::placeholder {
  color: red;
  font-weight: 400;
}


.cta .content.ok button {
    display: none;
}

.cta .content .thank {
    display: none;
}

.cta .content.ok .thank {
    display: flex;
    align-items: center;
    color: #22c55e;
    gap: 10px;
}

.button {
    transition: opacity 0.2s ease,
}

.button.close {
    opacity: 0;
}

.cta .content.ok .thank {
    width: 385px;
    aspect-ratio: 4.6 / 1;
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 600;

}
@media (max-width: 768px) {
.cta .content.ok .thank {
    width: 45.1vw;
    font-size: calc(1.8vw + 1vh);
}
}
@media (max-width: 620px) {
.cta .content.ok .thank {
    font-size: calc(1.8vw + 1vh);
}
}
@media (min-width: 480px) {
.cta .content.ok .thank {
    margin-left: 25px;
}
}
@media (max-width: 480px) {
.cta .content.ok .thank {
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 65.1vw;
}
}



.checkmark {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #22c55e;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
  opacity: 0;
}
.checkmark.animate {
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.checkmark svg { width: 36px; height: 36px; overflow: visible; }
.checkmark svg path {
  stroke: #fff; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
  stroke-dasharray: 50; stroke-dashoffset: 50;
}
.checkmark.animate svg path {
  animation: draw 0.4s ease forwards 0.3s;
}

@keyframes pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}








.hide-scrollbar {
    overflow-x: scroll;
    scrollbar-width: none; /* firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* chrome/safari */
}






/* reviews */

.reviews {
    display: flex;
    flex-direction: column;
    gap:32px;
}
.reviews .text {
    font-weight: 600;
    font-size: 34px;
}
@media (max-width:1024px) {
.reviews .text {
    font-size: 3.9vw;
}
}
.reviews h2, 
.reviews h3 {
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.reviews .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    user-select: none;
}
.reviews .cards .content {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 35px;
    margin-left: calc(var(--ident)*1.5);
    margin-right: calc(var(--ident)*1.5);
    margin-top: 20px;
    margin-bottom: 20px;
}
.reviews .cards .card {
    flex-shrink: 0;
    width: 320px;
    border-radius: 43px;
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
}
.reviews .cards .card .data {
    margin-top: 44px;
    margin-bottom: 44px;
    margin-left: 40px;
    margin-right: 40px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 39px;
}
.reviews .cards .card .data > * {
    display: flex;
    flex-direction: row;
    gap:16px;
}
.reviews .cards .card .data > * img {
    width: 73px;
    height: auto;
}
.reviews .cards .card .data .info {
    display: flex;
    flex-direction: column;
    gap:4px;
    justify-content: center;
}
.reviews .cards .card .data .info .name {
    padding-top: 5px;
    font-style: var(--font-main);
    font-weight: 600;
    font-size: 13px;
}
.reviews .cards .card .data .info .date {
    font-weight: 400;
    font-size: 11px;
}
.reviews .cards .card .data .descr {
    font-size: 16px;
    line-height: 16px;
    font-weight: 300;
    margin-bottom: 20px;
}

@media (min-width:1471px) {
.reviews .cards .card .data .descr {
    font-size: calc(0.68vw + 6px);
    line-height: calc(0.68vw + 6px);
}
}

@media (max-width:768px) {
.reviews .cards .card {
    width: 280px;
}
}
@media (max-width:480px) {
.reviews .cards .card {
    width: 260px;
}
.reviews .cards .card .data {
    margin-top: 34px;
    margin-bottom: 34px;
    margin-left: 30px;
    margin-right: 30px;
    gap: 39px;
}
}
 




















.advantages {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}
.advantages > * {
    border-radius: 2.78vw;
    border: 0.27vw solid var(--accent-color);
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.5);

}
.advantages > * div,
.advantages > * h3 {
    margin-left: 2.38vw;
    margin-right: 2.38vw;
    font-family: var(--font-main);
}
.advantages .text {
    --basic:calc(1.5vw + 7.35px);
}
.advantages .text.title {
    margin-top: 3.4vw;
    font-size: var(--basic);
    line-height: var(--basic);
    font-weight: 650;
}
.advantages .text.descr {
    margin-top: 1.6vw;
    font-weight: 300;
    font-size: calc(var(--basic)/1.026);
    line-height: calc(var(--basic)/1.026);
    margin-bottom: 3.4vw;
}
@media (max-width:1024px) {
.advantages {
    margin-top: 4.88vw;
}
}
@media (max-width:768px) {
.advantages-content {
    display: flex;
    flex-direction: column;
}
.advantages-content h2 {
    align-self: center;
    margin-right: 10px;
}
.advantages {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(1, 70%);
    justify-content: center;

}
.advantages .text {
    --basic:2.8vw;
}
}
@media (max-width:480px) {
.advantages {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(1, 1fr);
    gap:5.3vw;
    margin-top:6.5vw;
}
.advantages > * div,
.advantages > * h3 {
    margin-left: 5.3vw;
    margin-right: 5.3vw;
}
.advantages .text.title {
    margin-top: 5.5vw;
}
.advantages .text.descr {
    margin-top: 4vw;
    margin-bottom:6.5vw;
}
.advantages .text {
    --basic:4.1vw;
}
.advantages .text.descr {
    font-size: calc(var(--basic)/1.02);
    line-height: calc(var(--basic)/1.02);
}
}


.advantages-section {
    position: static;
}

.advantages-section .palm {
    position: absolute;
    height: auto;
    z-index: 1;
}
.advantages-section .palm.left {
    width: 18%;
    left: calc(var(--ident) * -1);

    margin-top: 40%;
}

.advantages-section .palm.right {
    width: 30%;
    margin-top: -7%;
    right: calc(var(--ident) * -1);
}

@media (max-width:768px) {
.advantages-section .palm.left {
    width: 40%;
    margin-top: -20%;
}
.advantages-section .palm.right {
    width: 30%;
    margin-top: 50%;
}
}
@media (max-width:480px) {
.advantages-section .palm.left {
    width: 50%;
    margin-top: -55%;
}
.advantages-section .palm.right {
    width: 50%;
    margin-top: 100%;
}
}















































/* catalog */


.catalog {

    .go {
        width: 100px;
        height: 30px;
        margin-left: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px !important;

        font-size: 14px;
    }

    .go-wrapper {
        display: flex;
        flex-direction: row;
        margin-left: 0px !important;
        margin-top: 27px;
        align-items: center;
        height: 50px;

        overflow: hidden !important;
    }

    .gallery {

        margin-left: 0px !important;

        /* margin-top: 30px; */

        padding: 0px !important;        


        .scrl {

            margin: 0px !important;
            padding: 0px !important;

            overflow-x: scroll;
            user-select: none;

            display: flex;
            flex-direction: row;
            gap: 20px;
            
            width: max-content;
        }

        .gc {
            margin: 0px !important;
            padding: 0px !important;

            /* flex-shrink: 0; */

            /* width: 200px; */
            width: fit-content;
            height: 300px;
            background-color: black;

            overflow: hidden !important;

            border-radius: 20px;


            img {
                padding: 0px !important;
                margin: 0px !important;
                height: 100%;
            }
        }
    }

}

@media (max-width:1024px) {

.catalog .gallery .gc {
    height: 29vw !important;
}

}

@media (max-width:480px) {

.catalog .gallery .gc {
    height: 60vw !important;
}

}





.catalog {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.catalog .content {
    position: relative;
    --border-radius:44px;
    margin-bottom: 100px;
}
.catalog .content .track-zone {
    position: absolute;
    margin-left: 5.5%;
    width: 100%;
    height: 430px;
    overflow: hidden;
}

.catalog .content .track {
    position: absolute;
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.6s cubic-bezier(.25,.8,.25,1);
  }
.catalog .content .card {
    width: 294px;
    height: 430px;
}
.catalog .content .track .card {
    border-radius: var(--border-radius);
    
    overflow: hidden;
    background: #fff;
    position: relative;

    transition: 
        transform 0.6s,
        filter 0.6s;
}
.catalog .content .track .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.change > * {
    opacity: 1;
    transition: 
        opacity 0.5s ease;
}
.reset > * {
    opacity: 0;
}




/* состояния */
.catalog .content .track .card {
    transform: scale(0.75);
}
.catalog .content .track .card:not(.active) {
    margin-left: -10px;
}

.catalog .content .track .card.active {
    transform: scale(1);
}

/* arrows */
.catalog .content .arrows {
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 100%;

    top: 50%;
    transform: translateY(-50%);

    --arr-size:6%;
    --arr-marg:1%;
    --gap: calc(100% - ((var(--arr-size) + (var(--arr-marg) * 2)) * 2));

    gap:var(--gap);
    z-index: 6;

    pointer-events: none;
}

.catalog .content .arrows .arrow {
    width: var(--arr-size);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    cursor: pointer;
    z-index: 5;
    position: relative;
    margin: 0px var(--arr-marg) 0px var(--arr-marg);

    pointer-events: all;
}
.catalog .content .arrows .arrow img {
    width: 55%;
    height: auto;
}


.catalog .content .front .panel {
    position: absolute;
    width: 100%;
    height: 100%;
}



.catalog .content .front {
    width: 100%;
    display: flex;
    flex-direction: row;
    z-index: 5;
}

.catalog .content .front .info {
    margin-left: 5.5%;
    width: 56.5%;
    min-width: 640px;
    height: 430px;
    margin-right: 2%;
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
    
    background-color: white;
    border-radius: var(--border-radius);
    z-index: 4;

    --base:30px;
    --c:1.4;
    --base-margin:18px;
}
.catalog .content .front .info div {
    overflow-y: auto;
    margin-left: calc(var(--base-margin)*2);
    margin-right: calc(var(--base-margin));
}

.catalog .content .front .info div > * {
    padding-right: calc(var(--base-margin));
}

.catalog .content .front .info div h4 {
    font-size: var(--base);
    font-family: var(--font-accent);
}
.catalog .content .front .info div span {
    display: block;
    font-size: calc(var(--base)/var(--c));
    font-weight: 300;

    margin-bottom: 30px;
}

.catalog .content .front .panel .points {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    border-radius: 100px;

    width: 350px;
    height: 50px;

    z-index: 5;

    bottom: -80px;

    display: flex;
    flex-direction: row;
    gap: 10%;

    align-items: center;
    justify-content: center;
}
.catalog .content .front .panel .points div {
    height: 22%;
    aspect-ratio: 1/1;
    background-color: white;
    border-radius: 100px;
}

.catalog .content .front .points .mark {
    background-color: rgb(31, 42, 53) !important;
}

.catalog .content .front .card {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#track_target {
    align-self: center;
}
.catalog .content .front .banner {
    color: white;
    --margin-horiz:15px;
    width: calc(100% - (var(--margin-horiz)*2));
    font-size: 25px;
    font-family: var(--font-accent);
    z-index: 3;
    border-radius: calc(var(--border-radius) - var(--margin-horiz));
    margin: auto var(--margin-horiz) var(--margin-horiz) var(--margin-horiz);
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.catalog .content .front .banner > * {
    margin: 10px 5px 10px 5px;
}

@media (min-width:1471px) {
.catalog .content .card {
    width: calc(13.3vw + 98px);
    height: calc(143px + 19.5vw);
}
.catalog .content .front .info {
    height: calc(143px + 19.5vw);

    --base:calc(1.36vw + 10px);
}
.catalog .content .track-zone {
    height: calc(143px + 19.5vw);
}
.catalog .content .front .banner {
    font-size: calc(1.13vw + 8.33px);
}
}


@media (max-width:1219px) {
.catalog .content .card {
    width: 264px;
}
.catalog .content .front .banner {
    font-size: 23px;
}
}
@media (max-width:1024px) {
.catalog .content {
    --border-radius: 4.29vw;
    --width: 25.7vw;
    --aspect: 1.6287;
}
.catalog .content .card {
    width: var(--width);
    height: calc(var(--width) * var(--aspect));
}
.catalog .content .front .info {
    min-width: 62.5vw;
    --base:2.92vw;
    --base-margin:1.757vw;
}
.catalog .content .front .info div h4 {
    margin-top: 2.636vw;
}

.catalog .content .track .card:not(.active) {
    margin-left: -1.46vw;
}
.catalog .content .front .banner {
    font-size: 2.3vw;
    --margin-horiz:1.464vw;
}
}

@media (max-width:768px) {
.catalog {
    gap: 7.81vw;
}
.catalog .content .front .panel .points {
    width: 45.57vw;
    height: 6.51vw;
    bottom: -10.41vw;
}
.catalog .content .front .info,
.catalog .content .track {
    height: calc(30vw + 200px);
}
}

@media (max-width:480px) {
#track_target {
    align-self: flex-start;
}
.catalog .content .track-zone {
    margin-left: 0%;
}
.catalog .content .arrows {
    --margin: 5.5%;
    --arr-size:16.5%;
    
    margin: 0px var(--margin) 0px var(--margin);
    width: calc(100% - (var(--margin)*2)); 
}
.catalog .content {
    --border-radius:10vw;
}
.catalog .content {
    --width: 57.7vw;
    --aspect:1.5;
}
.catalog .content .track {
    height: fit-content;
}
.catalog .content .front {
    flex-direction: column-reverse;
    gap: 4.16vw;
}
.catalog .content .front .card {
    margin-left: 5.5%;
}
.catalog .content .front .info {
    width: calc(100% - 5.5% - 5.5%);
    --base:6.7vw;
    overflow-y: unset;
    height: fit-content;
}
.catalog .content .front .info div h4 {
    margin-top: 5vw;
}

.catalog .content .front .panel {
    position: relative;
    height: fit-content;
}
.catalog .content .front .panel .points {
    position: relative;
    bottom: unset;
    height: 14vw;
    width: 53vw;
}
.catalog .content .front .banner {
    font-size: 5.2vw;
    --margin-horiz:3.8vw;
}
}


.shading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.4),
        transparent
    );
    pointer-events: none;
    border-radius: var(--border-radius);
}
.can-scroll {
    position: relative;
    overflow: hidden;
}
.can-scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;

    width: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            rgba(255,255,255,0.9),
            rgba(255,255,255,1)
        ),
        linear-gradient(
            to bottom,
            transparent 85%,
            rgba(0,0,0,0.55) 85%,
            rgba(0,0,0,0.55) 87%,
            transparent 87%
        );
    pointer-events: none;
}
.can-scroll::before {
    z-index: 3;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    background: linear-gradient(
        to top,
        rgba(255,255,255,0),
        rgba(255,255,255,0.9),
        rgba(255,255,255,1)
    );
    pointer-events: none;
}
















































/* about */
.about {
    display: flex;
    flex-direction: row;
}
.about-left {
    display: flex;
    flex-direction: column;
    gap: 7.55vw;

    padding-top: 70px;
    padding-bottom: 70px;
}
.about-left .text {
    width: 80%;
    font-size: 28px;
    font-weight: 350;
    position: relative;
}

.about-left .button {
    background-color: var(--accent-color);
    color: black;
}
.about .img {
    width: 40%;
    height: auto;
    margin-left: auto;
    z-index: 2;
    position: relative;
    align-self: center;
    border-radius: 44px;
}
.about .palm {
    width: 50%;
    right: 0px;
    top:10%;
    justify-self: center;
    position: absolute;
    z-index: 1;
    height: auto;
}
@media (min-width:1471px) {
.about .img {
    width: calc(40% + ((1470px - 100vw)/3));
}
}
@media (max-width:1024px) {
.about .text {
    font-size: 2.73vw;
    width: 90%;
}
.about-left {
    padding-top: 3vw;
    padding-bottom: 3vw;
}
.about .palm {
    margin-top: 5%;
}
}
@media (max-width:768px) {

}
@media (max-width:480px) {
.about .img {
    display: none;
}

.about-left .text {
    font-size: 5vw;
    width: 100%;
}

.about-left {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.35);


    z-index: 2;

    border: 0.27vw solid var(--accent-color);
    border-radius: 30px;

    padding: 3.5vw;

    padding-top: 7vw;
}

.about .palm {
    width: 75%;
    /* margin-right: calc(var(--ident) + 12px); */
}
}

















/* hero */
.hero {
    border-radius: 3vw;
    height: calc(100vh - var(--header-height) - 7vw);
    color: white;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-left: 4.5vw;
    justify-content: center;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3));
    pointer-events: none;
    border-radius: var(--border-radius);
}


.hero .lg {
    position: relative;
    z-index: 10;
    img {
        height: 100px;
    }
}

.hero img.bgi {
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero .descr {
    position: relative;
}
@media (max-width:768px) {
.hero {
    border-radius: 3.7vw;
    height: calc(100vh - var(--header-height) - 11vw);
    max-height: calc(140vw);
}
}
.hero .title {
    font-size: 72px;
}
.hero .descr {
    font-size: 42px;
    font-weight: 600;
}
.hero .button {
    margin-top: 40px;
    color: black;
    background-color: white;
}
@media (max-width:1024px) {
.hero {
    padding-left: 0px;
    align-items: center;
    text-align: center;
}
}
@media (max-width: 768px) {

.hero .lg img{
    height: 13vw;
}

.hero .title {
font-size: calc(7.3vw + 2vh);
}
.hero .descr {
    font-size: 5.4vw;
}
.hero {
    gap: 3.9vw;
}
.hero .button {
    margin-top: calc(5.2vw + 20vh - 20vw);
}
}


















/* header */

.header {
    width: 100%;
    height: fit-content;
    position: sticky;
    top: 0;
    z-index: 999;
}

.header .lgi {
    height: var(--header-height);

    box-sizing: border-box;

    padding-top: 10px;
    padding-bottom: 25px;

    img {
        height: 100%;
    }
}

.header .content {
    width: 100%;
    height: var(--header-height);
    background-color: #f5eac6e6;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header .content span {
    font-family: var(--font-accent);
    font-size: 2.5vw;
}
@media (min-width:481px) {
.header .content {
    justify-content: center;
}
.header .content > * {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-family: var(--font-main);
    letter-spacing: 5%;
    font-weight: 700;
    color: black;
}
.header .content .burger {
    display: none;
}
}

@media (max-width: 1024px) {
.header .lgi img{
    height: 4.88vw;
}
}

@media (max-width: 768px) {
.header .content > * {
    font-size: 2.86vw;
}
.header .content span {
    font-size: 3.9vw;
}
}
@media (max-width: 480px) {
.header .content a{
    display: none;
}
.header .lgi {

    box-sizing: border-box;
    padding-left: 10px;

    display: flex;
    align-items: center;

    img{
        height: 8vw;
    }
}
.header .content span {
    font-size: 37px;
    margin-left: 15px;
}
.header .content .burger {
    display: flex;
    width: calc(var(--header-height) * 1);;
    height: calc(var(--header-height) * 0.75);
    
    align-items: center;
    justify-content: center;
    font-size: 10vw;

    border-radius: 10px;
    margin-left: auto;
    margin-right: 15px;
    background-color: white;

    border: 0px solid #d4c693c9;

    cursor: pointer;
}
.header .content .burger img {
    height: 90%;
    width: auto;
}
}































body.menu-open {
    overflow: hidden;
}
.mobile-menu {
    opacity: 0;
    position: fixed;
    height: 110dvh;
    top: 0;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    pointer-events: none;
    transition: transform 0.3s ease;

    overflow: hidden;
}
.mobile-menu .content {
    margin-left: auto;
    width: 260px;
    height: 100%;
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 26px;
    justify-content: center;

    transform: translateX(100%);
    transition: transform 0.3s ease;

    pointer-events: auto;

}
.mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu.active .content {
    transform: translateX(0);
}
.mobile-menu .content > * {
    margin-left: 33px;
    color: black;
}
.mobile-menu .content .close {
    width: 40px;
    height: auto;
    top: 5px;
    right: 5px;
    position: absolute;
    cursor: pointer;
}
.mobile-menu .content button {
    margin-top: 100px;
    margin-bottom: 120px;
    cursor: pointer;
    width: 200px;
    aspect-ratio: 3.7 / 1;
    font-family: var(--font-main);
    font-size: 17px;
    font-weight: 600;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
    background-color: white;
}
.mobile-menu .bottom {
    height: 100vh;
    width: 100vw;
    background: var(--accent-color);   
}




























.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;

    opacity: 1;
    transition: opacity 0.3s ease;

}
.preloader.hide {
    opacity: 0;
}
.preloader img {
    width: 30vw;
}
@media (max-width:768px) {
.preloader img {
    width: 60vw;
}
}
.loader {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-bottom: 150px;
}
.progress {
    width: 100%;
    height: 5px;
    background: #22222200;
    overflow: hidden;
    border-radius: 10px;
}
.bar {
    height: 100%;
    width: 0%;
    background: #222;
    animation: load 0.4s ease forwards;
}
@keyframes load {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}





















footer {
    width: 100%;
    height: 60px;

    display: flex;
    flex-direction: row;
    font-size: 18px;

    align-items: center;
    justify-content: center;

}
footer a {
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer img {
    margin-right: 8px;
    width: 32px;
    height: auto;
}


























.e404-sec {
    height: 100vh;
}

.e404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.e404 .code {
    font-weight: 800;
    font-size: clamp(80px, 20vw, 220px);
    line-height: 1;
    letter-spacing: -2px;
}

.e404 .text {
    /* margin-top: 20px; */
    font-size: clamp(16px, 2.5vw, 24px);
    /* opacity: 0.7; */
}
.e404 .button {
    margin-top: 20px;
    background-color: white;
    color: black;
}
.e404 .button:hover {
    background-color: black;
}


/* @media (max-width: 480px) {
    .text {
        margin-top: 15px;
    }

    .btn {
        margin-top: 30px;
    }
} */




























































:root {
    --admin-color: #76c4e1;
}

#admin-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.3s ease;
  z-index: 1000;
}


#admin-header.hidden {
  transform: translateY(-100%);
}




















.header .other {
    height: 4vw;

    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 20px;

    background-color: white;
}

.header .other .chunk {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    margin-left: 20px;

    gap: 20px;
}

.header .other img {
    height: 80%;
    width: auto;
    cursor: pointer;
}

.status {
    height: 45px;
    width: fit-content;
    
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0px 15px 0px 15px;

    border: 2px solid var(--admin-color);

}

.header .other select {

    padding: 0px 15px 0px 15px;
    
    font-size: 16px;
    height: 80%;
    border-radius: 100px;
    font-weight: 600;
    border: 2px solid var(--admin-color);
    background: white;
}

.adminBTN {
    width: 45px;
    height: 45px;
    background-color: var(--admin-color);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-textBTN {
    cursor: pointer;
    height: 45px;
    width: fit-content;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px 0px 15px;
    background-color: var(--admin-color);
    transition: all 0.3s ease, opacity 0.2s ease;
    z-index: 3;
}


.admin-textBTN:hover {
  background-color: black !important;
  color: white !important;
}





/* .e {
    cursor: pointer;
    position: relative;
}

.e::after {
    content: "";
    position: absolute;
    z-index: 3;

    --size:35px;

    left: -30px;
    left: 0;

    top:-10px;

    width: var(--size);
    height: var(--size);
    
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-size: 12px;

    border-radius: 100px;

    background-color: var(--admin-color);

    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow:
        0 0px 10px rgba(0,0,0,0.1),
        inset 0 1px 1px rgba(255,255,255,0.3);
    background-image: url("/static/assets/pen.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%; 
}

.l {
    cursor: pointer;
    position: relative;
}


.l::after {
    content: "";
    position: absolute;
    z-index: 3;

    --size:35px;

    left: -30px;
    left: 0;

    top:-10px;

    width: var(--size);
    height: var(--size);
    
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-size: 12px;

    border-radius: 100px;

    background-color: var(--admin-color);

    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow:
        0 0px 10px rgba(0,0,0,0.1),
        inset 0 1px 1px rgba(255,255,255,0.3);
    background-image: url("/static/assets/download.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%; 
} */