@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.sub-hero {
    background-color: #F2EDE8;
    padding: 10px 10px 0
}

.sub-hero__container {
    overflow: hidden;
    border-radius: 30px;
    padding: 82px 10px 72px;
    min-height: 400px;
    position: relative;
    background-color: var(--brown-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.sub-hero__container .bg img {
    object-fit: cover
}

.sub-hero__container .bg:before {
    background: linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%);
    z-index: 2
}

.sub-hero__container .bg:after {
    background: linear-gradient(0deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.4) 100%);
    z-index: 2
}

.sub-hero__container .txt {
    display: flex;
    height: auto;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.sub-hero__container .txt h1,.sub-hero__container .txt h3,.sub-hero__container .txt p {
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 3
}


.sub-hero__container .txt .bts {
    justify-content: center;
    position: relative;
    z-index: 3
}

.sub-hero__container .infotext_h {
    z-index: 3;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    padding: 0;
    margin: 30px 0 0
}

.sub-hero__container .infotext_h a {
    text-decoration: underline;
    color: #fff
}

@media (min-width: 768px) {
    .sub-hero__container {
        min-height:450px
    }

    .sub-hero__container .txt {
        max-width: 560px;
        margin: 0 auto
    }
}
.activity__slider,.activity__slider .slick-track {
    display: flex!important
}

.activity__head {
    max-width: 550px;
    margin: 0 auto
}

.activity__head h2 {
    margin-top: 0
}

.activity__head p {
    margin-bottom: 0
}

.activity__slider-cd {
    margin: 40px 0
}

.dark .activity__head h2 {
    color: #fff
}

.dark .activity__head p {
    color: #DDC9B5
}

.activity__slider {
    width: calc(100% - 10px);
    margin: 0 0 0 -10px
}

.activity__slider .slick-list {
    overflow: visible!important
}

.activity__item {
    display: inline-flex!important;
    width: 100%;
    padding: 0 10px;
    height: auto
}

.activity__item .in {
    height: auto;
    background-color: #fff;
    border-radius: 28px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: all 150ms linear
}

.activity__item .image {
    aspect-ratio: 291/189;
    background-color: var(--brown-dark);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    margin: 0 0 30px;
    border-radius: 20px
}

.activity__item .image:before {
    z-index: 2;
    background: linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.2) 100%)
}

.activity__item .image:after {
    z-index: 2;
    background: linear-gradient(0deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 100%)
}

.activity__item .image img {
    object-fit: cover
}

.activity__item .image .dist {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    padding-left: 16px;
    z-index: 3
}

.activity__item .image .dist strong {
    display: inline-block;
    width: 100%;
    font-family: 'Inter', sans-serif;
    color: #FFF;
    font-size: 45px;
    font-weight: 500;
    line-height: 1em
}

.activity__item .text {
    padding: 0 12px 12px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1
}

.activity__item .text h3.title {
    margin: 0 0 20px
}

.activity__item .text h2 {
    margin: 0 0 24px
}

.activity__item .text p {
    font-size: 14px;
    line-height: 1.6em;
    margin: 0 0 24px
}

.activity__slider:not(.slick-initialized) .activity__item {
    flex: 0 0 100%
}

.activity__map {
    display: none
}

@media (min-width: 768px) {
    .activity__slider-cd {
        margin:60px auto
    }

    .activity__slider {
        width: calc(50% + 10px);
        display: flex!important;
        margin: 0 0 0 -10px
    }

    .activity__item.slick-active .in {
        box-shadow: var(--box-shadow)
    }

    .activity__map {
        height: 400px;
        display: block;
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        background-color: rgba(0,0,0,.2)
    }

    .activity__map div {
        width: auto
    }

    .activity__map .map-markers {
        width: 100%
    }
}

@media (min-width: 1024px) {
    .activity__item .in {
        flex-direction:initial;
        transition: all .3s ease-out;
        opacity: .8;
        transform: scale(.95)
    }

    .activity__item .in .image {
        flex: 0 0 220px;
        margin: 0 40px 0 0
    }

    .activity__item .in .text {
        flex: 1;
        padding: 27px 30px 27px 0
    }

    .activity__item.slick-active .in {
        opacity: 1;
        transform: scale(1)
    }
}

