/* Reset e stili base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #e2ddd0;
    font-family: 'Inconsolata', monospace;
    line-height: 1.6;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    width: 100%;

}

h1, h2, h3, h4, h5, h6 {
    font-family: 'League Spartan', sans-serif;
    color: #232721;
}

@font-face {
    font-family: 'QuartzoBold';
    src: url('../fonts/QuartzoBold-W9lv.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'League Spartan';
    src: url('../fonts/league-spartan.bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Inconsolata';
    src: url('../fonts/Inconsolata-Regular.ttf?v=2') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inconsolata-bold';
    src: url('../fonts/Inconsolata-Bold.ttf?v=2') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BebasNeue';
    src: url('../fonts/BebasNeue-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rushfordclean-rgz89';
    src: url('../fonts/rushfordclean-rgz89.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Top Bar */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 117px;
    background-color: transparent;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #e2ddd0;
}

.top-bar.shrink {
    height: 80px;
    background-color: rgba(35, 39, 33, 1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.top-bar-content {
    width: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15%;
}

.site-title {
    position: relative;
    left: -16%;
    font-family: 'BebasNeue', sans-serif;
    font-size: 2.5rem;
    color: #e2ddd0;
    margin: 0;
    transition: all 0.3s ease;
    
    
}

.top-bar.shrink .site-title {
    font-size: 2rem;
}
@media screen and (max-width: 1040px) {
    .top-bar{
        height: 100px;
    }
}
/* Responsive Top Bar */
@media (max-width: 768px) {
    .top-bar {
        height: 100px;
    }

    .top-bar.shrink {
        height: 80px;
    }

    .site-title {
        font-size: 1.8rem;
        transform: translateY(10%) translateX(20px);
    }

    .top-bar.shrink .site-title {
        font-size: 1.6rem;
    }

    .hamburger-btn {
        width: 60px;
        height: 60px;
        padding: 20%;
    }

    .hamburger-btn img {
        width: 30px;
        height: 30px;
        transform:  translateX(-100%);
    }
}

@media (max-width: 480px) {
    .top-bar {
        height: 80px;
    }

    .top-bar.shrink {
        height: 70px;
    }

    .site-title {
        font-size: 1.5rem;
        transform: translateY(10%) translateX(10px);
    }

    .top-bar.shrink .site-title {
        font-size: 1.3rem;
    }

    .hamburger-btn {
        width: 50px;    
        height: 50px;
    }

    .hamburger-btn img {
        width: 25px;
        height: 25px;
    }
}

/* Fullscreen Menu */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(35, 39, 33, 1);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
    
}

.fullscreen-menu.active {
    opacity: 1;
    visibility: visible;
}

.fullscreen-menu .close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    z-index: 1000;
}

.fullscreen-menu .close-btn::before,
.fullscreen-menu .close-btn::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #e2ddd0;
    transition: transform 0.3s ease;
}

.fullscreen-menu .close-btn::before {
    transform: rotate(45deg);
}

.fullscreen-menu .close-btn::after {
    transform: rotate(-45deg);
}

.fullscreen-menu .close-btn:hover::before,
.fullscreen-menu .close-btn:hover::after {
    background-color: #dad2c3;
}

