@font-face {
    font-family: 'Mangro';
    src: url('../fonts/mangro/regular/MangroRegular.woff2') format('woff2'),
        url('../fonts/mangro/regular/MangroRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Autography';
    src: url('../fonts/autography/regular/Autography.woff2') format('woff2'),
        url('../fonts/autography/regular/Autography.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --content-font: "Sora", sans-serif;
    --heading-font: 'Mangro', serif;
    --handw-font:'Autography', cursive;
    --main-500: #384438;
    --brown-500: #5C5647;
    --brown-900: #3D2211;
    --neutral-white: #F6F6F6;
    --neutral-black: #060607;
    --neutral-light: #E8E1D8;
    --neutral-extra-light: #EEE9E3;
    --system-error: #b2533e;
}

img {
    max-width: 100%;
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
}

body {
    font-family: var( --content-font );
    background-color: var( --neutral-white );
    color: var( --neutral-black );
}

.animate__animated {
    opacity: 0;
}

.animate__animated.animate__infinite {
    opacity: 1;
}

.heading-font {
    font-family: var( --heading-font );
    font-weight: 400;
}

.alt-font {
    font-family: var( --handw-font );
    font-weight: 400;
}

h1 > .alt-font, h2 > .alt-font, h3 > .alt-font {
    font-size: 125%;
}

.cover-cc-bg {
    background-size: cover;
    background-position: center;
}

.btn, header[id$="-header"] .btn.nav-link {
    padding: 0.75rem 3rem;
    border-radius: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.2;
    border: 0;
    text-transform: uppercase;
    gap: 0.5rem;
}

.btn, .btn.btn-light:hover, .btn.btn-light:focus, .btn.btn-light:active, header[id$="-header"] .mobile-menu .btn.nav-link {
    background: var( --neutral-white );
    color: var( --neutral-black );
}

.btn:hover, .btn:focus, .btn:active, .btn.btn-light, header[id$="-header"]:not(.scrolled) .navbar-nav .btn.nav-link.desktop {
    background: var( --neutral-extra-light );
    color: var( --neutral-black );
}

.btn.btn-alt {
    background-color: var( --main-500 );
    color: var( --neutral-white )
}

.btn.btn-alt:hover, .btn.btn-alt:focus, .btn.btn-alt:active {
    background-color: var( --brown-900 );
    color: var( --neutral-white );
}

header[id$="-header"] {
    font-weight: 500;
    background-color: var( --brown-500 );
}

header[id$="-header"] .main-navbar {
    transition: all 0.25s ease-in-out;
}

header[id$="-header"] .nav-link:not(.btn) {
    color: var( --neutral-white );
}

.navbar-brand > img, .navbar-brand > svg, .footer-logo {
    height: 3.5rem;
}

.main-banner {
    min-height: 600px;
    position: relative;
}

.main-banner, .main-banner a:not(.btn) {
    color: var( --neutral-white );
}

.navbar-toggler {
    padding: 0;
    padding-left: 0.5rem;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.burger-menu {
    width: 35px;
    height: 35px;
}

.burger-menu span {
    display: block;
    position: relative;
    height: 5px;
    width: 5px;
    border-radius: 100%;
    background-color: var( --neutral-white );
    margin-bottom: 5px;
    -webkit-transition: transform .5s;
    -moz-transition: transform 0.5s;
    transition: transform 0.5s;
}

header[id$="-header"].scrolled .navbar > .burger-menu span,
header[id$="-header"] .mobile-menu .burger-menu span {
    background-color: var( --neutral-white );
}

.burger-menu span:last-child {
    margin-bottom: 0;
}

.burger-menu[aria-expanded="true"] span {
    width: 100%;
    border-radius: 0;
    height: 2px;
}

.burger-menu[aria-expanded="true"] span:first-child {
    transform: rotate(-45deg);
    top: 0;
}

.burger-menu[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    display: none;
}

.burger-menu[aria-expanded="true"] span:last-child {
    transform: rotate(45deg);
    opacity: 1;
    display: block;
    bottom: 2px;
}

.burger-menu[aria-expanded="true"] span:first-child,
.burger-menu[aria-expanded="true"] span:last-child {
    margin-bottom: 0;
}

.mobile-menu {
    font-size: 1.35rem;
    font-weight: 600;
}

[id$="-nav-collapse"] {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0px;
    background: var( --brown-500 );
    visibility: hidden;
    opacity: 0;
    will-change: opacity,visibility, background-color;
    top: 0;
    color: var( --blue-500 );
    display: block;
    transition: visibility 400ms cubic-bezier(.4,0,.2,1), opacity 400ms cubic-bezier(.4,0,.2,1);
    height: 100% !important;
}

body.logged-in.admin-bar [id$="-nav-collapse"] {
    top: 46px;
}

[id$="-nav-collapse"].show {
    visibility: visible;
    opacity: 1;
}

.floating-labels-form .form-control {
    border: 0;
    border-bottom: 1px solid var( --neutral-black );
    background-color: transparent;
    border-radius: 0;
    color: var( --neutral-black );
    padding: 1rem 0;
}

.floating-labels-form .form-control:focus {
    outline: 0;
    box-shadow: none;
    border-color: var( --brown-500 );
}

.floating-labels-form .control-wrap {
    position: relative;
}

.floating-labels-form .control-wrap > label {
    position: absolute;
    z-index: 1;
    top: 1.35rem;
    left: 0;
    pointer-events: none;
    padding: 0;
    transition: all .2s ease;
    transform-origin: 0% 100%;
    line-height: 1;
    font-weight: 400;
    color: var( --neutral-black );
}

.floating-labels-form.alt .control-wrap > label,
.floating-labels-form.special-form .control-wrap > label {
    padding: 0;
}

.floating-labels-form .control-wrap.not-empty > label {
    top: 0;
    transform: translateY(10px) scale(0.8);
    transform-origin: 0 0;
    padding: 0;
    width: 120%;
    color: var( --green );
}

.floating-labels-form.alt .control-wrap.not-empty > label,
.floating-labels-form.special-form .control-wrap.not-empty > label {
    padding: 0;
}

.floating-labels-form .control-wrap.not-empty .form-control {
    padding-top: 1.6rem;
    padding-bottom: 0.4rem;
}

footer {
    background-color: var( --main-500 );
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url( ../img/aux/shadow.png );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: hard-light;
}

footer, footer a:not(.btn) {
    color: var( --neutral-white );
}

.middle-footer::before, .middle-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var( --neutral-white );
    opacity: 0.25;
}

.middle-footer::after {
    top: auto;
    bottom: 0;
}

.no-list {
    list-style: none;
    padding: 0;
}

.list-links li + li {
    margin-top: 0.5rem;
}

ul.social {
    list-style: none;
    padding: 0;
    column-gap: 0.5rem;
    gap: 1.25rem;
}

ul.social > li > a {
    display: block;
    border-radius: 100%;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grecaptcha-badge { 
    visibility: hidden; 
}

.whatsapp-button {
    display: inline-block;
    position: fixed;
    z-index: 1030;
    bottom: 1rem;
    right: 1rem;
}

.whatsapp-button > img {
    height: 3rem;
}

svg.footer-logo > path {
    fill: var( --neutral-white );
}

#loader {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,0.65);
    z-index: 99999;
}

.brown-section {
    background-color: var( --brown-500 );
}

.brown-section, .brown-section a:not(.btn) {
    color: var( --neutral-white );
}

.main-bg {
    background-color: var( --main-500 );
}

.main-bg, .main-bg a:not(.btn) {
    color: var( --neutral-white );
}

.big-title {
    font-size: calc(2.5rem + 1.5vw);
}

wistia-player {
    aspect-ratio: 16/9;
}

.nearby {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    font-size: 0.9rem;
}

.nearby > .item {
    gap: 0.5rem;
}

.gallery-card {
    aspect-ratio: 16/9;
}

.gallery-card span {
    background-color: var( --main-500 );
    color: var( --neutral-white );
}

.swiper-bubble {
    background: var( --neutral-extra-light );
    color: var( --neutral-black );
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY( -50% );
    z-index: 2;
}

.swiper-bubble.next {
    left: auto;
    right: 1.5rem;
}

textarea.form-control {
    max-height: 6rem;
}

.form-control.wpcf7-not-valid { 
    border-color:var(--system-error);
}

.wpcf7-not-valid-tip {
    font-size: 0.85rem;
    color: var( --system-error );
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    margin-top: 1rem;
    font-size: 95%;
    padding: .5rem 1rem;
    border-radius: 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    color:#856404;
    background-color:#fff3cd;
    border-color:#ffeeba;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    color:#721c24;
    background-color:#f8d7da;
    border-color:#f5c6cb;
}

.wpcf7 form.sent .wpcf7-response-output {
    color:#155724;
    background-color:#d4edda;
    border-color:#c3e6cb;
}

.form-submit .wpcf7-spinner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.nav-pills {
    --bs-nav-pills-link-active-color: var( --neutral-black );
    --bs-nav-pills-link-active-bg: var( --neutral-white );
    --bs-nav-pills-link-bg: var( --neutral-light );
    --bs-nav-link-color: var( --neutral-black );
    --bs-nav-link-hover-color: var( --neutral-black );
    --bs-nav-link-padding-x: 1.5rem;
    --bs-nav-link-padding-y: 0.75rem;
    --bs-nav-pills-border-radius: 0;
    gap: 0.5rem;
}

.nav-pills .nav-link {
    background-color: var( --bs-nav-pills-link-bg );
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    font-weight: 600;
}

.table {
    --bs-table-bg: transparent;
}

.table:not(.table-sm) > :not(caption) > * > * {
    padding: 0.5rem 0;
}

.table .item-wrap {
    display: flex;
    gap: 0.25rem;
}

.table .dot {
    background-color: var( --brown-500 );
    color: var( --neutral-white );
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    flex-shrink: 0;
}

.tooltip {
    --bs-tooltip-border-radius: 0;
    --bs-font-sans-serif: var( --content-font );
    padding: 0;
}

@media( min-width: 768px ) {
    .whatsapp-button {
        bottom: 2rem;
        right: 2rem;
    }
    .whatsapp-button > img {
        height: 4rem;
    }
}

@media( min-width: 783px ) {
    body.logged-in.admin-bar [id$="-nav-collapse"] {
        top: 32px;
    }
}

@media (min-width: 992px) {
    .main-banner {
      min-height: 650px;
    }
    .navbar-brand > img, .navbar-brand > svg {
        height: 4rem;
    }
    .footer-logo {
        height: 6rem;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        --bs-navbar-nav-link-padding-x: 0.75rem;
    }
    [id$="-nav-collapse"] {
        position: relative;
        top: 0px;
        width: auto;
        right: 0px;
        bottom: 0px;
        background-color: transparent;
        transform: none;
        visibility: visible;
        opacity: 1;
        height: auto !important;
        background: transparent !important;
    }
    body.logged-in.admin-bar [id$="-nav-collapse"] {
        top: 0;
    }
    .gallery-card span {
        font-size: 1.25rem;
    }
}

@media( min-width: 1200px ) {
    .big-title {
        font-size: 3.25rem;
    }
}