.tiles h2 {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto
}

ul.tiles__list {
    display: flex;
    flex-wrap: wrap;
    margin: 30px -10px 0;
    width: calc(100% + 20px)
}

.tiles__item {
    width: 100%;
    display: flex;
    padding: 10px
}

.tiles__item .in {
    position: relative;
    z-index: 2;
    height: auto;
    border-radius: var(--box-radius);
    padding: 30px;
    background-color: #F2EDE8
}

.tiles__item .in img {
    width: 100%;
    height: 32px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 40px
}

.tiles__item .in h3 {
    margin: 0 0 24px;
    font-size: 32px;
    color: var(--brown-dark)
}

.tiles__item .in p {
    margin: 0
}

.tiles__item .dots {
    pointer-events: none;
    transform: translate(-30px,30px);
    z-index: -1
}

.tiles__item .dots:before {
    background-repeat: no-repeat;
    background-position: right top;
    background-size: initial
}

.tiles__item:nth-child(4n+1) .dots:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none"><circle cx="63" cy="3" r="3" transform="rotate(90 63 3)" fill="%23DDC9B5"/><circle cx="63" cy="33" r="3" transform="rotate(90 63 33)" fill="%23DDC9B5"/><circle cx="63" cy="63" r="3" transform="rotate(90 63 63)" fill="%23DDC9B5"/><circle cx="33" cy="3" r="3" transform="rotate(90 33 3)" fill="%23DDC9B5"/><circle cx="33" cy="33" r="3" transform="rotate(90 33 33)" fill="%23DDC9B5"/><circle cx="3" cy="3" r="3" transform="rotate(90 3 3)" fill="%23DDC9B5"/></svg>')
}

.tiles__item:nth-child(4n+2) .dots:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><circle cx="33" cy="3" r="3" transform="rotate(90 33 3)" fill="%23DDC9B5"/><circle cx="33" cy="33" r="3" transform="rotate(90 33 33)" fill="%23DDC9B5"/><circle cx="3" cy="3" r="3" transform="rotate(90 3 3)" fill="%23DDC9B5"/><circle cx="3" cy="33" r="3" transform="rotate(90 3 33)" fill="%23DDC9B5"/></svg>')
}

.tiles__item:nth-child(4n+3) .dots:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="66" height="36" viewBox="0 0 66 36" fill="none"><circle cx="63" cy="3" r="3" transform="rotate(90 63 3)" fill="%23DDC9B5"/><circle cx="63" cy="33" r="3" transform="rotate(90 63 33)" fill="%23DDC9B5"/><circle cx="33" cy="3" r="3" transform="rotate(90 33 3)" fill="%23DDC9B5"/><circle cx="3" cy="3" r="3" transform="rotate(90 3 3)" fill="%23DDC9B5"/><circle cx="33" cy="33" r="3" transform="rotate(90 33 33)" fill="%23DDC9B5"/><circle cx="3" cy="33" r="3" transform="rotate(90 3 33)" fill="%23DDC9B5"/></svg>')
}

.tiles__item:nth-child(4n+4) .dots:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><circle cx="33" cy="3" r="3" transform="rotate(90 33 3)" fill="%23DDC9B5"/><circle cx="33" cy="33" r="3" transform="rotate(90 33 33)" fill="%23DDC9B5"/><circle cx="3" cy="3" r="3" transform="rotate(90 3 3)" fill="%23DDC9B5"/><circle cx="3" cy="33" r="3" transform="rotate(90 3 33)" fill="%23DDC9B5"/></svg>')
}

@media (min-width: 768px) {
    .tiles__item {
        width:33.33%;
        flex: 0 0 33.33%
    }

    .tiles__item .tiles__item .in {
        padding: 40px
    }

    .tiles__item .tiles__item .in img {
        margin: 0 0 80px
    }

    ul.tiles__list {
        margin: 60px -10px 0
    }
}


.formblock__in {
    border-radius: 20px;
    background: #1F2F28;
    padding: 40px 27px;
    position: relative
}

