@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Kaushan+Script&family=Poppins:wght@200;300;400;500;600;700&display=swap');
        /* CSS VARIABLES */
        
         :root {
            /* Colors */
            --body-color: #efefef;
            --primary-color: #efb123;
            --secondary-color: #86001b;
            --text-color: #1f1f1f;
            --secondary-text-color: #6e6c6c;
            --card-color: #e8e8e8;
            /* Font Family */
            --primary-font: 'Poppins', sans-serif;
            --secondary-font: 'Kaushan Script', cursive;
            /* Font Size */
            --fontSize-display-1: calc(1.3rem + 6.7vw);
            --fontSize-headline-1: 2em;
            --fontSize-headline-2: calc(1.3rem + 2.4vw);
            --fontSize-title-1: calc(1.6rem + 1.2vw);
            --fontSize-title-2: 2.2rem;
            --fontSize-title-3: 2.1rem;
            --fontSize-title-4: calc(1.6rem + 1.2vw);
            --fontSize-body-1: 2.4rem;
            --fontSize-body-2: 1.6rem;
            --fontSize-body-3: 1.8rem;
            --fontSize-body-4: 1.6rem;
            --fontSize-label-1: 1.4rem;
            --fontSize-label-2: 1.2rem;
            /* Font Weight */
            --weight-extralight: 200;
            --weight-light: 300;
            --weight-regular: 400;
            --weight-medium: 500;
            --weight-semibold: 600;
            --weight-bold: 700;
            /* Letter spacing */
            --letterSpacing-1: 0.15em;
            --letterSpacing-2: 0.4em;
            --letterSpacing-3: 0.2em;
            --letterSpacing-4: 0.3em;
            --letterSpacing-5: 3px;
            /* Spacing */
            --section-space: 70px;
            /* Shadow */
            --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);
            /* Border Radius */
            --radius-24: 24px;
            --radius-circle: 50%;
            /* Transition */
            --transition-1: 250ms ease;
            --transition-2: 500ms ease;
            --transition-3: 1000ms ease;
            --transition-4: 1500ms ease;
        }
        /* END CSS VARIABLES */
        /* GLOBAL STYLEe */
        
        *,
        *::after,
        *::before {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        a {
            text-decoration: none;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        a,
        img,
        data,
        span,
        input,
        button,
        select,
        ion-icon,
        textarea {
            display: block;
        }
        
        a {
            color: inherit;
            text-decoration: none;
        }
        
        img {
            height: auto;
        }
        
        input,
        button,
        select,
        textarea {
            background: none;
            border: none;
            font: inherit;
        }
        
        input,
        select,
        textarea {
            width: 100%;
            outline: none;
        }
        
        button {
            cursor: pointer;
        }
        
        address {
            font-style: normal;
        }
        
        html {
            font-size: 10px;
            scroll-behavior: smooth;
        }
        
        body {
            background-color: var(--body-color);
            color: var(--text-color);
            font-family: var(--primary-font);
            font-size: var(--fontSize-body-4);
            font-weight: var(--weight-regular);
            line-height: var(--lineHeight-5);
            overflow: hidden;
            height: 100vh;
        }
        
        body.loaded {
            overflow: overlay;
        }
        
        body.nav-active {
            overflow: hidden;
        }
        
         ::-webkit-scrollbar {
            width: 3px;
        }
        
         ::-webkit-scrollbar-track {
            background-color: transparent;
        }
        
         ::-webkit-scrollbar-thumb {
            background-color: var(--light-blue);
        }
        
         ::-moz-selection {
            /* Code for Firefox */
            color: var(--body-color);
            background: var(--primary-color);
        }
        
         ::selection {
            color: var(--body-color);
            background: var(--primary-color);
        }
        /* END GLOBAL STYLE */
        /* PRELOAD */
        
        .preload {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--secondary-color);
            z-index: 10;
            display: grid;
            place-content: center;
            justify-items: center;
            transition: var(--transition-3);
        }
        
        .preload>* {
            transition: var(--transition-4);
        }
        
        .preload.loaded>* {
            opacity: 0;
        }
        
        .preload.loaded {
            transition-delay: 450ms;
            transform: translateY(100%);
        }
        
        .circle {
            width: 50px;
            height: 50px;
            border-radius: var(--radius-circle);
            border: 3px solid var(--body-color);
            border-block-start-color: var(--primary-color);
            margin-block-end: 45px;
            animation: rotate360 1s linear infinite;
        }
        
        @keyframes rotate360 {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(1turn);
            }
        }
        
        @keyframes loadingText {
            0% {
                background-position: 100%;
            }
            100% {
                background-position: 0%;
            }
        }
        /* END PRELOAD */
        /* HEADER */
        
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--body-color);
            padding-block: 20px;
            z-index: 4;
            border-block-end: 1px solid transparent;
            transition: var(--transition-1);
        }
        
        .header .container {
            max-width: 1400px;
            padding-inline: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }
        
        .nav-open-btn {
            padding: 12px;
            padding-inline-end: 0;
        }
        
        .nav-open-btn .line {
            width: 30px;
            height: 2px;
            background-color: var(--secondary-color);
            margin-block: 4px;
            transform-origin: left;
            animation: menuBtn 400ms ease-in-out alternate infinite;
        }
        
        @keyframes menuBtn {
            0% {
                transform: scaleX(1);
            }
            100% {
                transform: scaleX(0.5);
            }
        }
        
        .nav-open-btn .line-2 {
            animation-delay: 150ms;
        }
        
        .nav-open-btn .line-3 {
            animation-delay: 300ms;
        }
        
        .navbar {
            position: fixed;
            background-color: var(--secondary-color);
            top: 0;
            left: -360px;
            bottom: 0;
            max-width: 395px;
            width: 90%;
            padding-inline: 20px;
            padding-block-end: 20px;
            overflow-y: auto;
            overflow-x: hidden;
            visibility: hidden;
            z-index: 2;
            transition: var(--transition-2);
        }
        
        .navbar.active {
            visibility: visible;
            transform: translateX(360px);
        }
        
        .navbar .close-btn {
            color: var(--body-color);
            border: 1px solid var(--body-color);
            padding: 4px;
            border-radius: var(--radius-circle);
            margin-inline-start: auto;
            margin-block: 30px 20px;
        }
        
        .cucina-tipica {
            font-family: 'Kaushan Script', cursive;
            font-size: 1.3em;
            color: var(--secondary-color);
            display: flex;
            justify-content: flex-end;
        }
        
        @media (min-width: 500px) {
            .cucina-tipica {
                font-size: 2em;
            }
        }
        
        .navbar-list {
            display: flex;
            flex-direction: column;
        }
        
        .navbar-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .navbar-item-accent {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background-color: var(--body-color);
            border-radius: 9px;
        }
        
        .meal-icon {
            width: 21%;
        }
        
        .navbar-item .navbar-link {
            color: var(--body-color);
            font-size: 1.1em;
        }
        
        .navbar-item-accent .navbar-link {
            color: var(--secondary-color);
            font-size: 1.1em;
        }
        
        .navbar-item-accent .meal-icon {
            width: 15%;
        }
        
        ul {
            padding-left: 0!important
        }
        
        .navbar-link .span {
            transition: var(--transition-1);
        }
        
        .navbar-link:is(:hover,
         :focus-visible,
        .active) .span {
            color: var(--body-color);
            transform: translateX(20px);
        }
        
        .navbar-item-accent .navbar-link:is(:hover,
         :focus-visible,
        .active) .span {
            color: var(--secondary-color);
            transform: translateX(20px);
        }
        
        .welcome {
            color: var(--body-color);
            border: 1px solid var(--body-color);
            border-radius: 9px;
            font-size: 1.2em;
            padding: 15px;
            margin: 30px 0;
            text-align: center;
        }
        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.685);
            opacity: 0;
            pointer-events: none;
            transition: var(--transition-2);
            z-index: 1;
        }
        
        .overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        /* HEADER */
        /* HERO */
        
        .hero-image {
            margin-top: 50em;
            margin-bottom: 30em;
            padding: 30px;
        }
        
        .container {
            max-width: 770px;
            margin: 0 auto;
            left: 0;
            top: 0;
        }
        
        .payoff {
            font-family: 'Kaushan Script', cursive;
            font-size: 1.8em;
            color: var(--body-color);
            display: flex;
            justify-content: center;
            margin-top: 1em;
        }
        
        .menu-giorno {
            display: flex;
            justify-content: center;
            margin-top: 2em!important;
            background-color: var(--body-color);
            border-radius: 9px;
            padding: 10px 20px;
            color: var(--secondary-color);
            text-transform: uppercase;
            font-weight: var(--weight-medium);
            width: 70%;
            margin: 0 auto;
            filter: drop-shadow(3px 3px 3px rgb(0 0 0 /0.6));
        }
        
        .menu-giorno:hover {
            color: var(--body-color);
            background-color: var(--primary-color)
        }
        
        @media screen and (max-width: 600px) {
            .hero-image {
                margin-top: 8em;
            }
            .social {
                margin: auto;
            }
        }
        
        @media screen and (min-width: 600px) {
            .hero-image {
                margin-top: 8em;
            }
        }
        
        .hero-image-logo {
            box-sizing: border-box;
            margin-top: 1em;
            width: 100%;
            max-width: 500px;
        }
        
        .logo {
            width: 90%;
            margin: 0 auto;
            filter: drop-shadow(3px 5px 2px rgb(0 0 0 /0.8));
        }
        
        #main-home {
            background-image: url(./img/maxim-tajer-x3S1aGQNgro-unsplash.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            height: 80vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* END HERO */
        /* FOOTER */
        
        footer {
            background-color: var(--secondary-color);
            padding-top: 2em;
            padding-bottom: 2em;
        }
        
        .contact-info {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .contact-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: center;
            align-self: center;
            width: 100%;
        }
        
        @media (max-width: 500px) {
            .contact-info {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }
        
        .btn-s {
            padding: 10px 20px;
            background-color: var(--body-color);
            border-radius: 9px;
            box-shadow: 0 0 0 0 rgba(239, 239, 239, 1);
            color: var(--primary-color);
            transform: scale(1);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(239, 239, 239, 0.5);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(239, 239, 239, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(239, 239, 239, 0);
            }
        }
        
        .btn-s:hover {
            background-color: var(--primary-color);
            border-radius: 9px;
        }
        
        .btn-s a {
            color: var(--secondary-color);
            font-weight: var(--weight-regular);
            font-size: var(--fontSize-body-2);
        }
        
        .btn-s a:hover {
            color: var(--body-color);
        }
        
        .btn-secondary {
            padding: 10px;
        }
        
        .text {
            color: var(--primary-color);
            font-weight: var(--weight-bold);
            text-align: center;
        }
        
        .when-text {
            font-weight: var(--weight-regular);
            color: var(--body-color);
            text-align: center;
        }
        
        .social {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
            margin: 2em;
        }
        
        .social img {
            max-width: 3em;
            margin: 0.5em;
        }
        
        .footer-hr {
            border: 1px solid var(--body-color);
            border-radius: 10px;
            color: var(--body-color);
            margin-bottom: 20px;
        }
        
        .credit {
            text-align: center;
        }
        
        .credit .vecchio-braciere {
            color: var(--body-color);
        }
        
        .credit .visiva {
            color: var(--primary-color);
            font-size: small;
            font-weight: var(--weight-light);
        }
        
        .credit a {
            color: var(--body-color);
            font-weight: var(--weight-light);
        }
        
        .credit a:hover {
            text-decoration: var(--primary-color) underline;
        }
        
        .info-icon-footer {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .info-icon-footer .info-icon .bi-info-circle {
            color: var(--body-color);
            font-size: 1.5em;
        }
        
        .info-icon-footer .info-icon .bi-info-circle:hover {
            color: var(--primary-color);
        }
        
        .service-info {
            color: var(--body-color);
            text-align: center;
            font-weight: var(--weight-light);
        }
        /*-----------LIST MENU CSS-----------*/
        
        hr {
            border: 1.5px solid var(--secondary-color);
            border-radius: 10px;
            color: var(--secondary-color);
            margin-top: -.5em;
            opacity: 1;
            margin: 0 10px;
        }
        
        #bt {
            font-size: 0.7em;
            color: var(--clr-Secondary);
            background: var(--clr-text);
            border: 1px solid var(--clr-text);
            border-radius: 0.8em;
        }
        
        #category {
            text-align: center;
            font-family: var(--primary-font);
            color: var(--primary-color);
            font-weight: var(--weight-bold);
            line-height: var(--lineHeight-5);
            font-size: var(--fontSize-headline-1);
            margin-top: 100px;
        }
        
        #sub-category {
            text-align: center;
            font-family: var(--primary-font);
            color: var(--secondary-color);
            font-weight: var(--weight-medium);
            line-height: var(--lineHeight-5);
            font-size: 1.5em;
        }
        
        .supplemento {
            font-size: 0.9em;
            margin-top: 2.5em;
            padding: 0 10px;
            text-align: center;
        }
        /* CSS per la griglia */
        
        .food-grid {
            background-color: var(--card-color);
            border-radius: 9px;
            margin: 20px 10px;
            padding: 10px 20px;
            display: grid;
            grid-template-columns: 90% 10%;
            align-items: center;
        }
        
        .food-name-spec {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        
        .price-icon {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
        }
        
        #food-spec {
            margin: 0;
        }
        
        .food-spec {
            font-weight: var(--weight-light);
            color: var(--secondary-text-color);
            font-size: 1em;
        }
        
        #food {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }
        
        #food-name,
        #food-price {
            flex: 1;
            font-weight: var(--weight-medium);
            color: var(--text-color);
            font-size: 1em;
        }
        
        .info-icon {
            cursor: pointer;
            color: var(--body-color);
            font-size: 1.2em;
            font-weight: var(--weight-medium);
            font-family: var(--primary-font);
        }
        
        .header .info-icon {
            cursor: pointer;
            color: var(--body-color);
            font-size: 1.2em;
            font-weight: var(--weight-medium);
            font-family: var(--primary-font);
            background-color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 9px;
        }
        
        .info-icon .i {
            font-size: 1.2em;
            font-weight: var(--weight-bold);
        }
        
        .user-icon {
            display: flex;
            align-items: center;
            color: var(--primary-color);
        }
        
        .user-icon span {
            margin-right: 2px;
        }
        
        .user-icon i {
            color: var(--primary-color);
            font-size: 18px;
        }
        
        .price-icon .info-icon {
            font-family: 'Courgette', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25px;
            height: 25px;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            border-radius: 50%;
        }
        /* Finestra Modale */
        
        .modal {
            display: none;
            z-index: 3;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.7);
        }
        
        #modal-content {
            background-color: var(--card-color);
            margin: 10% auto;
            padding: 0 20px 20px 20px;
            border-radius: 15px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 800px;
            height: 500px;
            position: relative;
            overflow-y: auto;
            z-index: 1;
        }
        
        .modal-top-bar {
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            background-color: var(--card-color);
            padding: 30px 0;
        }
        
        .modal-title {
            color: var(--text-color);
            font-size: 1.2em;
        }
        
        .close {
            font-size: 20px;
            cursor: pointer;
            border: 1px solid var(--secondary-text-color);
            color: var(--secondary-text-color);
            border-radius: 50%;
            padding: 5px;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .modal-body {
            padding-top: 40px;
        }
        
        .list-title {
            color: var(--text-color);
            font-size: 1.2em;
        }
        
        .alert-allergeni {
            padding: 20px;
            color: var(--body-color);
            background-color: var(--primary-color);
            border-radius: 10px;
        }
        
        .list-content {
            color: var(--secondary-text-color);
            font-weight: var(--weight-light);
        }
        /* Stile per l'header */
        
        .header {
            position: fixed;
            z-index: 2;
        }
        /*-------POPUP------*/
        
        #popup-window {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1002;
            display: none;
            text-align: center;
        }
        
        #popup-window.active {
            display: block;
        }
        /* Overlay per il popup */
        
        #popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            display: none;
        }
        
        #popup-overlay.active {
            display: block;
        }
        /* Stile del pulsante per chiudere il popup */
        
        #close-popup {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            margin: 20px auto 0
        }
        
        .megaphone-icon {
            color: var(--body-color);
            background-color: var(--primary-color);
            padding: 10px;
            border-radius: 50%;
            border: 2px solid var(--primary-color);
            font-size: 30px;
            transform: rotate(-20deg);
            margin: 0 auto 20px
        }