.fullscreen-menu nav ul {
    height: 100vh;
    flex: 1;
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

.fullscreen-menu nav ul li {
    margin: 1.7vh 0;
    width: 100%;
    text-align: center;
}

.fullscreen-menu nav ul li a {
    font-family: 'League Spartan', sans-serif;
    font-size: 5vh;
    color: #e2ddd0;
    text-decoration: none;
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .fullscreen-menu {
        height: 120vh;
    }
    
    .fullscreen-menu nav ul {
        transform: translateY(-95px);
        height: 120vh;
    }
    
    .fullscreen-menu nav ul li {
        margin: 0.8vh 0;
    }
}

/* Main Content */
main {
    min-height: 100vh;
    background-color: #e2ddd0;

}

/* Footer */
footer {
    background-color: #1a1a1a;
    width: 100%;
    height: 45vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

.footer-content {
    max-width: 60vw;
    height: 40vw;
    margin: 0 auto;
    flex-wrap: wrap;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
    left: 0;
    z-index: 110;
}

.footer-info{
    height: 32%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    position: relative;
    left: 0%;
}
.footer-info2{
    align-items: center;
    justify-content: center;
    text-align: center;
    
    position: relative;
    top: -5%;
    left: 0%;
}

.footer-info h1, .footer-info h2 {
    opacity: 0;
    transition: opacity 0.8s ease-out 0.3s;
}

.footer-info h1.fade-in, .footer-info h2.fade-in {
    opacity: 1;
}

.footer-info h1 {
    font-family: 'BebasNeue', sans-serif;
    font-weight: 280;
    font-size: 8vw;
    color: #e2ddd0;
    position: relative;
    white-space: nowrap;
    top: -40%;
    left: 0;
    line-height: 8vw;
    text-align: center;
}
.footer-info h2 {
    position: relative;
    font-family: 'BebasNeue', sans-serif;
    font-weight: 280;
    font-size: 3vw;
    color: #e2ddd0;
    line-height: 3vw;
    top: -40%;
    left: 0;
    text-align: center;
}

.footer-info2 p {
    line-height: 1.2vw; 
    font-size: 2vw;
    color: #e2ddd0;
    line-height: 2.5vw;
 
    position: relative;
    top: -20%;
    left: 0;
    text-align: center;
}

.footer-mail {
    
    position: relative;
    top: 3%;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}
.footer-mail p {
    text-align: center;
    font-size: 2vw;
    color: #e2ddd0;
    
    position: relative;
}

.footer-social {
    display: flex;
    gap: 1vw;
    justify-content: center;
    text-align: center;
    position: relative;
    left: -2%;
    top: -3%;
    width: 100%;
}

.footer-social a {
    display: inline-block;
    position: relative;
    left: 0;
    transition: transform 0.3s ease;
    width: 2.5vw;
    height: 2.5vw;
  
}

.footer-social a:hover {
    transform: scale(1.2);
}

.footer-social img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(95%) sepia(6%) saturate(300%) hue-rotate(10deg) brightness(100%) contrast(90%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-social a:hover img {
    opacity: 1;
}

.footer-bottom3 {
    position: relative;
    left: 0;
    top: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
}
.footer-bottom3 p {
    text-align: center;
    font-size: 2vw;
    color: #e2ddd0;
    position: relative;
}

/* Responsive Design */
@media (max-width: 768px) {

    footer {
        background-color: #1a1a1a;
        width: 100%;
        height: 32rem;
        display: flex;
        justify-content: center;
        position: relative;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;
    }

    .footer-content {
    
        max-width: 90vw;
        height: 29rem;
        margin: 0 auto;
        flex-wrap: wrap;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        top: 4%;
        left: 0%;
        z-index: 110;
    }
    
    .footer-info {
        height: 32%;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        left: 0;
    }

    .footer-info2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -8%;
        left: 0;
    }

    .footer-info h1 {
        margin-top: -130px;
        font-size: 4rem;
        line-height: 4rem;
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
    }

    .footer-info h2 {
        position: relative;
        font-size: 1.8rem;
        line-height: 1.6rem;
        top: 10px;
        left: 0;
        font-weight: 200;
        text-align: center;
    }

    .footer-info2 p {
        margin-top: 2px;
        line-height: 1.8rem;
        font-size: 1.3rem;
        position: relative;
        top: 0px;
        left: 0;
        font-weight: 800;
        text-align: center;
    }

    .footer-mail {
        position: relative;
        top: 10px;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .footer-mail p {
        text-align: center;
        font-size: 1.3rem;
        font-weight: 800;
        color: #e2ddd0;
        position: relative;
    }

    .footer-social {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        text-align: center;
        position: relative;
        left: -5%;
        top: -10px;
        width: 100%;
    }

    .footer-social a {
        display: inline-block;
        position: relative;
        left: 0;
        transition: transform 0.3s ease;
        color: #e2ddd0;
        width: 2rem;
        height: 2rem;
    }

    .footer-bottom3 {
        text-align: center;
        position: relative;
        top: 35px;
        left: 0;
        width: 100%;
    }

    .footer-bottom3 p {
        color: #e2ddd0;
        font-size: 1.1rem;
        position: relative;
        text-align: center;
        font-weight: 800;
    }

    .footer-social img {
        filter: brightness(0) saturate(100%) invert(95%) sepia(6%) saturate(300%) hue-rotate(10deg) brightness(95%) contrast(90%);
    }
}

/* Hero Section 
<img src="{{ url_for('static', filename='images/home.png') }}" alt="Eventi" class="hero-image2">
<div class="hero-content2">
    <h1>CAPRICCI DI GOLA</h1>
    <h2>CORNEDO</h2>
  </div>
  */
.hero2 {
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block;
    
    ;
    margin-left: 0;
  
    top: 0;
    left: 0;
    background-color: #e2ddd0;
}

.hero-image2 {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    object-position: center top;
    z-index: 1;
}

.hero-content2 {
    position: absolute;
    top: 40%;
    left: 56%;
    transform: translate(-55%, -25%);
    text-align: center;
    z-index: 1000;
    width: 100%;
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
}

.hero-content {
    position: absolute;
    top: 40%;
    left: 56%;
    transform: translate(-55%, -25%);
    text-align: center;
    z-index: 2;
    width: 100%;

}

.hero-content h1 {
    white-space: nowrap;
    font-size: 12vw;
    font-weight: 350;
    color: #e2ddd0;
    margin-bottom: 20px;
    font-family: 'BebasNeue', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hero-content h2 {
    font-size: 5vw;
    margin-top: -6vw;
    
    font-weight: 350;
    color: #e2ddd0;
    margin-bottom: 30px;
    font-family: 'BebasNeue', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hero-content2 h1 {
    font-size: 12vw;
    font-family: 'BebasNeue', sans-serif;
    color: #e2ddd0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 350;
}

.hero-content2 h2 {
    margin-top: -5vw !important;
    font-size: 5vw;
    font-family: 'BebasNeue', sans-serif;
    color: #e2ddd0;
    font-weight: 350;
    text-align: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
       
    }
    to {
        opacity: 1;
        
    }
}



@media (max-width: 768px){

.hero-content {
    position: absolute;
    top: 50%;
    left: 48.5%;
    transform: translate(-50%, -30%);
    text-align: center;
    width: 100%;
    max-width: 800px;
    z-index: 2;
    padding: 0 20px;
}


.hero-content h1 {
    white-space: nowrap;
    font-size: 18vw;
    font-weight: 350;
    color: #e2ddd0;
    margin-bottom: 20px;
    font-family: 'BebasNeue', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content h2 {
    margin-top: -10vw;
    font-size: 9.5vw;
    font-family: 'BebasNeue', sans-serif;
    color: #e2ddd0;
    font-weight: 350;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
       
    }
    to {
        opacity: 1;
        
    }
}


}

@media (max-width: 768px) {
    .hero2 {
        width: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
      
        position: relative !important;
        z-index: 100 !important;
        overflow: hidden !important;
        display: block !important;
    }
    
    .hero-image2 {
        content: url(../images/home-mobile.webp) !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    .hero-content2 {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .hero-content2 h1 {
        font-size: 18vw !important;
    }
    .hero-content2 h2 {
        font-size: 9.5vw !important;
        z-index: 0 !important;
    }
}

/* Testo Home Section
    left: 0.5%;
    top: 20%;

*/

.footer-social2 {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
    justify-content: center;
    text-align: center;
    left: 4%;
    top: -27%;
    transform: translateY(0%);
    z-index: 100000 !important;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 1;
}

.footer-social2.opacity {

    opacity: 1;
}

.footer-social2 a {
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease;
    width: 2rem;
    height: 2rem;
    z-index: 100000 !important;
}

.footer-social2 a:hover {
    transform: scale(1.2);
}

.footer-social2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-social2 a:hover img {
    opacity: 1;
}

@media (max-width: 1040px) {

    .footer-social2 a {
        display: inline-block;
        position: relative;
        transition: transform 0.3s ease;
        width: 1.5rem;
        height: 1.5rem;
        z-index: 100000 !important;
    }
   
}

@media (max-width: 768px) {
    .footer-social2 {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        justify-content: center;
        text-align: center;
        left: 3%;
        top: -16px;
        transform: translateY(0%);
        z-index: 100000 !important;
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        opacity: 1;
    }
    
    .footer-social2.opacity {
    
        opacity: 1;
    }
    
    .footer-social2.fixe {
        position: fixed!important;
        top: 25vw !important;
        left: 3% !important;
        transform: translateY(0%) !important;
        opacity: 1;
    }
    
    .footer-social2 a {
        display: inline-block;
        position: relative;
        transition: transform 0.3s ease;
        width: 1rem;
        height: 1rem;
        z-index: 100000 !important;
    }
    
    .footer-social2 a:hover {
        transform: scale(1.2);
    }
    
    .footer-social2 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: brightness(0) saturate(100%);
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
    
    .footer-social2 a:hover img {
        opacity: 1;
    }
    
}
.testo-home {
    margin-top: 100px;
   
    position: relative;
    z-index: 2;
    height: fit-content;
    display: flex;
    flex-direction: column;
    
}

.testo-home h1, .testo-home h2 {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.testo-home h1.fade-in, .testo-home h2.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.testo-home h1 {
    
    position: relative;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-weight: 300;
    color: #232721;
    font-size: 6rem;
    line-height: 3.5rem;
    text-transform: uppercase;
    width: fit-content;
    padding: 0;
    left: 10%;
    margin: 0;
    display: inline-block;
    
    
}

.testo-home h2 {
    
    font-family: 'Inconsolata', monospace;
    color: #232721;
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 10px;
    position: relative;
    width: fit-content;
    left: 10%;  
    margin: 0;
    padding: 0;
}

.testo-home-testo {
    
    position: relative;
    z-index: 1;
    height: fit-content;
    margin-top: 10px;
    margin-bottom: 100px;
    
}

.testo-home-testo p {
    font-family: 'Inconsolata', monospace;
    margin-bottom: 20px;
    color: #232721;
    font-size: 25px;
    line-height: 2rem;
    font-size: 1.5rem;
    max-width: 85%;
    position: relative;
    left: 10%;   
    top: 39%;
    margin: 0;
    padding: 0;
    opacity: 0; 
    transition: opacity 1.5s ease-out 0.5s;
    max-width: 81%;
}

.testo-home-testo p + p {
    margin-top: 40px;
}

.testo-home-testo p.fade-in {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.testo-home h1 {
    opacity: 0;
    animation: fadeUp 1s ease-out forwards;
    animation-play-state: paused;
}

.testo-home h2 {
    opacity: 0;
    animation: fadeDown 1s ease-out forwards;
    animation-play-state: paused;
}

.testo-home h1.fade-in {
    animation-play-state: running;
}

.testo-home h2.fade-in {
    animation-play-state: running;
}

@media screen and (min-width: 768px) and (max-width: 1040px) {
    /* Stili per tablet */

   
    .testo-home h1 {
        font-size: 5rem;
        line-height: 2.5rem;
        padding: 0.2em 0.3em;
    }
    .testo-home h2 {
        line-height: 2rem;
        font-size: 2rem;
    }

    .testo-home-testo {
        min-height: 10rem;
    }
    .testo-home-testo p {
        top: 35%;
        line-height: 1.3rem;
        font-size: 1.3rem;
        font-weight: 200;
    }

  }

@media (max-width: 768px) {
    .testo-home {
        margin-top: 50px;
    }
    .testo-home h1 {
        font-size: 3rem;
        line-height: 3rem;
        margin-bottom: -10px;
    }
    .testo-home h2 {
        line-height: 1.3rem;
        font-size: 1.3rem;
    }

    .testo-home-testo {
        min-height: 6rem;
        margin-bottom: 2vh;
        margin-top: 1.7vh;
        top: 0;
    }
    .testo-home-testo p {
        line-height: 1.1rem;
        font-size: 1.1rem;
        font-weight: 200;
        top: 0;
    }
    
}

/* Featured Products Section */
.featured-products {
    background-color: #E2DDD0;
    min-height: 45vw;
    max-height: 45vw;
    max-width: 90%;
    min-width: 90%;
    position: relative;
    display: flex;
    align-items: center;
    
}   


.product-grid {
    position: absolute;
    top: -1%;
    left: 11.2%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    min-height: 40vw;
    max-height: 40vw;
    max-width: 76vw;
    min-width: 76vw;
    
    
}

.product-card {
    max-height: 80%;
    background: #e2ddd0;
    overflow: hidden;
    transition: transform 0.3s ease;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    position: relative;
   
    
}

.product-card.fade-in {
    opacity: 1;
}



.product-card img {
    width: 100%;
   
    object-fit: cover;
}


.product-card p {
    padding: 0 20px;
    color: #666;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    margin: 20px;
    color: #000000;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-size: 5vw;
    text-decoration: underline;
    font-weight: 6000;
    transform: translateX(-44px) translateY(-35px);
    white-space: nowrap;    
}

.btn2 {
    position: relative;
    top: 3%;
    display: inline-block;
    padding: 12px 25px;
    margin: 20px;
    color: #000000;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Inconsolata', monospace;
    transform: translateX(-44px) translateY(-135px);
    text-decoration: underline;
    font-size: 3vw;
    font-weight: bold;
}




@media (max-width: 768px) {

    .featured-products {
        background-color: #E2DDD0;
        min-height: 200vw;
        max-height: 200vw;
        margin: 0 auto;
        position: relative;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
        position: absolute;
        left: 5.8%;
        top: 2%;
        display: grid;
        margin: 0 auto;
        max-height: 200vw;
        max-width: 50%;
      
    }
    .product-card {
        background: #e2ddd0;
        overflow: hidden;
        transition: transform 0.3s ease;
        opacity: 0;
        transition: opacity 0.8s ease-out;
        max-width: 55vw;
        min-width: 55vw;
        min-height: 60vw;
        max-height: 60vw;
    }
    .product-card img {
        width: 100%;
        height: 50vw;
        object-fit: cover;
    }
    .btn {
        display: inline-block;
        padding: 12px 25px;
        margin: 20px;
        color: #000000;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
        font-family: 'rushfordclean-rgz89', sans-serif;
        font-size: 8vw;
        text-decoration: underline;
        font-weight: 6000;
        transform: translateX(-44px) translateY(-35px);
        white-space: nowrap;    
    }
    .btn2 {
        display: none !important;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        left: -9999px;
        top: -9999px;
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;
        border: none;
        pointer-events: none;
    }
}

/* .fullscreen-slider Section */

.fullscreen-slider {
    position: relative;
    width: 100%;
    height: 50%;
    max-height: 550vw;
    min-height: 55vw;
    
    overflow: hidden;
    transform: translateY(-16px);
    
}

.fullscreen-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 768px) {
    .fullscreen-slider {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        transform: translateY(43px);    
    }
    .fullscreen-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}


/* About Preview Section */
.about-preview {
    display: grid;
    grid-template-columns: 1fr;
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    
}


.about-content {
    height: 30vw;
    margin-bottom: 90px;
   
    margin-top: 100px;
    display: grid;  
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    align-items: start;
    overflow: visible;
  
}

.about-content-text {
  
  
    transform: translate(0%);
    margin-left: 19%;
    padding: 3px 20px 20px 20px;
    text-align: left;
    width: 100%;
    overflow: visible;

    
    
}
.about-content-text h2 {
    margin-top: 0%;
    left: 0%;
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-family: 'rushfordclean-rgz89', sans-serif;
    text-align: left;
    color: #232721;
    font-weight: 300;
    opacity: 0;
    white-space: nowrap;
    position: relative;
    transition: opacity 1s ease-out 0.3s, transform 0.8s ease-out;
    margin-bottom: 2vw;
    transform: none;
    width: fit-content;
}

.about-image {
    
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

.about-content img {
    width: 37vw;
    height: 27vw;
    transform: translateX(11%);
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.about-content.reverse img {
    transform: translateX(-6%) ;
    width: 37vw;
    height: 27vw;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.about-content.reverse {
    margin-top: -10px;
    direction: rtl;
    margin-bottom: 40px;
    margin-bottom: 100px;
}

.about-content.reverse .about-content-text {
    margin-right: -6%;
    direction: ltr;
    position: relative;
    z-index: 100;
}


.about-content.reverse .about-content-text h2 {
    margin-top: 0%; 
    left: 0%;
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-family: 'rushfordclean-rgz89', sans-serif;
    text-align: left;
    color: #232721;
    font-weight: 300;
    opacity: 0;
    white-space: nowrap;
    position: relative;
    transition: opacity 1s ease-out 0.3s, transform 0.8s ease-out;
    margin-bottom: 2vw;
    transform: none;
    width: fit-content;
}

.about-content.reverse .about-content-text p {
    transform: translateY(-15px);
    left: 0%;
    position: relative;
    color: #000000;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: left;
    font-family: 'Inconsolata', monospace;
    position: relative;
    max-width: 75%;
    min-width: 75%;
    opacity: 0;
    transition: opacity 1s ease-out 0.3s;
}

.about-content h2.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.about-content.reverse h2.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.about-content-text p {
    transform: translateY(-15px);
    left: 0%;
    color: #000000;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: left;
    font-family: 'Inconsolata', monospace;
    position: relative;
    max-width: 75%;
    min-width: 75%;
    opacity: 0;
    transition: opacity 1s ease-out 0.3s;
    
}
.about-content p.fade-in {
    opacity: 1;
}


.about-content.reverse p.fade-in {
    opacity: 1;
}

.btn3 {
    display: inline-block;
    position: relative;
    left: 0%;
    transform: translateX(-3px) translateY(-10px);
    color: #000000;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Inconsolata', monospace;
    text-decoration: underline;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: left;
    z-index: 100;
    
    
}


.btn4 {
    display: inline-block;
    position: relative;
    left: 0%;
    transform: translateX(-3px) translateY(-10px);
    color: #000000;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Inconsolata', monospace;
    text-decoration: underline;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: left;
   
}






@media screen and (min-width: 780px) and (max-width: 1040px) {
    /* Stili per tablet */
    
    .about-content {
        margin-top: 30px;   
        position: relative;
        z-index: 2;
        height: 100%;
        min-height: 30vw;
        
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0%;
        align-items: start;
        justify-content: center;
        padding: 0;
        overflow: visible;
        margin-bottom: 50px;
    }

    .about-content.reverse {
        height: 100%;
        margin-bottom: 10px;
    }

    .about-content-text {
        transform: translateY(0%);
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: visible;
      
        
    }

    
    .about-content-reverse-text {
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        
    }


    .about-content-text h2 {
        margin-top: 0%;
        left: 0%;
        text-align: left;
        font-size: 2.5rem;
        line-height: 2.5rem;
        font-family: 'rushfordclean-rgz89', sans-serif;
        color: #232721;
        font-weight: 300;
        opacity: 0;
        white-space: nowrap;
        position: relative;
        transition: opacity 1s ease-out 0.3s, transform 0.8s ease-out;
        margin-bottom: 2vw;
        transform: none;
        width: fit-content;
    }


    .about-content h2.fade-in {
        opacity: 1;
        transform: translateY(0);
    }

    .about-content-text p {
        margin-top: -20px;
        transform: translateY(0px);
        left: 0%;
        color: #000000;
        font-size: 1.3rem;
        text-align: left;
        line-height: 1.3rem;
        font-weight: 400;
        font-family: 'Inconsolata', monospace;
        position: relative;
        max-width: 82%;
        min-width: 82%;
        opacity: 0;
        transition: opacity 1s ease-out 0.3s;
        
    }
    .about-content p.fade-in {
        opacity: 1;
    }

  
    .btn3 {
        
        display: inline-block;
        position: relative;
        transform: translateY(0px);
        z-index: 10;
        color: #000000;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
        font-family: 'Inconsolata', monospace;
        text-decoration: underline;
        font-size: 1.5rem;
        font-weight: bold;
        
       
    }



    .about-content.reverse .about-content-text h2 {
        margin-top: 0%;
        position: relative;
        left: 0%;
        font-size: 2.5rem;
        line-height: 2.5rem;
        text-align: left;
        font-family: 'rushfordclean-rgz89', sans-serif;
        color: #232721;
        font-weight: 300;
        opacity: 0;
        white-space: nowrap;
        position: relative;
        transition: opacity 1s ease-out 0.3s, transform 0.8s ease-out;
        margin-bottom: 2vw;
        transform: none;
        width: fit-content;
        z-index: 100;
    }

    .about-content.reverse h2.fade-in {
        opacity: 1;
        transform: translateY(0);
    }
    
    .about-content.reverse .about-content-text p {
        transform: translateY(0px);
        position: relative;
        left: 0%;
        color: #000000;
        font-size: 1.3rem;
        text-align: left;
        line-height: 1.3rem;
        font-family: 'Inconsolata', monospace;
        position: relative;
        max-width: 82%;
        min-width: 82%;
        opacity: 0;
        transition: opacity 1s ease-out 0.3s;
    }

    .about-content.reverse p.fade-in {
        opacity: 1;
    }

    .btn4 {
        display: inline-block;
        position: relative;
        
        transform:  translateY(0px);
       
        color: #000000;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
        font-family: 'Inconsolata', monospace;
        text-decoration: underline;
        font-size: 1.8rem;
        font-weight: bold;
 }

 .about-content img {
    height: 27vw;
    transform: translateX(10%);
    max-height: 100%;
    min-height: 90%;
}

 .about-content.reverse img {
    height: 27vw;
    top: 0;
    transform: translateX(-4.5%);
    max-height: 100%;   
    min-height: 90%;
}

}

/* Responsive Design */
@media (max-width: 780px) {
    .about-content {
        margin-top: 100px;
        grid-template-columns: 1fr;
        gap: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }
    .about-content-text {
        transform: translateY(0%);
        width: 100%;
        left: 0%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    .about-content-text h2 { 

        left: 0%;
        width: fit-content;
        font-size: 2rem;
        margin: 0;
        text-align: center;
    }
    .about-content-text p {
        transform: translateY(-8px);
        left: 0%;
        font-size: 1.2rem;
        max-width: 50% !important;
        width: 50%;
        text-align: center;
        margin: 0;
    }
    .btn3 {
        left: 0%;
        width: fit-content;
        text-align: center;
        font-size: 1.5rem;
        line-height: 1.5rem;
        margin: 0 auto;
        transform: none;
    }
    .about-content.reverse {
        margin-top: -25px;
        top: -5%;
    }
    .about-content.reverse .about-content-text{
        left: 0%;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    .about-content.reverse .about-content-text h2 {
        
        left: 0%;
        width: fit-content;
        font-size: 2rem;
        margin: 0;
        text-align: center;
    }
    .about-content.reverse .about-content-text p {
        transform: translateY(-8px);
        left: 0%;
        margin-top: 20px;
        font-size: 1.2rem;
        max-width: 50% !important;
        text-align: center;
        width: 50%;
        margin: 0;
    }
    .btn4 {
        left: 0%;
        width: fit-content;
        text-align: center;
        font-size: 1.5rem;
        line-height: 1.5rem;
        margin: 0 auto;
        transform: none;
    }
    .about-content img {
        
        transform:translateX(0%) translateY(0px);
        margin: 0 auto;
        margin-top: -20px;
        width: 78vw;
        height: 48vw;
        object-fit: cover;
        border-radius: 10px;
        display: block;
    }
    .about-content.reverse img {
        transform: translateX(0%);
        margin: 0 auto;
        margin-top: -20px;
        width: 78vw;
        height: 48vw;
        object-fit: cover;
        border-radius: 10px;
        display: block;
    }
}

/* Products Section */



/* Philosophy Section */
.philosophy-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    background-color: #E2DDD0;
}

.philosophy-grid {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.philosophy-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.philosophy-item.reverse {
    direction: rtl;
}

.philosophy-item.reverse .philosophy-content {
    direction: ltr;
}

.philosophy-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.philosophy-content {
    padding: 20px;
}

.philosophy-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #1a1a1a;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-weight: 350;
    font-size: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.philosophy-content h2.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.philosophy-content p {
    font-size: 1.5rem;
    line-height: 1.5;
    color: #666;
}

@media (max-width: 1040px) and (min-width: 768px) {
    .philosophy-section {
        max-width: 1200px;
        margin: 0 auto;
        padding: 50px 20px;
        background-color: #E2DDD0;
    }
    
    .philosophy-grid {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }
    
    .philosophy-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
    }
    
    .philosophy-item.reverse {
        direction: rtl;
    }
    
    .philosophy-item.reverse .philosophy-content {
        direction: ltr;
    }
    
    .philosophy-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .philosophy-content {
        padding: 20px;
    }
    
    .philosophy-content h2 {
        font-size: 2rem;
        margin-bottom: 20px;
        color: #1a1a1a;
        font-family: 'rushfordclean-rgz89', sans-serif;
        font-weight: 350;
        font-size: 2rem;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .philosophy-content h2.fade-in {
        opacity: 1;
        transform: translateY(0);
    }
    
    .philosophy-content p {
        font-size: 1.2rem;
        line-height: 1.3;
        color: #666;
    }
}
/* Responsive Design per Philosophy */
@media (max-width: 768px) {
    .philosophy-item {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .philosophy-item.reverse {
        direction: ltr;
    }

    .philosophy-content {
        margin-top: -20px;
        text-align: center;
    }

    .philosophy-content h2 {
        font-size: 2rem;
      
    }
    .philosophy-content p {
        margin-top: -20px;
        font-size: 1.2rem;
    }

    .philosophy-grid {
        gap: 60px;
    }
}

/* Menu Section */


.menu-hero {
    width: 100%;
    height: 98vh;
    background-color: #f5f5f5;
    text-align: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    display: block;
    max-height: 67vw;
    top: 0;
    left: 0;
}

.menu-hero .menu-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    object-position: center bottom;
    filter: brightness(0.7);
}
.menu-section {
    padding: 50px 20px;
    background-color: #e2ddd0;
}

.menu-container {
    max-width: 1200px;
    margin: 0 auto;
}

.menu-category {
    margin-bottom: 20px;
    padding-top: 100px;
    margin-bottom: 160px;
}

.menu-category p, .menu-category2 p, .menu-category3 p {
    font-size: 2rem;
    font-weight: 350;
    opacity: 0;
    transform: translateX(32%) translateY(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
    position: relative;
    z-index: 1;
    color: #232721;
}
 .menu-category2 p {
    font-size: 2rem;
    font-weight: 350;
    opacity: 0;
    transform: translateX(24%) translateY(-15px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    position: relative;
    z-index: 1;
    color: #232721;
}
.menu-category3 p {
    font-size: 2rem;
    font-weight: 350;
    opacity: 0;
    transform: translateX(28%) translateY(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
    position: relative;
    z-index: 1;
    color: #232721;
}

.menu-category p.fade-in{
    opacity: 1;
    transform: translateX(32%) translateY(-51px);
}
.menu-category2 p.fade-in {
    opacity: 1;
    transform: translateX(24%) translateY(-100%);
}
.menu-category3 p.fade-in {
    opacity: 1;
    transform: translateX(28%) translateY(-51px);
}
.menu-category4 p.fade-in {
    opacity: 1;
    transform: translateX(28%) translateY(-51px);
}
.menu-category5 p.fade-in {
    opacity: 1;
    transform: translateX(28%) translateY(-51px);
}
.menu-category6 p.fade-in {
    opacity: 1;
    transform: translateX(28%) translateY(-51px);
}


.menu-category h2, .menu-category2 h2, .menu-category3 h2, .menu-category4 h2, .menu-category5 h2, .menu-category6 h2 {
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-size: 6rem;
    font-weight: 380;
    line-height: 1;
    color: #1a1a1a;
    margin-bottom: 15px;
   
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
}

.menu-category h2.fade-in, .menu-category2 h2.fade-in, .menu-category3 h2.fade-in, .menu-category4 h2.fade-in, .menu-category5 h2.fade-in, .menu-category6 h2.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.linea {
    width: 100%;
    height: 2px;
    background-color: #232721;
    margin-top: -30px;
    display: block;
}
.menu-category2 {
    margin-bottom: 20px;
    margin-top: -100px;
    margin-bottom: 160px;
}

.menu-category2 .menu-items {
    margin-top: 30px;
    gap: 0px;
}

.menu-category2 .menu-item {
    margin-bottom: 1px;
}



.menu-category3 {
    margin-bottom: 20px;
    margin-top: -100px;
    margin-bottom: 160px;
}


.menu-category4 {
    margin-bottom: 20px;
    margin-top: -100px;
    margin-bottom: 160px;
}

.menu-category5 {
    margin-bottom: 20px;
    margin-top: -100px;
    margin-bottom: 160px;
}


.menu-category6 {
    margin-bottom: 20px;
    margin-top: -100px;
    margin-bottom: 160px;
}
    

.pala-romana-category {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    margin-top: 20px;
    margin-bottom: 20px;
    grid-area: name;
    font-weight: 800;
    font-size: 1.8rem;
    
}

.pala-romana-category .item-name {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
    color: #585858 !important;
}


.menu-items {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name price"
        "description description";
    gap: 5px 10px;
    padding: 10px 0;
}

.item-name {
    grid-area: name;
    font-weight: 600;
    font-size: 1.5rem;
    color: #1a1a1a;
}

.item-price {
    grid-area: price;
    font-weight: 600;
    color: #9e7d5f;
    font-size: 1.1rem;
}

.item-price::before {
    content: "€";
    margin-right: 2px;
}

.item-description {
    grid-area: description;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
    font-size: 1.5rem;
    
}

.menu-note {
    margin-top: 0px;
    transform: translateX(0%) translateY(-100px);
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    font-size: 0.9rem;
    color: #000000;
    line-height: 1.6;
}

.menu-note p {
    margin-bottom: 10px;
    font-size: 1.5rem;

}

@media (max-width: 1040px) and (min-width: 768px) {
    .menu-section {
        padding: 50px 20px;
        background-color: #e2ddd0;
        margin-top: -70px;
    }
    
    .menu-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .menu-category {
        margin-bottom: 20px;
        padding-top: 100px;
        margin-bottom: 160px;
    }
    
    .menu-category p, .menu-category2 p, .menu-category3 p {
        font-size: 2rem;
        font-weight: 350;
        opacity: 0;
        transform: translateX(32%) translateY(-30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
        position: relative;
        z-index: 1;
        color: #232721;
    }
     .menu-category2 p {
        font-size: 2rem;
        font-weight: 350;
        opacity: 0;
        transform: translateX(24%) translateY(-15px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        position: relative;
        z-index: 1;
        color: #232721;
    }
    .menu-category3 p {
        font-size: 2rem;
        font-weight: 350;
        opacity: 0;
        transform: translateX(28%) translateY(-30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
        position: relative;
        z-index: 1;
        color: #232721;
    }
    .menu-category4 p {
        font-size: 2rem;
        font-weight: 350;
        opacity: 0;
        transform: translateX(28%) translateY(-30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
        position: relative;
        z-index: 1;
        color: #232721;
    }
    .menu-category5 p {
        font-size: 2rem;
        font-weight: 350;
        opacity: 0;
        transform: translateX(28%) translateY(-30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
        position: relative;
        z-index: 1;
        color: #232721;
    }
    .menu-category6 p {
        font-size: 2rem;
        font-weight: 350;
        opacity: 0;
        transform: translateX(28%) translateY(-30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
        position: relative;
        z-index: 1;
        color: #232721;
    }
    
    .menu-category p.fade-in{
        opacity: 1;
        transform: translateX(32%) translateY(-51px);
    }
    .menu-category2 p.fade-in {
        opacity: 1;
        transform: translateX(24%) translateY(-100%);
    }
    .menu-category3 p.fade-in {
        opacity: 1;
        transform: translateX(28%) translateY(-51px);
    }
    .menu-category4 p.fade-in {
        opacity: 1;
        transform: translateX(28%) translateY(-51px);
    }
    .menu-category5 p.fade-in {
        opacity: 1;
        transform: translateX(28%) translateY(-51px);
    }
    .menu-category6 p.fade-in {
        opacity: 1;
        transform: translateX(28%) translateY(-51px);
    }
    
    .menu-category h2, .menu-category2 h2, .menu-category3 h2, .menu-category4 h2, .menu-category5 h2, .menu-category6 h2 {
        font-family: 'rushfordclean-rgz89', sans-serif;
        font-size: 4.5rem;
        font-weight: 380;
        line-height: 1;
        color: #1a1a1a;
        margin-bottom: 20px;
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out ;
    }
    
    .menu-category h2.fade-in, .menu-category2 h2.fade-in, .menu-category3 h2.fade-in, .menu-category4 h2.fade-in, .menu-category5 h2.fade-in, .menu-category6 h2.fade-in {
        opacity: 1;
        transform: translateY(0);
    }
   
    .linea {
        width: 100%;
        height: 2px;
        background-color: #232721;
        margin-top: -30px;
        display: block;
    }
    .menu-category2 {
      
        margin-top: -100px;
        margin-bottom: 160px;
    }
    .menu-category3 {
        margin-top: -100px;
        margin-bottom: 160px;
    }
    .menu-category4 {
        
        margin-top: -100px;
        margin-bottom: 160px;
    }
    .menu-category5 {
        margin-top: -100px;
        margin-bottom: 160px;
    }
    .menu-category6 {
        margin-top: -100px;
        margin-bottom: 160px;
    }
    .menu-category2 .menu-items {
        margin-top: 20px !important;
        gap: 10px;
    }
    
    .menu-category2 .menu-item {
        margin-bottom: 10px;
    }
    
   
   
    

    .pala-romana-category {
        font-family: 'Bricolage Grotesque', sans-serif !important;
        margin-top: 10px;
        margin-bottom: 10px;
        grid-area: name;
        font-weight: 800;
        font-size: 1.5rem;
    }
  
  
    .menu-items {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-top: 30px;
    }
    
    .menu-item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name price"
            "description description";
        gap: 5px 20px;
        padding: 0px 0;
       
    }
    
    .item-name {
        grid-area: name;
        font-weight: 600;
        font-size: 1.2rem;
        color: #1a1a1a;
    }
    
    .item-price {
        grid-area: price;
        font-weight: 600;
        color: #9e7d5f;
        font-size: 0.9rem;
    }
    
    .item-price::before {
        content: "€";
        margin-right: 2px;
    }
    
    .item-description {
        grid-area: description;
        color: #666;
        font-size: 0.9rem;
        line-height: 1.3;
        font-size: 1.2rem;
        
    }
    
    .menu-note {
        margin-top: 10px;
        transform: translateX(0%) translateY(-100px);
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        font-size: 0.9rem;
        color: #000000;
        line-height: 1.6;
    }
    
    .menu-note p {
        margin-bottom: 10px;
        font-size: 1.2rem;
    
    }
}

/* Responsive Design per Menu */
@media (max-width: 768px) {

    
.menu-hero {
    width: 100%;
    height: 70vh;
    max-height: 80%;
    background-color: #f5f5f5;
    text-align: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    display: block;
    top: 0;
    left: 0;
}

.menu-hero .menu-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    object-position: center top;
    filter: brightness(0.7);
}

  
    .linea {
        width: 100%;
        height: 2px;
        background-color: #232721;
        margin-top: -30px;
        display: block;
    }
    .menu-section{
        margin-top: -100px;
    }
    .menu-category h2 {
        font-size: 4.5rem;
        position: relative;
        margin-bottom: 15px;
       
    }
    .menu-category p {
        color: #E2DDD0;
        left: 100%;
    }
    .menu-category2 h2 {
        font-size: 4.5rem;
        margin-bottom: 15px;
    }
    .menu-category2 p {
        color: #E2DDD0;
        left: 100%;
    }
    .menu-category3 h2 {
        font-size: 4.5rem;
        margin-bottom: 15px;
    }
    .menu-category3 p {
        color: #E2DDD0;
        left: 100%;
    }
    .menu-category4 h2 {
        font-size: 4.5rem;
        margin-bottom: 15px;
    }
    .menu-category4 p {
        color: #E2DDD0;
        left: 100%;
    }
    .menu-category5 h2 {
        font-size: 4.5rem;
        margin-bottom: 15px;
    }
    .menu-category5 p {
        color: #E2DDD0;
        left: 100%;
    }
    .menu-category6 h2 {
        font-size: 4.5rem;
        margin-bottom: 15px;
    }
    .menu-category6 p {
        color: #E2DDD0;
        left: 100%;
    }

    .pala-romana-category {
        font-family: 'Bricolage Grotesque', sans-serif !important;
        margin-top: 10px;
        margin-bottom: 10px;
        grid-area: name;
        font-weight: 800;
        font-size: 1.5rem;
    }

    .menu-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "price"
            "description";
        gap: 8px;
    }
    .item-name {
        grid-area: name;
        font-weight: 600;
        font-size: 1.2rem;
        color: #1a1a1a;
    }
    
    .item-price {
        grid-area: price;
        font-weight: 600;
        color: #9e7d5f;
        font-size: 0.9rem;
    }
    
    .item-price::before {
        content: "€";
        margin-right: 2px;
    }
    
    .item-description {
        grid-area: description;
        color: #666;
        font-size: 0.9rem;
        line-height: 1.3;
        font-size: 1.2rem;
        
    }

    .item-price {
        color: #9e7d5f;
    }
    .menu-note {
        position: relative;
        transform: translateX(0%) translateY(-100px);
        
    }
    .menu-note p {
        position: relative;
        transform: translateX(0%) translateY(0.1%);
        font-size: 1.2rem;
    }
}

/* Events Section */
.events-section {
    padding: 50px 20px;
    background-color: #e1ddd0;
    
}

.events-container {
    max-width: 1200px;
    margin: 0 auto;
}



.events-intro {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.events-intro h2 {
    font-size: 3rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-family: 'rushfordclean-rgz89', sans-serif;
    color: #232721;
    font-weight: 300;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.events-intro h2.fade-in {
    opacity: 1;
}

.events-intro p {
    font-size: 1.5rem;
    color: #666;
    line-height: 1.6;
}

.events-grid {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-bottom: 60px;
}

.event-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.event-type.reverse {
    direction: rtl;
}

.event-type.reverse .event-content {
    direction: ltr;
}

.event-image {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    margin-top: 0;
}

.event-image:hover img {
    transform: scale(1.05);
}

.event-content {
    padding: 20px;
}

.event-content h3 {
    font-size: 3rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-weight: 300;
    color: #232721;
    opacity: 0;
    transition: opacity 0.8s ease-out 0.5s, transform 0.8s ease-out ;
    transform: translateY(20px);
}

.event-content h3.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.event-content ul {
    list-style: none;
    margin-bottom: 20px;
    line-height: 1.2;

}

.event-content ul li {
    margin-bottom: 10px;
    color: #666;
    position: relative;
    padding-left: 25px;
}

.event-content ul li:before {
    content: "•";
    color: #9e7d5f;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

.event-content p {
    color: #666;
    line-height: 1.2;
}

.events-cta {
    height: 420px;
    text-align: center;
    padding: 60px 20px;
    background-image: url(../images/ctaevents.webp);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    margin-bottom: 60px;
    position: relative;
}

.events-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(107, 99, 99, 0.3);
    border-radius: 10px;
    z-index: 1;
}



.events-cta h2 {
    position: relative;
    top: -3%;
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-family: 'League Spartan', sans-serif;
    color: #e2ddd0;
    margin-top: 10px;
    z-index: 2;
}

.events-cta p {
    position: relative;
    

    font-size: 1.5rem;
    line-height: 1.2;
    color: #e2ddd0;
    margin-bottom: 30px;
    margin-top: 35px;
    z-index: 10;
}

.btncontatti {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    color: #e2ddd0;
    font-family: 'League Spartan', sans-serif;
    font-size: 2.3rem;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 20px;
    position: relative;
    top: 0%;
    z-index: 3;
}

.btncontatti:hover {
    background-color:  #1a1a1a;
    
    transform: translateY(-3px);
    color: 0 2px 4px #e2ddd0;
}



.events-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.info-box {
    margin-top: -40px;
    margin-bottom: 0px;
    padding: 30px;
    background-color: #e2ddd0;
    border: 2px solid #9e7d5f;
    border-radius: 10px;
    text-align: center;
}

.info-box h4 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-family: 'League Spartan', sans-serif;
    color: #232721;
}

.info-box p {
    color: #666;
    margin-bottom: 10px;
}

@media (max-width: 1040px) and (min-width: 768px) {

    .events-section {
        padding: 50px 20px;
        background-color: #e2ddd0;
        
    }
    
    .events-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .events-cta-text
    {
        border: 1px solid red;
    }
    
    .events-intro {
        text-align: center;
        margin-bottom: 60px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .events-intro h2 {
        font-size: 2.3rem;
        color: #1a1a1a;
        margin-bottom: 20px;
        font-family: 'rushfordclean-rgz89', sans-serif;
        color: #232721;
        font-weight: 300;
        opacity: 0;
        transition: opacity 0.8s ease-out;
    }
    
    .events-intro h2.fade-in {
        opacity: 1;
    }
    
    .events-intro p {
        font-size: 1.2rem;
        color: #666;
        line-height: 1.3;
    }
    
    .events-grid {
        display: flex;
        flex-direction: column;
        gap: 80px;
        margin-bottom: 60px;
    }
    
    .event-type {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
    }
    
    .event-type.reverse {
        direction: rtl;
    }
    
    .event-type.reverse .event-content {
        direction: ltr;
    }
    
    .event-image {
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    .event-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        margin-top: 0;
    }
    
    .event-image:hover img {
        transform: scale(1.05);
    }
    
    .event-content {
        padding: 20px;
    }
    
    .event-content h3 {
        font-size: 2rem;
        color: #1a1a1a;
        margin-bottom: 20px;
        font-family: 'rushfordclean-rgz89', sans-serif;
        font-weight: 300;
        color: #232721;
        opacity: 0;
        transition: opacity 0.8s ease-out 0.5s, transform 0.8s ease-out ;
        transform: translateY(20px);
    }
    
    .event-content h3.fade-in {
        opacity: 1;
        transform: translateY(0);
    }
    
    .event-content ul {
        list-style: none;
        margin-bottom: 20px;
        line-height: 1.2;
    
    }
    
    .event-content ul li {
        margin-bottom: 10px;
        color: #666;
        position: relative;
        padding-left: 25px;
        font-size: 1.2rem;
    }
    
    .event-content ul li:before {
        content: "•";
        color: #9e7d5f;
        position: absolute;
        left: 0;
        font-size: 1.2rem;
    }
    
    .event-content p {
        color: #666;
        line-height: 1.2;
        font-size: 1.2rem;
    }
    
    .events-cta {
        height: 420px;
        text-align: center;
        padding: 60px 20px;
        background-image: url(../images/ctaevents.webp);
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        margin-bottom: 60px;
        position: relative;
    }
    
    .events-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(107, 99, 99, 0.3);
        border-radius: 10px;
        z-index: 1;
    }
    
    
    
    .events-cta h2 {
        position: relative;
        top: -3%;
        font-size: 2.5rem;
        margin-bottom: 20px;
        font-family: 'League Spartan', sans-serif;
        color: #e2ddd0;
        margin-top: 10px;
        z-index: 2;
    }
    
    .events-cta p {
        position: relative;
        top: 5%;

        font-size: 1.2rem;
        line-height: 1.2;
        color: #e2ddd0;
        margin-bottom: 30px;
        margin-top: 35px;
        z-index: 2;
    }
    
    .btncontatti {
        display: inline-block;
        padding: 10px 20px;
        background-color: transparent;
        color: #e2ddd0;
        font-family: 'League Spartan', sans-serif;
        font-size: 1.7rem;
        text-decoration: none;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        margin-top: 20px;
        position: relative;
        top: 10%;
        z-index: 1001;
    }
    
    .btncontatti:hover {
        background-color:  #1a1a1a;
    transform: translateY(-3px);
    color: 0 2px 4px #e2ddd0;
    }
    
    
    .events-info {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .info-box {
        margin-top: -60px;
        margin-bottom: 0px;
        padding: 30px;
        background-color: #e2ddd0;
        border: 2px solid #9e7d5f;
        border-radius: 10px;
        text-align: center;
    }
    
    .info-box h4 {
        font-size: 1.4rem;
        color: #1a1a1a;
        margin-bottom: 20px;
        font-family: 'League Spartan', sans-serif;
        color: #232721;
    }
    
    .info-box p {
        color: #666;
        margin-bottom: 10px;
        font-size: 1.2rem;
        line-height: 1.3;
    }
    
}

/* Responsive Design per Events */
@media (max-width: 768px) {
    
    .events-intro h2 {
        opacity: 1;
        line-height: 1.2;
    }

    .events-intro p {
        transform: translateY(-20px);
        font-size: 1.2rem;
        color: #666;
        line-height: 1.3;
    }
    
    .event-type {
        margin-top: -20px;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .event-type.reverse {
        margin-top: -60px;
        direction: ltr;
    }

    .event-content {
        margin-top: -20px;
        text-align: center;
    }

    .event-type h3 {
        font-size: 2.3rem;
    }
    .event-type p {
        transform: translateY(-15px);
        font-size: 1.2rem;
    }

    .event-content ul {
        transform: translateY(-20px);
        line-height: 0.8;
    }

    .event-content ul li {
        padding-left: 0;
        font-size: 1.2rem;
        line-height: 1.4rem;
    }

    .event-content ul li:before {
        display: none;
    }

    .events-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        justify-items: center;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        margin-bottom: -60px;
        margin-top: -80px;
    }

    .info-box {
        width: 80%;
        margin: 0 auto;
    }

    .info-box p {
        font-size: 1.2rem;
    }

    .events-cta {
        height: 420px;
        text-align: center;
        padding: 60px 20px;
        background-image: url(../images/ctaevents.webp);
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        margin-bottom: 60px;
        margin-top: -40px;
        position: relative;
    }

    .events-cta-text {
        transform: translateY(0%);
        min-height: 70vw;
    }

    .events-cta h2 {
        font-size: 1.8rem;
        transform: translateY(10%);
    }
    .events-cta p {
        position: absolute;
        transform: translateX(15%) translateY(-20px);
        font-size: 1.2rem;
        line-height: 1.2;
        color: #e2ddd0;
        margin-bottom: 30px;
        margin-top: 35px;
        z-index: 2;
        max-width: 70%; 
        justify-content: center;
    }

    .btncontatti {
        font-size: 1.5rem;
        position: relative;
        top: 120px;
        background-color: #1a1a1a;
    }
    .btncontatti:hover {
        background-color: #1a1a1a;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

/* Contact Section */
.contact-section {
    
    padding: 50px 20px;
    background-color: #e1ddd0;

}

.contact-container {
    margin: 0 auto;
    max-width: 1200px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
    grid-template-rows: auto auto;
    gap: 50px;
    width: 100%;
    padding: 0 20px;
    position: relative;
}

.contact-info {
    margin: 0 auto;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    padding: 30px;
    background-color: #e2ddd0;
    border: 2px solid #9e7d5f;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

.map-container {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    width: 100%;
    height: 100%;
}

.imagecontatti {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

.imagecontatti img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.info-content h2 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-family: 'League Spartan', sans-serif;
    color: #232721;
}

.info-content h3 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin: 30px 0 15px;
}

.address-info {
    margin-bottom: 30px;
}

.address-info p,
.contact-details p,
.opening-hours p {
    margin-bottom: 10px;
    color: #666;
}

.contact-details i {
    width: 20px;
    color: #9e7d5f;
    margin-right: 10px;
}

.social-links {
    margin-top: 30px;
}

.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background-color: #9e7d5f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #876a4f;
    transform: translateY(-3px);
}

/* Contact Form */
.contact-form {
    padding: 30px;
    background-color: #e2ddd0;
    border: 2px solid #9e7d5f;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-family: 'League Spartan', sans-serif;
    color: #232721;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1a1a1a;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #e1ddd0;
    border: 1px solid #9e7d5f;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group textarea {
    height: 150px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #9e7d5f;
    outline: none;
}



.alert {
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Map Container */
.map-container {
    grid-row: 1 / 2;     /* prima riga */
    grid-column: 2 / 3; 
    width: 100%;
    max-height: 30%;
    margin: 0 auto;

}

.map-container h2 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 30px;
    text-align: center;
    font-family: 'League Spartan', sans-serif;
    color: #232721;
    transform: translateY(30px);
}

.google-map {
    margin: 0 auto;
    width: 100%;
    height: 430px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(30px);
}

.imagecontatti {
    grid-row: 2 / 2;
    grid-column: 2 / 3;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
    max-height: 50%;
    margin: 0 auto;
    transform: translateY(-203px);
}

.imagecontatti img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Responsive Design per Contacts */
/* Responsive Design per Contacts */
@media (max-width: 1040px) and (min-width: 768px) {
    
    .contact-container {
        max-width: 1200px;
        margin: 0 auto 60px;
        display: grid;
        grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
        gap: 50px;
        width: 100%;
        padding: 0 20px;
    }
    
    .contact-info {
        grid-row: 1 / 3;
        grid-column: 1 / 2;
        padding: 30px;
        background-color: #e2ddd0;
        border: 2px solid #9e7d5f;
        border-radius: 10px;
        
        min-height: 0;
    }
    
    .map-container {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        width: 100%;
        height: 75%;
        min-height: 0;
    }
    

    .imagecontatti {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        width: 100%;
        height: fit-content;
        min-height: 0;
        top: -150px;
    }
    
    .imagecontatti img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .info-content h2 {
        font-size: 1.5rem;
        color: #1a1a1a;
        margin-bottom: 30px;
        font-family: 'League Spartan', sans-serif;
        color: #232721;
    }
    
    .info-content h3 {
        font-size: 1.3rem;
        color: #1a1a1a;
        margin: 30px 0 15px;
    }
    
    .address-info {
        margin-bottom: 30px;
    }
    
    .address-info p,
    .contact-details p,
    .opening-hours p {
        font-size: 1.2rem;
        line-height: 1.2;
        margin-bottom: 10px;
        color: #666;

    }
    
    .contact-details i {
        width: 20px;
        color: #9e7d5f;
        margin-right: 10px;
    }
    
    .social-links {
        margin-top: 30px;
    }
    
    .social-icons {
        display: flex;
        gap: 20px;
        margin-top: 15px;
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
        background-color: #9e7d5f;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .social-icon:hover {
        background-color: #876a4f;
        transform: translateY(-3px);
    }
    
    /* Contact Form */
    .contact-form {
        padding: 30px;
        background-color: #e2ddd0;
        border: 2px solid #9e7d5f;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .contact-form h2 {
        font-size: 1.5rem;
        color: #1a1a1a;
        margin-bottom: 30px;
        font-family: 'League Spartan', sans-serif;
        color: #232721;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #1a1a1a;
        font-weight: 500;
    }
    
    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px;
        background-color: #e1ddd0;
        border: 1px solid #9e7d5f;
        border-radius: 5px;
        font-size: 1rem;
        transition: border-color 0.3s ease;
    }
    
    .form-group textarea {
        height: 150px;
        resize: vertical;
    }
    
    .form-group input:focus,
    .form-group textarea:focus {
        border-color: #9e7d5f;
        outline: none;
    }
    
    
    
    .alert {
        padding: 15px;
        border-radius: 5px;
        margin-top: 20px;
    }
    
    .alert.success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .alert.error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    /* Map Container */
    .map-container {
        grid-row: 1 / 2;     /* prima riga */
        grid-column: 2 / 3; 
        width: 100%;
        margin: 0 auto;
        max-height: 80%;
    }
    
    .map-container h2 {
        transform: translateY(0px);
        font-size: 1.7rem;
        color: #1a1a1a;
        margin-bottom: 30px;
        text-align: center;
        font-family: 'League Spartan', sans-serif;
        color: #232721;
        
    }
    
    .google-map {
        transform: translateY(-20px);
        width: 100%;
        height: 350px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .imagecontatti {
        transform: translateY(-41px);
        grid-row: 2 / 2;     /* prima riga */
        grid-column: 2 / 3; 
        width: 100%;
        max-height: 50%;
        margin: 0 auto;
    }
    .imagecontatti img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}
@media (max-width: 768px) {

    .contact-section {
    
        padding: 50px 20px;
        background-color: #e2ddd0;
        justify-content: center;
        align-items: center;
        text-align: center;
    }


    .contact-container {
        position: relative;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 45vw;
        gap: 30px;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 0 20px;
        margin: 0 auto;
    }

    .contact-info {
        grid-row: auto;
        grid-column: 1;
        max-height: none;
        height: auto;
        padding: 20px;
        text-align: center;
        width: 80vw;
    }

    .info-content h2 {
        font-size: 1.5rem;
        color: #1a1a1a;
        margin-bottom: 30px;
        font-family: 'League Spartan', sans-serif;
        color: #232721;
        margin-bottom: 15px;
    }
    
    .info-content h3 {
        font-size: 1.3rem;
        color: #1a1a1a;
        margin: 30px 0 15px;
    }   

    .info-content h2,
    .info-content h3,
    .address-info p,
    .contact-details p,
    .opening-hours p {
        text-align: center;
    }
    .address-info p,
    .contact-details p,
    .opening-hours p {
        font-size: 1.2rem;
        line-height: 1.2;
        margin-bottom: 10px;
        color: #666;

    }

    .social-icons {
        justify-content: center;
    }

    .map-container {
        grid-row: auto;
        grid-column: 1;
        max-height: 80%;
        width: 80vw;
    }
    .google-map {
        width: 100%;
        height: 75%;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    .imagecontatti {
        margin-top: -80px;
        grid-row: auto;
        grid-column: 1;
        max-height: none;
        width: 80vw;
        transform: translateY(-0px);
    
    }

    .imagecontatti img {
        height: auto;
        max-height: 400px;
    }

    .contact-form {
        padding: 20px;
    }

    .map-container h2 {
        font-size: 1.8rem;
    }
}

/* Testi base */
body {
    font-family: 'Inconsolata', monospace;
    line-height: 1.6;
}

/* Paragrafi e testi */
p, span, a, li, button, input, textarea, label {
    font-family: 'Inconsolata', monospace;
    font-size: 1.5rem;
}

/* Product Card */
.product-card p,
.product-card h3 {
    font-family: 'Inconsolata', monospace;
}

/* Product Item */
.product-info p,
.product-info h3 {
    font-family: 'Inconsolata', monospace;
}

/* Philosophy Content */
.philosophy-content p {
    font-family: 'Inconsolata', monospace;
}

/* Menu Items */
.item-name,
.item-price,
.item-description,
.menu-note p {
    font-family: 'Inconsolata', monospace;
}

/* Events Content */
.event-content p,
.event-content ul li,
.events-cta p,
.info-box p {
    font-family: 'Inconsolata', monospace;
}

/* Contact Form */
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form button,
.address-info p,
.contact-details p,
.opening-hours p {
    font-family: 'Inconsolata', monospace;
}


/* Hamburger Button */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 97px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10%;
    transition: transform 0.3s ease;
    z-index: 1001;
}

.hamburger-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(90%) sepia(5%) saturate(500%) hue-rotate(10deg) brightness(90%) contrast(90%);
}

.hamburger-btn:hover {
    transform: scale(1.1);
}

/* Aggiungi il nuovo hamburger button nella top bar */
.top-bar .hamburger-btn {
    display: flex;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    width: 80px;
    height: 86px;
    margin-right: 20px;
    margin-left: -10%;
    transform: translateX(190%);
}

.top-bar .hamburger-btn svg {
    width: 100%;
    height: 100%;
    fill: #e2ddd0;
    transition: fill 0.3s ease;
}

.top-bar .hamburger-btn:hover svg {
    fill: #cdc1b5;
}

/* Nascondi la top bar quando il menu è aperto */
body.menu-open .top-bar {
    opacity: 0;
    pointer-events: none;
}

/* Media Queries per l'hamburger button */
@media screen and (max-width: 1040px) {
    .top-bar .hamburger-btn {
        width: 70px;
        height: 76px;
    }
   
}


@media screen and (max-width: 992px) {
    .top-bar .hamburger-btn {
        width: 70px;
        height: 76px;
        
    }
}

@media screen and (max-width: 768px) {
    .top-bar .hamburger-btn {
        width: 68px;
        height: 72px;
       
    }
    
    .hamburger-btn {
        width: 87px;
        height: 76px;
    }
}

@media screen and (max-width: 576px) {
    .top-bar .hamburger-btn {
        width: 60px;
        height: 66px;
       
    }
    
    .hamburger-btn {
        width: 87px;
        height: 76px;
    }
}



.btnmex {
    display: inline-block;
    padding: 15px 30px;
    background-color: #232721;
    color: #e2ddd0;
    font-family: 'Inconsolata', monospace;
    font-size: 1.2rem;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 20px;
}

.btnmex:hover {
    background-color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.contatti-hero {
    width: 100%;
    height: 98vh;
    background-color: #e2ddd0;
    text-align: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    display: block;
   
    top: 0;
    left: 0;
}

.contatti-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
}


.filosofia-hero {
    width: 100%;
    height: 98vh;
    background-color: #e2ddd0;
    text-align: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    display: block;
    
    top: 0;
    left: 0;  
    
}

.filosofia-image {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
    
}


.eventi-hero {
    width: 100%;
    height: 98vh;
    background-color: #e2ddd0;
    text-align: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    display: block;
    
    top: 0;
    left: 0;  
    
}

.eventi-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
}




.prodotti-hero {
    width: 100%;
    height: 98vh;
    background-color: #e2ddd0;
    text-align: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    display: block;
    
    top: 0;
    left: 0;
}

.prodotti-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom -20%;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
}

.dolci-hero {
    width: 100%;
    height: 98vh;
    background-color: #e2ddd0;
    text-align: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    display: block;
    
    top: 0;
    left: 0;
}

.dolci-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom -20%;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
    
}
.dolci-hero .hero-content {
    animation: fadeIn 1s ease-in forwards;
}


@media (max-width: 768px) {


    .dolci-hero {
        width: 100%;
        height: 50vh;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e2ddd0;
        z-index: 1;
    }

    .dolci-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
.contatti-hero {
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2ddd0;
    z-index: 1;   
    
}

.contatti-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
    z-index: 0;
    
}


.filosofia-hero {
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2ddd0;
    z-index: 1;   
    
}

.filosofia-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
    z-index: 0;
    
}


.eventi-hero {
    width: 100%;
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2ddd0;
    z-index: 1;    
    
}

.eventi-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
    z-index: 0;
}



.prodotti-hero {
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2ddd0;
    z-index: 1;
}

.prodotti-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.7);
    z-index: 0;
}
}

.prodotti-hero .hero-content {
   
    animation: fadeIn 1s ease-in forwards;
}

/* --- PRODOTTI PAGE STYLE --- */



.prodotti-why {
    background: #e2ddd0;
    min-height: 87vw;
    max-height: 87vw;
    position: relative;
    display: flex;
    z-index: 100;
    justify-content: center;
    align-items: center;
   
}


.prodotti-why-title {
    top:  20px;
    left: 45%;
    width: fit-content;
    position: absolute;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-size: 4rem;
    color: #7c6a57;
    margin-bottom: 40px;
    font-weight: 400;
    opacity: 0;
    animation: fadeInUp3 1s ease-out forwards;
    animation-play-state: paused;
}

.prodotti-why-title.fade-in {
    animation-play-state: running;
}

@keyframes fadeInUp3 {
    from {
        opacity: 0;
        transform: translateY(110%);
    }
    to {
        opacity: 1;
        transform: translateY(80%);
    }
}

.prodotti-why-grid {
    position: absolute;
    top: 250px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8vw;
   
}
.prodotti-why-card {
    position: relative;
    background: #e2ddd0;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    padding: 28px 22px 32px 22px;
    width: 22vw;
    height: 29vw;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prodotti-why-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.prodotti-why-card img {
    position: absolute;
    width: 22vw;
    height: 17vw;
    object-fit: cover;
    background: #fff;
    top: 0%;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}
.prodotti-why-card h3 {
    white-space: nowrap;
    position: absolute;
    top: 61%;

    font-family: 'League Spartan', sans-serif;
    font-size: 2vw;
    color: #7c6a57;
    margin-bottom: 10px;
    z-index: 3000;
}
.prodotti-why-card p {
    position: absolute;
    top: 71%;
    color: #7c6a57;
    font-size: 1.1vw;
    line-height: 1.5vw;
    max-width: 95%; 
}
.prodotti-featured {
    background: #e2ddd0;
    min-height: 53vw;
    max-height: 45vw;
    max-width: 97vw;
    min-width: 97vw;
    position: relative;
    display: flex;
    z-index: 201;
}
.prodotti-featured-title,
.prodotti-featured-desc,
.prodotti-featured-grid{
    transform: translateY(-0px);
}


.prodotti-featured-title {
    top: 0%;
    left: 45%;
    position: absolute;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-size: 4rem;
    color: #7c6a57;
    margin-bottom: 40px;
    font-weight: 400;
    opacity: 0;
    animation: fadeInUp3 1s ease-out forwards;
    animation-play-state: paused;
}
@keyframes fadeInUp2 {
    from {
        opacity: 0;
        transform: translateY(-29px);
    }
    to {
        opacity: 1;
        transform: translateY(-59px);
    }
}

.prodotti-featured-title.fade-in {
    animation-play-state: running;
}

.prodotti-featured-desc {
    color: #7c6a57;
    font-size: 1.2rem;
    margin-bottom: 40px;
}
.prodotti-featured-grid {
    position: absolute;
    top: 30%;
    left: 13%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1vw;
    margin: 0 auto 30px auto;
    flex-wrap: wrap;
    background: #e2ddd0;
}

.prodotti-featured-grid .prodotto1:hover
{
    transform: translateY(-0%) scale(1.04);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}


.prodotti-featured-grid .prodotto2:hover {
    transform: translateY(-0%) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.prodotti-featured-grid .prodotto1 {
    width: 35vw;
    height: 28vw;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    background: #fff;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prodotti-featured-grid .prodotto2 {
    width: 12vw;
    height: 28vw;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prodotti-featured-special {
    background: transparent;
    border-radius: 18px;
    padding: 32px 28px;
    width: 23vw;
    height: 28vw;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 0;
    background: #e2ddd0;
    
}
.prodotti-featured-special h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: 3vw; 
    line-height: 3.3vw;
    color: #7c6a57;
    margin-bottom: 10px;
}
.prodotti-featured-special p {
    color: #7c6a57;
    font-size: 2vw;
    line-height: 2.3vw;
    max-width: 20vw;
    margin-bottom: 18px;
}
.btnprodotti {
    background: #b89b6a;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 28px;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.7vw;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    cursor: pointer;
    display: inline-block;
}
.btnprodotti:hover {
    background: #7c6a57;
    color: #fffbe6;
}
.prodotti-visit {
    background: #e2ddd0;
    min-height: 58vw;
    max-height: 58vw;
    position: relative;
    display: flex;
    z-index: 201;
}
.prodotti-visit-title {
    top: 3%;
    left: 40%;
    position: absolute;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-size: 2.7rem;
    color: #7c6a57;
    margin-bottom: 40px;
    font-weight: 400;
    font-size: 4rem;
    transform: translateY(5px);
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-play-state: paused;
}

.prodotti-visit-title.fade-in {
    animation-play-state: running;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(5px);
    }
}

.prodotti-visit-grid {
    position: absolute;
    top: 20%;
    left:3.5%;
    width: 90vw;
    height: 45vw;
    display: flex;
    justify-content: center;
    background: #e2ddd0;
    gap: 30px;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: stretch;
}

.prodotti-visit-card {
    background: #e2ddd0;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    padding: 28px 22px 32px 22px;
    display: flex;
    height: 31vw;
    width: 21vw;
    position: absolute;
    left: 8.5%;
   
   
}
.prodotti-visit-card img {
    width: 21vw;
    height: 16.6vw;
    object-fit: cover;
    border-top-left-radius: 18px;
    background: #e2ddd0;
    position: absolute;
    top: 0;
    left: 0%;
    border-top-left-radius: 18px;
}
.prodotti-visit-card h3 {
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-size: 2vw; 
    font-weight: 350;
    color: #7c6a57;
    margin-bottom: 2px;
    z-index: 1000;
    position: absolute;
    white-space: nowrap;
    top: 57%;
    transform: translateX(12%);
}
.prodotti-visit-card p {
    color: #7c6a57;
    font-size: 1.5vw;
    font-family: 'Inconsolata', monospace;
    position: absolute;
    top: 67%;
    left: -30%;
    z-index: 1000;
    width:20vw;
    text-align: center;
    line-height: 1.7vw;
   
}

.prodotti-visit-grid .prodotti-visit-img2 {
    position: absolute;
    width: 33vw;
    height: 40vw;
    object-fit: cover;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    background: #fff;
    z-index: 100;
}
.prodotti-visit-grid .prodotti-visit-img3 {
    position: absolute;
    left: 68%;
    width: 21vw;
    height: 29vw;
    object-fit: cover;
    border-bottom-right-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    background: #fff;
   
}
@media (max-width: 1040px) and (min-width: 768px) {

    

    .prodotti-why-title {
        top: 0px;
        left: 43%;
        font-size: 3.5rem;
    }
    .prodotti-why {
        background: #e2ddd0;
        min-height: 165vw;
        max-height: 165vw;
        position: relative;
        display: flex;
        z-index: 100;
        justify-content: center;
        align-items: center;
    }
    .prodotti-why-grid {
        top: 180px;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        align-items: center;
        gap: 3vw;
        width: 90%;
        margin: 0 auto;
        display: grid;
    }
    .prodotti-why-card:nth-last-child(-n+2) {
        grid-column: span 1;
        width: 28vw;
        height: 35vw;
        left: 50%;
    }
    .prodotti-why-card:nth-last-child(2) {
        grid-column: 1;
        width: 28vw;
        height: 42vw;
    }
    .prodotti-why-card:nth-last-child(1) {
        grid-column: 2;
        width: 28vw;
        height: 42vw;
    }
    .prodotti-why-card {
        width: 28vw;
        height: 35vw;
    }
    .prodotti-why-card img {
        width: 28vw;
        height: 22vw;
    }
    .prodotti-why-card h3 {
        font-size: 2.5vw;
    }
    .prodotti-why-card p {
        font-size: 1.8vw;
        line-height: 2.2vw;
    }
    .prodotti-featured-grid,
    .prodotti-visit-grid {
        flex-direction: column;
        align-items: center;
    }
   
    .prodotti-why-card{
        height: 42vw;
    }

    
    .prodotti-why-card h3 {
        top: 55%;
    }
    .prodotti-why-card p {
        top: 65%;
    }

    

    .prodotti-visit-card {
        max-width: 90vw;
        min-width: 220px;
    }
    .prodotti-visit-img {
        width: 90vw;
        max-width: 320px;
        height: 180px;
    }
    
    
}

@media (max-width: 768px) {

    .prodotti-why-title {
        top: 1%;
        left: 37%;
        font-size: 3.5rem;
    }
    .prodotti-why {
        background: #e2ddd0;
        min-height: 840vw;
        max-height: 840vw;
        position: relative;
        display: flex;
        z-index: 100;
        justify-content: center;
        align-items: center;
    }
    .prodotti-why-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
        justify-items: center;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        display: grid;
        top: 7%;
    }
    .prodotti-why-card {
        width: 72vw;
        height: 90vw;
    }
    .prodotti-why-card img {
        width: 100%;
        height: 45vw;
    }
    .prodotti-why-card h3 {
        font-size: 6.5vw;
        top: 53%;
    }
    .prodotti-why-card p {
        font-size: 4.3vw;
        line-height: 5vw;
        max-width: 93%;
        top: 64%;
    }
    .prodotti-featured-grid,
    .prodotti-visit-grid {
        flex-direction: column;
        align-items: center;
    }
    .prodotti-featured-special,
    .prodotti-visit-card {
        max-width: 90vw;
        min-width: 220px;
    }
    .prodotti-visit-img {
        width: 90vw;
        max-width: 320px;
        height: 180px;
    }
}
/* --- FINE PRODOTTI PAGE STYLE --- */

.btnppizza {
    background: #b89b6a;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 28px;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
    position: relative;
    z-index: 1001;
    transform: translateY(500%);
}

.btnppizza:hover {
    background: #7c6a57;
    color: #fffbe6;
}

.prodotti-visit-card div {
    position: relative;
    z-index: 1000;
    padding: 20px;
}


/* --- DOLCI PAGE STYLE --- */

.specialitawrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(35, 39, 33, 1);
}

.specialita-container {
    /* Modificato per avere trasparenza 0.5 */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height per iPhone */
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;
    background-color: rgba(35, 39, 33, 1);
    padding: 0;
    margin: 0 auto;
    z-index: 2;
    scrollbar-width: none; /* Firefox */
}
.specialitawrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.specialita-item {
    min-height: 100vh;
    width: 100vw;
    scroll-snap-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: rgba(35, 39, 33, 1);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s, filter 0.5s;
    opacity: 0.7;
    transform: scale(0.97);
    filter: blur(1px);
    will-change: transform;
    z-index: 1;
}


.specialita-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-align: center;
    background-color: rgba(35, 39, 33, 1);
    height: 100vh;
    width: 80%;
    padding: 2rem;
    border-radius: 10px;
    max-width: 100%;
    display: flex;
}

.specialita-content h3 {
    color: white;
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 45%;
    font-family: 'rushfordclean-rgz89', sans-serif;
    text-align: center;
    z-index: 1000;
    opacity: 0;
    letter-spacing: 0.05em !important;
    font-size: 4.5rem !important;
    /* nessun transform qui, sarà gestito dagli span */
}

.specialita-content img {
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 30px;
    height: 67.1vh;
    object-fit: cover;
    position: relative;
    width: 40vh;
}



/* --- FINE DOLCI PAGE STYLE --- */
.specialitamargine {
    height: 10vh;
    background-color: rgba(35, 39, 33, 1);
}

.specialita-item.in-page {
    opacity: 1;
    transform: translateY(0px);
    z-index: 10;
    transition: opacity 0.8s, transform 0.8s;
    filter: blur(0px); /* Rimuove il blur quando l'elemento è attivo */
}


.specialitatop {
    margin-top: 10vh;
    margin-bottom: 10vh;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.specialitatop .topcontainer {
    position: relative;
    width: 100%;
    background-color: rgba(35, 39, 33, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.specialitatop .topcontainer p {
    color: #e2ddd0;
    max-width: 80%;
}


.topcontainer h2 {
    font-size: 4rem;
    color: #e2ddd0;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-weight: 400;
    text-align: center;
}
.topcontainer p {
    text-align: center;
    font-size: 1.5rem;
    color: #e2ddd0;
    font-family: 'Inconsolata', monospace;
    font-weight: 400;
}

.specialita_bt {
    margin-top: 10vh;
    margin-bottom: 10vh;
    width: 100%;
    height: 60vh;
    background-color: rgba(35, 39, 33, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.specialita_bt_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 100%;
    background-color: rgba(35, 39, 33, 1);
    border: 1px solid #e2ddd0;
    border-radius: 15px;
}
.specialita_bt_container h2 {
    text-align: center;
    color: #e2ddd0;
    font-size: 2rem;
    font-family: 'rushfordclean-rgz89', sans-serif;
    font-weight: 400;
    max-width: 95%;
}
@media (max-width: 1040px) and (min-width: 768px){



    .specialita-content img {
        justify-content: flex-start;
        align-items: flex-start;
        border-radius: 30px;
        height: 67.1vh;
        object-fit: cover;
        position: relative;
        width: 50vh;
    }

}


@media (max-width: 768px) {
    .topcontainer h2 {
        font-size: 3rem;
    }
    .topcontainer p {
        font-size: 1.2rem;
    }

    .specialita-content img {
        justify-content: flex-start;
        align-items: flex-start;
        border-radius: 30px;
        height: 67.1vh;
        object-fit: cover;
        position: relative;
        width: 100%;
    }

}

.specialita-item .specialita-content img {
    transition: transform 1.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.specialita-item .specialita-content h3 {
    opacity: 0;
    transition: transform 0.8s;
}

.specialita-item.in-page .specialita-content img {
    transform: scale(1.49);
    border-radius: 18px;
}

.specialita-item.in-page .specialita-content h3 {
    opacity: 1;
}

.specialita-content h3 {
    opacity: 0;
    /* nessun transform qui, sarà gestito dagli span */
}

.specialita-item.in-page .specialita-content h3 {
    opacity: 1;
}

.specialita-content h3 span {
    display: inline-block;
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.7s, transform 0.7s;
    margin-right: 0.08em;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
}

.specialita-item.in-page .specialita-content h3 span {
    font-size: 2.5rem;
    opacity: 1;
    transform: translateX(0);

}


@media (max-width: 1040px) and (min-width: 768px) {
    .specialita-content h3 {
      top: 45%;
      font-size: 2.5rem;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
    }
    .specialita-content h3 span {
      display: inline;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .specialita-item.in-page .specialita-content h3 span {
      font-size: 2.5rem;
      display: inline;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }
  
  body.specialita-absolute-topbar {
      overflow-x: hidden;
  }
  .specialita-absolute-topbar .top-bar {
      position: absolute !important;
      left: 0;
      right: 0;
      width: 100vw;
      max-width: 100vw;
      overflow-x: hidden;
  }
  

@media (max-width: 768px) {
  .specialita-content h3 {
    top: 45%;
    font-size: 3rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .specialita-content h3 span {
    display: inline;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .specialita-item.in-page .specialita-content h3 span {
    font-size: 3rem;
    display: inline;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

body.specialita-absolute-topbar {
    overflow-x: hidden;
}
.specialita-absolute-topbar .top-bar {
    position: absolute !important;
    left: 0;
    right: 0;
}

/* Gestione scroll mobile per specialità */
body.specialita-scroll-locked {
    overflow: hidden !important;
    /* Gestione semplificata per evitare conflitti */
}

.specialita-container {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Gestione specifica per iPhone con barra di ricerca */
@supports (height: 100dvh) {
    .specialita-container {
        height: 100dvh;
        min-height: 100dvh;
    }
}

/* Media query specifica per iPhone */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .specialita-container {
        height: 100vh;
        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
}

/* Pulsante di uscita per specialità */
.specialita-exit-btn {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.specialita-exit-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.specialita-exit-btn svg {
    color: #333;
    width: 20px;
    height: 20px;
}

/* Pulsante sempre visibile per test */
.specialita-exit-btn {
    display: flex !important;
    position: absolute !important;
    z-index: 99999 !important;
    background: rgb(184, 177, 177) !important;
    color: white !important;
    width: 60px !important;
    height: 60px !important;
    border: 3px solid rgb(255, 252, 252) !important;
    opacity: 0.9 !important;
    visibility: visible !important;
}

/* Pulsante in alto */
.specialita-exit-top {
    top: 50px !important;
    right: 50px !important;
    top: 10% !important;
    right: 2.5% !important;
}

/* Pulsante in basso */
.specialita-exit-bottom {
    position: absolute !important;
    top: auto !important;
    bottom: 7% !important;
    right: 2.5% !important;
}

/* Miglioramenti per touch su mobile */
@media (max-width: 768px) {
    .specialita-container {
        scroll-snap-type: y mandatory;
    }
    
    .specialita-item {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    
    .specialitawrapper {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}