:root {
    --white: #ffffff;
    --yellow-light: #F8F8DB;
}

.text_center { text-align: center; }
.color_yellow { color: var(--yellow-light) !important; }

strong { font-weight: 700; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 500 !important;
    margin-bottom: 30px;
    font-style: normal;
}

/* DISPLAY */
.show-mobile { display: none; }
.hide-mobile { display: block; }

.underline-svg {
    position: relative;
    display: block;
    width: 80%; /* Reduce width to match text better */
    height: auto;
    margin: -5px auto 0; /* Center the SVG under the text and adjust vertical position */
    max-width: 100%;
}

/* FONTS */
.fs30 {font-size: 30px !important;}
.fs50 {font-size: 50px !important;}
.fs60 {font-size: 60px !important;}
.fs70 {font-size: 70px !important;}
.fs80 {font-size: 80px !important;}

/* BACKGROUND */
.bg-position-bottom { background-position: bottom; }
.bg-repeat-x { background-repeat: repeat-x; }
.bg-repeat-y { background-repeat: repeat-y; }
.bg-repeat { background-repeat: repeat; }

/* SEAPRATOR */
.separator-15 { margin-bottom: 15px; }
.separator-30 { margin-bottom: 30px; }
.separator-50 { margin-bottom: 50px; }
.separator-100 { margin-bottom: 100px; }

.bg-separator { 
    background-image: url('https://eatkungfuchicken.com/wp-content/uploads/2025/03/Pattern-Light-50.png');
    background-repeat: repeat;
    min-height: 454px;
}

/* TABS */
.my-tab {
    display: flex;
    flex-wrap: wrap;
    /* min-height: 500px; */
    /* height: 100vh; */
}

.scrolling-menu-bar {
    max-width: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    visibility: hidden;
    transition: visibility 0.3s, opacity 0.3s;
}

.scrolling-menu-bar.visible {
    visibility: visible;
    opacity: 1;
}

.scrolling-menu-bar.fixed {
    left: 20px;
    top: 120px; /* Adjust this value to control the fixed position */
    z-index: 999;
    background-color: var(--yellow-light);
    border-radius: 90px;
    box-shadow: 5px 5px 30px rgb(0 0 0 / 12%);
}

.scrolling-menu-bar button {
    width: 100%;
    /*Buttonstakethefullwidthoftheircontainer*/max-width: 80px;
    /*Controlthemaxwidthofthebuttons*/height: auto;
    /*Maintainaspectratio*/margin: 5px 0;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    position: relative;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
}

.scrolling-menu-bar button img {
    width: 100%;
    height: auto;
}

.scrolling-menu-bar button.active {
    opacity: 1;
}

.scrolling-menu-bar button span.title {
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    font-size: 15px;
    background-color: #f7f2d7;
    border-radius: 90px;
    padding: 5px 15px;
    color: #e80077;
    font-weight: 700;
    text-transform: uppercase;
    transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out, transform 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; /* Safari */
    -moz-transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out, -moz-transform 0.3s ease-in-out; /* Firefox */
    -ms-transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out, -ms-transform 0.3s ease-in-out; /* IE 9 */
    -o-transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out, -o-transform 0.3s ease-in-out; /* Opera */
    transform: translateY(-50%) rotateX(90deg);
    -webkit-transform: translateY(-50%) rotateX(90deg); /* Safari */
    -moz-transform: translateY(-50%) rotateX(90deg); /* Firefox */
    -ms-transform: translateY(-50%) rotateX(90deg); /* IE 9 */
    -o-transform: translateY(-50%) rotateX(90deg); /* Opera */
    z-index: -1;
}

.scrolling-menu-bar button:hover span.title,
.scrolling-menu-bar button:focus span.title {
    opacity: 1;
    left: 90px;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1); /* Safari */
    -moz-box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1); /* Firefox */
    -ms-box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1); /* IE 9 */
    -o-box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1); /* Opera */
    transform: translateY(-50%) rotateX(0deg);
    -webkit-transform: translateY(-50%) rotateX(0deg); /* Safari */
    -moz-transform: translateY(-50%) rotateX(0deg); /* Firefox */
    -ms-transform: translateY(-50%) rotateX(0deg); /* IE 9 */
    -o-transform: translateY(-50%) rotateX(0deg); /* Opera */
    z-index: 1;
}

.my-tab-content {
    flex: 1;
    padding: 20px 0px 0px 0px;
    display: none;
}

.my-tab-content * {
    color: var(--yellow-light);
}

.active {
    display: block;
    animation: fadeIn 0.5s;
}


/**
 * MEDIA QUERIES
 */





@media (max-width: 600px) {

    /* DISPLAY */
    .show-mobile { display: block; }
    .hide-mobile { display: none; }

    .bg-separator { 
        min-height: 174px;
    }

    .scrolling-menu-bar {
        position: fixed;
        bottom: 0;
        top: auto; /* Reset top position for mobile */
        left: 0;
        right: 0;
        width: auto; /* Adjust to allow width to be determined by content */
        max-width: none;
        flex-direction: row;
        justify-content: space-evenly; /* Center the icons */
        overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap;
        padding: 7px 15px; /* Add padding to the sides */
        z-index: 999;
        background-color: #f8f3d7;
        margin: 0; /* Add margin to ensure icons are not hidden */
        transform: translateY(100%); /* Initially hide the menu */
        transition: transform 0.3s ease-in-out;
        /* Reset desktop visibility properties for mobile */
        visibility: visible;
        opacity: 1;
    }

    .scrolling-menu-bar.slide-up {
        transform: translateY(0);
    }

    .scrolling-menu-bar.slide-down {
        transform: translateY(100%);
    }

    .scrolling-menu-bar button {
        margin: 0 5px; /* Adjust margin to ensure icons are not hidden */
        flex-shrink: 0; /* Prevent buttons from shrinking */
    }

    .scrolling-menu-bar button span.title,
    .scrolling-menu-bar button:hover span.title,
    .scrolling-menu-bar button:focus span.title {
        opacity: 0 !important; /* Hide the title on mobile */
        left: -100px !important; /* Reset position */
        display: none !important;
    }

    .my-tab-content {
        padding-bottom: 0px; /* Adjust to fit the height of the fixed menu */
    }

    .scrolling-menu-bar button {
        max-width: 50px;
    }

    /* Override fixed class styling for mobile */
    .scrolling-menu-bar.fixed {
        left: 0;
        right: 0;
        top: auto;
        border-radius: 0;
        background-color: #f8f3d7;
    }
}