/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* General container for the menu */
.menu-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1em;
}

/* Group name styling */
.menu-group-name {
    text-align: center;
    text-transform: uppercase;
    padding: 2em;
}

/* Icon inside the group */
.group-icon {
    fill: var(--e-global-color-secondary);
    text-align: center;
}

.group-icon svg {
    height: 5em;
}

/* Fixed typo here to apply styling */
.group-image {
    border: 1px solid var(--e-global-color-secondary);
    padding: 2em;
    margin-bottom: 2em;
}

/* Styling for each menu group */
.menu-group {
    margin-bottom: 4em;
}

/* Direct grid layout for menu items */
.menu-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Two columns */
    gap: 2em;
    margin-bottom: 2em;
}

.menu-item {
    padding: 1em;
    border: 1px solid var(--e-global-color-text);
    border-radius: 2em;
    display: flex;
    flex-direction: column;
}

/* Header styling inside each item */
.menu-item-header {
    display: flex;
    align-items: center;
	justify-content: space-around;
}

/* Name of the menu item */
.item-name {
    flex: 1;
    margin-right: 2em;
    text-transform: uppercase;
    font-family: var(--e-global-typography-primary-font-family);
}

/* Price styling for the item */
.item-price {
    width: auto;
    text-align: right;
    font-family: var(--e-global-typography-primary-font-family);
}

/* Description of the menu item */
.item-description {
    margin-top: 1em;
    font-size: 1.2em;
    color: var(--e-global-color-secondary);
}

/* Mobile responsiveness: single column layout */
@media (max-width: 768px) {
    .menu-group {
        grid-template-columns: 1fr; /* Single column on mobile */
    }

    .item-price {
        text-align: left;
        margin-top: 5px;
    }
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}