/* Reset menu styles */
ul.dc_mm-orange, ul.dc_mm-orange li {
    border: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Centering and spreading menu items across full width */
ul.dc_mm-orange {
    background: #000;
    background: linear-gradient(to bottom, #414045 55%, #2f2e33 100%);
    font: normal 14px Arial, sans-serif;
    padding: 0;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* Ensure main navigation items are inline */
ul.dc_mm-orange li {
    display: inline-block;
    position: relative;
}

/* Style menu links */
ul.dc_mm-orange li a {
    color: #fff;
    display: block;
    font-size: 15px;
    padding: 15px 25px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    font-family: 'Doppio One', sans-serif;
}

/* Hover effects */
ul.dc_mm-orange li a:hover {
    color: #FFF;
    background: linear-gradient(to bottom, #660033, #e48e14);
}

/* ✅ Mobile Menu Toggle Button */
.menu-toggle {
    display: none;
    background: #660033;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
/* ✅ Hide the menu toggle on large screens */
.menu-toggle {
    display: none; /* Hidden by default */
    background: #660033;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* ✅ Show toggle button only on small screens */
@media only screen and (max-width: 768px) {
    .menu-toggle {
        display: block; /* Now it only shows on mobile */
    }

    /* ✅ Hide the default menu on mobile until toggled */
    ul.dc_mm-orange {
        display: none; 
        flex-direction: column;
        width: 100%;
        background: #000;
        padding: 10px 0;
        text-align: center;
    }

    /* ✅ Show menu when button is clicked */
    ul.dc_mm-orange.menu-open {
        display: flex;
    }

    /* ✅ Smooth animation effect */
    ul.dc_mm-orange {
        transition: max-height 0.4s ease-in-out;
        overflow: hidden;
        max-height: 0;
    }

    ul.dc_mm-orange.menu-open {
        max-height: 500px; /* Large enough to show menu */
    }
}

/* Utility Classes */
.clear {
    clear: both;
}