@font-face {
    font-display: swap;
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/cormorant-garamond-v19-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/cormorant-garamond-v19-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/montserrat-v29-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v29-latin_latin-ext-regular.woff2') format('woff2');
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 300px;
    height: auto;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: #000;
    background-color: #fff;
}

@media (max-width: 991px) {
    body {
        font-size: 14px;
    }
}

.logo-image {
    width: 100px;
    position: fixed;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;

    @media (max-width: 1200px) {
        width: 80px;
    }
}

.logo-image.logo-stuck {
    position: absolute;
    top: auto;
    bottom: 80px;
}

.hero-section {
    height: 100vh;
    background-size: cover;
    background: url(../images/hero-bg.jpg) no-repeat top center;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    @media (max-width: 1200px) {
        background: #fff;
        padding-top: 30px;
    }

    .bubble-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
        z-index: 10;

        @media (max-width: 1200px) {
            position: relative;
            height: 250px;
            margin-bottom: 30px;
        }
    }

    .bubble-image {
        position: absolute;
        max-width: 200px;
        height: auto;
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.5s ease;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.8);

        @media (max-width: 1200px) {
            max-width: 100%;
        }
    }

    .bubble-image.show {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .hero-container {
        width: 100%;
        max-width: 1360px;
        margin: 0 auto;
        position: relative;
        height: 100%;
    }

    .hero-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .top-link {
        display: block;
        font-family: 'Cormorant Garamond', sans-serif;
        font-weight: 400;
        color: #fff;
        font-size: 16px;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        z-index: 9999;
        position: absolute;
        left: 0;
        top: 116px;

        @media (max-width: 1200px) {
            display: none;
        }
    }

    .top-link-mobile {
        display: block;
        font-family: 'Cormorant Garamond', sans-serif;
        font-weight: 400;
        color: #000;
        font-size: 14px;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        z-index: 100;

        @media (min-width: 1201px) {
            display: none;
        }
    }

    .heading {
        text-align: center;
        font-family: 'Cormorant Garamond', sans-serif;
        font-weight: 400;
        color: #fff;
        font-size: 70px;
        line-height: 1;
        margin-top: 0;
        margin-bottom: 30px;
        text-transform: uppercase;

        @media (max-width: 1200px) {
            margin: 0 auto 30px;
            text-align: center;
            color: #000;
            font-size: 40px;
        }
    }

    .text {
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        color: #fff;
        font-size: 20px;
        line-height: 1;
        margin: 0;
        text-transform: uppercase;

        @media (max-width: 1200px) {
            display: none;
        }
    }

    .text-mobile {
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        color: #9CAF88;
        font-size: 16px;
        line-height: 1;
        margin: 0 0 5px;
        text-transform: uppercase;

        @media (min-width: 1201px) {
            display: none;
        }
    }

    .button-bottom {
        background: transparent;
        border: none;
        display: block;
        position: absolute;
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
        z-index: 9999;
        cursor: pointer;
        animation: floatFade 3s ease-in-out infinite;

        @media (max-width: 1200px) {
            display: none;
        }
    }
}