@media (min-width: 768px) {
    .formblock__in:after,.formblock__in:before {
        content:' ';
        position: absolute;
        background-repeat: no-repeat
    }

    .formblock__in:before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none"><circle cx="63" cy="93" r="3" transform="rotate(-90 63 93)" fill="%23787572"/><circle cx="33" cy="93" r="3" transform="rotate(-90 33 93)" fill="%23787572"/><circle cx="3" cy="93" r="3" transform="rotate(-90 3 93)" fill="%23787572"/><circle cx="63" cy="63" r="3" transform="rotate(-90 63 63)" fill="%23787572"/><circle cx="33" cy="63" r="3" transform="rotate(-90 33 63)" fill="%23787572"/><circle cx="3" cy="63" r="3" transform="rotate(-90 3 63)" fill="%23787572"/><circle cx="33" cy="33" r="3" transform="rotate(-90 33 33)" fill="%23787572"/><circle cx="3" cy="33" r="3" transform="rotate(-90 3 33)" fill="%23787572"/><circle cx="3" cy="3" r="3" transform="rotate(-90 3 3)" fill="%23787572"/><circle cx="93" cy="93" r="3" transform="rotate(-90 93 93)" fill="%23787572"/></svg>');
        left: 60px;
        bottom: 60px;
        width: 96px;
        height: 96px
    }

    .formblock__in:after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="66" height="126" viewBox="0 0 66 126" fill="none"><circle cx="63" cy="63" r="3" transform="rotate(-180 63 63)" fill="%23787572"/><circle cx="63" cy="93" r="3" transform="rotate(-180 63 93)" fill="%23787572"/><circle cx="63" cy="123" r="3" transform="rotate(-180 63 123)" fill="%23787572"/><circle cx="33" cy="63" r="3" transform="rotate(-180 33 63)" fill="%23787572"/><circle cx="33" cy="93" r="3" transform="rotate(-180 33 93)" fill="%23787572"/><circle cx="33" cy="123" r="3" transform="rotate(-180 33 123)" fill="%23787572"/><circle cx="3" cy="63" r="3" transform="rotate(-180 3 63)" fill="%23787572"/><circle cx="3" cy="93" r="3" transform="rotate(-180 3 93)" fill="%23787572"/><circle cx="3" cy="123" r="3" transform="rotate(-180 3 123)" fill="%23787572"/><circle cx="63" cy="33" r="3" transform="rotate(-180 63 33)" fill="%23787572"/><circle cx="63" cy="3" r="3" transform="rotate(-180 63 3)" fill="%23787572"/><circle cx="33" cy="33" r="3" transform="rotate(-180 33 33)" fill="%23787572"/><circle cx="3" cy="33" r="3" transform="rotate(-180 3 33)" fill="%23787572"/><circle cx="33" cy="3" r="3" transform="rotate(-180 33 3)" fill="%23787572"/><circle cx="3" cy="3" r="3" transform="rotate(-180 3 3)" fill="%23787572"/></svg>');
        right: 60px;
        top: 60px;
        width: 66px;
        height: 126px
    }

    .formblock__incd {
        margin: 0 auto;
        max-width: 600px;
        position: relative;
        z-index: 2
    }

    .formblock__in {
        padding: 60px 30px
    }
}

.clc,.clc__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.clc {
    position: fixed;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center
}

.clc__bg {
    position: absolute;
    background: rgba(28,27,25,.8)
}

.clc__msg {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 40px;
    max-width: 100%;
    background-color: #fff;
    font-size: 18px;
    border: 1px solid rgba(67,63,59,.25);
    box-shadow: 4px 4px 19px 0 rgba(0,0,0,.13);
    z-index: 300;
    width: 450px;
    text-align: center
}

.clc__container {
    padding: var(--margin-mt) var(--padding-mt-2);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
    width: calc(100% - 40px);
    max-width: 810px
}

.clc__container h1 {
    margin: 40px 0;
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.28em
}

.clc__dates {
    display: flex;
    flex-direction: column;
    align-items: center
}

.clc__dates .line {
    height: 1px;
    border: 1px solid rgba(67,63,59,.25)
}

.clc__dates h3 {
    margin: 0 0 30px;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    line-height: 32px
}

.clc__date,.clc__date .calc {
    line-height: 26px;
    display: flex
}

