@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@300;400;500;600;700&display=swap');
/* GLOBAL + TILDA */

:root {
    --back: #EBE3DE;
    --text: #383c45;
    --green: #334e3e;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--back);
}

/*
 */
@font-face {
    font-family: 'CeraPro';
    src: url('https://static.tildacdn.com/tild3164-6336-4639-b662-383162616437/monotypecorsiva.woff') format('woff');
    font-weight: 100;
    font-style: normal
}
@font-face {
    font-family: 'CeraPro';
    src: url('https://static.tildacdn.com/tild3365-3461-4237-b066-323138643665/CeraPro-Thin.woff') format('woff');
    font-weight: 300;
    font-style: normal
}
@font-face {
    font-family: 'CeraPro';
    src: url('https://static.tildacdn.com/tild3937-3062-4464-a661-373563376562/CeraPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: 'CeraPro';
    src: url('https://static.tildacdn.com/tild6538-3662-4665-a635-373437323631/CeraPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal
}
@font-face {
    font-family: 'CeraPro';
    src: url('https://static.tildacdn.com/tild3433-6438-4430-b263-326139393039/CeraPro-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal
}
@font-face {
    font-family: 'CeraPro';
    src: url('https://static.tildacdn.com/tild3138-3939-4139-b239-393063636535/CeraPro-Black.woff') format('woff');
    font-weight: 700;
    font-style: normal
}
/*
 */

.languages {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: .5rem;
}
.languages .language {
    padding: .25rem .5rem;
    border: 1px solid var(--text);
    border-radius:  1rem;
    cursor: pointer;
    font-size: .75rem;
    color: var(--back);
    background-color: var(--green);
}
.languages .language:active {
    scale: 0.95;
}
.languages .language.RU {}
.languages .language.ENG {}
.languages .language.notActive {
    color: var(--green);
    background-color: transparent;
}

.socialLinks {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-direction: row;
}
.socialLinks a {

}
.socialLinks a svg {
    display: block;
}

#langChange {
    position: fixed;
    top: .5rem;
    left: 50%;
    transform: translate(-50%, 0);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;

    background-color: #EBE3DE;
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: .5rem .5rem 2rem 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100500;
    opacity: 0;

    animation: langChange 1s 5s ease-out forwards;
}
#langChange > p {
    font-family: "CeraPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    text-align: center;
    color: var(--text) !important;
}
#langChange > div {
    display: flex;
    padding: 2rem 0 0 0;
    gap: 1rem;
}
#langChange > div button {
    padding: .75rem 1.2rem;
    border-radius: .5rem;
    border: none;
    background-color: transparent;
    font-family: "CeraPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: .9rem;
    cursor: pointer;
}
#langChange > div button:first-child {
    background-color: var(--green);
    color: var(--back);
}
#langChange > div button:last-child {
    color: var(--text) !important;
}

/* TILDA */
.t-popup_show .t-popup__container.t-popup__container-static {
    border-radius: 10px;
}
.t702 .t702__img {
    border-radius: 10px 10px 10px 10px;
}
.t-input {
    font-family: 'CeraPro', Arial, sans-serif;
    height: 40px;
}
.t-select {
    font-family: 'CeraPro', Arial, sans-serif;
    height: 40px;
}
.t-submit {
    font-family: 'CeraPro', Arial, sans-serif;
    font-weight: 400;
}
.t702 .t-popup__block-close {
    background: #EBE3DE;
}
.t-popup_show .t-popup__container.t-popup__container-static {
    border-radius: 10px;
}
.t702 .t702__img {
    border-radius: 10px 10px 0 0;
}
.t702 label {
    font-family: "CeraPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.t-descr_md {
    font-size: 1rem;
    font-weight: 500;
}
/*/ TILDA */

@keyframes langChange {
    from {
        opacity: 0;
        translate: 0 -15px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
@media screen and (max-width: 600px) {
    #langChange {
        padding: 2rem;
        width: calc(100% - 1rem);
    }
    #langChange > p {
        font-size: 1rem;
    }
    #langChange > div button {
        padding: .5rem 1rem;
    }
}
/*/ GLOBAL + TILDA */

/* HEADER + FOOTER */

#header {
    background-color: var(--back);
    font-family: "CeraPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--text);
    font-size: .9rem;
    z-index: 100;

    top: 0;
    position: fixed;
    width: 100%;
}
#header a {
    color: var(--text);
    text-decoration: none;
    margin: 0;
}
#header p {
    margin: 0;
    text-align: center;
}
#header address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#header > div:nth-child(1) {
    display: flex;
    max-width: 1200px;
    justify-content: space-between;
    align-items: center;
    margin-inline: auto;
    padding-block: 2rem 1rem;
    position: relative;
    padding-inline: .5rem;
    background-color: var(--back);
}
#header div:nth-child(1) #headerAddress {
    text-align: center;
}
#header div:nth-child(1) #headerLogo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
}
#header div:nth-child(1) #headerPhone {
    font-weight: 500;
}

#header #mobileBurger {
    display: none;
    border: none;
    background-color: transparent;
    padding: 1rem;
    z-index: 100;
    transition: all .5s ease-out;
}
#header #upButton {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    background-color: var(--back);
    border: 1px solid var(--green);
    border-radius: 100vmin;
    aspect-ratio: 1 / 1;
    max-height: 2.5rem;
    opacity: 0;
    bottom: 1rem;
    left: 1rem;

    animation: mobNav 1s ease-out forwards;
}
#header #upButton svg {
    display: block;
    height: 2rem;
}