@keyframes floatFade {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-10px);
        opacity: 0.2;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;

    p{
        margin-top: 20px;
        margin-bottom: 20px;
    }

    p:first-of-type{
        margin-top: 0;
    }

    p:last-of-type{
        margin-bottom: 0;
    }

    img{
        max-width: 100%;
        height: auto;
    }

    .container{
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
    }

    section{
        width: 100%;
    }

    h1, h2, h3{
        color: #000;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        font-family: 'Cormorant Garamond', sans-serif;
        margin-top: 0;
    }

    .text-columns{
        padding-top: 140px;
        padding-bottom: 200px;
        position: relative;
        background: rgba(156, 175, 136, 0.20);
    }

    @media (max-width: 991px) {
        .text-columns{
            padding-top: 100px;
            padding-bottom: 100px;
        }
    }

    .text-columns-title{
        margin-bottom: 20px;
        font-size: 64px;
    }

    @media (max-width: 991px) {
        .text-columns-title{
            font-size: 24px;
        }
    }

    .text-columns-undertitle{
        font-family: "Cormorant Garamond", sans-serif;
        margin-bottom: 40px;
        font-weight: 400;
        font-size: 32px;
        line-height: normal;
    }

    @media (max-width: 991px) {
        .text-columns-undertitle{
            font-size: 20px;
        }
    }

    .text-columns-text{
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        width: 100%;
        position: relative;
        transition: max-height ease-out 0.2s;
    }

    @media (max-width: 991px) {
        .text-columns-text{
            gap: 20px;
            max-height: 350px;
            overflow: hidden;
        }

        .text-columns-text.open{
            max-height: 2000px;
        }
    }

    .text-columns-text__column{
        width: 100%;
        max-width: calc(50% - 20px);
    }

    @media (max-width: 991px) {
        .text-columns-text__column{
            max-width: 100%;
        }

        .text-columns-text__column:nth-child(2){
            margin-bottom: 75px;
        }
    }

    .text-columns-text__btn{
        border: none;
        height: 190px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: transparent;
        display: none;
    }

    @media (max-width: 991px) {
        .text-columns-text__btn{
            display: block;
        }

        .text-columns-text.open .text-columns-text__btn:before{
            background: none;
        }

        .text-columns-text.open .text-columns-text__btn span{
            rotate: 180deg;
        }
    }

    .text-columns-text__btn:before{
        content: '';
        display: block;
        height: 120px;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 58px;
        background: linear-gradient(180deg, rgba(235, 239, 231, 0.00) 0%, #EBEFE7 100%);
    }

    .text-columns-text__btn span{
        width: 100%;
        height: 60px;
        position: absolute;
        bottom: 0;
        left: 50%;
        translate: -50% 0;
        background-color: #EBEFE7;
        z-index: 1;
    }

    .text-image{
        background: #CBDEEA;
        padding: 144px 0 182px;
    }

    @media (max-width: 991px) {
        .text-image{
            padding: 82px 0 113px;
        }
    }

    .text-image .container{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;
    }

    @media (max-width: 991px) {
        .text-image .container{
            flex-direction: column-reverse;
            gap: 57px;
        }
    }

    .text-image__text{
        width: calc(50% - 20px);
    }

    @media (max-width: 991px) {
        .text-image__text{
            width: 100%;
        }
    }

    .text-image__text h2{
        color: #000;
        font-size: 32px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 23px;
    }

    @media (max-width: 991px) {
        .text-image__text h2{
            font-size: 24px;
            line-height: 1;
        }
    }

    .text-image__image{
        width: calc(50% - 20px);
        font-size: 10px;
        line-height: 1.5;
    }

    @media (max-width: 991px) {
        .text-image__image{
            width: 100%;
        }

        .text-image__image img{
            width: 100%;
            height: auto;
        }
    }

    .products{
        padding: 140px 0;
    }

    @media (max-width: 991px) {
        .products{
            padding-top: 60px;
        }
    }

    .products h2{
        font-size: 32px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    @media (max-width: 991px) {
        .products h2{
            font-size: 24px;
            line-height: 1;
        }
    }

    .products-text{
        max-width: 1000px;
        margin-bottom: 56px;
    }

    @media (max-width: 991px) {
        .products-text{
            margin-bottom: 30px;
        }
    }

    .products-list{
        padding: 0;
        margin: 0;
        gap: 60px 20px;
        display: flex;
        flex-wrap: wrap;
    }

    .products-item{
        list-style-type: none;
        width: calc(33.33% - 13.33px);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    @media (max-width: 991px) {
        .products-item{
            width: 100%;
        }
    }

    .products-item a{
        display: block;
        color: #000;
        text-align: center;
        text-decoration: none;
        width: 100%;
    }

    .products-item__name{
        margin: 10px 0 20px;
        font-size: 16px;
    }

    .products-item__name:hover{
        text-decoration: none;
    }

    .products-item .products-item__btn{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFF;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        max-width: 145px;
        min-height: 38px;
        background-color: #9CAF88;
        transition: background-color  ease-out 0.2s;
    }

    .products-item .products-item__btn:hover{
        text-decoration: none;
        background-color: #000;
    }

    .products-item__image{
        transition: scale ease-out 0.2s;
    }

    .text-columns_alt{
        background: #ECC3BF;
        padding-bottom: 280px;
    }

    @media (max-width: 991px) {
        .text-columns_alt{
            padding-top: 40px;
            padding-bottom: 180px;
        }
    }

    .text-columns_alt h2{
        font-size: 32px;
        font-weight: 300;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    @media (max-width: 991px) {
        .text-columns_alt h2{
            font-size: 24px;
            margin-bottom: 30px;
        }
    }

    @media (max-width: 991px) {
        .text-columns_alt .text-columns-text{
            max-height: 2000px;
            line-height: 1.5;
        }
    }

    .text-columns_alt a{
        color: #000;
    }

    .text-columns_alt a:hover{
        text-decoration: none;
    }

    .persons-slider{
        background: #9CAF88;
        padding: 140px 0 200px;
    }

    @media (max-width: 991px) {
        .persons-slider{
            padding: 100px 0 138px;
        }
    }

    .persons-slider .swiper {
        width: 100%;
        height: 100%;
    }

    .persons-slider .swiper-slide{
        max-width: max-content;
        height: 100%;
        display: flex;
    }

    .persons-slider .swiper-slide.align-center{
        align-self: center;
    }

    .persons-slider .swiper-slide.align-start{
        align-self: flex-start;
    }

    .persons-slider .swiper-slide.align-end{
        align-self: flex-end;
    }

    @media (max-width: 991px) {
        .persons-slider .swiper-slide.align-center,
        .persons-slider .swiper-slide.align-start,
        .persons-slider .swiper-slide.align-end{
            align-self: inherit;
        }
    }

    .persons-slider-preview{
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: max-content;
    }

    .persons-slider-preview__img{
        position: relative;
        width: max-content;
        overflow: hidden;
    }

    @media (max-width: 991px) {
        .persons-slider-preview__img{
            width: 330px;
            height: 260px;
        }
    }

    .persons-slider-preview__img img{
        display: block;
        transition: scale ease-out 0.5s;
    }

    @media (max-width: 991px) {
        .persons-slider-preview__img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .persons-slider-preview__img:hover img{
        scale: 1.02;
    }

    @media (max-width: 991px) {
        .persons-slider-preview__img:hover img{
            scale: 1
        }
    }

    .persons-slider-preview__name{
        color: #FFF;
        font-family: 'Cormorant Garamond', sans-serif;
        font-size: 20px;
        line-height: normal;
    }

    @media (max-width: 991px) {
        .persons-slider-preview__name{
            font-size: 16px;
            max-width: 330px;
        }
    }

    .persons-slider-preview__quote{
        text-decoration: none;
        color: #fff;
        position: absolute;
        inset: 0;
        padding: 52px 45px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: rgba(0, 0, 0, 0.30);
        opacity: 0;
        transition: opacity ease-out 0.5s;
        text-align: left;
        cursor: pointer;
    }

    @media (max-width: 991px) {
        .persons-slider-preview__quote{
            padding: 20px;
            background: transparent;
            opacity: 1;
        }
    }

    .persons-slider .swiper-slide:not(.align-center, .align-end, .align-start) .persons-slider-preview__quote{
        justify-content: flex-start;
    }

    @media (max-width: 991px) {
        .persons-slider .swiper-slide:not(.align-center, .align-end, .align-start) .persons-slider-preview__quote{
            justify-content: flex-end;
        }
    }

    .persons-slider-preview__quote:hover{
        text-decoration: none;
        color: #fff;
    }

    .persons-slider-preview__img:hover .persons-slider-preview__quote{
        opacity: 1;
    }

    .persons-slider-preview__quote p{
        font-family: 'Cormorant Garamond', sans-serif;
        font-size: 24px;
        line-height: normal;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .persons-slider .swiper-slide:not(.align-center, .align-end, .align-start) .persons-slider-preview__quote p{
        font-size: 40px;
    }

    @media (max-width: 991px) {
        .persons-slider .swiper-slide:not(.align-center, .align-end, .align-start) .persons-slider-preview__quote p{
            font-size: 24px;
        }
    }

    .persons-slider-preview__quote b{
        font-family: Montserrat;
        font-size: 10px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .persons-slider .swiper-slide:not(.align-center, .align-end, .align-start) .persons-slider-preview__quote b{
        font-size: 14px;
    }

    @media (max-width: 991px) {
        .persons-slider .swiper-slide:not(.align-center, .align-end, .align-start) .persons-slider-preview__quote b{
            font-size: 10px;
        }
    }

    .persons-slider-modal{
        padding: 20px 20px 130px;
        border: none;
        max-width: 1000px;
        width: 100%;
        z-index: 99999;
    }

    @media (max-width: 1060px) {
        .persons-slider-modal{
            max-width: calc(100vw - 40px);
        }
    }

    @media (max-width: 991px) {
        .persons-slider-modal{
            padding: 10px 10px 78px;
        }
    }

    .persons-slider-modal::backdrop {
        padding: 20px;
        background-color: rgba(156, 175, 136, 0.9);
    }

    .persons-slider-modal__head{
        display: flex;
        justify-content: flex-end;
    }

    .persons-slider-modal__close{
        display: flex;
        border-radius: 50px;
        padding: 0;
        height: 44px;
        width: 44px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        transition: background-color ease-out 0.3s;
        outline: none;
    }

    @media (max-width: 991px) {
        .persons-slider-modal__close{
            height: 30px;
            width: 30px;
        }
    }

    .persons-slider-modal__close:hover{
        background-color: #4D5D52;
    }

    .persons-slider-modal__close svg{
        max-width: 100%;
        max-height: 100%;
    }

    .persons-slider-modal__close:hover svg path{
        fill: #fff;
    }

    .persons-slider-modal__close:hover svg circle{
        stroke: #4D5D52;
    }

    .persons-slider-modal__content{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 80px;
    }

    @media (max-width: 991px) {
        .persons-slider-modal__content{
            padding: 0 15px;
        }
    }

    .persons-slider-modal__content .logo img{
        display: block;
        max-width: 50px;
        height: auto;
    }

    .persons-slider-modal__content .title{
        font-family: 'Cormorant Garamond', sans-serif;
        font-size: 36px;
        font-weight: 700;
        line-height: normal;
    }

    @media (max-width: 991px) {
        .persons-slider-modal__content .title{
            font-size: 24px;
        }
    }

    .persons-slider-modal__content .undertitle{
        font-family: 'Cormorant Garamond', sans-serif;
        font-size: 24px;
        font-weight: 700;
        line-height: normal;
    }

    @media (max-width: 991px) {
        .persons-slider-modal__content .undertitle{
            font-size: 20px;
        }
    }

    .persons-slider-modal__content .quote{
        display: flex;
        gap: 47px;
        padding-top: 20px;
        color: #9CAF88;
        font-family: 'Cormorant Garamond', sans-serif;
        font-size: 48px;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
    }

    @media (max-width: 991px) {
        .persons-slider-modal__content .quote{
            gap: 20px;
            font-size: 32px;
            padding-top: 10px;
        }
    }

    @media (max-width: 767px) {
        .persons-slider-modal__content .quote{
            flex-direction: column;
        }
    }

    .persons-slider-modal__content .quote img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .persons-slider-modal__content .quote div:first-child{
        width: 300px;
        min-width: 300px;
        height: 200px;
        overflow: hidden;
    }

    @media (max-width: 575px) {
        .persons-slider-modal__content .quote div:first-child{
            width: 100%;
            max-width: 100%;
            min-width: auto;
            height: 60vw;
        }
    }
}

.persons-modal-open{
    overflow: hidden;
}

.persons-modal-open .swiper{
    pointer-events: none;
}

.persons-modal-open dialog{
    pointer-events: auto;
}