@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --light: #cccdbc;
    --light2: #b9beaa;
    --light3: #b1af97;
    --light4: #898772;
    --dark: #4d4c41;
    --dark2: #262520;
    --dark3: #1b1a16;
    --dark4: #151411;
    --dark5: #12110E;
    --ac: #5f7e5d;
    --ac2: #1A2A1A;
    --highlight: 230, 230, 230;
    --rad: 6px;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(body),
::view-transition-new(body) {
    animation-duration: 1s;
}

*,
::before,
::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    scroll-padding-top: 60px;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-behavior: smooth;
    height: 100%;
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

html,
body {
    font-family: "SN Pro", sans-serif;
    font-optical-sizing: auto;
    line-height: 1.4;
    color: var(--light3);
    background: var(--ac);
    font-variation-settings: "wdth"100;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

a:link,
a:visited {
    color: var(--ac);
    text-decoration: none;
}

img,
video,
iframe,
picture {
    display: block;
    height: auto;
    max-width: 100%;
    border: 0;
}

/* Headings */
h1,
h2 {
    font-family: "Bitter", serif;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--light3);
    margin-bottom: 1.5rem;
}

h2 {
    font-size: clamp(1.875rem, 2.5vw, 2rem);
    position: relative;
}

h3,
h4,
h5 {
    font-family: "Bitter", serif;
    color: var(--light4);
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.4;
}

h3 {
    font-size: clamp(1.3rem, 2.375vw, 1.5rem);
}

h4 {
    font-size: 1.25rem;
}

h4 a {
    color: var(--ac) !important
}

h5 {
    font-size: 1rem;
}

p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

strong,
b {
    color: var(--light);
    font-weight: 600;
}

.note{
    font-size:.813rem
}

.lead {
    font-size: 105%;
    font-weight: 600;
    color: var(--light);
}

