/* Section Colors */
:root {
    --dark-gray: #343a40;
    --orange: #ff8d25;
}

/* Carousel Item Style */
.carousel-item {
    position: relative;
    height: 40vh; /* Set to 40% of the viewport height */
}

/* Header Styles */
.header-content h1, .header-content h2 {
    font-size: 35px;
}

/* Menu Styles */
.menu {
    position: relative;
    background: no-repeat center/cover; /* Shorthand for background-size and background-repeat */
}

.menu-cards {
    position: relative;
    z-index: 103;
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* Adds space between the columns */
}

.menu-category {
    flex: 1 1 calc(50% - 8px); /* Subtract half of the gap from the width */
    box-sizing: border-box; 
}

@media (max-width: 768px) {
    .menu-category {
        flex: 1 1 100%;
    }
}

.menu .card {
    margin-top: 50px;
    box-shadow: 0 .5rem 1rem rgba(255,255,255,.15)!important;
    background-color: #FFF;
    border: none;
}

.menu .card .card-title {
    color: var(--orange);
}

/* Menu Header Styles */
.menu-header h3 {
    font-size: 45px;
    font-weight: 600;
}

.menu-header h4 {
    font-size: 30px;
    font-weight: 300;
    font-style: italic;
    font-family: serif;
    color: var(--orange);
}

/* Modal Styles */
.modal {
    color: #000;
}

/* Existing CSS */
/* ... other styles ... */

/* New or Updated CSS */
.categories-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spacing between categories */
}

.menu-category {
    flex: 1 0 calc(33.333% - 20px); /* Three categories per row with proper spacing */
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .menu-category {
        flex: 1 0 calc(50% - 20px); /* Two categories per row with proper spacing on medium screens */
    }
}

@media (max-width: 767px) {
    .menu-category {
        flex: 1 0 calc(100% - 20px); /* One category per row with proper spacing on small screens */
    }
}