/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #2c1810;
    background-color: #faf8f5;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 30px,
            rgba(139, 69, 19, 0.015) 30px,
            rgba(139, 69, 19, 0.015) 35px
        );
    padding-top: 100px; /* Account for fixed navbar */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Italian Flag Colors for D.O.C. with Individual Letter Styling */
.doc-italian-flag {
    font-weight: 700;
    position: relative;
    display: inline-block;
    letter-spacing: 2px;
}

/* Individual letter styling for D.O.C. */
.doc-italian-flag::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
        to right,
        #009246 0%,
        #009246 33.33%,
        #ffffff 33.33%,
        #ffffff 66.66%,
        #ce2b37 66.66%,
        #ce2b37 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 1;
}

/* White contour effect using multiple text-shadows */
.doc-italian-flag {
    color: transparent;
    text-shadow: 
        /* White contour */
        -2px -2px 0 #ffffff,
        -2px -1px 0 #ffffff,
        -2px  0px 0 #ffffff,
        -2px  1px 0 #ffffff,
        -2px  2px 0 #ffffff,
        -1px -2px 0 #ffffff,
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
        -1px  2px 0 #ffffff,
         0px -2px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  1px 0 #ffffff,
         0px  2px 0 #ffffff,
         1px -2px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         1px  2px 0 #ffffff,
         2px -2px 0 #ffffff,
         2px -1px 0 #ffffff,
         2px  0px 0 #ffffff,
         2px  1px 0 #ffffff,
         2px  2px 0 #ffffff,
        /* Colored letters on top */
         0px 0px 0 #009246, /* D - Green */
         0px 0px 0 #ffffff, /* O - White */  
         0px 0px 0 #ce2b37; /* C - Red */
}

/* Alternative approach using CSS spans for individual letters */
.doc-letter-d {
    color: #009246;
    text-shadow: 
        /* Thicker white contour */
        -2px -2px 0 #ffffff,
        -2px -1px 0 #ffffff,
        -2px  0px 0 #ffffff,
        -2px  1px 0 #ffffff,
        -2px  2px 0 #ffffff,
        -1px -2px 0 #ffffff,
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
        -1px  2px 0 #ffffff,
         0px -2px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  0px 0 #ffffff,
         0px  1px 0 #ffffff,
         0px  2px 0 #ffffff,
         1px -2px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         1px  2px 0 #ffffff,
         2px -2px 0 #ffffff,
         2px -1px 0 #ffffff,
         2px  0px 0 #ffffff,
         2px  1px 0 #ffffff,
         2px  2px 0 #ffffff,
         2px 2px 4px rgba(0,0,0,0.3);
}

.doc-letter-o {
    color: #ffffff;
    text-shadow: 
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  1px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         2px 2px 4px rgba(0,0,0,0.5);
}

.doc-letter-c {
    color: #ce2b37;
    text-shadow: 
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  1px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         2px 2px 4px rgba(0,0,0,0.3);
}

/* Enhanced D.O.C. styling with flag background */
.doc-flag-bg {
    background: linear-gradient(
        to right,
        #009246 0%,
        #009246 33.33%,
        #ffffff 33.33%,
        #ffffff 66.66%,
        #ce2b37 66.66%,
        #ce2b37 100%
    );
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    font-weight: 800;
    letter-spacing: 2px;
}

.doc-flag-bg::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -4px;
    right: -4px;
    bottom: -2px;
    background: linear-gradient(
        to right,
        #009246 0%,
        #009246 33.33%,
        #ffffff 33.33%,
        #ffffff 66.66%,
        #ce2b37 66.66%,
        #ce2b37 100%
    );
    border-radius: 6px;
    opacity: 0.1;
    z-index: -1;
}

/* Apply Italian flag styling to all D.O.C. mentions */
h1:has-text("D.O.C."),
h2:has-text("D.O.C."),
h3:has-text("D.O.C."),
.hero-title,
.footer h3 {
    background: linear-gradient(
        to right,
        #009246 0%,
        #009246 33.33%,
        #ffffff 33.33%,
        #ffffff 66.66%,
        #ce2b37 66.66%,
        #ce2b37 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Italian Rustic Textures - Enhanced */
.rustic-texture {
    position: relative;
}

.rustic-texture::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(139, 69, 19, 0.03) 2px,
            rgba(139, 69, 19, 0.03) 4px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            rgba(212, 175, 55, 0.02) 3px,
            rgba(212, 175, 55, 0.02) 6px
        );
    pointer-events: none;
}

/* Enhanced Stylized Contours and Borders */
.italian-border {
    border: 4px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #009246, #ce2b37, #8b4513) border-box;
    border-radius: 20px;
    position: relative;
}

.italian-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #009246, #ffffff, #ce2b37, #d4af37);
    border-radius: 22px;
    z-index: -1;
    opacity: 0.1;
}

.decorative-corner {
    position: relative;
}

.decorative-corner::before,
.decorative-corner::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 3px solid #d4af37;
    background: radial-gradient(circle, rgba(212,175,55,0.1) 0%, transparent 70%);
}

.decorative-corner::before {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    border-radius: 20px 0 0 0;
    background: linear-gradient(135deg, rgba(0,146,70,0.1) 0%, rgba(212,175,55,0.1) 100%);
}

.decorative-corner::after {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 20px 0;
    background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(206,43,55,0.1) 100%);
}

/* Enhanced Italian decorative elements */
.italian-ornament {
    position: relative;
}

.italian-ornament::before {
    content: '❦';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    color: #d4af37;
    opacity: 0.7;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.italian-ornament::after {
    content: '✾';
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 1.4rem;
    color: #8b4513;
    opacity: 0.6;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

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

/* Enhanced Typography with Italian Flair */
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: #8b4513;
    text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.15);
    position: relative;
}