hr {
    border: 0;
    height: 60px;
    background-image: url("../i/leaf.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px auto;
    padding: 1rem 0;
}

.leaves {
    position: relative;
    padding-left: 55px;
}

.leaves::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-image: url("../i/leaf.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

ul {
    padding-left: 20px;
    margin-bottom: 2rem;
}


/* Hero Section */
.hero {
    flex: 1 0 auto;
    color: var(--light2);
    height: 100vh;
    background: var(--dark4);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
    animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    color: var(--light);
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: -1px;
    margin-bottom: 0;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1.2s ease-out 0.2s both;
}

.hero .tagline {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: 0.5px;
    margin-bottom: 2rem;
    opacity: 0.95;
    animation: fadeInUp 1.2s ease-out 0.4s both;
}

.hero .subtext {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    max-width: 700px;
    margin: 0 auto 3rem;
    opacity: 0.9;
    animation: fadeInUp 1.2s ease-out 0.6s both;
}

.scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.scroll-indicator::before {
    content: '↓';
    font-size: 2rem;
    color: var(--light);
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background: var(--ac);
    backdrop-filter: blur(10px);
    padding: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.mobile-home,
.burger {
    display: none;
}

.m1 nav {
    transform: translateY(-100%);
    animation: slideDown 0.6s ease-out 0.8s forwards;
}

@keyframes slideDown {
    to {
        transform: translateY(0);
    }
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 2.5rem;
    padding: 0 2rem;
    margin: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

nav ul::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

nav a:link,
nav a:visited {
    color: var(--dark2);
    font-family: "Bitter", serif;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.875rem 0;
    position: relative;
    transition: all 0.3s ease;
    white-space: nowrap;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--light);
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

nav a:hover,
.m1 nav li.m1 a,
.m2 nav li.m2 a,
.m3 nav li.m3 a,
.m4 nav li.m4 a,
.m5 nav li.m5 a,
.m6 nav li.m6 a {
    color: var(--light);
}

.ig-nav {
    display: list-item;
}

.ig-link {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1a16'%3E%3Cpath d='M7.75 2C4.574 2 2 4.574 2 7.75v8.5C2 19.426 4.574 22 7.75 22h8.5C19.426 22 22 19.426 22 16.25v-8.5C22 4.574 19.426 2 16.25 2h-8.5zm0 1.8h8.5a3.95 3.95 0 0 1 3.95 3.95v8.5a3.95 3.95 0 0 1-3.95 3.95h-8.5a3.95 3.95 0 0 1-3.95-3.95v-8.5A3.95 3.95 0 0 1 7.75 3.8zm9.1 1.55a1.05 1.05 0 1 0 0 2.1 1.05 1.05 0 0 0 0-2.1zM12 7.4A4.6 4.6 0 0 0 7.4 12 4.6 4.6 0 0 0 12 16.6 4.6 4.6 0 0 0 16.6 12 4.6 4.6 0 0 0 12 7.4zm0 1.8A2.8 2.8 0 0 1 14.8 12 2.8 2.8 0 0 1 12 14.8 2.8 2.8 0 0 1 9.2 12 2.8 2.8 0 0 1 12 9.2z'/%3E%3C/svg%3E");
}

nav .ig-link {
    display: block;
    width: 30px;
    height: auto;
    padding: 0.875rem 0;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-size: 30px 30px;
    background-position: center;
    vertical-align: baseline;
}

#contact .ig-link {
    filter: invert(47%) sepia(35%) saturate(312%) hue-rotate(69deg) brightness(90%) contrast(89%);
}

/* Buttons */
[class*=btn], button {
    color: var(--dark3) !important;
    display: inline-block;
    padding: .5rem 1.5rem;
    background: var(--ac);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
    margin-bottom: .75rem;
}

[class*=btn]+[class*=btn] {
    margin-left: .75rem
}

.btn2 {
    font-size: .875rem;
    padding: .25rem 1rem;
    letter-spacing: normal;
}

.btn3 {
    padding: 1rem 2.5rem;
    letter-spacing: 1px;
}

[class*=btn]:hover {
    filter: brightness(1.3);
    transform: translateY(-2px);
}

.rad {
    border-radius: var(--rad)
}

/* Sections */
main {
    background-color: var(--dark3);
    padding-top: 60px;
    flex: 1 0 auto;
}

.m1 main {
    padding-top: 0
}

section {
    padding: 5rem 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInSection 0.8s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

@keyframes fadeInSection {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container {
    max-width: 1024px;
    margin: 0 auto;
}

.b {
    background: var(--dark) !important;
}

.b2 {
    background: var(--dark2) !important;
}

.b3 {
    background: var(--dark3) !important;
}

.b4 {
    background: var(--dark4) !important;
}

/* Generic Grid System */
.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Generic Card System */
.card {
    background: var(--dark2);
    padding: 2rem;
    border-radius: var(--rad);
}

.card>*:last-child{
    margin-bottom: 0;
}

/* Activity/Feature Lists with SVG Leaf Icons */
ul.leaf {
    list-style: none;
    padding-left: 0;
}

.leaf li {
    padding-left: 1.5rem;
    margin-bottom: .5rem;
    position: relative;
}

.leaf li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .375em;
    width: 12px;
    height: 12px;
    background: url('data:image/svg+xml,<svg height="25" viewBox="0 0 24 25" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21.411282 19.872952c1.031795 1.377048 1.922052 2.520492 2.404102 3.836065.469744 1.282785.660513 1.866804-.406153.538935-.992821-1.237706-1.92-2.440575-3.277948-3.581967-.096411.022539-.196924.043032-.305641.065573-12.274873 2.434425-21.216411-3.081968-19.64718-20.911884 9.45641 3.27049 22.847178 1.942621 21.460511 18.698768-.04923.622952-.096411 1.049181-.227691 1.35451zm-3.29436-2.680329c-3.085127-6.639344-11.011281-8.915983-14.943589-13.456966 4.268718 8.317622 6.596924 7.950818 14.943589 13.456966z" fill="%23678266" fill-rule="evenodd"/></svg>') no-repeat left center;
    background-size: contain;
}

/* Map Container */
.gmap {
    width: 100%;
    height: 500px;
    margin-top: 3rem;
    border-radius: var(--rad);
    overflow: hidden;
}

.gmap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(1) grayscale(100%) sepia(23%) hue-rotate(92deg) saturate(200%) brightness(100%) contrast(100%);
}

/* Footer */
footer {
    background-color: var(--dark5);
    padding: 2rem;
    text-align: center;
    flex-shrink: 0;
}

footer *,
footer a {
    color: var(--light4) !important;
    text-decoration: none;
}

footer p {
    font-size: .813rem;
    line-height: 1.3
}

footer h3 {
    font-size: 25px;
    margin-bottom: 0;
    line-height: 1.1
}

footer h3+p {
    font-size: 1rem;
}

.credit {
    opacity: .8;
    font-size: .5625rem;
    letter-spacing: 1px;
}

/* Mobile Bottom Navigation */
.mobinav {
    display: none;
}

.reviews-wrap {
    overflow: hidden;
    padding: 3rem 0 3rem 1.5rem;
}

.reviews {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.5rem 8px 0;
}

.reviews::-webkit-scrollbar {
    display: none;
}

.review {
    color: var(--dark4);
    flex: 0 0 360px;
    scroll-snap-align: start;
    background: var(--light3);
    border-radius: var(--rad);
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.name {
    position: relative;
    padding-left: 56px;
    font-weight: 600;
    min-height: 44px;
}

.name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--ac);
    background-image: var(--avatar);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.name::after {
    content: "";
    position: absolute;
    left: 56px;
    bottom: 0;
    width: 120px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath fill='%235f7e5d' d='M12 2l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 16.9 6.1 20l1.2-6.5L2.5 8.9l6.6-.9zM36 2l2.9 6 6.6.9-4.8 4.6 1.2 6.5L36 16.9 30.1 20l1.2-6.5L26.5 8.9l6.6-.9zM60 2l2.9 6 6.6.9-4.8 4.6 1.2 6.5L60 16.9 54.1 20l1.2-6.5L50.5 8.9l6.6-.9zM84 2l2.9 6 6.6.9-4.8 4.6 1.2 6.5L84 16.9 78.1 20l1.2-6.5L74.5 8.9l6.6-.9zM108 2l2.9 6 6.6.9-4.8 4.6 1.2 6.5L108 16.9 102.1 20l1.2-6.5L98.5 8.9l6.6-.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.name a {
    color: var(--ac2) !important
}

.review p {
    font-size: 15px;
    margin-top: 1rem;
}

@media screen and (min-width: 768px) {
    .pr {
        padding-right: 3rem;
    }

    .pl {
        padding-left: 3rem;
    }

    .reviews-wrap {
        padding: 5rem 0 5rem 1.5rem;
    }
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Mobile Styles */
@media (max-width: 767px) {
    .m1 nav {
        transform: none;
        animation: none;
    }

    .order {
        order: 1;
    }

    section {
        padding: 3rem 1.5rem;
    }

    .card {
        padding: 2rem 1.5rem;
    }

    .grid,
    .grid-2,
    .grid-3,
    .grid-auto {
        grid-template-columns: 1fr;
    }

    nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        overflow: visible;
    }

    .mobile-home,
    .burger {
        display: inline-flex;
        z-index: 1201;
    }

    .mobile-home {
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        filter: invert(89%) sepia(9%) saturate(279%) hue-rotate(24deg) brightness(90%) contrast(94%);
    }

    .mobile-home img {
        width: 30px;
        height: 30px;
        display: block;
    }

    .burger {
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        background: transparent;
        position: relative;
        margin: 0;
    }

    .burger::before,
    .burger::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        height: 2px;
        background: var(--light);
        transition: transform .3s ease, box-shadow .3s ease;
    }

    .burger::before {
        top: 12px;
        box-shadow: 0 7px 0 var(--light);
    }

    .burger::after {
        top: 26px;
    }

    body.menu-open .burger::before {
        transform: translateY(7px) rotate(45deg);
        box-shadow: none;
    }

    body.menu-open .burger::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    #site-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        min-height: -webkit-fill-available;
        z-index: 1200;
        background-color: var(--ac);
        background-image: url("/i/menu-bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        padding: calc(60px + 1rem) 1.5rem max(1rem, env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: opacity .3s ease, visibility .3s ease;
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open #site-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    nav a:link,
    nav a:visited {
        text-transform: capitalize;
        font-size: 1.875rem;
        letter-spacing: 0.5px;
        font-weight: 600;
        text-align: center;
        padding: 0.25rem 0;
    }

    nav a::after {
        display: none;
    }

    .m1 nav li.m1 a,
    .m2 nav li.m2 a,
    .m3 nav li.m3 a,
    .m4 nav li.m4 a,
    .m5 nav li.m5 a,
    .m6 nav li.m6 a {
        color: var(--light);
    }

    nav .ig-link {
        width: 44px;
        height: 44px;
        padding: 0;
        background-size: 44px 44px;
    }

    .mobinav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, .8);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        z-index: 1000;
        opacity: 1;
        transform: translateY(0);
        transition: transform .4s ease, opacity .4s ease;
        will-change: transform;
    }

    body.page-id-15 .mobinav{
        display:  none;
    }

    body.mobinav-hidden .mobinav,
    body.menu-open .mobinav {
        opacity: 0;
        transform: translateY(calc(100% + env(safe-area-inset-bottom)));
        pointer-events: none;
    }

    .mobinav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.5rem;
        color: var(--dark4);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        border-right: 1px solid rgba(7, 8, 9, 0.2);
        transition: all 0.3s ease;
    }

    .mobinav a:last-child {
        border-right: none;
    }

    .m4 .mobinav a.m4b {
        background-color: rgba(178, 198, 177, .8);
    }

    .mobinav a::before {
        content: '';
        width: 20px;
        height: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mobinav a[href*="booking"]::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23151411"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"/></svg>');
    }

    .mobinav a[href*="waze"]::before {
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23151411" d="m502.6 201.7c14.5 85.9-30.9 167.9-113.2 208.1 13 34.1-12.4 70.2-48.3 70.2-13.2 0-26-5.1-35.6-14.2s-15.3-21.6-16-34.8c-6.4.2-64.2 0-76.3-.6-.3 6.8-1.9 13.5-4.7 19.6s-6.9 11.7-11.9 16.3-10.8 8.2-17.2 10.5-13.2 3.4-19.9 3.1c-33.9-1.4-58-34.8-47-67.9-37.2-13.1-72.5-34.9-99.6-70.8-13-17.3-.5-41.8 20.8-41.8 46.3 0 32.2-54.2 43.2-110.3 18.4-93.9 116.8-157.1 211.7-157.1 102.5 0 197.2 70.7 214.1 169.7zm-128.7 186.6c42-19.2 81.3-56.7 96.3-102.1 40.5-123.1-64.2-228-181.7-228-83.4 0-170.3 55.4-186.1 136-9.5 48.9 5 131.4-68.7 131.4 24.9 33.1 58.3 52.6 93.7 64 24.7-21.8 63.9-15.5 79.8 14.3 14.2 1 79.2 1.2 87.9.8 3.5-6.9 8.5-12.9 14.7-17.5s13.2-7.9 20.8-9.5 15.4-1.4 22.9.4 14.5 5.3 20.5 10.2zm-168.4-201.2c0-34.7 50.8-34.7 50.8 0s-50.8 34.7-50.8 0zm116.6 0c0-34.7 50.9-34.7 50.9 0s-50.9 34.8-50.9 0zm-122.6 70.7c-3.4-16.9 22.2-22.2 25.6-5.2l.1.3c4.1 21.4 29.8 44 64.1 43.1 35.7-.9 59.3-22.2 64.1-42.8 4.5-16.1 28.6-10.4 25.5 6-5.2 22.2-31.2 62-91.5 62.9-42.6 0-80.9-27.8-87.9-64.2z"/></svg>');
    }

    .mobinav a[href*="wa.me"]::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23151411"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>');
    }

    .review {
        flex: 0 0 280px;
        padding: 1rem;
    }

    .review p {
        font-size: 14px;
    }
}

