:root {
    --kilqNavBlack: #000000;
    --kilqNavCream: #dbae8c;
    --kilqNavText: #9e5f30;
    --kilqNavGold: #bc8339;
    --kilqNavRed: #ce5f4d;
    --kilqNavBeige: #9ba05c;
    --kilqNavWhite: #ffffff;
}


/* =========================================================
   NO SCROLL WHEN MENU OPEN
========================================================= */

.kilqNoScroll {
    overflow: hidden;
}


/* =========================================================
   FULL WIDTH GLASS NAVBAR
========================================================= */

.kilqTopHeader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
       IMPORTANT:
       Keep this transparent.
       The page underneath creates the colour.
    */
    background: rgba(255, 255, 255, 0.08);

    /*
       This creates the blurred image/content
       visible through the navbar.
    */
    backdrop-filter: blur(20px) saturate(115%);
    -webkit-backdrop-filter: blur(20px) saturate(115%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.16);

    box-shadow:
        0 2px 15px rgba(0, 0, 0, 0.03);

    z-index: 10003;

    pointer-events: none;
}


/* =========================================================
   CENTER LOGO
========================================================= */

.kilqHeaderLogo {
    width: 130px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    pointer-events: auto;

    position: relative;

    z-index: 2;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

.kilqHeaderLogo:hover {
    transform: scale(1.03);
}

.kilqHeaderLogo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   OPTIONAL GLASS LAYER
   Makes blur slightly smoother
========================================================= */

.kilqTopHeader::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.04)
    );

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   FLOATING BOTTOM MENU BUTTON
========================================================= */

.kilqFloatingHeader {
    position: fixed;

    left: 50%;
    bottom: 42px;

    transform: translateX(-50%);

    z-index: 10005;

    pointer-events: none;
}


/* =========================================================
   ROUND MENU BUTTON
========================================================= */