/* Special styling for titles containing D.O.C. */
h1:contains("D.O.C."),
h2:contains("D.O.C."),
h3:contains("D.O.C."),
.hero-title {
    background: linear-gradient(
        45deg,
        #009246 0%,
        #009246 30%,
        #ffffff 30%,
        #ffffff 35%,
        #009246 35%,
        #009246 65%,
        #ffffff 65%,
        #ffffff 70%,
        #ce2b37 70%,
        #ce2b37 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 1px;
    position: relative;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #009246, #ffffff, #ce2b37);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* Enhanced Navigation with Italian Character */
.navbar {
    background: linear-gradient(135deg, #1a0e08 0%, #2c1810 50%, #3d2318 100%);
    padding: 1.2rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    border-bottom: 4px solid transparent;
    background-clip: padding-box;
    transition: transform 0.3s ease-in-out;
    overflow-x: hidden;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 5px,
            rgba(139, 69, 19, 0.08) 5px,
            rgba(139, 69, 19, 0.08) 10px
        ),
        radial-gradient(circle at 20% 50%, rgba(0,146,70, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(206,43,55, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #8b4513 20%, 
        #d4af37 50%, 
        #8b4513 80%, 
        transparent 100%
    );
}

.navbar.navbar-hidden {
    transform: translateY(-100%);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Reduced padding for mobile */
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
}

.nav-logo a {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 65px;
    width: auto;
    transition: transform 0.3s ease;
}

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

.nav-logo h2 {
    color: #f4e4c1;
    font-family: 'Playfair Display', serif;
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.5),
        0 0 10px rgba(212, 175, 55, 0.3);
    position: relative;
    letter-spacing: 1px;
}

.nav-logo h2::before {
    content: '☕';
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    opacity: 0.9;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
    animation: coffee-steam 3s ease-in-out infinite;
}

.nav-logo h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    border-radius: 1px;
    opacity: 0.7;
}

@keyframes coffee-steam {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.9; }
    50% { transform: translateY(-55%) scale(1.1); opacity: 0.7; }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 3rem;
    background: rgba(26, 14, 8, 0.3);
    padding: 0.8rem 2rem;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: inset 0 1px 0 rgba(244, 228, 193, 0.1);
}

.nav-link {
    color: #f4e4c1;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    position: relative;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #8b4513, #d4af37, #8b4513);
    transition: all 0.4s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(212, 175, 55, 0) 0%, 
        rgba(212, 175, 55, 0.1) 50%, 
        rgba(212, 175, 55, 0) 100%
    );
    border-radius: 25px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.nav-link:hover {
    color: #d4af37;
    background: rgba(139, 69, 19, 0.2);
    transform: translateY(-2px);
    box-shadow: 
        0 4px 15px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(244, 228, 193, 0.1);
}

.nav-link:hover::before {
    width: 80%;
}

.nav-link:hover::after {
    opacity: 1;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(139, 69, 19, 0.3));
    color: #d4af37;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.2),
        0 2px 8px rgba(212, 175, 55, 0.3);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(26, 14, 8, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: all 0.3s ease;
}

.hamburger:hover {
    background: rgba(139, 69, 19, 0.4);
    transform: scale(1.05);
}

.hamburger .bar {
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, #f4e4c1, #d4af37);
    margin: 4px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.hamburger:hover .bar {
    background: linear-gradient(90deg, #d4af37, #f4e4c1);
}

/* Hero Section with Enhanced Styling */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    position: relative;
    background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 50%, #8b4513 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Italian flag inspired stripes */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 80px,
            rgba(0, 146, 70, 0.08) 80px,
            rgba(0, 146, 70, 0.08) 85px,
            transparent 85px,
            transparent 90px,
            rgba(255, 255, 255, 0.05) 90px,
            rgba(255, 255, 255, 0.05) 95px,
            transparent 95px,
            transparent 100px,
            rgba(206, 43, 55, 0.08) 100px,
            rgba(206, 43, 55, 0.08) 105px
        ),
        /* Rustic stone texture */
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 3px,
            rgba(139, 69, 19, 0.04) 3px,
            rgba(139, 69, 19, 0.04) 6px
        ),
        /* Vintage paper texture */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(212, 175, 55, 0.02) 1px,
            rgba(212, 175, 55, 0.02) 2px
        ),
        /* Decorative radial patterns */
        radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(244, 228, 193, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 69, 19, 0.06) 0%, transparent 60%),
        /* Italian ornamental pattern */
        repeating-conic-gradient(
            from 0deg at 25% 25%,
            transparent 0deg,
            rgba(212, 175, 55, 0.03) 30deg,
            transparent 60deg
        ),
        repeating-conic-gradient(
            from 45deg at 75% 75%,
            transparent 0deg,
            rgba(139, 69, 19, 0.03) 45deg,
            transparent 90deg
        );
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Subtle Italian motif overlay */
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 120px,
            rgba(0, 146, 70, 0.02) 120px,
            rgba(0, 146, 70, 0.02) 125px,
            transparent 125px,
            transparent 130px,
            rgba(206, 43, 55, 0.02) 130px,
            rgba(206, 43, 55, 0.02) 135px
        ),
        /* Decorative corner flourishes */
        radial-gradient(ellipse at 10% 10%, rgba(212, 175, 55, 0.1) 0%, transparent 25%),
        radial-gradient(ellipse at 90% 10%, rgba(212, 175, 55, 0.1) 0%, transparent 25%),
        radial-gradient(ellipse at 10% 90%, rgba(212, 175, 55, 0.1) 0%, transparent 25%),
        radial-gradient(ellipse at 90% 90%, rgba(212, 175, 55, 0.1) 0%, transparent 25%);
    z-index: 1;
    opacity: 0.7;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 24, 16, 0.4);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    flex: 1;
    padding: 2rem;
    color: #f4e4c1;
}

.hero-title {
    font-size: 4rem;
    margin-bottom: 1rem;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    position: relative;
}

.hero-title::after {
    content: '';
    position: absolute;
    right: -60px;
    top: 10px;
    font-size: 2rem;
    opacity: 0.8;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #d4af37;
    font-weight: 500;
    font-style: italic;
}

.hero-description {
    font-size: 0.95rem; /* Smaller description text for better readability */
    margin-bottom: 2rem;
    max-width: 500px;
    line-height: 1.8;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
    color: #2c1810;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    border-color: rgba(244, 228, 193, 0.3);
}

.cta-button:hover::before {
    left: 100%;
}

/* Image Carousel with Rustic Frame */
.hero-image-carousel {
    flex: 1;
    position: relative;
    z-index: 3;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 4px solid transparent;
    background: linear-gradient(#2c1810, #2c1810) padding-box,
                linear-gradient(45deg, #d4af37, #8b4513, #d4af37) border-box;
}

.carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.carousel-slide.active {
    display: block;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-dots {
    text-align: center;
    margin-top: 1rem;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: rgba(244, 228, 193, 0.5);
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.dot.active, .dot:hover {
    background-color: #d4af37;
    border-color: #f4e4c1;
    transform: scale(1.2);
}

/* Large Image Banners with Texture */
.image-banner {
    height: 50vh;
    min-height: 300px;
    background-attachment: scroll;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    margin: 0;
    /* New: make sure the background image always fills the banner
       area, scales by the shorter side, and never repeats */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.image-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: none;
    z-index: 1;
}

.large-menu-banner {
    height: 60vh;
    min-height: 400px;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 24, 16, 0.6);
    z-index: 2;
}

.banner-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #f4e4c1;
    max-width: 800px;
    padding: 2rem;
    margin: 2rem 1rem;
    background: rgba(139, 69, 19, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.banner-content h2 {
    color: #f4e4c1;
    font-size: 2.2rem; /* Smaller banner headings */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    position: relative;
}

.banner-content h2::after {
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

.banner-content p {
    font-size: 1rem; /* Smaller banner text for better readability */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    line-height: 1.6;
    font-style: italic;
}

/* Full Width Image Showcase with Decorative Elements */
.full-width-image-showcase {
    padding: 0;
    margin: 4rem 0;
    position: relative;
}

.full-width-image-showcase::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    z-index: 2;
    background: #faf8f5;
    padding: 0 1rem;
}

.showcase-container {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #8b4513) border-box;
}

.gelato-showcase .showcase-container {
    grid-template-columns: 1fr 1fr;
}

.showcase-content {
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
    color: #f4e4c1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.showcase-content::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.5);
}

.showcase-content h2 {
    color: #f4e4c1;
    font-size: 2rem; /* Smaller showcase headings */
    margin-bottom: 2rem;
}

.showcase-content p {
    font-size: 1rem; /* Smaller showcase text for better readability */
    line-height: 1.8;
    margin-bottom: 2rem;
}

.showcase-button {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
    color: #2c1810;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    align-self: flex-start;
    border: 2px solid transparent;
}

.showcase-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    border-color: rgba(244, 228, 193, 0.3);
}

.showcase-image {
    overflow: hidden;
    position: relative;
}

.showcase-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 49%, rgba(212, 175, 55, 0.1) 50%, transparent 51%);
    z-index: 1;
    pointer-events: none;
}

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

.full-width-image-showcase:hover .showcase-image img {
    transform: scale(1.05);
}

/* About Section with Italian Styling */
.about {
    padding: 5rem 0;
    background-color: #faf8f5;
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(139, 69, 19, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.about-text {
    padding-right: 0;
    position: relative;
}

.about-text::before {
    left: -10px;
    font-size: 2.5rem; /* Smaller decorative quote */
    content: '"';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 4rem;
    color: rgba(139, 69, 19, 0.2);
    font-family: 'Playfair Display', serif;
}

.intro-text {
    font-size: 1.1rem; /* Smaller intro text for better readability */
    color: #8b4513;
    margin-bottom: 2rem;
    font-weight: 500;
    font-style: italic;
}

.about-text p {
    font-size: 0.95rem; /* Smaller body text for better readability */
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.owners-signature {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f4e4c1 0%, #e6d3a3 100%);
    border-left: 5px solid #8b4513;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1);
}

.owners-signature::before {
    content: '✨';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 1.5rem;
}

.owners-signature p {
    font-size: 1.2rem;
    color: #8b4513;
    margin: 0;
}

.about-images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.large-feature-image {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 4px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #8b4513) border-box;
}

.feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.grid-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.grid-img:hover {
    transform: scale(1.05);
    border-color: rgba(212, 175, 55, 0.5);
}

/* Enhanced Specialties Section */
.specialties {
    padding: 5rem 0;
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
    color: #f4e4c1;
    text-align: center;
    position: relative;
}

.specialties::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 20px,
            rgba(212, 175, 55, 0.05) 20px,
            rgba(212, 175, 55, 0.05) 40px
        );
}

.specialties h2 {
    color: #f4e4c1;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.specialty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.specialty-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.specialty-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transform: rotate(45deg);
    transition: transform 0.6s ease;
    opacity: 0;
}

.specialty-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border-color: rgba(212, 175, 55, 0.6);
}

.specialty-card:hover::before {
    opacity: 1;
    transform: rotate(45deg) translate(50%, 50%);
}

.specialty-image {
    width: 100%;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.specialty-image img {
    width: 100%;
    height: 100%;
    /* Ensure image covers the full container and crops from top/bottom if needed */
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    /* Prevent image from being too wide */
    max-width: 100%;
    display: block;
}

.specialty-card:hover .specialty-image img {
    transform: scale(1.1);
}

.specialty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.specialty-card h3 {
    color: #d4af37;
    margin-bottom: 1rem;
    position: relative;
}

.specialty-card p {
    font-size: 0.95rem; /* Smaller specialty descriptions for better readability */
    line-height: 1.6;
}

/* Gallery Section with Decorative Elements */
.gallery {
    padding: 5rem 0;
    background-color: #faf8f5;
    position: relative;
}

.gallery::before {
    content: '🖼️';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    opacity: 0.3;
}

.gallery h2 {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 3px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #8b4513) border-box;
    /* Ensure consistent height for all gallery items */
    height: 250px;
}

.large-gallery-item {
    grid-column: span 2;
    height: 400px;
}

.gallery-item:hover {
    transform: translateY(-5px) rotate(0.5deg);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    /* Ensure images completely fill their containers */
    display: block;
}

.large-gallery-item img {
    height: 100%;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(139, 69, 19, 0.9));
    color: #f4e4c1;
    padding: 2rem 1.5rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    /* Hidden state: no border to eliminate visible stripe */
    border-top: none;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
    /* Visible state: bring back subtle border */
    border-top: 2px solid rgba(212, 175, 55, 0.5);
}

.gallery-overlay h3 {
    color: #d4af37;
    margin: 0;
    font-size: 1.3rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.gallery-overlay p {
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
    font-style: italic;
}

/* Featured Products Section with Italian Styling */
.featured-products {
    padding: 5rem 0;
    background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
    color: #f4e4c1;
    position: relative;
}

.featured-products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 30% 70%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(244, 228, 193, 0.03) 0%, transparent 50%);
}