.clc__date {
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    margin: 20px 0
}

.clc__date .title {
    width: 70px;
    flex: 0 0 70px;
    display: flex;
    align-items: center
}

.clc__date .calc {
    flex: 1;
    font-weight: 700;
    align-items: center
}

.clc__date .calc:before {
    display: inline-block;
    content: ' ';
    width: 16px;
    height: 16px;
    margin: 0 12px;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12.6667 2.66699H3.33333C2.59695 2.66699 2 3.26395 2 4.00033V13.3337C2 14.07 2.59695 14.667 3.33333 14.667H12.6667C13.403 14.667 14 14.07 14 13.3337V4.00033C14 3.26395 13.403 2.66699 12.6667 2.66699Z" stroke="%23433F3B" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.667 1.33301V3.99967" stroke="%23433F3B" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.33301 1.33301V3.99967" stroke="%23433F3B" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6.66699H14" stroke="%23433F3B" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

.clc__date .time {
    width: 110px;
    flex: 0 0 110px;
    font-weight: 700;
    display: flex;
    align-items: center
}

.clc__date .time:before {
    display: inline-block;
    content: ' ';
    width: 16px;
    height: 16px;
    margin: 0 12px;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_499_2496)"><path d="M8 15.5C6.51664 15.5 5.0666 15.0601 3.83323 14.236C2.59986 13.4119 1.63856 12.2406 1.07091 10.8701C0.50325 9.49968 0.354725 7.99168 0.644114 6.53683C0.933503 5.08197 1.64781 3.7456 2.6967 2.6967C3.7456 1.64781 5.08197 0.933503 6.53683 0.644114C7.99168 0.354725 9.49968 0.50325 10.8701 1.07091C12.2406 1.63856 13.4119 2.59986 14.236 3.83323C15.0601 5.0666 15.5 6.51664 15.5 8C15.5 9.98913 14.7098 11.8968 13.3033 13.3033C11.8968 14.7098 9.98913 15.5 8 15.5ZM8 1.5C6.71443 1.5 5.45772 1.88122 4.3888 2.59545C3.31988 3.30968 2.48676 4.32484 1.99479 5.51256C1.50282 6.70028 1.3741 8.00722 1.6249 9.26809C1.8757 10.529 2.49477 11.6872 3.40381 12.5962C4.31285 13.5052 5.47104 14.1243 6.73192 14.3751C7.99279 14.6259 9.29973 14.4972 10.4874 14.0052C11.6752 13.5133 12.6903 12.6801 13.4046 11.6112C14.1188 10.5423 14.5 9.28558 14.5 8C14.5 6.2761 13.8152 4.6228 12.5962 3.40381C11.3772 2.18482 9.72391 1.5 8 1.5Z" fill="%23433F3B"/><path d="M10.12 10.83L7.64501 8.355C7.59867 8.30828 7.56201 8.25287 7.53712 8.19195C7.51224 8.13103 7.49963 8.0658 7.50001 8V4H8.50001V7.795L10.83 10.12L10.12 10.83Z" fill="%23433F3B"/></g><defs><clipPath id="clip0_499_2496"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>')
}

.clc__legend {
    margin: 27px 0;
    display: flex;
    flex-direction: column
}

.clc__legend .clc__legend_l {
    width: auto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 0 20px;
    color: #fff
}

.clc__legend .clc__legend_r {
    width: auto;
    display: flex
}

.clc__legend .clc__legend_r .occupied,.clc__legend .clc__legend_r .reserved {
    width: auto;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 0 20px;
    color: #fff
}

.clc__legend .clc__legend_r .occupied:before,.clc__legend .clc__legend_r .reserved:before {
    content: ' ';
    width: 12px;
    height: 12px;
    margin: 0 12px 0 0;
    background-color: #FFF1CC
}

.clc__legend .clc__legend_r .occupied.occupied:before,.clc__legend .clc__legend_r .reserved.occupied:before {
    background-color: #FFE2E2
}

.clc__footer__msg,.clc__footer__msgs {
    visibility: hidden;
    display: flex;
    flex: 1;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: 6px 40px;
    min-height: 28px;
    margin: 5px 0 0;
    width: 100%;
    border-radius: 100px;
    background: #8a0000;
    text-align: center;
    font-size: 14px;
    line-height: 1em;
    font-weight: 500
}

