:root {
   --green-dark: #1d3b28;
   --green-mid: #315F2C;
   --orange: #F7941D;
   --orange-dark: #F5B52E;
   --cream: #f7f3ea;
   --sage: #eef0e6;
   --text: #1f2a22;
   --muted: #6b736d;
   --card-bg: #f6f2e9;
   --lightbg: #f9f7eb;
   --white: #fff;
   --font-head: "Playfair Display", Georgia, serif;
   --font-body: "Poppins", sans-serif;
}


@media(max-width: 767px){
    .list-left {
        width: 100%;
        position: relative;
        z-index: 100;
        margin-bottom: 20px;
    }

    .list-left .accordion {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        background: transparent;
        border: 0;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
    }

    .list-left .accordion::-webkit-scrollbar {
        display: none;
    }

    .list-left .accordion-item {
        position: static;
        flex: 0 0 auto;
        border: 0 !important;
        background: transparent;
    }

    .list-left .accordion-button {
        width: auto;
        min-width: 90px;
        padding: 11px 30px 11px 13px;
        background: var(--lightbg);
        color: var(--text);
        border: 1px solid var(--sage);
        border-radius: 4px;
        white-space: nowrap;
        font-size: 13px;
    }

    .list-left .accordion-button::before {
        display: none;
    }

    .list-left .accordion-button::after {
        position: absolute;
        right: 10px;
        top: 50%;
        width: 7px;
        height: 7px;
        background-image: none;
        border-right: 1px solid var(--orange);
        border-bottom: 1px solid var(--orange);

        transform: translateY(-70%) rotate(45deg);
    }

    .list-left .accordion-button:not(.collapsed) {
        background: var(--lightbg);
        border-color: var(--sage);
        color: var(--text);
    }

    .list-left .accordion-button:not(.collapsed)::after {
        transform: translateY(-30%) rotate(225deg);
        border-color: var(--sage);
    }


    /* Dropdown */

    .list-left .accordion-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: var(--lightbg);
        border: 1px solid var(--sage);
        border-radius: 5px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, .75);
    }

    .list-left .accordion-body {
        padding: 15px;
        background: var(--lightbg);
    }

    .list-right {
        position: relative;
        z-index: 1;
    }
}