.featured-products h2 {
    color: #f4e4c1;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.product-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.product-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(212, 175, 55, 0.3);
    position: relative;
}

.product-item::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.5);
    z-index: 1;
}

.product-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border-color: rgba(212, 175, 55, 0.6);
}

.product-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-item:hover img {
    transform: scale(1.05);
}

.product-item h3 {
    color: #d4af37;
    padding: 1.5rem 1.5rem 0.5rem;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.product-item p {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.95rem; /* Smaller product descriptions for better readability */
    line-height: 1.6;
    font-style: italic;
}

/* Location Section with Enhanced Styling */
.location {
    padding: 5rem 0;
    background-color: #faf8f5;
    position: relative;
}

.location::before {
    content: '';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    opacity: 0.3;
}

.location-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.location-details {
    background: linear-gradient(135deg, #f4e4c1 0%, #e6d3a3 100%);
    padding: 2rem;
    border-radius: 15px;
    border-left: 5px solid #8b4513;
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.1);
    position: relative;
}

.location-details::before {
    content: '🏛️';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 1.5rem;
}

.location-details h3 {
    color: #8b4513;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.1);
}

.location-details p {
    font-size: 0.95rem; /* Smaller location text for better readability */
    margin-bottom: 0.5rem;
}

.opening-hours {
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
    padding: 2rem;
    border-radius: 15px;
    color: #f4e4c1;
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.2);
    position: relative;
}

.opening-hours::before {
    content: '🕐';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 1.5rem;
}

.opening-hours h4 {
    color: #d4af37;
    margin-bottom: 1rem;
    font-size: 1.2rem; /* Smaller hours heading */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.opening-hours ul {
    list-style: none;
}

.opening-hours li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.95rem; /* Smaller hours text for better readability */
    position: relative;
}

.opening-hours li::before {
    content: '•';
    color: #d4af37;
    margin-right: 0.5rem;
}

.opening-hours li:last-child {
    border-bottom: none;
}

.map-container {
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 4px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #8b4513) border-box;
}

#map {
    width: 100%;
    height: 100%;
}

/* Footer with Italian Styling */
.footer {
    background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
    color: #f4e4c1;
    padding: 3rem 0 1rem;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #009246 0%, 
        #009246 33.33%, 
        #ffffff 33.33%, 
        #ffffff 66.66%, 
        #ce2b37 66.66%, 
        #ce2b37 100%
    );
}



.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.footer-contact {
    text-align: center;
}

.footer-contact p {
    font-size: 0.95rem; /* Smaller footer text for better readability */
    margin-bottom: 0.8rem;
    color: #f4e4c1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.footer-info p {
    font-size: 0.9rem; /* Smaller footer info for better readability */
    margin-bottom: 0.8rem;
    color: #e6d3a3;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.footer-links a {
    color: #f4e4c1;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid transparent;
}

.footer-links a:hover {
    color: #d4af37;
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.1);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.footer-bottom::before {
    content: 'Autentico Italiano';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2c1810;
    padding: 0 1rem;
    font-size: 0.9rem;
    color: #d4af37;
}

/* Enhanced Menu Styles */
.menu-hero {
    color: #f4e4c1;
    text-align: center;
    padding: 8rem 0 4rem;
    background-attachment: fixed;
    position: relative;
}

.menu-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(212, 175, 55, 0.05) 10px,
            rgba(212, 175, 55, 0.05) 20px
        );
}

.menu-hero h1 {
    color: #f4e4c1;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
}

.menu-hero p {
    font-size: 1.3rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
    font-style: italic;
}

/* Menu Gallery Section */
.menu-gallery {
    padding: 4rem 0;
    background-color: #faf8f5;
    position: relative;
}

.menu-gallery::before {
    content: '🍽️';
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    opacity: 0.3;
}

.menu-gallery h2 {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.menu-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.large-preview {
    grid-column: span 2;
    grid-row: span 2;
}

.menu-preview-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 3px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #8b4513) border-box;
}

.menu-preview-item:hover {
    transform: translateY(-5px) rotate(0.5deg);
}

.menu-preview-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.large-preview img {
    height: 400px;
}

.menu-preview-item:hover img {
    transform: scale(1.1);
}

.preview-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(139, 69, 19, 0.9));
    color: #f4e4c1;
    padding: 2rem 1rem 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.menu-categories {
    padding: 4rem 0;
    position: relative;
}

.menu-category {
    margin-bottom: 4rem;
    position: relative;
}

.category-header {
    color: #f4e4c1;
    padding: 2rem;
    border-radius: 15px 15px 0 0;
    text-align: center;
    background-attachment: fixed;
    position: relative;
}

.category-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: none;
    border-radius: 15px 15px 0 0;
}

.category-header h2 {
    color: #f4e4c1;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
}

.menu-items {
    background: #faf8f5;
    padding: 2rem;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 2px solid rgba(139, 69, 19, 0.1);
    border-top: none;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e6d3a3;
    position: relative;
}

.menu-item:last-child {
    border-bottom: none;
}

/* Featured Menu Items with Images */
.featured-item {
    background: linear-gradient(135deg, #f4e4c1 0%, #e6d3a3 100%);
    padding: 1.5rem;
    border-radius: 15px;
    margin-bottom: 1rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    align-items: flex-start;
    border: 2px solid rgba(139, 69, 19, 0.2);
    position: relative;
}

.featured-item::before {
    content: '⭐';
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 1.2rem;
}

.menu-item-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    border: 3px solid transparent;
    background: linear-gradient(#f4e4c1, #f4e4c1) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #8b4513) border-box;
}

.menu-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-item:hover .menu-item-image img {
    transform: scale(1.1);
}

.item-info h3 {
    color: #8b4513;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.1);
}

.item-description {
    color: #666;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.item-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: #d4af37;
    margin-left: 1rem;
    flex-shrink: 0;
    text-shadow: 1px 1px 2px rgba(212, 175, 55, 0.2);
}

/* Menu Bottom Gallery */
.menu-bottom-gallery {
    padding: 4rem 0;
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
    position: relative;
}

.menu-bottom-gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 15px,
            rgba(212, 175, 55, 0.05) 15px,
            rgba(212, 175, 55, 0.05) 30px
        );
}