.clc__footer__msg.active,.clc__footer__msgs.active {
    visibility: visible;
    display: flex
}

.clc__footer__msg span,.clc__footer__msgs span {
    text-align: left
}

.clc__footer__msg strong,.clc__footer__msgs strong {
    font-weight: 700
}

.clc__footer__msg:before,.clc__footer__msgs:before {
    flex: 0 0 20px;
    content: ' ';
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M10.5003 18.3337C15.1027 18.3337 18.8337 14.6027 18.8337 10.0003C18.8337 5.39795 15.1027 1.66699 10.5003 1.66699C5.89795 1.66699 2.16699 5.39795 2.16699 10.0003C2.16699 14.6027 5.89795 18.3337 10.5003 18.3337Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 13.3333V10" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 6.66699H10.5088" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

.clc__footer__msg .wt,.clc__footer__msgs .wt {
    color: #fff
}

.clc__footer__msg .wt a,.clc__footer__msgs .wt a {
    color: #fff;
    text-decoration: underline
}

.clc__footer {
    display: flex;
    padding: 0 10px
}

.clc__footer .clc__footer__m {
    flex: 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    min-height: 28px;
    margin: 0 20px 20px;
    border-radius: 100px;
    background: #F9F3EB;
    text-align: center;
    font-size: 14px;
    line-height: 1em;
    font-weight: 500
}

.clc__dates__footer .msg__placeholder:before,.clc__footer .clc__footer__m:before {
    margin: 0 8px 0 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M10.5003 18.3337C15.1027 18.3337 18.8337 14.6027 18.8337 10.0003C18.8337 5.39795 15.1027 1.66699 10.5003 1.66699C5.89795 1.66699 2.16699 5.39795 2.16699 10.0003C2.16699 14.6027 5.89795 18.3337 10.5003 18.3337Z" stroke="%23272322" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 13.3333V10" stroke="%23272322" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 6.66699H10.5088" stroke="%23272322" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    content: ' '
}

.clc__footer .clc__footer__m span {
    text-align: left
}

.clc__footer .clc__footer__m strong {
    font-weight: 700
}

.clc__footer .clc__footer__m:before {
    flex: 0 0 20px;
    width: 20px;
    height: 20px
}

.clc__dates__footer {
    margin: 0 0 20px;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.clc__dates__footer .button span {
    width: auto;
    white-space: nowrap
}

.clc__dates__footer .button.disabled {
    display: none
}

.clc__dates__footer .msg__placeholder {
    display: none;
    flex: 1;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    min-height: 28px;
    border-radius: 100px;
    background-color: #F8B0B0;
    color: #000;
    text-align: center;
    font-size: 14px;
    font-weight: 500
}

.clc__dates__footer .msg__placeholder strong {
    font-weight: 700
}

.clc__dates__footer .msg__placeholder.active {
    display: flex
}

.clc__dates__footer .msg__placeholder:before {
    width: 20px;
    height: 20px
}

.clc__close {
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    background-color: var(--brown-dark);
    border-radius: 50%;
    display: block;
    z-index: 5;
    cursor: pointer;
    transition: all 150ms linear
}

.clc__close:after,.clc__close:before {
    content: ' ';
    width: 20px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg)
}

.clc__close:after {
    transform: translateX(-50%) translateY(-50%) rotate(45deg)
}

.clc__close:hover {
    background-color: var(--brown-light)
}

.clc__calendars {
    max-height: calc(100 * 1dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.clc__calendars .calendar {
    display: flex;
    justify-content: center
}

.clc__calendars__border {
    border-radius: 20px;
    border: 1px solid rgba(67,63,59,.25);
    background: #FFF;
    padding: 0 10px
}

@media (max-width: 767px) {
    .clc__footer .clc__footer__m {
        margin:0
    }

    .clc__footer .clc__footer__m2 {
        display: none!important
    }

    .clc__legend {
        flex-direction: column
    }

    .clc__legend .clc__legend_l {
        text-align: center
    }

    .clc__legend .clc__legend_r {
        margin-top: 10px;
        justify-content: center
    }

    .clc__dates__footer {
        padding: 0 10px;
        margin: 10px 0
    }
}

@media (min-width: 768px) {
    .clc__container {
        padding:var(--margin-pc) var(--padding-pc-2);
        margin: 0 auto
    }

    .clc__container h1 {
        font-size: 56px;
        margin: 80px 0
    }

    .clc__dates {
        width: 40%;
        margin: 0 0 40px
    }

    .clc__dates h3 {
        margin: 60px 0 30px
    }

    .clc__legend .clc__legend_r {
        justify-content: center
    }

    .clc__legend {
        flex-direction: column
    }

    .clc__legend .clc__legend_l {
        text-align: center
    }

    .clc__footer__msg,.clc__footer__msgs {
        margin: 0 30px 20px;
        width: calc(100% - 60px)
    }
}

@media (max-width: 1023px) {
    .clc__footer .clc__footer__m2 {
        display:none
    }
}

@media (min-width: 1024px) {
    .clc__container {
        padding:var(--margin-pc) var(--padding-pc-2);
        margin: 0 auto;
        display: flex
    }

    .clc__container h1 {
        font-size: 56px;
        margin: 80px 0
    }

    .clc__calendars .calendar {
        display: flex;
        justify-content: space-evenly
    }

    .clc__legend {
        flex-direction: initial;
        justify-content: space-between;
        align-items: center
    }

    .clc__legend .clc__legend_r {
        justify-content: flex-end
    }

    .clc__dates {
        width: 33.33%;
        padding: 0 0 0 60px;
        margin: 0 auto
    }

    .clc__dates h3 {
        font-size: 40px;
        line-height: 1.3em;
        margin: 30px 0 60px
    }
}

/* --- GRID TRANSFORMATION OVERRIDES --- */

/* 1. Convert Slider Container to Grid */
.activity__slider,
.activity__slider.slick-initialized,
.activity__slider .slick-track,
.activity__slider .slick-list {
    display: grid !important;
    /* Responsive Grid: 1 column on mobile, 2 columns on larger screens */
    grid-template-columns: 1fr; 
    gap: 30px; /* Space between items */
    
    /* Reset slider specific styles */
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    height: auto !important;
}

@media (min-width: 768px) {
    .activity__slider {
        /* Adjust column count based on available space */
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}

/* 2. Reset Item Layout */
.activity__item {
    display: block !important; /* Remove inline-flex */
    width: auto !important;    /* Reset specific slider widths */
    padding: 0 !important;     /* Remove padding used for slider spacing */
    height: 100%;              /* Ensure uniform height */
}

/* 3. Apply "Active" Styles to All Items */
.activity__item .in {
    /* Force the 'active' look defined in your original CSS */
    opacity: 1 !important;
    transform: scale(1) !important; 
    box-shadow: var(--box-shadow) !important;
    
    /* Ensure internal layout fills height */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 4. Adjust Image/Text Flex behavior to fill card */
.activity__item .in .text {
    flex: 1; /* Pushes content to fill space if heights vary */
}

/* 5. Hide any leftover slick elements if JS still fires */
.slick-arrow,
.slick-dots {
    display: none !important;
}

/* --- FORCE GRID LAYOUT & FIX HIDDEN ITEMS --- */

/* 1. Reset the container to a Grid */
.activity__slider,
.activity__slider.slick-initialized,
.activity__slider .slick-track,
.activity__slider .slick-list {
    display: grid !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    
    /* Force full width (overrides the 50% split on desktop) */
    width: 100% !important; 
    margin: 0 !important;
    
    /* Default: 1 column */
    grid-template-columns: 1fr; 
    gap: 30px;
}

/* 2. Responsive Columns */

/* Tablet: 2 Columns */
@media (min-width: 768px) {
    .activity__slider {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop: 3 Columns */
@media (min-width: 1200px) {
    .activity__slider {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 3. Unlock the individual items */
.activity__item {
    display: block !important;
    width: auto !important;
    flex: initial !important; /* Removes the "flex: 0 0 100%" rule causing the issue */
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* 4. Force the "Active" visual style for all cards */
.activity__item .in {
    opacity: 1 !important;
    transform: scale(1) !important;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1) !important; /* Restoring shadow */
    height: 100%;
}

/* 5. Hide the map if it breaks the new full-width grid layout */
.activity__map {
    display: none !important;
}


/* --- REFINED ACTIVITY CARDS (Full Image Top) --- */

/* 1. Card Container: Subtle curves, remove inner padding */
.activity__item .in {
    padding: 0 !important;          /* Removes gap between image and card edge */
    border-radius: 8px !important;  /* Subtle, modern curve (reduced from 28px) */
    overflow: hidden;               /* Ensures image corners clip to the card's curve */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; /* Optional: gentle shadow */
    /* Keeps the white background from original CSS */
}

/* 2. Image Container: Full width, no background frame */
.activity__item .image {
    background-color: transparent !important; /* Removes brown background block */
    padding: 0 !important;                    /* Removes the "frame" spacing */
    border-radius: 0 !important;              /* Image corners match the parent container */
    width: 100%;
    margin-bottom: 0 !important;              /* Reset margin; we add spacing via text padding below */
    aspect-ratio: 4/3;                        /* Maintains consistent height */
}

/* 3. Text Area Padding */
/* Since we removed padding from the main card (.in), we add it back to the text so it doesn't touch edges */
.activity__item .text {
    padding: 24px !important;
}

/* 4. Fix Distance Badge Position */
/* Moves the badge slightly to ensure it looks good with no padding */
.activity__item .image .dist {
    bottom: 12px;
    right: 12px;
}

/* 5. Ensure Overlays match new shape */
.activity__item .image:before,
.activity__item .image:after {
    border-radius: 0 !important;
}

/* --- EDITORIAL SUB-HERO OVERRIDES (Matches The Villa) --- */

/* 1. Remove the outer beige wrapper and padding */
.sub-hero {
    background-color: transparent !important;
    padding: 0 !important;
}

/* 2. Transform container to Full-Bleed/Immersive */
.sub-hero__container {
    border-radius: 0 !important;       /* Removes rounded corners */
    margin: 0 !important;              /* Removes margins */
    padding: 0 !important;             /* Removes internal padding */
    background-color: transparent !important; /* Removes dark brown background */
    min-height: 75vh !important;       /* Increases height for luxury feel */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Ensure the text floats cleanly in the center */
.sub-hero__container .txt {
    position: relative;
    z-index: 5;
    padding: 0 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* 4. Ensure background image covers the entire area */
.sub-hero__container .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


.sub-hero__container .bg:before,
.sub-hero__container .bg:after {
    border-radius: 0 !important; 
}


/* --- ACTIVITIES PAGE: CENTERED & TALLER CARDS --- */

.activity__slider-cd {
    max-width: 1200px !important; 
    width: 90% !important;   
    margin-left: auto !important;  
    margin-right: auto !important;
    padding: 0 !important;
}


.activity__slider,
.activity__slider.slick-initialized,
.activity__slider .slick-track,
.activity__slider .slick-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 40px !important; 
    width: 100% !important;
    transform: none !important;
    overflow: visible !important;
}


.activity__item .in {
    background-color: #fff !important;
    box-shadow: 0 15px 40px -10px rgba(0,0,0,0.08) !important; 
    border-radius: 8px !important; 
    padding: 0 !important; 
    height: 100% !important; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}


.activity__item .image {
    width: 100% !important;
    aspect-ratio: 3/2 !important;  
    padding: 0 !important;        
    margin: 0 !important;
    border-radius: 0 !important;   
    background-color: transparent !important;
    flex-shrink: 0;                
}

.activity__item .image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}


.activity__item .text {
    padding: 30px !important;      
    flex-grow: 1;                 
}


.activity__item .text h3.title {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: #999 !important;
    margin-bottom: 12px !important;
}

.activity__item .text h2 {
    font-size: 22px !important;     
    margin-bottom: 15px !important;
}


@media (max-width: 1024px) {
    .activity__slider {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
    .activity__slider-cd {
        width: 92% !important; 
    }
}


@media (max-width: 767px) {
    .activity__slider {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .activity__slider-cd {
        width: 100% !important;
        padding: 0 20px !important;
    }
}