#header nav {}
#header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 2rem;

    /*max-width: 1200px;*/
    margin: 0 auto;

    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
#header nav ul li {
    flex: 1;
    max-width: fit-content;
    position: relative;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}
#header nav ul li > *{
    display: flex;
    align-items: center;
    text-align: center;
}
#header nav ul li:not(:last-child):after {
    content: '';
    width: 1px;
    height: 10px;
    background-color: var(--text);
    position: absolute;
    right: -1rem;
}
#header nav ul li .includesSubmenus {
    cursor: default;
}
#header nav ul li .headerSubmenus {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    background-color: var(--back);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 0 var(--text);

    padding: 1rem 2rem;
    display: none;
}
#header nav ul li .headerSubmenus a {
    display: block;
    text-align: center;
}
#header nav ul li .headerSubmenus a:not(:last-child) {
    /*padding-bottom: .5rem;*/
}

/* FOOTER */
#footer {}
#footer {
    background-color: var(--back);
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 1rem 3rem 1rem;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5rem;

    font-family: "CeraPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer .footerBlock {}
#footer .footerBlock {
    max-width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#footer .footerBlock a {
    color: var(--text);
    text-decoration: none;
    margin: 0;
}
#footer .footerBlock p {
    margin: 0;
}
#footer .footerBlock .socialLinks {
    padding-block: 1rem;
}
#footer .footerBlock #footerStars {
    display: flex;
    justify-content: space-around;
}
#footer .footerBlock #footerStars svg {
    height: 1rem;
}

#footer .footerBlock .footerBlockHeader {
    color: var(--text);
    font-weight: 500;
    font-size: 1.6rem;
    position: relative;
    padding-bottom: 1rem;
}
#footer .footerBlock .footerBlockHeader:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--green);
    left: 0;
    bottom: .5rem;
    opacity: .5;
}
#footer .footerBlock #footerAddress {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/*/ FOOTER */

/*
*/
@keyframes dropDownMenusShow {
    from {
        opacity: 0;
        border-radius: 1rem 1rem 1rem 1rem;
    }
    to {
        opacity: 1;
        border-radius: 0 0 1rem 1rem;
    }
}
@keyframes dropDownMenusHide {
    from {
        opacity: 1;
        border-radius: 0 0 1rem 1rem;
    }
    to {
        opacity: 0;
        border-radius: 1rem 1rem 1rem 1rem;
    }
}
@keyframes mobNav {
    from {
        opacity: 0;
        translate: 0 10px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
@keyframes mobNavUl {
    from {
        scale: .99;
        opacity: 0;
        translate: 0 -20px;
    }
    to {
        scale: 1;
        opacity: 1;
        translate: 0 0;
        margin: 0 1rem 1rem 0;
    }
}
@keyframes headerSubmenus {
    from {
        height: 1%;
    }
    to {
        height: 100%;
    }
}

/*
*/
@media screen and (min-width: 600px) {
    #header nav ul:not(:first-child) {
        display: none;
    }
    #header nav ul li .headerSubmenus a {
        padding-block: .5rem;
    }
}
@media screen and (max-width: 600px) {
    #header div:nth-child(1) #headerLogo {
        position: relative;
        left: unset;
        top: unset;
        transform: translate(0, 0);
        margin: .75rem auto;
    }
    #header div:nth-child(1) #headerLogo img {
        max-height: 2.5rem;
    }
    #header #mobileBurger {
        display: flex;
        align-items: center;

        position: fixed;
        top: .5rem;
        right: 1rem;
        z-index: +2;
        background-color: var(--back);
        border-radius: 100vmin;
        padding: .5rem;

        height: 3rem;
        width: 3rem;
    }
    #header #mobileBurger svg {
        height: 2rem;
        width: 2rem;
        display: block;
    }

    #header {
        position: sticky;
    }
    #header address {
        display: none;
    }
    #header div:nth-child(1) {
        padding-block: 0;
        padding-inline: 0;
    }
    #header nav {
        position: fixed;
        background-color: #00000050;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /*display: flex;*/
        display: none;
        justify-content: flex-start;
        align-items: flex-end;
        /*gap: 1rem;*/
        padding-top: 5rem;
        flex-direction: column;

        overflow-y: scroll;

        border-radius: 0;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    #header nav ul:not(:nth-child(2)) {
        padding-block: 1rem;
    }
    #header nav ul {
        display: flex;
        flex-direction: column;
        text-align: center;

        background-color: var(--back);
        border-radius: 1rem;
        margin: 0;

        /*gap: unset;*/
        width: 70%;
        animation: mobNavUl .5s ease-in-out forwards;
    }
    #header nav ul > * {
        animation: mobNav .5s ease-out forwards;
    }
    #header nav ul:last-child li {
        flex-direction: row;
    }
    #header nav ul li .headerSubmenus {
        box-shadow: 0 0 0;
        border-radius: .5rem !important;
        background-color: #E1D8D3FF;
        top: unset;
        left: unset;
        translate: none;
        position: relative;
        /*margin-top: 1rem;*/
    }
    #header nav ul li .headerSubmenus a {
        padding: .5rem;
    }
    #header nav ul li:not(:last-child):after {
        display: none;
    }

    /* FOOTER */
    #footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 4rem;
    }
    #footer .footerBlock {
        gap: .5rem;
    }
    #footer .footerBlock .footerBlockHeader {
        font-weight: 600;
        font-size: 1.2rem;
        padding-bottom: 0;
    }
    #footer .footerBlock .footerBlockHeader:after {
        display: none;
    }
    /*/ FOOTER */

}

/*/ HEADER + FOOTER */