.kilqMenuToggle {
    position: relative;

    width: 76px;
    height: 76px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(158, 95, 48, 0.18);

    border-radius: 50%;

    background-color: var(--kilqNavCream);

    cursor: pointer;

    pointer-events: auto;

    box-shadow:
        0 10px 35px rgba(50, 25, 10, 0.10);

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.kilqMenuToggle:hover {
    background-color: var(--kilqNavGold);

    border-color: var(--kilqNavGold);

    transform: scale(1.05);

    box-shadow:
        0 14px 40px rgba(50, 25, 10, 0.15);
}


/* =========================================================
   PLUS ICON
========================================================= */

.kilqPlusLine {
    position: absolute;

    width: 24px;
    height: 1px;

    background-color: var(--kilqNavText);

    transition:
        background-color 0.35s ease,
        transform 0.35s ease,
        opacity 0.35s ease;
}

.kilqPlusHorizontal {
    transform: rotate(0deg);
}

.kilqPlusVertical {
    transform: rotate(90deg);
}

.kilqMenuToggle:hover .kilqPlusLine {
    background-color: var(--kilqNavWhite);
}


/* =========================================================
   BUTTON WHEN MENU IS OPEN
========================================================= */

.kilqMenuToggle.kilqMenuOpened {
    background-color: var(--kilqNavRed);

    border-color: var(--kilqNavRed);
}

.kilqMenuToggle.kilqMenuOpened .kilqPlusLine {
    background-color: var(--kilqNavWhite);
}

.kilqMenuToggle.kilqMenuOpened .kilqPlusVertical {
    opacity: 0;

    transform: rotate(0deg);
}

.kilqMenuToggle.kilqMenuOpened .kilqPlusHorizontal {
    transform: rotate(0deg);
}


/* =========================================================
   BOTTOM MENU PANEL
========================================================= */

.kilqMenuOverlay {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    height: 64vh;

    background-color: var(--kilqNavCream);

    z-index: 10000;

    opacity: 0;

    visibility: hidden;

    transform: translateY(100%);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    border-top: 1px solid rgba(158, 95, 48, 0.18);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(158, 95, 48, 0.35)
        transparent;
}


/* =========================================================
   MENU SCROLLBAR
========================================================= */

.kilqMenuOverlay::-webkit-scrollbar {
    width: 4px;
}

.kilqMenuOverlay::-webkit-scrollbar-track {
    background: transparent;
}

.kilqMenuOverlay::-webkit-scrollbar-thumb {
    background-color: rgba(158, 95, 48, 0.35);

    border-radius: 50px;
}


/* =========================================================
   MENU OPEN
========================================================= */

.kilqMenuOverlay.kilqMenuActive {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   MENU INNER
========================================================= */

.kilqMenuInner {
    width: 100%;

    min-height: 100%;

    display: flex;
    align-items: center;

    padding:
        72px
        26px
        120px;
}


/* =========================================================
   MENU LINK
========================================================= */

.kilqOverlayItem {
    position: relative;

    display: block;

    width: 100%;

    color: var(--kilqNavText);

    text-decoration: none;
}


/* =========================================================
   MENU TITLE
========================================================= */

.kilqOverlayItem span {
    display: block;

    margin-bottom: 15px;

    color: var(--kilqNavText);

    font-family: 'Cormorant SC', serif;

    font-size: 22px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.02em;

    text-transform: uppercase;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   MENU IMAGE
========================================================= */

.kilqOverlayItem img {
    width: 100%;
    height: 245px;

    display: block;

    object-fit: cover;

    filter: grayscale(100%);

    border: 1px solid rgba(158, 95, 48, 0.16);

    transition:
        transform 0.5s ease,
        opacity 0.4s ease,
        filter 0.5s ease,
        border-color 0.4s ease;
}


/* =========================================================
   MENU HOVER
========================================================= */

.kilqOverlayItem:hover span {
    color: #76431f;

    transform: translateX(5px);
}

.kilqOverlayItem:hover img {
    transform: scale(0.97);

    opacity: 0.92;

    filter: grayscale(0%);

    border-color: rgba(158, 95, 48, 0.50);
}


/* =========================================================
   DESKTOP SMALL
========================================================= */

@media (max-width: 1399px) {

    .kilqTopHeader {
        height: 84px;

        backdrop-filter: blur(19px) saturate(115%);
        -webkit-backdrop-filter: blur(19px) saturate(115%);
    }

    .kilqHeaderLogo {
        width: 122px;
    }

    .kilqMenuOverlay {
        height: 66vh;
    }

    .kilqOverlayItem img {
        height: 220px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .kilqTopHeader {
        height: 80px;
    }

    .kilqHeaderLogo {
        width: 112px;
    }

    .kilqFloatingHeader {
        bottom: 36px;
    }

    .kilqMenuOverlay {
        height: 70vh;
    }

    .kilqMenuInner {
        padding:
            65px
            22px
            115px;
    }

    .kilqOverlayItem img {
        height: 205px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .kilqTopHeader {
        height: 74px;

        background: rgba(255, 255, 255, 0.10);

        backdrop-filter: blur(18px) saturate(110%);
        -webkit-backdrop-filter: blur(18px) saturate(110%);
    }

    .kilqHeaderLogo {
        width: 100px;
    }


    /* Bottom button */

    .kilqFloatingHeader {
        bottom: 28px;
    }

    .kilqMenuToggle {
        width: 66px;
        height: 66px;
    }

    .kilqPlusLine {
        width: 21px;
    }


    /* Menu */

    .kilqMenuOverlay {
        height: 82vh;

        max-height: 82svh;
    }

    .kilqMenuInner {
        display: block;

        min-height: auto;

        padding:
            55px
            18px
            115px;
    }

    .kilqMenuInner .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .kilqOverlayItem {
        margin-bottom: 30px;
    }

    .kilqOverlayItem span {
        margin-bottom: 12px;

        font-size: 21px;
    }

    .kilqOverlayItem img {
        height: 230px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .kilqTopHeader {
        height: 68px;

        background: rgba(255, 255, 255, 0.11);

        backdrop-filter: blur(16px) saturate(110%);
        -webkit-backdrop-filter: blur(16px) saturate(110%);
    }

    .kilqHeaderLogo {
        width: 90px;
    }


    /* Bottom menu button */

    .kilqFloatingHeader {
        bottom: 20px;
    }

    .kilqMenuToggle {
        width: 58px;
        height: 58px;
    }

    .kilqPlusLine {
        width: 18px;
    }


    /* Overlay menu */

    .kilqMenuOverlay {
        height: 86vh;

        max-height: 86svh;
    }

    .kilqMenuInner {
        padding:
            42px
            15px
            100px;
    }

    .kilqOverlayItem {
        margin-bottom: 25px;
    }

    .kilqOverlayItem span {
        margin-bottom: 10px;

        font-size: 19px;
    }

    .kilqOverlayItem img {
        height: 190px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .kilqTopHeader {
        height: 64px;
    }

    .kilqHeaderLogo {
        width: 84px;
    }

    .kilqFloatingHeader {
        bottom: 18px;
    }

    .kilqMenuToggle {
        width: 54px;
        height: 54px;
    }

    .kilqOverlayItem img {
        height: 165px;
    }

    .kilqMenuInner {
        padding-bottom: 95px;
    }
}


/* =========================================================
   FALLBACK IF BACKDROP FILTER IS NOT AVAILABLE
========================================================= */

@supports not (
    (backdrop-filter: blur(20px))
) {

    .kilqTopHeader {
        background: rgba(245, 239, 224, 0.88);
    }
}