/* General Styles (Preserve Existing Styles) */
body {
    font-family: 'Your Existing Font', sans-serif; /* Replace with your font */
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
 /* Replace with your background */
}

       .menu-section {
            position: relative;
            padding: 20px 0;
            
            overflow: hidden;
        }
        
        .menu-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }


.menu-section1 {
    position: relative;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.9); /* Light semi-transparent background */
    border-radius: 10px;
    margin: 20px auto;
    max-width: 1200px;
}
        .menu-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            
        }
.menu-overlay {
    background: rgba(255, 255, 255, 0.8); /* Slightly lighter overlay for better contrast */
    padding: 20px;
    border-radius: 10px;
}

.menu-title {
    text-align: center;
    font-size: 2.75rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-family: 'BlackBones'; 
}

/* Section Headers blue text */
.menu-section-header {
    font-size: 2.5rem;
    color: #3498db;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    font-family: 'BlackBones'; 
}

/* Subsection Headers dark grey text */
.menu-subsection-header {
    font-size: 2.25rem;
    color: #2c3e50;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: 'BlackBones'; 
}

/* Group Headers orange text */
.menu-group-header {
    font-size: 2rem;
    color: #e67e22;
    margin-top: 15px;
    margin-bottom: 10px;
    font-family: 'BlackBones'; 
}

/* Menu Item Grid */
.menu-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 10px;
    
}


/* Menu Item Card */
.menu-item-card {
    display: flex;
    align-items: stretch; /* Stretch children to full height */
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
    height: 150px; /* Fixed height for collapsed state */
    width: 100%; /* Ensure cards take full width of the grid */
    position: relative; /* For positioning the description */
    font-family: "Overpass", sans-serif;
}

.menu-item-card:hover {
    transform: translateY(-10px); /* Lift the card on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    height: auto; /* Expand to fit content */
}

.menu-item-image {
    width: 150px; /* Fixed width for the image */
    height: 100%; /* Stretch image to full height of the card */
    overflow: hidden;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.menu-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the entire area */
}

.menu-item-content {
    padding: 15px;
    flex-grow: 1; /* Allow content to take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    overflow: hidden; /* Prevent text from overflowing */
}

.menu-item-name {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 10px;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
     font-family: "Overpass", sans-serif;
}

.menu-item-price {
    font-size: 0.85rem;
    color: #e67e22;
    font-weight: bold;
    margin-bottom: 10px;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
}

.menu-item-description {
    font-size: 0.75rem;
    color: #666;
    max-height: 0; /* Hide description by default */
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* Start fully transparent */
}

.menu-item-card:hover .menu-item-description {
    max-height: 200px; /* Expand to show description */
    opacity: 1; /* Fade in description */
}

        h1{
            font-family: 'BlackBones'; 
            font-weight: 700;
        }


/*---------------------------------------------------------------------------*/
/*--------------------------Fonts Section-------------------------------*/
/*---------------------------------------------------------------------------*/
    @font-face {
  font-family: 'BlackBones'; /* Choose a name for your font */
  src:url('fonts/BlackBones.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}