.menu-bottom-gallery h2 {
    color: #f4e4c1;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.bottom-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.large-bottom-image {
    grid-column: span 2;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 4px solid transparent;
    background: linear-gradient(#8b4513, #8b4513) padding-box,
                linear-gradient(45deg, #d4af37, #f4e4c1, #d4af37) border-box;
}

.large-bottom-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.bottom-gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.bottom-gallery-grid img:hover {
    transform: scale(1.05);
    border-color: rgba(212, 175, 55, 0.6);
}

/* Legal Pages */
.legal-page {
    padding: 8rem 0 4rem;
    min-height: 80vh;
    position: relative;
}

.legal-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    background: #faf8f5;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 3px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(45deg, #8b4513, #d4af37, #8b4513) border-box;
    position: relative;
    z-index: 1;
}

.legal-content h1 {
    color: #8b4513;
    margin-bottom: 2rem;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.1);
}

.legal-content h2 {
    color: #8b4513;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.1);
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* Menu Welcome Section */
.menu-welcome {
    background: linear-gradient(135deg, #faf8f5 0%, #f5f2e8 100%);
    padding: 3rem 0;
    margin-bottom: 2rem;
}

.welcome-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.welcome-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2c1810;
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-info {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 15px;
    border: 2px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.welcome-info p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: #2c1810;
}

.welcome-info p:last-child {
    margin-bottom: 0;
    color: #8b4513;
    font-style: italic;
}

/* Featured Menu Items - Removed */

/* Menu Info Section (Additives & Allergens) */
.menu-info {
    background: linear-gradient(135deg, #2c1810 0%, #3d2318 100%);
    color: #f4e4c1;
    padding: 3rem 0;
    margin-top: 3rem;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.info-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #d4af37;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 0.5rem;
}

.info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.info-list p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(244, 228, 193, 0.1);
}

.info-list p:last-child {
    border-bottom: none;
}

.info-list sup {
    color: #d4af37;
    font-weight: 600;
    margin-right: 0.3rem;
}

/* Mobile Responsive for New Sections */
@media (max-width: 768px) {
    body {
        padding-top: 85px; /* Adjusted for new navbar height */
    }

    .navbar {
        padding: 0.8rem 0; /* Restored some vertical padding for better spacing */
        overflow-x: hidden; /* Ensure no horizontal overflow */
        min-height: auto; /* Let content determine height */
    }

    .nav-container {
        padding: 0 1rem; /* Added horizontal padding for breathing room */
        margin: 0; /* No horizontal margin for mobile */
        min-width: 0; /* Allow shrinking */
        overflow: hidden;
        align-items: center; /* Center align items vertically */
        justify-content: space-between; /* Ensure proper spacing between logo and hamburger */
    }

    .nav-logo {
        min-width: 0; /* Allow logo to shrink */
        overflow: visible; /* Allow coffee icon to show */
        margin-right: 1rem; /* Add margin to separate from hamburger */
    }

    .nav-logo h2 {
        font-size: 1.4rem; /* Smaller for better mobile readability */
        letter-spacing: 0.4px;
        white-space: nowrap; /* Prevent text wrapping */
    }

    .nav-logo h2::before {
        left: -16px; /* Adjusted offset for text size */
        font-size: 1.1rem; /* Proportional coffee icon */
    }

    .nav-logo .logo-img {
        height: auto !important; /* Auto height for proper scaling */
        max-width: 130px !important; /* Slightly smaller for better balance */
        width: auto !important; /* Maintain aspect ratio */
    }

    .hamburger {
        display: flex;
        padding: 0.8rem; /* Added proper padding for better touch target */
        margin-left: auto; /* Push to the right */
        flex-shrink: 0; /* Don't allow hamburger to shrink */
        background: rgba(139, 69, 19, 0.3); /* More visible background */
        border: 2px solid rgba(212, 175, 55, 0.4); /* More prominent border */
        border-radius: 12px; /* Rounded corners */
        transition: all 0.3s ease;
        min-width: 48px; /* Minimum touch target size */
        min-height: 48px; /* Minimum touch target size */
        align-items: center;
        justify-content: center;
    }

    .hamburger:hover {
        background: rgba(139, 69, 19, 0.5);
        border-color: rgba(212, 175, 55, 0.7);
        transform: scale(1.05);
    }

    .hamburger .bar {
        width: 24px; /* Appropriate bar width */
        height: 3px; /* Thicker bars for visibility */
        margin: 3px 0; /* Good spacing between bars */
    }
    
    .nav-menu {
        position: fixed;
        top: -100%; /* Hidden above the viewport */
        left: 0; /* Keep left aligned */
        z-index: 900; /* Below the navbar (which is 1000) */
        flex-direction: column;
        background: linear-gradient(135deg, #1a0e08 0%, #2c1810 100%);
        width: 100%;
        text-align: center;
        transition: all 0.4s ease;
        box-shadow: 
            0 10px 30px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(212, 175, 55, 0.2);
        padding: 1.5rem 1rem; /* Reduced padding for small screens */
        gap: 1.2rem; /* Reduced gap */
        max-height: calc(100vh - 80px); /* Adjust for navbar height */
    }

    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(212, 175, 55, 0.05) 10px,
                rgba(212, 175, 55, 0.05) 20px
            );
        pointer-events: none;
    }
    
    .nav-menu.active {
        top: 80px;
    }

    .nav-link {
        padding: 1rem 1.5rem; /* Balanced padding for touch targets */
        margin: 0.3rem 0.8rem; /* Appropriate margin for spacing */
        background: rgba(26, 14, 8, 0.6);
        border: 2px solid rgba(212, 175, 55, 0.4); /* Visible border */
        border-radius: 25px; /* Nicely rounded */
        font-size: 1rem; /* Slightly smaller for better readability */
        letter-spacing: 0.6px;
        min-height: 48px; /* Standard touch target height */
        display: flex;
        align-items: center; /* Center align content */
        justify-content: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .nav-link:hover {
        background: rgba(139, 69, 19, 0.7);
        transform: translateY(-2px);
        border-color: rgba(212, 175, 55, 0.7);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    }
    
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem 4rem;
        margin-top: -85px;
        padding-top: 8rem;
    }
    
    .hero-title {
        font-size: 2.2rem; /* Smaller for better mobile readability */
    }

    .hero-subtitle {
        font-size: 1.3rem; /* Smaller subtitle */
    }

    .hero-description {
        font-size: 0.95rem; /* Smaller description text for better readability */
    }

    .hero-title::after {
        right: -35px;
        font-size: 1.3rem;
    }
    
    .hero-image-carousel,
    .carousel-container {
        /* margin-top: 2rem; */
        margin: 2rem auto auto;
        height: 300px;
    }

    .image-banner {
        height: 50vh;
        min-height: 300px;
        background-attachment: scroll;
    }

    .banner-content h2 {
        font-size: 2.2rem; /* Smaller banner headings */
    }

    .banner-content p {
        font-size: 1rem; /* Smaller banner text for better readability */
    }

    .showcase-container {
        grid-template-columns: 1fr;
    }

    .showcase-content {
        padding: 2rem;
    }

    .showcase-content h2 {
        font-size: 2rem; /* Smaller showcase headings */
    }

    .showcase-content p {
        font-size: 1rem; /* Smaller showcase text for better readability */
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-text {
        padding-right: 0;
    }

    .about-text::before {
        left: -10px;
        font-size: 2.5rem; /* Smaller decorative quote */
    }

    .intro-text {
        font-size: 1.1rem; /* Smaller intro text for better readability */
    }

    .about-text p {
        font-size: 0.95rem; /* Smaller body text for better readability */
    }
    
    .image-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .grid-img {
        height: 120px;
    }

    .large-feature-image {
        height: 200px;
    }
    
    .specialty-grid {
        grid-template-columns: 1fr;
    }

    .specialty-card h3 {
        font-size: 1.5rem; /* Smaller specialty titles */
    }

    .specialty-card p {
        font-size: 0.95rem; /* Smaller specialty descriptions for better readability */
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .large-gallery-item {
        grid-column: span 1;
        height: 250px;
    }

    .large-gallery-item img {
        height: 250px;
    }
    
    .product-showcase {
        grid-template-columns: 1fr;
    }

    .product-item h3 {
        font-size: 1.4rem; /* Smaller product titles */
    }

    .product-item p {
        font-size: 0.95rem; /* Smaller product descriptions for better readability */
    }
    
    .location-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .location-details h3 {
        font-size: 1.4rem; /* Smaller location headings */
    }

    .location-details p {
        font-size: 0.95rem; /* Smaller location text for better readability */
    }

    .opening-hours h4 {
        font-size: 1.2rem; /* Smaller hours heading */
    }

    .opening-hours li {
        font-size: 0.95rem; /* Smaller hours text for better readability */
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-contact {
        text-align: center;
    }

    .footer-contact p {
        font-size: 0.95rem; /* Smaller footer text for better readability */
    }

    .footer-info p {
        font-size: 0.9rem; /* Smaller footer info for better readability */
    }
    
    .footer-links {
        justify-content: center;
        gap: 1rem;
    }

    .footer-links a {
        font-size: 0.8rem; /* Smaller footer links for better readability */
        padding: 0.4rem 0.8rem;
    }
    
    .menu-preview-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .large-preview {
        grid-column: span 1;
        grid-row: span 1;
    }

    .large-preview img {
        height: 200px;
    }

    .preview-caption {
        font-size: 1rem; /* Smaller preview captions for better readability */
    }
    
    .featured-item {
        flex-direction: column;
        text-align: center;
    }
    
    .menu-item-image {
        margin-right: 0;
        margin-bottom: 1rem;
        width: 100px;
        height: 100px;
    }
    
    .menu-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .item-info h3 {
        font-size: 1.3rem; /* Smaller menu item titles */
    }

    .item-description {
        font-size: 0.9rem; /* Smaller menu descriptions for better readability */
    }
    
    .item-price {
        margin-left: 0;
        margin-top: 0.5rem;
        font-size: 1.1rem; /* Smaller price text */
    }
    
    .bottom-gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .large-bottom-image {
        grid-column: span 1;
    }

    .large-bottom-image img {
        height: 200px;
    }

    /* Mobile adjustments for decorative elements */
    .gallery::before,
    .gallery::after,
    .location::before,
    .menu-gallery::before {
        display: none;
    }

    .footer-bottom::before {
        font-size: 0.75rem; /* Smaller footer bottom text */
        padding: 0 0.5rem;
    }

    /* Mobile navigation adjustments */
    .nav-logo h2 {
        font-size: 1.6rem;
    }

    .nav-logo h2::before {
        left: -22px;
        font-size: 1.3rem;
    }

    .nav-logo .logo-img {
        height: auto;
    }

    /* Team Section Mobile */
    .team-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .team-section h2 {
        font-size: 1.8rem; /* Smaller team section heading */
    }

    .team-story {
        padding: 1.5rem;
        margin: 0 1rem;
        /* Prevent horizontal overflow */
        max-width: calc(100vw - 2rem);
        box-sizing: border-box;
    }

    .team-story p {
        font-size: 0.95rem; /* Smaller team story text */
        text-align: left;
        /* Ensure proper text wrapping */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .team-image-container {
        margin: 0 1rem;
        /* Prevent horizontal overflow */
        max-width: calc(100vw - 2rem);
        box-sizing: border-box;
    }

    .team-image img {
        height: 250px;
        /* Ensure image doesn't exceed container width */
        width: 100%;
        object-fit: cover;
    }

    .team-roles {
        padding: 1.5rem;
        /* Prevent horizontal overflow */
        max-width: calc(100vw - 2rem);
        box-sizing: border-box;
        margin: 0 1rem;
    }

    .team-roles h3 {
        font-size: 1.2rem; /* Smaller team roles heading */
    }

    .role-group h4 {
        font-size: 1rem; /* Smaller role group headings */
    }

    .role-group li {
        font-size: 0.9rem; /* Smaller role list items */
        /* Ensure proper text wrapping */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Additional mobile text adjustments for better readability */
    .hero-description {
        font-size: 0.95rem !important; /* Smaller hero description */
    }

    .banner-content p {
        font-size: 1rem !important; /* Smaller banner text */
    }

    .showcase-content p {
        font-size: 1rem !important; /* Smaller showcase text */
    }

    .intro-text {
        font-size: 1.1rem !important; /* Smaller intro text */
    }

    .about-text p {
        font-size: 0.95rem !important; /* Smaller about text */
    }

    .specialty-card p {
        font-size: 0.95rem !important; /* Smaller specialty descriptions */
    }

    .product-item p {
        font-size: 0.95rem !important; /* Smaller product descriptions */
    }

    .location-details p {
        font-size: 0.95rem !important; /* Smaller location text */
    }

    .opening-hours li {
        font-size: 0.95rem !important; /* Smaller hours text */
    }

    .footer-contact p {
        font-size: 0.95rem !important; /* Smaller footer contact text */
    }

    .footer-info p {
        font-size: 0.9rem !important; /* Smaller footer info */
    }

    .footer-links a {
        font-size: 0.8rem !important; /* Smaller footer links */
    }

    .preview-caption {
        font-size: 1rem !important; /* Smaller preview captions */
    }

    .item-description {
        font-size: 0.9rem !important; /* Smaller menu descriptions */
    }

    .team-story p {
        font-size: 0.9rem !important; /* Smaller team story text */
    }

    .role-group li {
        font-size: 0.85rem !important; /* Smaller role list items */
    }

    /* Additional content text adjustments */
    .owners-signature p {
        font-size: 1rem !important; /* Smaller owner signature text */
    }

    .gallery-overlay p {
        font-size: 0.9rem !important; /* Smaller gallery overlay text */
    }

    .legal-content p {
        font-size: 0.95rem !important; /* Smaller legal page text */
    }

    .welcome-info p {
        font-size: 1rem !important; /* Smaller welcome info text */
    }

    .info-list p {
        font-size: 0.85rem !important; /* Smaller info list text */
    }

    /* Mobile optimization for Zusatztoffe/Additives section */
    .info-grid {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 2rem !important; /* Reduced gap */
        padding: 0 1rem !important; /* Add horizontal padding */
    }

    .info-list {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 0.3rem !important; /* Reduced gap */
    }

    .info-section {
        margin-bottom: 1.5rem !important; /* Reduced margin */
    }

    .info-section h3 {
        font-size: 1.2rem !important; /* Smaller info section headings */
        margin-bottom: 1rem !important; /* Reduced margin */
        padding-bottom: 0.3rem !important; /* Reduced padding */
    }

    .menu-info {
        padding: 2rem 0 !important; /* Reduced padding */
    }
}

/* Team Section */
.team-section {
    background: linear-gradient(135deg, #faf8f5 0%, #f5f2e8 100%);
    padding: 4rem 0;
    position: relative;
}

.team-section::before {
    content: '🍝';
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: 2rem;
    opacity: 0.1;
    z-index: 1;
}

.team-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #2c1810;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
}

.team-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.team-story {
    background: rgba(255, 255, 255, 0.8);
    padding: 2.5rem;
    border-radius: 15px;
    border: 2px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.team-story::before {
    content: '☕';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 2rem;
    background: #d4af37;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.team-story p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #2c1810;
    text-align: justify;
}

.team-story p:last-child {
    margin-bottom: 0;
}

.team-story strong {
    color: #8b4513;
    font-weight: 600;
}

.team-image-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.team-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.team-image:hover {
    transform: translateY(-5px);
}

.team-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.team-roles {
    background: linear-gradient(135deg, #2c1810 0%, #3d2318 100%);
    color: #f4e4c1;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.team-roles h3 {
    color: #d4af37;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 0.5rem;
}

.role-group {
    margin-bottom: 1.5rem;
}

.role-group:last-child {
    margin-bottom: 0;
}

.role-group h4 {
    color: #d4af37;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.role-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.role-group li {
    padding: 0;
    padding-left: 1.5rem;
    position: relative;
    color: #f4e4c1;
    font-size: 1rem;
}

.role-group li::before {
    content: '✨';
    position: absolute;
    left: -25px;
    color: #d4af37;
    font-size: 0.9rem;
}

/* Additional mobile optimization for very small screens */
@media (max-width: 480px) {
    body {
        padding-top: 80px; /* Consistent with improved navbar height */
    }

    .navbar {
        padding: 0.6rem 0; /* Slightly reduced but still has padding */
        min-height: auto; /* Let content determine height */
    }

    .nav-container {
        padding: 0 0.8rem; /* Slightly reduced but still has padding */
        margin: 0;
        align-items: center; /* Center align items */
        justify-content: space-between; /* Maintain spacing */
    }

    .nav-logo {
        margin-right: 0.8rem; /* Reduced margin for smaller screens */
    }

    .nav-logo h2 {
        font-size: 1.4rem; /* Slightly smaller for very small screens */
        letter-spacing: 0.3px;
    }

    .nav-logo h2::before {
        left: -16px; /* Adjusted offset */
        font-size: 1.1rem;
    }

    .nav-logo .logo-img {
        height: auto !important; /* Auto height for proper scaling */
        max-width: 120px !important; /* Wider logo for better visibility */
        width: auto !important;
    }

    .hamburger {
        padding: 0.6rem; /* Reduced but still adequate padding */
        min-width: 44px; /* Slightly smaller minimum touch target */
        min-height: 44px; /* Slightly smaller minimum touch target */
    }

    .hamburger .bar {
        width: 22px; /* Slightly smaller bars */
        height: 3px;
        margin: 2.5px 0; /* Slightly reduced spacing */
    }

    .nav-menu {
        position: fixed;
        top: -100%; /* Hidden above the viewport */
        left: 0;
        z-index: 900; /* Below the navbar */
        padding: 1.5rem 1rem; /* Reduced padding for small screens */
        gap: 1.2rem; /* Reduced gap */
        max-height: calc(100vh - 80px); /* Adjust for navbar height */
    }

    .nav-link {
        padding: 0.9rem 1.2rem; /* Slightly reduced but still good touch targets */
        margin: 0.2rem 0.5rem; /* Reduced margin */
        font-size: 1rem; /* Slightly smaller font */
        min-height: 44px; /* Slightly smaller but still accessible */
        letter-spacing: 0.6px;
    }

    .hero {
        margin-top: -80px;
        padding-top: 7rem;
    }

        /* Additional text size adjustments for very small screens */
        .hero-description {
            font-size: 0.9rem !important; /* Even smaller hero description */
        }

        .banner-content p {
            font-size: 0.95rem !important; /* Even smaller banner text */
        }

        .showcase-content p {
            font-size: 0.95rem !important; /* Even smaller showcase text */
        }

        .intro-text {
            font-size: 1.05rem !important; /* Even smaller intro text */
        }

        .about-text p {
            font-size: 0.9rem !important; /* Even smaller about text */
        }

        .specialty-card p {
            font-size: 0.9rem !important; /* Even smaller specialty descriptions */
        }

        .product-item p {
            font-size: 0.9rem !important; /* Even smaller product descriptions */
        }

        .location-details p {
            font-size: 0.9rem !important; /* Even smaller location text */
        }

        .opening-hours li {
            font-size: 0.9rem !important; /* Even smaller hours text */
        }

        .footer-contact p {
            font-size: 0.9rem !important; /* Even smaller footer contact text */
        }

        .footer-info p {
            font-size: 0.85rem !important; /* Even smaller footer info */
        }

        .footer-links a {
            font-size: 0.75rem !important; /* Even smaller footer links */
        }

        .preview-caption {
            font-size: 0.95rem !important; /* Even smaller preview captions */
        }

        .item-description {
            font-size: 0.85rem !important; /* Even smaller menu descriptions */
        }

        .team-story p {
            font-size: 0.85rem !important; /* Even smaller team story text */
        }

        .owners-signature p {
            font-size: 0.95rem !important; /* Even smaller owner signature text */
        }

        .gallery-overlay p {
            font-size: 0.85rem !important; /* Even smaller gallery overlay text */
        }

        .legal-content p {
            font-size: 0.9rem !important; /* Even smaller legal page text */
        }

        .welcome-info p {
            font-size: 0.95rem !important; /* Even smaller welcome info text */
        }

        .info-list p {
            font-size: 0.8rem !important; /* Even smaller info list text */
        }
    }

    /* Additional Rustical Italian Styling */

    /* Italian Stone Texture Effect */
    .stone-texture {
        position: relative;
        background-image: 
            radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(160, 82, 45, 0.06) 0%, transparent 50%),
            repeating-linear-gradient(
                0deg,
                transparent,
                transparent 1px,
                rgba(139, 69, 19, 0.02) 1px,
                rgba(139, 69, 19, 0.02) 2px
            );
    }

    /* Enhanced Italian Decorative Elements */
    .italian-flourish {
        position: relative;
    }



    /* Vintage Paper Effect */
    .vintage-paper {
        background: linear-gradient(135deg, #faf8f5 0%, #f5f2e8 100%);
        position: relative;
        box-shadow: 
            inset 0 1px 0 rgba(255,255,255,0.8),
            inset 0 -1px 0 rgba(139,69,19,0.1),
            0 1px 3px rgba(0,0,0,0.1);
    }

    .vintage-paper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            repeating-linear-gradient(
                45deg,
                transparent,
                transparent 40px,
                rgba(139, 69, 19, 0.008) 40px,
                rgba(139, 69, 19, 0.008) 41px
            ),
            repeating-linear-gradient(
                -45deg,
                transparent,
                transparent 35px,
                rgba(212, 175, 55, 0.006) 35px,
                rgba(212, 175, 55, 0.006) 36px
            );
        pointer-events: none;
    }

    /* Italian Flag Border Animation */
    .flag-border {
        position: relative;
        border: 3px solid transparent;
        background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                    linear-gradient(90deg, #009246, #ffffff, #ce2b37) border-box;
        border-radius: 10px;
        animation: flag-glow 3s ease-in-out infinite;
    }

    @keyframes flag-glow {
        0%, 100% { 
            box-shadow: 0 0 5px rgba(0,146,70,0.3); 
        }
        33% { 
            box-shadow: 0 0 8px rgba(255,255,255,0.5); 
        }
        66% { 
            box-shadow: 0 0 5px rgba(206,43,55,0.3); 
        }
    }

    /* Enhanced Text Shadow for Italian Feel */
    .italian-text-shadow {
        text-shadow: 
            2px 2px 4px rgba(139, 69, 19, 0.3),
            1px 1px 2px rgba(0, 146, 70, 0.1),
            3px 3px 6px rgba(206, 43, 55, 0.1);
    }

    /* Enhanced footer with Italian flag stripe */
    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, 
            #009246 0%, 
            #009246 33.33%, 
            #ffffff 33.33%, 
            #ffffff 66.66%, 
            #ce2b37 66.66%, 
            #ce2b37 100%
        );
    }

    .footer::after {
        content: '🇮🇹';
        position: absolute;
        top: 1rem;
        right: 2rem;
        font-size: 2rem;
        opacity: 0.3;
        filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
    }  

/* Additional Rustical Italian Styling */

/* Italian Stone Texture Effect */
.stone-texture {
    position: relative;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(160, 82, 45, 0.06) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(139, 69, 19, 0.02) 1px,
            rgba(139, 69, 19, 0.02) 2px
        );
}

/* Enhanced Italian Decorative Elements */
.italian-flourish {
    position: relative;
}

.italian-flourish::before {
    content: '⚜';
    position: absolute;
    top: -8px;
    left: -15px;
    font-size: 1.2rem;
    color: #d4af37;
    opacity: 0.6;
    transform: rotate(-15deg);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}


/* Vintage Paper Effect */
.vintage-paper {
    background: linear-gradient(135deg, #faf8f5 0%, #f5f2e8 100%);
    position: relative;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.8),
        inset 0 -1px 0 rgba(139,69,19,0.1),
        0 1px 3px rgba(0,0,0,0.1);
}

.vintage-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(139, 69, 19, 0.008) 40px,
            rgba(139, 69, 19, 0.008) 41px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 35px,
            rgba(212, 175, 55, 0.006) 35px,
            rgba(212, 175, 55, 0.006) 36px
        );
    pointer-events: none;
}

/* Italian Flag Border Animation */
.flag-border {
    position: relative;
    border: 3px solid transparent;
    background: linear-gradient(#faf8f5, #faf8f5) padding-box,
                linear-gradient(90deg, #009246, #ffffff, #ce2b37) border-box;
    border-radius: 10px;
    animation: flag-glow 3s ease-in-out infinite;
}

@keyframes flag-glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(0,146,70,0.3); 
    }
    33% { 
        box-shadow: 0 0 8px rgba(255,255,255,0.5); 
    }
    66% { 
        box-shadow: 0 0 5px rgba(206,43,55,0.3); 
    }
}

/* Enhanced Text Shadow for Italian Feel */
.italian-text-shadow {
    text-shadow: 
        2px 2px 4px rgba(139, 69, 19, 0.3),
        1px 1px 2px rgba(0, 146, 70, 0.1),
        3px 3px 6px rgba(206, 43, 55, 0.1);
}

/* Rustic Border with Worn Effect */
.rustic-border {
    border: 4px solid #8b4513;
    border-radius: 15px;
    position: relative;
    background-clip: padding-box;
}

.rustic-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #d4af37 0%, 
        #8b4513 25%, 
        #009246 50%, 
        #ce2b37 75%, 
        #d4af37 100%
    );
    border-radius: 17px;
    z-index: -1;
    opacity: 0.3;
}

/* Apply enhanced styling to key sections */
.about, .specialties, .gallery, .featured-products, .location {
    background-attachment: fixed;
}

.about-content, .specialty-card, .gallery-item, .product-item, .location-details {
    @extend .vintage-paper;
}

.hero-title, .banner-content h2, .specialties h2, .gallery h2 {
    @extend .italian-text-shadow;
}

.showcase-container, .large-feature-image, .carousel-container {
    @extend .rustic-border;
}

/* Enhanced footer with Italian styling */
.footer {
    background: linear-gradient(135deg, #1a0e08 0%, #2c1810 50%, #3d2318 100%);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #009246 0%, 
        #009246 33.33%, 
        #ffffff 33.33%, 
        #ffffff 66.66%, 
        #ce2b37 66.66%, 
        #ce2b37 100%
    );
}




/* Individual letter styling for D.O.C. Italian Flag Colors with Thinner Contour */
.doc-letter-d {
    color: #009246; /* Green for D */
    text-shadow: 
        /* Thinner white contour */
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  0px 0 #ffffff,
         0px  1px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         /* Drop shadow */
         2px 2px 4px rgba(0,0,0,0.3);
}

.doc-letter-o {
    color: #ffffff; /* White for O */
    text-shadow: 
        /* Thinner white contour */
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  0px 0 #ffffff,
         0px  1px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         /* Drop shadow */
         2px 2px 4px rgba(0,0,0,0.5);
}

.doc-letter-c {
    color: #ce2b37; /* Red for C */
    text-shadow: 
        /* Thinner white contour */
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  0px 0 #ffffff,
         0px  1px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         /* Drop shadow */
         2px 2px 4px rgba(0,0,0,0.3);
}

.doc-dot {
    color: #ffffff; /* White for dots */
    text-shadow: 
        /* Thinner white contour */
        -1px -1px 0 #ffffff,
        -1px  0px 0 #ffffff,
        -1px  1px 0 #ffffff,
         0px -1px 0 #ffffff,
         0px  0px 0 #ffffff,
         0px  1px 0 #ffffff,
         1px -1px 0 #ffffff,
         1px  0px 0 #ffffff,
         1px  1px 0 #ffffff,
         /* Drop shadow */
         2px 2px 4px rgba(0,0,0,0.5);
}

/* Ensure images fill their containers without baseline whitespace */
.gallery-item img,
.large-gallery-item img,
.product-item img,
.menu-preview-item img,
.large-preview img,
.bottom-gallery-grid img,
.menu-item-image img,
.grid-img,
.feature-img,
.team-image img,
.carousel-slide img,
.showcase-image img {
    display: block;
    width: 100%;
    /* Removed height: 100% to respect pre-defined heights where set */
    object-fit: cover;
}

/* Disable hover-zoom on touch devices to avoid white crop lines */
@media (hover: none) {
    .gallery-item:hover img,
    .product-item:hover img,
    .menu-preview-item:hover img,
    .bottom-gallery-grid img:hover,
    .grid-img:hover,
    .large-feature-image:hover .feature-img,
    .full-width-image-showcase:hover .showcase-image img {
        transform: none;
    }
}

/* Fix: remove visible stripe at bottom of gallery images caused by overlay border */
.gallery-overlay {
    border-top: none !important;
}

.gallery-item:hover .gallery-overlay {
    border-top: 2px solid rgba(212, 175, 55, 0.5) !important;
}

/* Team Section Mobile - Comprehensive Optimization with Proper Centering */
@media (max-width: 768px) {
    .team-section {
        padding: 2rem 0 !important; /* Reduced padding for mobile */
    }

    .team-content {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important; /* Add horizontal padding for centering */
        margin: 0 auto !important; /* Center the content */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .team-section h2 {
        font-size: 1.6rem !important; /* Smaller team section heading */
        margin-bottom: 2rem !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .team-story {
        padding: 1.2rem !important;
        margin: 0 auto !important; /* Center the story box */
        /* Prevent horizontal overflow while allowing centering */
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* Remove decorative elements that might cause overflow */
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .team-story::before {
        display: none !important; /* Hide decorative coffee icon on mobile */
    }

    .team-story p {
        font-size: 0.85rem !important; /* Smaller team story text */
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
        /* Ensure proper text wrapping */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    .team-story p:last-child {
        margin-bottom: 0 !important;
    }

    .team-story strong {
        color: #8b4513 !important;
        font-weight: 600 !important;
        /* Ensure strong text doesn't break layout */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .team-image-container {
        margin: 0 auto !important; /* Center the image container */
        /* Prevent horizontal overflow while allowing centering */
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .team-image {
        margin: 0 auto !important; /* Center individual images */
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        /* Disable hover effects on mobile */
        transition: none !important;
        max-width: 100% !important;
    }

    .team-image:hover {
        transform: none !important;
    }

    .team-image img {
        height: 200px !important; /* Smaller image height for mobile */
        width: 100% !important;
        object-fit: cover !important;
        transition: none !important; /* Disable hover zoom */
    }

    .team-image:hover img {
        transform: none !important;
    }

    .team-roles {
        padding: 1.2rem !important;
        margin: 0 auto !important; /* Center the roles box */
        /* Prevent horizontal overflow while allowing centering */
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: linear-gradient(135deg, #2c1810 0%, #3d2318 100%) !important;
        color: #f4e4c1 !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    }

    .team-roles h3 {
        font-size: 1.1rem !important; /* Smaller team roles heading */
        margin-bottom: 1rem !important;
        text-align: center !important;
        color: #d4af37 !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
        padding-bottom: 0.5rem !important;
        /* Prevent heading from causing overflow */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .role-group {
        margin-bottom: 1rem !important;
    }

    .role-group:last-child {
        margin-bottom: 0 !important;
    }

    .role-group h4 {
        font-size: 0.9rem !important; /* Smaller role group headings */
        margin-bottom: 0.3rem !important;
        color: #d4af37 !important;
        font-weight: 600 !important;
        /* Prevent heading from causing overflow */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .role-group ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .role-group li {
        font-size: 0.8rem !important; /* Smaller role list items */
        padding: 0.2rem 0 !important;
        padding-left: 1rem !important;
        position: relative !important;
        color: #f4e4c1 !important;
        /* Ensure proper text wrapping */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    .role-group li::before {
        content: '✨' !important;
        position: absolute !important;
        left: 0 !important;
        color: #d4af37 !important;
        font-size: 0.7rem !important;
    }
}

/* Fix: Proper centering for team section on mobile */
@media (max-width: 768px) {
    .team-content {
        padding: 0 1rem !important; /* Add horizontal padding for breathing room */
        margin: 0 auto !important; /* Center the content */
    }

    .team-story,
    .team-image-container,
    .team-roles {
        margin: 0 auto !important; /* Center each section */
        width: 100% !important; /* Full width within container */
        max-width: none !important; /* Remove restrictive max-width */
    }

    .team-image {
        margin: 0 auto !important; /* Center images */
        max-width: 100% !important;
    }
}

/* Enhanced Menu Mobile Font Adjustments */
.menu-hero h1 {
    font-size: 2rem !important; /* Smaller menu hero title */
}

.menu-hero p {
    font-size: 1rem !important; /* Smaller menu hero subtitle */
}

.welcome-content h2 {
    font-size: 1.8rem !important; /* Smaller welcome heading */
}

.welcome-info p {
    font-size: 0.85rem !important; /* Smaller welcome info text */
}

.category-header h2 {
    font-size: 1.6rem !important; /* Smaller category headings */
}

.item-info h3 {
    font-size: 1.1rem !important; /* Even smaller menu item titles */
}

.item-description {
    font-size: 0.8rem !important; /* Even smaller menu descriptions */
}

.item-price {
    font-size: 1rem !important; /* Smaller price text */
}

.info-section h3 {
    font-size: 1.4rem !important; /* Smaller info section headings */
}

.info-list p {
    font-size: 0.75rem !important; /* Even smaller info list text */
}

.menu-bottom-gallery h2 {
    font-size: 1.8rem !important; /* Smaller gallery heading */
}

/* Enhanced Menu Mobile Font Adjustments - Even Smaller for Better Fit */
.menu-hero h1 {
    font-size: 1.8rem !important; /* Even smaller menu hero title */
}

.menu-hero p {
    font-size: 0.9rem !important; /* Even smaller menu hero subtitle */
}

.welcome-content h2 {
    font-size: 1.6rem !important; /* Even smaller welcome heading */
}

.welcome-info p {
    font-size: 0.8rem !important; /* Even smaller welcome info text */
}

.category-header h2 {
    font-size: 1.4rem !important; /* Even smaller category headings */
}

.item-info h3 {
    font-size: 0.95rem !important; /* Much smaller menu item titles */
}

.item-description {
    font-size: 0.7rem !important; /* Much smaller menu descriptions */
}

.item-price {
    font-size: 0.9rem !important; /* Smaller price text */
}

.menu-item {
    padding: 0.8rem 0 !important; /* Reduced padding for tighter spacing */
}

.featured-item {
    padding: 1rem !important; /* Smaller padding for featured items */
}

.menu-items {
    padding: 1.5rem !important; /* Reduced container padding */
}

.info-section h3 {
    font-size: 1.2rem !important; /* Smaller info section headings */
}

.info-list p {
    font-size: 0.7rem !important; /* Much smaller info list text */
}

.menu-bottom-gallery h2 {
    font-size: 1.6rem !important; /* Smaller gallery heading */
}

/* Even smaller menu fonts for very small screens */
.menu-hero h1 {
    font-size: 1.6rem !important; /* Extra small menu hero title */
}

.menu-hero p {
    font-size: 0.8rem !important; /* Extra small menu hero subtitle */
}

.welcome-content h2 {
    font-size: 1.4rem !important; /* Extra small welcome heading */
}

.welcome-info p {
    font-size: 0.75rem !important; /* Extra small welcome info text */
}

.category-header h2 {
    font-size: 1.2rem !important; /* Extra small category headings */
}

.item-info h3 {
    font-size: 0.85rem !important; /* Extra small menu item titles */
}

.item-description {
    font-size: 0.65rem !important; /* Extra small menu descriptions */
}

.item-price {
    font-size: 0.8rem !important; /* Extra small price text */
}

.menu-item {
    padding: 0.6rem 0 !important; /* Extra tight spacing */
}

.featured-item {
    padding: 0.8rem !important; /* Extra small padding for featured items */
}

.menu-items {
    padding: 1rem !important; /* Extra reduced container padding */
}

.info-section h3 {
    font-size: 1rem !important; /* Extra small info section headings */
}

.info-list p {
    font-size: 0.65rem !important; /* Extra small info list text */
}

/* Desktop-specific font size enhancements for menu hero and welcome section */
@media (min-width: 769px) {
    .menu-hero h1 {
        font-size: 3rem !important; /* Larger menu hero title for desktop */
    }

    .menu-hero p {
        font-size: 1.4rem !important; /* Larger menu hero subtitle for desktop */
    }

    .welcome-content h2 {
        font-size: 2.4rem !important; /* Larger welcome heading for desktop */
    }

    .welcome-info p {
        font-size: 1.1rem !important; /* Larger welcome info text for desktop */
    }

    /* Desktop-specific specialty image adjustments */
    .specialty-image {
        height: 160px !important; /* Smaller height for desktop */
    }

    .specialty-image img {
        object-position: center 30% !important; /* Crop more from top and bottom, focus on center-upper area */
    }
}

/* Mobile-specific fixes for banner-content and footer */
@media (max-width: 768px) {
    .banner-content {
        margin: 2rem 1rem 3rem 1rem !important; /* Override margin shorthand: top right bottom left */
    }

    .footer {
        padding-bottom: 2rem !important; /* Increase bottom padding to prevent cut-off */
    }
}

/* Additional mobile fix: ensure image banners expand and have bottom margin */
@media (max-width: 768px) {
    .image-banner,
    .large-menu-banner {
        height: auto !important; /* Allow banner to expand to fit content */
        min-height: 0 !important; /* Remove minimum to allow auto */
        margin-bottom: 3rem !important; /* Space below banner */
    }
}

/* Desktop-specific gelato showcase size & cropping */
.full-width-image-showcase .showcase-container {
    min-height: 380px !important; /* reduce overall height */
    height: 380px !important;
}

.full-width-image-showcase .showcase-image img {
    object-position: center 35% !important; /* crop top & bottom */
}

/* Refined desktop Gelato showcase sizing & centering */
@media (min-width: 992px) {
    .full-width-image-showcase .showcase-container {
        width: 90% !important;        /* occupy ~90% of page width */
        margin: 0 auto !important;    /* center horizontally */
        max-width: 1400px;            /* safeguard on very wide screens */
        min-height: 420px !important; /* adjusted height for better aspect ratio */
        height: 1000px !important;
    }

    .full-width-image-showcase .showcase-image img {
        object-position: center 70% !important; /* Crop top, show more of the bottom */
    }
}

/* Mobile override: ensure Gelato showcase image is visible */
@media (max-width: 991px) {
    .full-width-image-showcase .showcase-container {
        height: auto !important;   /* let content define height */
        min-height: 0 !important;  /* remove fixed min-height */
    }

    .full-width-image-showcase .showcase-image img {
        object-position: center 50% !important; /* standard centering */
    }
}

/* Desktop-specific adjustments for the large feature image */
@media (min-width: 992px) {
    .large-feature-image {
        height: 500px !important; /* Taller feature image for desktop */
    }
}

/* --------------------------------------------
   Fine-tune background cropping for key banners
   -------------------------------------------- */

/* 1. Atmosphere banner – show more of the upper image area */
.parallax-banner {
    /* Shift focus upward: keep horizontal centring but reveal upper 25% */
    background-position: center 25% !important;
}

/* 2. Menu hero – focus on upper part of the background image */
.menu-hero {
    /* Override inline style value; display image from slightly higher viewpoint */
    background-position: center 20% !important;
}

/* --------------------------------------------
   Mobile re-ordering: Team-Section (Bild → Namen → Rollen)
   -------------------------------------------- */
@media (max-width: 768px) {
    /* Use flex column flow for simpler ordering */
    .team-content {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 1️⃣ Bild */
    .team-image-container {
        order: 1 !important;
    }

    /* 2️⃣ Rollen-/Namensliste */
    .team-roles {
        /* already inside image-container → remains after Bild */
    }

    /* 3️⃣ Story-Text */
    .team-story {
        order: 2 !important;
    }
}

/* --------------------------------------------
   Cookie Banner Styling
   -------------------------------------------- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 14, 8, 0.95);
    color: #f4e4c1;
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
}

.cookie-banner button {
    background: #d4af37;
    border: none;
    color: #2c1810;
    padding: 0.5rem 1.2rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-banner button:hover {
    background: #b8941f;
    transform: translateY(-1px);
}