* {
    margin: 0;
    padding: 0;
}
:root {
   /* === TUNE THESE to match 1:1 === */
   --card-width: 1000px;
   /* overall visible photo width */
   --radius: 9px;
   /* corner rounding */
   --tilt: -1.2deg;
   /* photo tilt */
   --back-tilt: -7deg;
   /* backplate tilt (often same as photo) */
   --back-offset-x: 18px;
   /* backplate shift right */
   --back-offset-y: 1px;
   /* backplate shift down */
   --back-padding: 21px;
   /* how much larger the backplate is */
   --back-color: #d9d9d9;
   /* grey behind */
   --main-red: #8B2323;
   --text-dark: #333;
   --text-light: #666;
 }
 .white_space {
    width: 100%;
    height: 120px;
    background-color: #ffffff;
}

.hero-main-wrapper {
        display: flex;
        justify-content: center;
        align-items: flex-start; /* Aligns to the top */
        width: 100%;
        min-height: 100vh;
        padding: 40px 20px;
        background-color: #ffffff;
        font-family: 'Georgia', serif;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .hero-inner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 1200px; /* Large hero width */
    }

    /* --- Hero Image Styling & Animations --- */
    .hero-image-box {
        width: 100%;
        border-radius: 25px; /* Keeps the rounded look */
        overflow: hidden; /* Clips the image to the rounded corners */
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        margin-bottom: 40px;
        opacity: 0;
        animation: heroReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .hero-banner-img {
        width: 100%;
        height: 500px; /* Adjust height for the "Big" look */
        object-fit: cover; /* Ensures image fills space without stretching */
        display: block;
        transition: transform 0.8s ease;
        cursor: pointer;
    }

    /* Hover effect: Subtle zoom on the image itself */
    .hero-banner-img:hover {
        transform: scale(1.05);
    }

    /* --- Typography & Text Animation --- */
    .hero-display-text {
        font-size: 3rem; /* Extra large font for hero section */
        color: #1a1a1a;
        line-height: 1.2;
        margin: 0;
        font-weight: 400;
        opacity: 0;
        transform: translateY(20px);
        animation: textFadeUp 1s ease-out 0.8s forwards; /* Starts after image reveal */
    }

    /* --- Keyframe Animations --- */
    @keyframes heroReveal {
        0% {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes textFadeUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* --- Responsive Behavior --- */
    @media (max-width: 1024px) {
        .hero-banner-img {
            height: 400px;
        }
        .hero-display-text {
            font-size: 2.2rem;
        }
    }

    @media (max-width: 768px) {
        .hero-banner-img {
            height: 300px;
        }
        .hero-display-text {
            font-size: 1.8rem;
        }
        .hero-main-wrapper {
            padding-top: 20px;
        }
    }
 /* demo page styling (optional) */


 .photo-card {
   width: min(var(--card-width), 92vw);
   position: relative;
   margin: 0 auto;
   /* gives the backplate room so it doesn't get clipped */
   padding: calc(var(--back-padding) + var(--back-offset-y)) calc(var(--back-padding) + var(--back-offset-x)) var(--back-padding) var(--back-padding);
 }

 /* the grey “paper” behind */
 .photo-card::before {
   content: "";
   position: absolute;
   z-index: 0;

   /* backplate is larger than the photo and sits behind it */
   top: var(--back-padding);
   left: var(--back-padding);
   right: calc(var(--back-padding) + var(--back-offset-x));
   bottom: calc(var(--back-padding) + var(--back-offset-y));

   background: var(--back-color);
   border-radius: calc(var(--radius) + 2px);

   transform:
     translate(var(--back-offset-x), var(--back-offset-y)) rotate(var(--back-tilt));
 }

 /* the photo itself */
 .photo-card img {
   position: relative;
   z-index: 1;

   width: 100%;
   height: auto;
   display: block;

   border-radius: var(--radius);
   transform: rotate(var(--tilt));
   transform-origin: center center;

   /* subtle lift like in your screenshot */
   box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
 }

 .team-section {
   padding: 80px 20px;
   background-color: #fff;
   text-align: center;
 }

 .section-title {
   font-size: 36px;
   color: var(--main-red);
   margin-bottom: 60px;
   font-weight: 400;
 }

 /* --- The Grid --- */
 .team-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 40px 20px;
   /* Vertical gap 40px, Horizontal 20px */
   max-width: 900px;
   /* Limits width so only 3 fit in a row on desktop */
   margin: 0 auto;
 }

 .team-member {
   /* On large screens, this width ensures 3 per row (3 * 280px < 900px) */
   flex: 0 1 280px;
   display: flex;
   flex-direction: column;
   align-items: center;
   transition: transform 0.3s ease;
 }

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

 .photo-box {
   width: 220px;
   height: 220px;
   background-color: #e0e0e0;
   /* Light grey placeholder */
   border-radius: 15px;
   margin-bottom: 15px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .photo-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .member-name {
   font-size: 20px;
   color: var(--text-dark);
   margin: 5px 0 0;
   font-weight: 500;
 }

 .member-role {
   font-size: 14px;
   color: var(--text-light);
   margin: 2px 0 0;
   font-weight: 300;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 768px) {
   .team-grid {
     gap: 30px 10px;
   }

   .team-member {
     flex: 0 1 45%;
     /* Shows 2 per row on tablets */
   }

   .photo-box {
     width: 160px;
     height: 160px;
   }
 }

 @media (max-width: 480px) {
   .team-member {
     flex: 0 1 100%;
     /* Shows 1 per row on small phones */
   }

   .section-title {
     font-size: 28px;
   }
 }
         .restaurant-container {
            /* Centering logic inside the container */
            display: flex;
            justify-content: center; /* Horizontal center */
            
            /* Full screen height */
            width: 100%;
            padding: 0;              /* No top/bottom padding */
            background-color: #ffffff;
        }

        /* This inner wrapper ensures the text stays left-aligned 
           while the block itself is centered */
        .content-wrapper {
            max-width: 750px;
            text-align: left; 
            padding: 0 20px; /* Side padding for mobile safety */
        }

        .headline {
            color: #8b2323; 
            font-family: "Georgia", "Times New Roman", serif;
            font-size: 36px;
            font-weight: 400;
            margin: 0 0 10px 0; /* No top margin */
        }

        .body-text {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 17px;
            line-height: 1.4;
            color: #000000;
            margin: 0 0 8px 0;
        }

        .body-text:last-child {
            margin-bottom: 0;
        }


        .main-container {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #ffffff;
            
            /* Layout logic moved here */
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: flex-start; /* Align to Top */
            min-height: 100vh;
            padding: 50px 20px;
            width: 100%;
            box-sizing: border-box; /* Ensures padding doesn't break width */
        }

        /* Main Container Styling */
        .testimonial-section {
            background-color: #f3ebe6;
            border-radius: 15px;
            padding: 60px 40px;
            max-width: 1200px;
            width: 100%;
            text-align: center;
            box-sizing: border-box; /* Added manually since * is banned */
        }

        /* Heading Styling */
        .testimonial-section h2 {
            font-family: 'Georgia', 'Times New Roman', serif;
            color: #8a2a2a;
            font-size: 2.5rem;
            font-weight: 400;
            margin: 0 0 50px 0; /* Reset margins manually */
        }

        /* Grid Layout for Cards */
        .cards-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            box-sizing: border-box;
        }

        /* Individual Card Styling */
        .card {
            background-color: white;
            border-radius: 8px;
            padding: 30px 20px;
            width: 320px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1 1 300px;
            max-width: 350px;
            box-sizing: border-box;
            margin-bottom: 0;
        }

        /* Star Rating */
        .stars {
            color: #fdbf2d;
            font-size: 1.2rem;
            margin-bottom: 15px;
            letter-spacing: 2px;
        }

        /* Review Text */
        .card p {
            color: #333;
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0 0 20px 0; /* Reset margins manually */
        }

        /* Reviewer Name */
        .reviewer-name {
            color: #a65e5e;
            font-family: 'Georgia', serif;
            font-size: 0.9rem;
            margin-top: auto;
            font-style: italic;
        }

        @media (max-width: 768px) {
            .testimonial-section h2 {
                font-size: 2rem;
            }
            .testimonial-section {
                padding: 30px 20px;
            }
        }