@media (max-width: 767px) and (orientation: landscape),
       (max-width: 767px) and (max-height: 500px) {
    #site-menu {
        gap: .5rem;
    }

    nav a:link,
    nav a:visited {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav ul,
    .burger::before,
    .burger::after {
        transition: none;
    }
}

/* Fallback for browsers without animation-timeline support */
@supports not (animation-timeline: view()) {
    section {
        opacity: 1;
        transform: translateY(0);
        animation: none;
    }
}

.mt-0 {
    margin-top: 0
}

.mb-0{
    margin-bottom: 0;
}

.mb-1{
    margin-bottom: .5rem;
}

.mt {
    margin-top: 3rem;
}

.ta-c {
    text-align: center
}

.t-ac, .t-ac > * {
    color: var(--ac) !important
}

.headline {
    text-align: center;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 1rem auto 2rem;
}

.y-c {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mx-auto {
    margin: 0 auto;
}

.inv {
    filter: invert(72%) sepia(7%) saturate(772%) hue-rotate(18deg) brightness(89%) contrast(83%);
}

/* Gallery - minimal classes */
.gallery a {
    display: block;
    text-decoration: none;
}

.gallery a > div {
    background: var(--dark2);
    border-radius: var(--rad);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s ease;
}

.gallery a:hover img {
    transform: scale(1.05);
    opacity: .8;
}

.gallery h3 {
    text-align: center;
    margin-top: 1rem;
    font-size: 1.25rem;
    color: var(--light);
    transition: color .6s ease;
}

.gallery a:hover h3 {
    color: var(--ac);
}

.banner{
    width: 100%;
}