:root {
    --primary-color: #c7483b;
    --secondary-color: #009fe3;
    --white-color: #ffffff;
    --dark-color: #333;
    --light-gray-color: #f4f4f4;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--white-color);
}

section
{
    overflow: hidden;
}

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

.section-title
{
    text-align: center;
    margin-bottom: 20px;
}

/* Header */
.header {
    background-color: var(--white-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark-color);
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--dark-color);
}

/* Hero Section */
/* ================================================================ */
/* =========== NEW MODERN HERO SECTION STYLES ===================== */
/* ================================================================ */

/* Keyframes for the floating animation of accent shapes */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* Wrapper to contain the section and its absolutely positioned elements */
.hero-wrapper {
    position: relative;
    background: linear-gradient(to right, rgba(0, 159, 227, 0.05), rgba(199, 72, 59, 0.05));
    overflow: hidden; /* This is crucial to contain the accents */
}

.hero-section {
    min-height: 90vh;
    padding: 60px 0;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-section .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2; /* Ensures content is above the accent shapes */
}

/* --- Hero Content (Left Side) --- */
.hero-content {
    /* The grid handles the width, so max-width is not needed */
}

.hero-content h1 {
    font-size: 3.5rem; /* Slightly larger for more impact */
    margin-bottom: 25px;
    color: var(--primary-color);
    position: relative;
    display: inline-block; /* Makes the ::after element position correctly */
}

/* Decorative underline for the headline */
.hero-content h1::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 60%;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.hero-content p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 35px;
}

/* --- Hero Button --- */
.btn-hero {
    padding: 15px 35px;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(199, 72, 59, 0.2);
    transition: all 0.3s ease-in-out;
}

.btn-hero:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(199, 72, 59, 0.3);
    background-color: #a63a2f;
}

/* --- Hero Image (Right Side) --- */
.hero-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-image {
    width: 100%;
    max-width: 450px; /* Control max size of the image container */
    height: 550px;
    /* This creates the organic "blob" shape. Feel free to play with the values! */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    overflow: hidden;
    animation: float 8s ease-in-out infinite reverse; /* Subtle float animation on image */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the shape without distortion */
    transform: scale(1.05); /* Slightly zoomed in to prevent edges showing */
}

/* --- Decorative Accent Shapes --- */
.hero-accent {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
}

.hero-accent-1 {
    width: 200px;
    height: 200px;
    background: rgba(0, 159, 227, 0.1);
    top: 10%;
    right: 35%;
    animation: float 6s ease-in-out infinite;
}

.hero-accent-2 {
    width: 80px;
    height: 80px;
    background: rgba(199, 72, 59, 0.15);
    bottom: 20%;
    left: 5%;
    animation: float 7s ease-in-out infinite;
    animation-delay: 1s; /* Stagger the animation */
}


/* --- Responsive Adjustments --- */
@media(max-width: 992px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }
    .hero-image {
        max-width: 350px;
        height: 450px;
    }
}

@media(max-width: 768px) {
    .hero-section {
        padding: 80px 0;
        min-height: auto;
    }
    .hero-section .container {
        grid-template-columns: 1fr; /* Stack content and image */
        text-align: center;
    }
    .hero-content h1::after {
        left: 50%;
        transform: translateX(-50%); /* Center the underline */
    }
    .hero-image-container {
        grid-row: 1; /* Make image appear first on mobile */
        margin-bottom: 40px;
    }
    .hero-image {
        max-width: 300px;
        height: 380px;
        margin: 0 auto;
    }
    .hero-accent-1 { display: none; } /* Hide some accents on smaller screens to avoid clutter */
    .hero-accent-2 {
        bottom: 10%;
        left: -20px;
    }
}

/* About Section */
/* ================================================================= */
/* =========== NEW MODERN ABOUT US SECTION STYLES ================== */
/* ================================================================= */

.about-section-redesigned {
    padding: 120px 0;
    position: relative;
    background-color: var(--light-gray-color);
    overflow: hidden; /* Important for containing gradient pseudo-elements */
}

/* The Smooth Gradient Background */
.about-section-redesigned::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 159, 227, 0.1), transparent 70%);
    z-index: 0;
    animation: float 10s ease-in-out infinite; /* Re-use floating animation */
}

.about-section-redesigned .container {
    position: relative; /* Ensures container content is above the pseudo-element */
    z-index: 1;
}

/* The Grid Layout for Overlapping Cards */
.about-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column grid for precise control */
    align-items: center;
    gap: 30px;
}

/* The Image Card (Left Side, Behind) */
.about-image-card {
    grid-column: 1 / span 7; /* Starts at column 1, spans 7 columns */
    grid-row: 1; /* Sits on the first row */
    z-index: 1;
    border-radius: 15px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg); /* Adds a slight, dynamic tilt */
    transition: transform 0.4s ease;
}

.about-image-card:hover {
    transform: rotate(0) scale(1.02); /* Straightens and scales up on hover */
}

.about-image-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

/* The Content Card (Right Side, in Front) */
.about-content-card {
    grid-column: 6 / span 7; /* Starts at column 6, spans 7 columns */
    grid-row: 1; /* Also on the first row, creating the overlap */
    z-index: 2;
    background: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    backdrop-filter: blur(15px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(15px);
    padding: 50px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-content-card h2 {
    font-size: 2.8rem;
    margin-bottom: 25px;
    color: var(--secondary-color);
    position: relative;
    padding-left: 20px;
    border-left: 4px solid var(--primary-color);
}

.about-content-card p {
    margin-bottom: 30px;
    line-height: 1.7;
    color: #444;
}

/* Highlighted Core Values */
.about-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.value-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--dark-color);
}

.value-item svg {
    color: var(--primary-color);
}

/* --- Responsive Adjustments --- */
@media(max-width: 992px) {
    .about-grid {
        display: block;
        grid-template-columns: 1fr; /* Stack columns on tablets */
    }
 
    .about-image-card, .about-content-card {
        grid-column: 1 / -1; /* Make each element span the full width */
    }
    .about-image-card {
        transform: rotate(0); /* Remove rotation */
        margin-bottom: 20px; /* Adjust overlap for vertical layout */
    }
    .about-content-card {
        padding: 40px;
    }
}

@media(max-width: 768px) {
    .about-section-redesigned {
        padding: 80px 0;
    }
    .about-image-card {
        margin-bottom: 20px; /* No overlap on small screens, stack cleanly */
    }
    .about-values {
        flex-direction: column; /* Stack the value items */
        align-items: flex-start;
    }
    .about-content-card h2 {
        font-size: 2rem;
    }
}

/* Services Section */
.services-section-tabs {
    padding: 100px 0;
    background-color: var(--white-color);
}

.services-header {
    text-align: center;
    margin-bottom: 50px;
}

.services-header .section-subtitle {
    font-size: 1.1rem;
    color: #555;
    max-width: 700px;
    margin: 15px auto 0;
}

/* Tab Navigation Styling */
.service-tabs-nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 50px;
}

.service-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
    transition: all 0.3s ease;
    transform: translateY(1px); /* Aligns with the container border */
}

.service-tab-btn:hover {
    color: var(--primary-color);
    background-color: rgba(199, 72, 59, 0.05);
}

.service-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.service-tab-btn svg {
    width: 22px;
    height: 22px;
}


/* Tab Content Styling */
.service-tabs-content {
    position: relative;
    min-height: 450px; /* Prevents layout shift during tab changes */
}

.service-tab-pane {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    
    /* --- The Magic for Smooth Transitions --- */
    opacity: 0;
    visibility: hidden;
    position: absolute; /* Allows panes to stack on top of each other */
    width: 100%;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.service-tab-pane.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* Brings the active pane into the document flow */
    transform: translateY(0);
}

.service-tab-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.service-tab-text h3 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.service-tab-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}


/* --- Responsive Adjustments --- */
@media(max-width: 992px) {
    .service-tab-pane {
        gap: 30px;
    }
    .service-tab-text h3 {
        font-size: 1.8rem;
    }
}

@media(max-width: 768px) {
    .service-tabs-nav {
        flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    }
    .service-tab-pane {
        grid-template-columns: 1fr; /* Stack image and text */
        text-align: center;
    }
    .service-tab-image {
        margin-bottom: 30px;
    }
    .service-tabs-content {
        min-height: 0; /* Let content determine height */
    }
}

/* Testimonials Section */
/* ================================================================= */
/* ========= NEW TESTIMONIALS SLIDER SECTION STYLES ================ */
/* ================================================================= */

.testimonials-section-redesigned {
    padding: 120px 0;
    background: linear-gradient(45deg, var(--secondary-color), #007cb3);
    color: var(--white-color);
    position: relative;
    overflow: hidden;
}

.testimonial-slider-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 40px;
    min-height: 350px; /* Set a minimum height */
    display: flex; /* Use flex to help with alignment */
    align-items: center;
}

/* Giant Decorative Quotes */
.testimonial-bg-quotes {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 12rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.05);
    z-index: 1;
    line-height: 1;
}

/* Slider Container */
.testimonial-slider {
    position: relative;
    width: 100%;
}

.testimonial-slide {
    display: grid;
    grid-template-columns: 150px 1fr; /* Column for image, column for text */
    align-items: center;
    gap: 40px;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.95);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    z-index: 2;
}

.testimonial-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* Brings active slide into flow */
    transform: translateY(-10%) scale(1);
}

.testimonial-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--white-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.testimonial-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    position: relative;
}

.testimonial-text {
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 20px 0;
    border: none;
}

.testimonial-author {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Slider Navigation Buttons */
.testimonial-nav {
    position: absolute;
    bottom: 20px;
    right: 40px;
    z-index: 3;
}

.testimonial-nav-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white-color);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    margin-left: 10px;
    transition: all 0.3s ease;
}

.testimonial-nav-btn:hover {
    background-color: var(--white-color);
    color: var(--secondary-color);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .testimonial-slide {
        grid-template-columns: 1fr; /* Stack image and text */
        text-align: center;
        gap: 20px;
        padding-top: 80px; /* Make space for the image */
        transform: translateY(-50%) scale(1); /* Reset transform for simpler layout */
    }
    .testimonial-slide.active {
        opacity: 1;
    visibility: visible;
    position: relative; /* Brings active slide into flow */
    transform: translateY(-10%) scale(1);
    }
    .testimonial-image {
        position: absolute;
        top: -60px; /* Position image on top of the card */
        left: 50%;
        transform: translateX(-50%);
    }
    .testimonial-image img {
        width: 120px;
        height: 120px;
    }
    .testimonial-slider-wrapper {
        padding: 20px;
        min-height: 420px;
    }
    .testimonial-nav {
        bottom: 10px;
        right: 50%;
        transform: translateX(50%);
    }
}
/* CTA Section */
.cta-section {
    padding: 60px 0;
    text-align: center;
    background-color: var(--primary-color);
    color: var(--white-color);
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Gallery Preview Section */
.gallery-preview-section {
    padding: 80px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

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

.gallery-link {
    text-align: center;
    margin-top: 40px;
}

/* Philosophy Section */
/* ================================================================= */
/* ============= NEW PHILOSOPHY SECTION STYLES ===================== */
/* ================================================================= */

.philosophy-section-redesigned {
    padding: 120px 0;
    background-color: #fdfdfd; /* A very light off-white */
    position: relative;
    overflow: hidden; /* Crucial for containing the giant text */
}

/* --- The Giant Background Typography --- */
.philosophy-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vw; /* Scales with the viewport width */
    font-weight: 800;
    color: rgba(0, 0, 0, 0.03); /* Very subtle gray */
    z-index: 0;
    user-select: none; /* Prevents text from being selected */
    white-space: nowrap;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Text column is slightly wider */
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1; /* Ensures grid is above the background text */
}

/* --- Left Column: Text Styling --- */
.philosophy-text-content .eyebrow-text {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.philosophy-text-content h2 {
    font-size: 3rem;
    color: var(--dark-color);
    margin-bottom: 25px;
}

.philosophy-text-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* Highlighted spans within the paragraph */
.philosophy-text-content .highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* --- Right Column: Image Styling --- */
.philosophy-image-stack {
    position: relative;
    min-height: 500px; /* Gives space for absolutely positioned images */
}

.image-wrapper-back, .image-wrapper-front {
    position: absolute;
    border-radius: 15px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.image-wrapper-back {
    top: 0;
    left: 0;
    width: 70%;
    transform: rotate(-4deg);
}
.image-wrapper-back:hover {
    transform: rotate(-1deg) scale(1.03);
    z-index: 3;
}

.image-wrapper-front {
    bottom: 0;
    right: 0;
    width: 65%;
    transform: rotate(3deg);
    border: 5px solid var(--white-color);
}
.image-wrapper-front:hover {
    transform: rotate(0) scale(1.03);
    z-index: 3;
}

.philosophy-image-stack img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .philosophy-grid {
        gap: 30px;
    }
    .philosophy-text-content h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .philosophy-section-redesigned {
        padding: 80px 0;
    }
    .philosophy-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
    }
    .philosophy-text-content {
        text-align: center;
        margin-bottom: 40px;
    }
    .philosophy-image-stack {
        min-height: 400px;
    }
    .philosophy-bg-text {
        font-size: 30vw; /* Make text larger on mobile portrait */
    }
}

/* ADD THIS TO YOUR EXISTING style.css FILE */

/* Menu Page Specific Styles */


.menu-hero {
    background: linear-gradient(to right, rgba(199, 72, 59, 0.1), rgba(0, 159, 227, 0.1));
}

.appetizers-section, .sides-section, .beverage-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}

.main-courses-section, .dessert-section, .customization-section {
    padding: 80px 0;
}

.menu-category-content, .sides-content-wrapper, .beverage-content, .customization-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
}

.menu-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    flex: 1;
}

.menu-image-grid img, .sides-image img, .beverage-image img, .customization-image img {
    width: 100%;
    border-radius: 10px;
}

.menu-description, .sides-description, .beverage-text, .customization-text {
    flex: 1.5;
}

.menu-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: center;
}

.showcase-item img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

.showcase-item h3 {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.dessert-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 30px;
    align-items: center;
}

.dessert-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.dessert-item h4 {
    text-align: center;
    margin-top: 15px;
    color: var(--primary-color);
}

.customization-section .cta-link {
    text-align: center;
    margin-top: 50px;
}


/* Responsive adjustments for new sections */
@media(max-width: 768px) {
    .menu-category-content, .sides-content-wrapper, .beverage-content, .customization-wrapper {
        flex-direction: column;
    }

    /* Reverse order for some sections on mobile for better flow */
    .sides-content-wrapper, .beverage-content {
        flex-direction: column-reverse;
    }

    .menu-showcase, .dessert-gallery {
        grid-template-columns: 1fr;
    }
}



/* ADD THIS TO YOUR EXISTING style.css FILE */

/* Services Page Specific Styles */
.services-hero {
    background: linear-gradient(to right, rgba(0, 159, 227, 0.1), rgba(199, 72, 59, 0.1));
}

.service-detail-section {
    padding: 80px 0;
    background-color: var(--white-color);
}

.service-detail-section .container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.service-detail-content {
    flex: 1.2;
}

.service-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.service-detail-images {
    flex: 1;
    display: grid;
    gap: 20px;
}

.service-detail-images img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Alternate Layout for Variety */
.service-detail-section.alt-layout {
    background-color: var(--light-gray-color);
}

.service-detail-section.alt-layout .container {
    flex-direction: row-reverse;
}

.service-detail-section.alt-layout .service-title {
    color: var(--secondary-color);
}

.service-detail-section.alt-layout .service-detail-images {
    grid-template-columns: 1fr 1fr;
}


/* Service Highlight Section */
.service-highlight-section {
    padding: 80px 0;
}

.highlight-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.highlight-card {
    text-align: center;
    background: var(--white-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.highlight-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.highlight-card h3 {
    margin: 20px 0 10px;
    color: var(--primary-color);
}

.highlight-card p {
    padding: 0 20px 20px;
}

/* Special Events Section (Glassmorphism) */
/* ================================================================= */
/* ============= NEW VENUE PARTNERSHIPS SECTION STYLES ============= */
/* ================================================================= */

.venue-partnerships-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    /* The new smooth, bright gradient background */
    background: linear-gradient(135deg, rgba(199, 72, 59, 0.08), rgba(255, 255, 255, 0), rgba(0, 159, 227, 0.08));
}

/* The giant background typography */
.venue-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18vw; /* Scales with viewport width */
    font-weight: 800;
    color: rgba(0, 0, 0, 0.035);
    z-index: 0;
    user-select: none;
    white-space: nowrap;
}

/* The main content card */
.venue-content-block {
    position: relative;
    z-index: 1; /* Sits on top of the background text */
    background: var(--white-color);
    max-width: 850px;
    margin: 0 auto;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.07);
    text-align: center;
}

.venue-content-block .eyebrow-heading {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.venue-content-block h2 {
    font-size: 2.8rem;
    color: var(--dark-color);
    margin-bottom: 20px;
}

.venue-content-block p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    max-width: 700px; /* Keep paragraph lines from getting too long */
    margin-left: auto;
    margin-right: auto;
}

/* The iconic list of venue types */
.venue-types-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.venue-types-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
}

.venue-types-list svg {
    color: var(--secondary-color);
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .venue-partnerships-section {
        padding: 80px 0;
    }
    .venue-content-block {
        padding: 40px 25px;
    }
    .venue-content-block h2 {
        font-size: 2.2rem;
    }
    .venue-types-list {
        gap: 20px;
        justify-content: flex-start; /* Align to left on mobile */
    }
}

/* Planning & Coordination Section */
/* ================================================================= */
/* ============= NEW EVENT PLANNING SHOWCASE STYLES ================ */
/* ================================================================= */

.event-planning-showcase {
    padding: 120px 0;
    background-color: var(--light-gray-color);
}

/* --- Top Text Block --- */
.planning-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}
.planning-header .section-subtitle {
    font-size: 1.1rem;
    color: #555;
    margin-top: -15px;
}

/* --- Middle Image Block --- */
.planning-image-feature {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}
.planning-image-feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.planning-image-feature img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* --- Bottom Text Block --- */
.planning-services-details {
    max-width: 1000px;
    margin: 50px auto 0 auto;
    text-align: center;
}
.planning-services-details h3 {
    font-size: 1.8rem;
    color: var(--dark-color);
    margin-bottom: 40px;
}

/* The iconic list of services */
.planning-services-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3-column layout */
    gap: 40px;
    text-align: left;
}
.planning-services-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.service-icon {
    flex-shrink: 0;
    color: var(--primary-color);
    background-color: rgba(199, 72, 59, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-icon svg {
    width: 24px;
    height: 24px;
}

.service-text h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--dark-color);
}
.service-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .planning-services-list {
        grid-template-columns: 1fr; /* Stack into a single column */
        text-align: center;
    }
    .planning-services-list li {
        flex-direction: column; /* Stack icon on top of text */
        align-items: center;
    }
    .service-icon {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .event-planning-showcase {
        padding: 80px 0;
    }
}

.service-cta {
    background-color: var(--secondary-color);
}

/* Responsive adjustments for services page */
@media(max-width: 768px) {
    .service-detail-section .container,
    .service-detail-section.alt-layout .container {
        flex-direction: column;
    }

    .highlight-cards {
        grid-template-columns: 1fr;
    }

    .planning-content {
        flex-direction: column-reverse;
    }

    .special-events-content {
        padding: 30px;
    }
}

/* ADD THIS TO YOUR EXISTING style.css FILE */

/* Company Page Specific Styles */
.company-hero {
    background: linear-gradient(to right, rgba(199, 72, 59, 0.1), rgba(0, 159, 227, 0.1));
}

/* Timeline Section */
@keyframes draw-path {
    to {
        stroke-dashoffset: 0;
    }
}

.company-journey-section {
    padding: 120px 0;
    position: relative;
    background: 
        radial-gradient(circle at 100% 100%, rgba(199, 72, 59, 0.05), transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(0, 159, 227, 0.05), transparent 40%),
        var(--light-gray-color);
}

.journey-header {
    text-align: center;
    margin-bottom: 80px;
}

.journey-timeline-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    height: 1200px; /* Must match the SVG viewbox height */
}

/* The SVG Path Styling */
.journey-path-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}
#journey-path {
    /* Animation setup */
    stroke-dasharray: 2500; /* Approx. length of the path, can be refined */
    stroke-dashoffset: 2500;
}
.journey-timeline-wrapper.is-drawing #journey-path {
    animation: draw-path 3s ease-out forwards;
}


/* Milestone Styling */
.journey-milestone {
    position: absolute;
    width: 45%;
    z-index: 1;
}
/* Default positioning is left */
.journey-milestone { left: 10%; }
/* Override for right-aligned items */
.journey-milestone[style*="right"] { left: auto; }

.journey-content-card {
    background: var(--white-color);
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    border: 1px solid #fff;
}
.journey-content-card h3 {
    margin-bottom: 10px;
    color: var(--dark-color);
    position: relative;
    z-index: 2;
}
.journey-content-card p {
    line-height: 1.7;
    color: #444;
    position: relative;
    z-index: 2;
}

/* The giant year in the background of the card */
.milestone-year-bg {
    position: absolute;
    bottom: -20px;
    right: 20px;
    font-size: 5rem;
    font-weight: 800;
    color: rgba(0,0,0,0.04);
    z-index: 1;
    user-select: none;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .journey-timeline-wrapper {
        height: auto; /* Let content define height */
        padding: 0;
        /* The classic vertical line as a fallback */
    }
    .journey-timeline-wrapper::before {
        content: '';
        position: absolute;
        left: 20px; top: 0;
        width: 4px; height: 100%;
        background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
        border-radius: 2px;
    }
    .journey-path-svg {
        display: none; /* Hide the complex SVG */
    }
    .journey-milestone {
        position: relative;
        width: auto;
        left: 0 !important; right: 0 !important; top: 0 !important;
        margin-left: 60px; /* Make space for the line and a dot */
        margin-bottom: 40px;
    }
    /* Add a dot to the fallback line */
    .journey-milestone::before {
        content: '';
        position: absolute;
        left: -42px; top: 5px;
        width: 14px; height: 14px;
        border-radius: 50%;
        background-color: var(--white-color);
        border: 3px solid var(--primary-color);
    }
}
@media (max-width: 768px) {
    .company-journey-section {
        padding: 80px 0;
    }
}


/* Team Section */
/* ================================================================= */
/* ============= NEW TEAM SHOWCASE SECTION STYLES ================== */
/* ================================================================= */

.team-showcase-section {
    padding: 100px 0;
    background-color: var(--white-color);
}

.team-header {
    text-align: center;
    margin-bottom: 60px;
}

.team-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    justify-items: center;
}

/* The Profile Card */
.team-profile-card {
    position: relative;
    background-color: var(--white-color);
    width: 100%;
    max-width: 340px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    text-align: center;
    padding-top: 100px; /* Make space for the overlapping image */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.team-profile-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* The top gradient background element */
.card-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Height of the gradient area */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.bg-gradient-1 {
    background: linear-gradient(135deg, var(--primary-color), #e86a5d);
}
.bg-gradient-2 {
    background: linear-gradient(135deg, var(--secondary-color), #4cc2f0);
}
.bg-gradient-3 {
    background: linear-gradient(135deg, #444, #777);
}

/* The overlapping circular image */
.card-image {
    position: absolute;
    top: 10px; /* (Gradient Height / 2) - half the image height + desired overlap */
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--white-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    z-index: 2;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The white content area below the image */
.card-content {
    padding: 20px 30px 30px 30px;
}
.card-content h3 {
    font-size: 1.5rem;
    color: var(--dark-color);
    margin-bottom: 5px;
}
.card-content h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 15px;
}
.card-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* The social media links at the bottom */
.card-socials {
    border-top: 1px solid #e0e0e0;
    padding: 15px;
}
.card-socials a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background-color: var(--light-gray-color);
    color: #555;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.card-socials a:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transform: scale(1.1);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .team-showcase-grid {
        gap: 50px; /* Increase gap for single column layout */
    }
}

/* Philosophy Section (Company Page) */
/* ================================================================= */
/* ============= NEW VALUES CAROUSEL SECTION STYLES ================ */
/* ================================================================= */

.values-carousel-section {
    padding: 100px 0;
    background-color: var(--light-gray-color);
}

.values-header {
    text-align: center;
    margin-bottom: 60px;
}

.values-carousel-wrapper {
    position: relative;
    /* CHANGED: Increased max-width to accommodate wider cards */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 50px; 
}

/* The main carousel container */
.values-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    /* CHANGED: Increased height for better proportions with wider cards */
    height: 480px; 
}

/* Individual cards in the carousel */
.value-card {
    position: absolute;
    /* CHANGED: Increased the width of each card */
    width: 420px; 
    padding: 40px;
    background-color: var(--white-color);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease !important;
}

/* Styling for the central, active card */
.value-card.active {
    transform: translateX(0) scale(1) !important;
    opacity: 1;
    z-index: 2;
}

/* Styling for the card to the left */
.value-card.prev {
    /* CHANGED: Adjusted translateX for the new wider card size */
    transform: translateX(-55%) scale(0.8) rotateY(45deg) !important; 
    opacity: 0.5;
    z-index: 1;
}

/* Styling for the card to the right */
.value-card.next {
    /* CHANGED: Adjusted translateX for the new wider card size */
    transform: translateX(55%) scale(0.8) rotateY(-45deg) !important;
    opacity: 0.5;
    z-index: 1;
}

.value-card-icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-gradient-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    opacity: 0.2;
    z-index: 0;
}
.bg-gradient-1 { background: linear-gradient(135deg, var(--primary-color), #e86a5d); }
.bg-gradient-2 { background: linear-gradient(135deg, var(--secondary-color), #4cc2f0); }
.bg-gradient-3 { background: linear-gradient(135deg, #444, #777); }

.value-card-icon-wrapper svg {
    stroke: #333;
    position: relative;
    z-index: 1;
}

.value-card h3 {
    font-size: 1.5rem;
    color: var(--dark-color);
    margin-bottom: 10px;
}

.value-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}


/* Carousel Navigation */
.carousel-nav {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.carousel-btn {
    width: 50px;
    height: 50px;
    background-color: var(--white-color);
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #555;
    font-size: 1.5rem;
    cursor: pointer;
    margin: 0 10px;
    transition: all 0.3s ease;
}
.carousel-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    transform: scale(1.1);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .values-carousel {
        perspective: none; 
        height: auto;
    }
    .value-card {
        position: relative;
        transform: none !important;
        opacity: 1 !important;
        display: none; 
        margin: 0 auto;
        /* CHANGED: Made responsive card width more flexible */
        width: 100%;
        max-width: 420px;
    }
    .value-card.active {
        display: block; 
    }
    .values-carousel-wrapper {
        padding: 0;
    }
}
/* Sourcing Section */
/* ================================================================= */
/* ============== NEW SOURCING SHOWCASE SECTION STYLES ============= */
/* ================================================================= */

.sourcing-showcase-section {
    padding: 120px 0;
    background-color: var(--white-color);
}

/* The 3-column grid layout */
.sourcing-grid {
    display: grid;
    /* Central text column is wider */
    grid-template-columns: 0.9fr 1.2fr 0.9fr; 
    align-items: center;
    gap: 50px;
}

/* --- The Image Panels (Left and Right) --- */
.sourcing-image-panel {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}
.sourcing-image-panel:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.sourcing-image-panel.left-image {
    transform: rotate(-2deg); /* Slight rotation */
}
.sourcing-image-panel.right-image {
    transform: rotate(2deg); /* Opposite rotation */
}
.sourcing-image-panel:hover {
    transform: scale(1.03) translateY(-5px) rotate(0); /* Straighten on hover */
}
.sourcing-image-panel img {
    width: 100%;
    display: block;
}

/* --- The Center Text Panel --- */
.sourcing-text-panel {
    text-align: center;
}
.sourcing-text-panel .eyebrow-heading {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.sourcing-text-panel h2 {
    font-size: 2.8rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.sourcing-text-panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* The iconic list of partners */
.partner-list {
    list-style: none;
    padding: 0;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 30px;
}
.partner-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    max-width: 120px; /* Constrain width */
}
.partner-list svg {
    color: var(--primary-color);
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .sourcing-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 40px;
    }
    .sourcing-text-panel {
        order: 2; /* Text in the middle */
    }
    .sourcing-image-panel.left-image {
        order: 1;
    }
    .sourcing-image-panel.right-image {
        order: 3;
    }
    .sourcing-image-panel {
        max-width: 450px;
        margin: 0 auto;
    }
}

/* Community Section */
.community-impact-section {
    position: relative;
    padding: 120px 0;
    display: flex;
    align-items: center;
    min-height: 90vh;
}

/* The full-width background image and its overlay */
.community-bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.community-bg-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.3); /* Darkens the image for readability */
}

/* The uniquely shaped content panel */
.community-content-panel {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    color: var(--white-color);
    
    /* The soft gradient background */
    background: linear-gradient(145deg, rgba(199, 72, 59, 0.9), rgba(0, 159, 227, 0.9));
    
    /* THE NON-STANDARD SHAPE: A soft curve on top */
    clip-path: polygon(0% 10%, 20% 5%, 80% 5%, 100% 10%, 100% 100%, 0% 100%);
}

.panel-text-content {
    padding: 100px 60px 60px 60px; /* More padding at the top due to the clip-path */
    text-align: center;
}
.panel-text-content h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.panel-text-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto 40px auto;
}

/* The iconic list of impacts */
.impact-list {
    list-style: none;
    padding: 40px 0 0 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.impact-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    font-weight: 500;
}
.impact-list svg {
    width: 32px;
    height: 32px;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .impact-list {
        grid-template-columns: 1fr; /* Stack list items vertically */
        text-align: center;
    }
}
@media (max-width: 768px) {
    .community-impact-section {
        padding: 80px 0;
        min-height: auto;
    }
    .panel-text-content {
        padding: 80px 30px 40px 30px;
    }
    .panel-text-content h2 {
        font-size: 2.2rem;
    }
}

/* Careers Section */
.careers-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--primary-color);
    color: var(--white-color);
}
.careers-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.careers-section p {
    max-width: 800px;
    margin: 0 auto 30px;
}
.careers-section .btn {
    background-color: var(--white-color);
    color: var(--primary-color);
}
.careers-section .btn:hover {
    background-color: #f0f0f0;
}


/* Responsive Adjustments for Company Page */
@media(max-width: 768px) {
    .timeline::after {
        left: 31px;
    }
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    .timeline-item:nth-child(even) {
        left: 0;
    }
    .timeline-item::after {
        left: -30px;
    }
    .team-grid, .philosophy-grid {
        grid-template-columns: 1fr;
    }
    .sourcing-section .container, .community-section .container {
        flex-direction: column-reverse;
    }
}

/* ADD THIS TO YOUR EXISTING style.css FILE */

/* Cases Page Specific Styles */
.cases-hero {
    background: linear-gradient(to right, rgba(0, 159, 227, 0.1), rgba(199, 72, 59, 0.1));
}
/* ================================================================= */
/* ============= NEW CASE STUDIES SHOWCASE STYLES ================== */
/* ================================================================= */
.case-studies-showcase {
    padding: 100px 0;
    background-color: var(--light-gray-color);
}
.case-studies-header {
    text-align: center;
    margin-bottom: 60px;
}
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

/* Teaser Card Styling */
.case-study-teaser-card {
    position: relative;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    color: var(--white-color);
    cursor: pointer;
}
.teaser-bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.case-study-teaser-card:hover .teaser-bg-image {
    transform: scale(1.05);
}
.case-study-teaser-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
}
.teaser-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 2;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.case-study-teaser-card:hover .teaser-content {
    transform: translateY(0);
}
.teaser-content h3 { font-size: 1.8rem; margin-bottom: 5px; }
.teaser-content p { color: rgba(255,255,255,0.8); }
.teaser-cta {
    display: inline-block;
    margin-top: 15px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.case-study-teaser-card:hover .teaser-cta {
    opacity: 1;
}

/* Modal and Overlay Styling */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: var(--white-color);
    width: 90%;
    max-width: 1100px;
    max-height: 90vh;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    overflow-y: auto;
}
.modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.modal-close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
}
.modal-content { padding: 50px; }
.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
}
.modal-images { display: grid; gap: 20px; }
.modal-images img { width: 100%; border-radius: 10px; }
.modal-details h2 { font-size: 2.2rem; color: var(--primary-color); margin-bottom: 20px; }
.modal-details h3 { font-size: 1.2rem; font-weight: 600; color: var(--dark-color); margin-top: 20px; border-bottom: 2px solid #eee; padding-bottom: 5px; }
.modal-details p { line-height: 1.7; }

/* Body class to prevent scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Responsive Modal Adjustments */
@media (max-width: 992px) {
    .modal-grid { grid-template-columns: 1fr; }
}
/* Process Section */
/* ================================================================= */
/* ================== NEW PROCESS FLOW SECTION STYLES ============== */
/* ================================================================= */

.process-flow-section {
    padding: 100px 0;
    background-color: var(--light-gray-color);
    overflow: hidden;
}

.process-header {
    text-align: center;
    margin-bottom: 80px;
}

.process-flow-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* The connecting dashed line */
.process-flow-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
    background-size: 15px 2px;
    background-repeat: repeat-x;
    transform: translateY(-50%);
    z-index: 0;
}

/* Base style for each step panel */
.process-step-item {
    position: relative;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.process-step-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Staggered vertical alignment */
.process-step-item:nth-child(even) {
    margin-top: 50px;
}
.process-step-item:nth-child(odd) {
    margin-bottom: 50px;
}

/* Gradient backgrounds for the items */
.process-step-item:nth-child(1), .process-step-item:nth-child(3) {
    background: linear-gradient(135deg, var(--white-color), rgba(199, 72, 59, 0.1));
}
.process-step-item:nth-child(2), .process-step-item:nth-child(4) {
    background: linear-gradient(135deg, var(--white-color), rgba(0, 159, 227, 0.1));
}

/* The giant background number */
.step-number-bg {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 5rem;
    font-weight: 800;
    color: rgba(0,0,0,0.04);
    z-index: 1;
    user-select: none;
}

.step-icon, .step-content {
    position: relative;
    z-index: 2; /* Ensure content is above the number */
}

.step-icon svg {
    margin-bottom: 20px;
    color: var(--dark-color);
}
.step-content h3 {
    font-size: 1.5rem;
    color: var(--dark-color);
    margin-bottom: 10px;
}
.step-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .process-flow-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 grid on tablets */
        gap: 40px;
    }
    .process-flow-grid::before {
        display: none; /* Hide connecting line */
    }
    .process-step-item:nth-child(even), .process-step-item:nth-child(odd) {
        margin: 0; /* Reset margins */
    }
}

@media (max-width: 768px) {
    .process-flow-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}
/* Showcase Gallery Section */
.showcase-gallery-section {
    padding: 80px 0;
}
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.showcase-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.showcase-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.showcase-item:hover img {
    transform: scale(1.1);
}
.showcase-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--white-color);
    padding: 40px 20px 20px;
    transition: opacity 0.4s ease;
    opacity: 1;
}
.showcase-item:hover .showcase-overlay {
    opacity: 1;
}
.showcase-overlay h4 {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.showcase-item:hover .showcase-overlay h4 {
    transform: translateY(0);
}


/* Cases CTA Section */
.cases-cta {
    background-color: var(--secondary-color);
}
.cases-cta .btn {
    background-color: var(--white-color);
    color: var(--secondary-color);
}
.cases-cta .btn:hover {
    background-color: #f0f0f0;
}


/* Responsive Adjustments for Cases Page */
@media(max-width: 992px) {
    .case-study-body, .case-study-section.alt .case-study-body {
        flex-direction: column;
    }
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* ADD THIS TO YOUR EXISTING style.css FILE */

/* Help Page Specific Styles */
.help-hero {
    background: linear-gradient(to right, rgba(199, 72, 59, 0.1), rgba(0, 159, 227, 0.1));
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 20px auto 40px;
    font-size: 1.1rem;
    color: #555;
}

/* FAQ Section */
.faq-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background-color: var(--white-color);
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.faq-question {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 20px;
    text-align: left;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}
.faq-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}
.faq-question.active .faq-icon {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.faq-answer p {
    padding: 0 20px 20px;
    line-height: 1.7;
}

/* Contact Form Section */
/* ================================================================= */
/* ============== NEW CONTACT SHOWCASE SECTION STYLES ============== */
/* ================================================================= */

.contact-showcase-section {
    position: relative;
    padding: 100px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* Background Image and Overlay */
.contact-bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.contact-bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 2;
}

.contact-showcase-section .container {
    position: relative;
    z-index: 3;
}

/* The uniquely shaped content card */
.contact-details-card {
    max-width: 550px; /* Constrain the width of the card */
    margin-left: auto; /* Push the card to the right */
    margin-right: 0;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(10, 10, 10, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--white-color);
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* THE NON-STANDARD SHAPE: Angled top-left and bottom-right */
    clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
}

.card-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.card-header p {
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

.card-body {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* The iconic contact list */
.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.contact-info-list li {
    display: flex;
    align-items: center;
    gap: 20px;
}
.info-icon {
    flex-shrink: 0;
    color: var(--primary-color);
}
.info-icon svg {
    width: 28px; height: 28px;
}
.info-text span {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.info-text a, .info-text p {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--white-color);
    text-decoration: none;
    margin: 0;
}
.info-text a:hover {
    text-decoration: underline;
}

/* Office Hours section */
.office-hours {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.office-hours h4 {
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.office-hours p {
    margin: 5px 0;
    color: rgba(255,255,255,0.9);
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .contact-showcase-section {
        padding: 80px 0;
    }
    .contact-details-card {
        margin: 0 auto; /* Center the card */
        clip-path: none; /* Remove non-standard shape */
        border-radius: 20px;
    }
}

/* Specialists Section */

/* ================================================================= */
/* ============= NEW SPECIALISTS SHOWCASE SECTION STYLES =========== */
/* ================================================================= */

.specialists-showcase-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    /* The new soft gradient background */
    background: 
        radial-gradient(circle at 0% 0%, rgba(199, 72, 59, 0.07), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(0, 159, 227, 0.07), transparent 40%),
        var(--light-gray-color);
}

.specialists-header {
    text-align: center;
    margin-bottom: 60px;
}
.specialists-header .section-subtitle {
    max-width: 600px;
}

.specialists-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Base style for the profile card */
.specialist-profile-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Column for image, column for text */
    align-items: center;
    gap: 30px;
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.specialist-profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Image wrapper for layering */
.profile-image-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}
.image-bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    transform: rotate(15deg);
    transition: transform 0.4s ease;
}
.specialist-profile-card:hover .image-bg-shape {
    transform: rotate(5deg);
}
.bg-shape-1 { background-color: rgba(199, 72, 59, 0.2); }
.bg-shape-2 { background-color: rgba(0, 159, 227, 0.2); }

.profile-image-wrapper img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Content styling */
.profile-content h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.profile-content h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 15px;
}
.profile-content p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
}

/* The contact button */
.btn-contact {
    display: inline-block;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-contact:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .specialists-showcase-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
    }
}

@media (max-width: 768px) {
    .specialist-profile-card {
        grid-template-columns: 1fr; /* Stack image on top of content */
        text-align: center;
        gap: 20px;
        padding: 40px 30px;
    }
}

/* Location Section */
/* ================================================================= */
/* ============= NEW SOPHISTICATED LOCATION SECTION STYLES ========= */
/* ================================================================= */

/* Keyframes for the pulsing map pin */
@keyframes pulse-pin {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -55%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.location-showcase-section {
    padding: 100px 0;
    background-color: var(--white-color);
}

/* The main white panel */
.location-panel {
    background-color: var(--white-color);
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.07);
    overflow: hidden;
}

.location-panel-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Map side is slightly larger */
    align-items: center;
}

/* The map feature on the left */
.location-map-feature {
    position: relative;
    height: 100%;
    min-height: 500px;
}
.location-map-feature img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* The animated map pin */
.map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
    animation: pulse-pin 2s infinite ease-in-out;
}
.map-pin svg {
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}

/* The details content on the right */
.location-details-content {
    padding: 60px;
}
.location-details-content .eyebrow-heading {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.location-details-content h3 {
    font-size: 2.2rem;
    color: var(--dark-color);
    margin-bottom: 20px;
}
.location-details-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

/* The distinct address block */
.address-block {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: var(--light-gray-color);
    border-radius: 12px;
    margin-bottom: 30px;
}
.address-icon {
    flex-shrink: 0;
    color: var(--primary-color);
}
.address-text strong {
    display: block;
    color: var(--dark-color);
}
.address-text span {
    color: #555;
}

.location-details-content .btn {
    padding: 15px 35px;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .location-panel-grid {
        grid-template-columns: 1fr; /* Stack vertically */
    }
    .location-map-feature {
        min-height: 350px;
    }
    .location-details-content {
        padding: 40px;
        text-align: center;
    }
    .address-block {
        text-align: left;
    }
}
/* Resource Hub Section */
/* ================================================================= */
/* ============= NEW RESOURCE SLIDER SECTION STYLES ================ */
/* ================================================================= */

.resource-slider-section {
    padding: 100px 0;
    background-color: var(--light-gray-color);
}

.resource-slider-header {
    text-align: center;
    margin-bottom: 60px;
}
.resource-slider-header .section-subtitle {
    max-width: 600px;
}

/* The main slider wrapper */
.resource-slider-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden; /* This hides the non-active slides */
}
.resource-slider {
    display: flex; /* This creates the horizontal row of slides */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Individual slide/card styling */
.resource-slide {
    flex: 0 0 100%; /* Each slide takes up 100% of the wrapper's width */
    padding: 50px;
    border-radius: 20px;
    color: var(--white-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* The bright but soft gradients */
.slide-gradient-1 { background: linear-gradient(135deg, var(--primary-color), #e86a5d); }
.slide-gradient-2 { background: linear-gradient(135deg, var(--secondary-color), #4cc2f0); }
.slide-gradient-3 { background: linear-gradient(135deg, #444, #777); }

.slide-icon {
    margin-bottom: 25px;
}
.slide-icon svg {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.resource-slide h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.resource-slide p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 500px;
    opacity: 0.9;
    flex-grow: 1; /* Pushes the button to the bottom */
}
.btn-slide {
    display: inline-block;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white-color);
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-slide:hover {
    background-color: var(--white-color);
    color: var(--dark-color);
}


/* Slider Navigation Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: var(--white-color);
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    font-size: 1.5rem;
    color: #555;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}
.slider-arrow:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.slider-arrow.prev { left: 2px; }
.slider-arrow.next { right: 2px; }

/* Slider Navigation Dots */
.slider-dots {
    text-align: center;
    margin-top: 30px;
}
.slider-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.slider-dot.active {
    background-color: var(--primary-color);
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .resource-slider-wrapper {
        overflow: hidden; /* Allows arrows to be seen */
    }
    .slider-arrow.prev { left: 15px; }
    .slider-arrow.next { right: 15px; }
}
@media (max-width: 768px) {
    .resource-slide { padding: 40px 25px; }
}

/* Help CTA */
.help-cta { background-color: var(--secondary-color); }

/* Responsive Adjustments for Help Page */
@media (max-width: 992px) {
    .contact-wrapper, .location-wrapper {
        flex-direction: column;
    }
    .resource-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .specialists-grid {
        grid-template-columns: 1fr;
    }
}

/* ADD THIS TO YOUR EXISTING style.css FILE */

/* Gallery Page Specific Styles */
.gallery-hero {
    background: no-repeat center center/cover;
    color: var(--white-color);
    position: relative;
    padding: 120px 0;
    text-align: center;
}
.gallery-hero::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
}
.gallery-hero .hero-content {
    position: relative; z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

/* Main Gallery Showcase */
.gallery-showcase-section {
    padding: 80px 0;
}
.gallery-filters {
    text-align: center;
    margin-bottom: 40px;
}
.filter-btn {
    background: transparent;
    border: 1px solid #ccc;
    color: #555;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}
.gallery-grid-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 15px;
}
.gallery-item-main {
    overflow: hidden;
    border-radius: 10px;
}
.gallery-item-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.gallery-item-main:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.gallery-item-main[data-category="weddings"]:nth-of-type(1),
.gallery-item-main[data-category="corporate"]:nth-of-type(5),
.gallery-item-main[data-category="food"]:nth-of-type(8) {
    grid-row: span 2;
}


/* Behind the Scenes Section */
/* ================================================================= */
/* ========= NEW BEHIND THE SCENES SHOWCASE SECTION STYLES ========= */
/* ================================================================= */

.bts-showcase-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    /* The new soft gradient background */
    background: 
        radial-gradient(circle at 100% 0%, rgba(199, 72, 59, 0.05), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(0, 159, 227, 0.05), transparent 50%),
        var(--light-gray-color);
}

.bts-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0; /* No gap as the gallery will overlap */
}

/* --- Left Column: Text Content --- */
.bts-text-content {
    padding-right: 50px;
    position: relative;
    z-index: 2; /* Ensures text is above the overlapping gallery */
}
.bts-text-content .eyebrow-heading {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.bts-text-content h2 {
    font-size: 3rem;
    color: var(--dark-color);
    margin-bottom: 25px;
}
.bts-text-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* --- Right Column: Vertical "Film Strip" Gallery --- */
.bts-filmstrip-gallery {
    height: 500px; /* Fixed height for the gallery container */
    overflow-y: scroll; /* The key to the vertical scroll */
    overflow-x: hidden;
    padding: 20px;
    
    /* Custom scrollbar styling (for Webkit browsers like Chrome/Safari) */
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) #e0e0e0;
}
.bts-filmstrip-gallery::-webkit-scrollbar {
    width: 8px;
}
.bts-filmstrip-gallery::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 4px;
}
.bts-filmstrip-gallery::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.filmstrip-item {
    position: relative;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.filmstrip-item img {
    width: 100%;
    display: block;
}
.item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: var(--white-color);
    font-weight: 500;
    font-size: 1rem;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .bts-grid-layout {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 50px;
    }
    .bts-text-content {
        text-align: center;
        padding-right: 0;
    }
    .bts-filmstrip-gallery {
        height: auto; /* Let content determine height */
        overflow-y: visible; /* Disable scrolling */
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2x2 grid for images */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .bts-filmstrip-gallery {
        grid-template-columns: 1fr; /* Single column of images */
    }
}
/* Venues Section */
.venues-section {
    padding: 80px 0;
}
.venue-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.venue-slide {
    text-align: center;
}
.venue-slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}
.venue-slide h3 {
    color: var(--secondary-color);
}

/* Video Showcase Section */
.video-showcase-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}
.video-container {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    cursor: pointer;
}
.video-container img {
    width: 100%;
    display: block;
}

/* Food Philosophy Section */
/* ================================================================= */
/* ============= NEW PHILOSOPHY CAROUSEL SECTION STYLES ============ */
/* ================================================================= */

.philosophy-carousel-section {
    padding: 120px 0;
    background-color: var(--white-color);
    overflow: hidden;
}

/* The main wrapper that defines the carousel's space */
.philosophy-carousel-wrapper {
    position: relative;
    max-width: 700px;
    height: 700px; /* Must have a fixed height for circular layout */
    margin: 0 auto;
}

/* The central text hub */
.philosophy-hub-text {
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 60%;
    text-align: center;
    z-index: 10;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}
.philosophy-hub-text h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.philosophy-hub-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
}

/* The rotating ring that holds the images */
.image-carousel-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* A bouncy transition */
}

/* Individual image items */
.carousel-image-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
    width: 250px;
    height: 250px;
    margin-left: -125px; /* Half of width */
    margin-top: -125px; /* Half of height */
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.carousel-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Position each of the 3 images around the circle (120deg apart) */
.carousel-image-item:nth-child(1) { transform: rotate(0deg) translateY(-300px); }
.carousel-image-item:nth-child(2) { transform: rotate(120deg) translateY(-300px); }
.carousel-image-item:nth-child(3) { transform: rotate(240deg) translateY(-300px); }


/* Carousel Navigation */
.carousel-navigation {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
}
.carousel-nav-btn {
    width: 50px; height: 50px;
    background-color: var(--white-color);
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #555;
    font-size: 1.5rem;
    cursor: pointer;
    margin: 0 10px;
    transition: all 0.3s ease;
}
.carousel-nav-btn:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .philosophy-carousel-wrapper {
        height: auto; /* Let content define height */
        position: static;
    }
    .image-carousel-ring, .carousel-navigation {
        display: none; /* Hide the entire carousel mechanism */
    }
    .philosophy-hub-text {
        position: static;
        transform: none;
        width: 100%;
        margin-bottom: 40px;
    }
    /* Show the images in a simple grid as a fallback */
    .image-carousel-ring {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        position: static;
        height: auto;
    }
    .carousel-image-item {
        position: static;
        transform: none !important;
        margin: 0 auto;
        width: 100%;
        max-width: 300px;
        height: 300px;
    }
     .carousel-image-item img {
        transform: none !important;
    }
}

/* Gallery CTA */
.gallery-cta { background-color: var(--primary-color); text-align: center; color: var(--white-color); }
.gallery-cta p { max-width: 800px; margin: 0 auto 30px; }
.gallery-cta .btn { background-color: var(--white-color); color: var(--primary-color); }

/* Responsive Adjustments for Gallery Page */
@media(max-width: 992px) {
    .bts-image-grid, .venue-slider {
        grid-template-columns: 1fr;
    }
    .food-philosophy-gallery {
        flex-direction: column-reverse;
    }
}

@media(max-width: 768px) {
    .gallery-grid-main {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .gallery-item-main, .gallery-item-main[data-category="weddings"]:nth-of-type(1),
    .gallery-item-main[data-category="corporate"]:nth-of-type(5),
    .gallery-item-main[data-category="food"]:nth-of-type(8) {
        grid-row: auto;
        height: 300px;
    }
}

/* Footer */
/* ================================================================= */
/* ================== NEW SOPHISTICATED FOOTER STYLES ============== */
/* ================================================================= */

.site-footer-redesigned {
    background-color: var(--dark-color);
    color: var(--white-color);
    position: relative;
}

/* --- Part 1: CTA Banner --- */
.footer-cta-banner {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 60px 0;
    text-align: center;
}
.footer-cta-banner h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.footer-cta-banner p {
    max-width: 500px;
    margin: 0 auto 30px auto;
    opacity: 0.9;
}
.btn-footer-cta {
    background-color: var(--white-color);
    color: var(--primary-color);
    padding: 12px 35px;
    font-weight: 600;
}
.btn-footer-cta:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}


/* --- Part 2: Main Footer --- */
.main-footer-content {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
/* Subtle background texture */
.main-footer-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23fff" fill-opacity="0.03" d="M0 0h10v10H0zM10 10h10v10H10z"/></svg>');
    z-index: 0;
}
.main-footer-content .container {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Asymmetrical layout */
    gap: 60px;
}

/* Brand & Socials Column */
.footer-brand-info .footer-logo {
    font-size: 2rem;
    color: var(--white-color);
    margin-bottom: 15px;
    text-decoration: none   ;
}
.footer-brand-info p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 25px;
}
.footer-socials {
    display: flex;
    gap: 15px;
}
.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--white-color);
    transition: all 0.3s ease;
}
.footer-socials a:hover {
    background-color: var(--primary-color);
    transform: scale(1.1);
}

/* Links Grid */
.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.footer-link-col h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.9);
}
.footer-link-col ul {
    list-style: none;
    padding: 0; margin: 0;
}
.footer-link-col li {
    margin-bottom: 12px;
}
.footer-link-col a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    position: relative;
}
/* Animated underline on hover */
.footer-link-col a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.footer-link-col a:hover {
    color: var(--white-color);
}
.footer-link-col a:hover::after {
    transform: scaleX(1);
}

/* Special styling for contact list */
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,0.7);
}
.footer-contact-list svg {
    margin-top: 4px;
    flex-shrink: 0;
}


/* --- Part 3: Bottom Bar --- */
.footer-bottom-bar {
    padding: 20px 0;
    border-top: 1px solid #444;
}
.footer-bottom-bar p {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stack brand on top of links */
        gap: 50px;
    }
}
@media (max-width: 768px) {
    .footer-links-grid {
        grid-template-columns: 1fr; /* Stack all link columns */
        gap: 40px;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #a63a2f;
}

/* Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Responsive */
@media(max-width: 768px) {
    .nav-links {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background-color: var(--white-color);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    }

    .nav-links.active {
        left: 0;
    }

    .nav-links li {
        margin: 2rem 0;
    }

    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-section .container, .about-section .container {
        flex-direction: column;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-image {
        margin-top: 30px;
    }

    .service-cards, .footer-content, .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================= */
/* ============== NEW MENU HERO SHOWCASE STYLES ==================== */
/* ================================================================= */

/* Keyframes for the bouncing scroll arrow */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.menu-hero-showcase {
    position: relative;
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
    
    /* The background image */
    background: url('images/menu-hero.webp') no-repeat center center/cover;
}

/* Dark gradient overlay for text readability */
.menu-hero-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
    z-index: 1;
}

/* Ensure the container content is above the overlay */
.menu-hero-showcase .container {
    position: relative;
    z-index: 2;
}

/* The "Glassmorphism" content card */
.menu-hero-content-box {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 50px 60px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    max-width: 800px;
    margin: 0 auto;
}

.menu-hero-content-box h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 15px rgba(0,0,0,0.4);
    letter-spacing: 1px;
}

.menu-hero-content-box p {
    font-size: 1.2rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* The animated scroll-down indicator */
.scroll-down-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--white-color);
    text-decoration: none;
}

.scroll-down-indicator svg {
    width: 32px;
    height: 32px;
    animation: bounce 2s infinite;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .menu-hero-showcase {
        height: 90vh; /* Slightly less height on mobile */
    }
    .menu-hero-content-box {
        padding: 30px 25px;
    }
    .menu-hero-content-box h1 {
        font-size: 2.5rem;
    }
    .menu-hero-content-box p {
        font-size: 1rem;
    }
}

/* ================================================================= */
/* =========== NEW APPETIZER SHOWCASE SECTION STYLES =============== */
/* ================================================================= */

.appetizer-showcase-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    /* The new soft gradient background */
    background: linear-gradient(135deg, rgba(199, 72, 59, 0.05), rgba(0, 159, 227, 0.05));
}

.appetizer-layout-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Text column gets slightly more space */
    align-items: center;
    gap: 60px;
}

/* --- Left Column: Text Styling --- */
.appetizer-text-content .eyebrow-heading {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.appetizer-text-content h2 {
    font-size: 2.8rem;
    color: var(--dark-color);
    margin-bottom: 25px;
}

.appetizer-text-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

/* Sample Items List Styling */
.sample-items {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.sample-items h3 {
    font-size: 1.4rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.sample-items ul {
    list-style: none;
    padding-left: 0;
}

.sample-items li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 1rem;
}

/* Custom list-style bullet points */
.sample-items li::before {
    content: '▪';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* --- Right Column: Image Styling --- */
.appetizer-image-composition {
    position: relative;
    min-height: 550px; /* Provides space for absolute positioning */
}

.image-primary, .image-secondary {
    position: absolute;
    border-radius: 15px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.image-primary {
    top: 0;
    left: 0;
    width: 80%;
    z-index: 1;
    transform: rotate(-3deg);
}

.image-secondary {
    bottom: 0;
    right: 0;
    width: 70%;
    z-index: 2;
    transform: rotate(4deg);
    border: 5px solid var(--white-color); /* Helps separate the top image */
}

.image-primary:hover, .image-secondary:hover {
    transform: rotate(0) scale(1.03);
    z-index: 3; /* Bring hovered image to the very front */
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
}

.appetizer-image-composition img {
    width: 100%;
    height: 400px;
    display: block;
    object-fit: cover;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .appetizer-layout-grid {
        grid-template-columns: 1fr; /* Stack the columns */
        gap: 40px;
    }
    .appetizer-text-content {
        order: 2; /* Text comes after images on tablet */
        text-align: center;
    }
    .sample-items ul {
        display: inline-block; /* Helps with centering */
        text-align: left;
    }
    .appetizer-image-composition {
        order: 1;
        min-height: 450px;
    }
}

@media (max-width: 768px) {
    .appetizer-showcase-section {
        padding: 80px 0;
    }
    .appetizer-image-composition {
        min-height: 400px;
    }
}


.main-course-feature-section {
    padding: 100px 0;
    background-color: var(--light-gray-color);
}

.main-course-header {
    text-align: center;
    margin-bottom: 60px;
}

.main-course-header .section-subtitle {
    font-size: 1.1rem;
    color: #555;
    max-width: 700px;
    margin: -15px auto 0;
}

.main-course-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Base style for both feature panels */
.feature-panel {
    position: relative;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    color: var(--white-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.feature-panel:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* The background image container */
.feature-panel-bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}

.feature-panel:hover .feature-panel-bg-image {
    transform: scale(1.05); /* Subtle zoom effect on hover */
}

/* The gradient overlay */
.feature-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    transition: opacity 0.4s ease;
}

/* Unique gradient for the "Plated" panel */
.plated-panel::after {
    background: linear-gradient(to top, rgba(199, 72, 59, 0.8) 0%, rgba(199, 72, 59, 0.1) 100%);
}

/* Unique gradient for the "Buffet" panel */
.buffet-panel::after {
    background: linear-gradient(to top, rgba(0, 159, 227, 0.8) 0%, rgba(0, 159, 227, 0.1) 100%);
}

/* Content container */
.feature-panel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    z-index: 3;
}

.feature-panel-content h3 {
    font-size: 2.5rem;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* The description paragraph that fades in */
.feature-panel-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 15px;
    
    /* --- The Interactive Reveal --- */
    opacity: 0;
    max-height: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, max-height 0.4s ease, transform 0.4s ease;
}

.feature-panel:hover .feature-panel-description {
    opacity: 0.9;
    max-height: 200px; /* Adjust if your text is longer */
    transform: translateY(0);
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .main-course-grid {
        gap: 30px;
    }
    .feature-panel {
        height: 500px;
    }
    .feature-panel-content h3 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .main-course-grid {
        grid-template-columns: 1fr; /* Stack the panels */
    }
}

/* ================================================================= */
/* ============= NEW ACCOMPANIMENTS SHOWCASE STYLES ================ */
/* ================================================================= */

.accompaniments-showcase {
    padding: 120px 0;
    background-color: var(--light-gray-color); /* Consistent background */
    overflow: hidden;
}

.accompaniments-header {
    text-align: center;
    margin-bottom: 60px;
}

.accompaniments-header .section-subtitle {
    font-size: 1.1rem;
    color: #555;
    max-width: 800px;
    margin: -15px auto 0;
}

/* The core 3-column grid layout */
.showcase-grid-layout {
    display: grid;
    /* This grid setup is key: 1fr for text, auto for image, 1fr for text */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 50px;
}

/* --- The Text Blocks (Left and Right) --- */
.showcase-text-block {
    max-width: 400px; /* Prevents text lines from becoming too long */
}
.showcase-text-block.align-right {
    text-align: right;
    justify-self: end; /* Aligns the block itself to the right edge of its grid cell */
}
.showcase-text-block.align-left {
    text-align: left;
    justify-self: start; /* Aligns the block itself to the left edge of its grid cell */
}

.showcase-text-block h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

/* Decorative underline for the headings */
.showcase-text-block.align-right h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
}
.showcase-text-block.align-left h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
}

.showcase-text-block p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
}

/* --- The Center Image --- */
.showcase-image-feature {
    width: 400px; /* Fixed width for the image container */
    height: 550px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.showcase-image-feature:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.showcase-image-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .showcase-image-feature {
        width: 300px;
        height: 420px;
    }
}

@media (max-width: 992px) {
    .showcase-grid-layout {
        grid-template-columns: 1fr; /* Stack everything vertically */
        gap: 40px;
    }
    .showcase-text-block.align-right,
    .showcase-text-block.align-left {
        text-align: center;
        justify-self: center; /* Center the block itself */
    }
    .showcase-text-block.align-right h3::after,
    .showcase-text-block.align-left h3::after {
        left: 50%;
        transform: translateX(-50%); /* Center the underline */
    }
    .showcase-image-feature {
        order: -1; /* Puts the image at the top on smaller screens */
        width: 100%;
        /* max-width: 400px; */
        height: 450px;
    }
}

/* ================================================================= */
/* ============= NEW DESSERT FEATURE SECTION STYLES ================ */
/* ================================================================= */

/* ================================================================= */
/* ======== REVISED DESSERT FEATURE SECTION STYLES (New Geometry) ===== */
/* ================================================================= */

.dessert-feature-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    /* The bright but soft gradient background */
    background: 
        radial-gradient(circle at 100% 0%, rgba(199, 72, 59, 0.1), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(0, 159, 227, 0.1), transparent 40%),
        var(--white-color);
}

.dessert-feature-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* Image column is slightly wider */
    align-items: center;
    gap: 60px;
}

/* --- Text Content Styling (No Changes Here) --- */
.dessert-text-content {
    /* ... */
}
.dessert-text-content .eyebrow-heading {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.dessert-text-content h2 {
    font-size: 2.8rem;
    color: var(--dark-color);
    margin-bottom: 25px;
}
.dessert-text-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}
.dessert-highlights {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 500;
}
.highlight-item svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

/* --- Image Collage Styling (With New Geometry) --- */
.dessert-image-collage {
    position: relative;
    min-height: 550px;
}
.dessert-image-back, .dessert-image-front {
    position: absolute;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.dessert-image-back {
    bottom: 0;
    left: 0;
    width: 80%;
    height: 70%;
    z-index: 1;
    /* NEW: Organic "blob" shape */
    border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%;
}
.dessert-image-front {
    top: 0;
    right: 0;
    width: 70%;
    height: 80%;
    border: 6px solid var(--white-color);
    z-index: 2;
    /* NEW: A different organic "blob" shape for contrast */
    border-radius: 70% 30% 50% 50% / 60% 70% 30% 40%;
}

.dessert-image-back:hover, .dessert-image-front:hover {
    /* REVISED: Simplified hover effect */
    transform: scale(1.03) translateY(-5px);
    z-index: 3;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
}

.dessert-image-collage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* --- Responsive Adjustments (No Changes Here) --- */
@media (max-width: 992px) {
    .dessert-feature-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .dessert-text-content {
        order: 1;
        text-align: center;
    }
    .dessert-highlights {
        align-items: center;
    }
    .dessert-image-collage {
        order: 2;
        min-height: 450px;
    }
}

@media (max-width: 768px) {
    .dessert-feature-section {
        padding: 80px 0;
    }
    .dessert-image-collage {
        min-height: 400px;
    }
}

/* ================================================================= */
/* ============= NEW UNIFIED DETAILS SECTION STYLES ================ */
/* ================================================================= */

.menu-details-section {
    padding: 120px 0;
    background-color: #1a1a1a; /* A sophisticated, dark background */
    color: var(--white-color);
}

.details-header {
    text-align: center;
    margin-bottom: 60px;
}

.details-header .eyebrow-heading {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.details-header .section-title {
    color: var(--white-color); /* Ensure title is white on dark bg */
}

/* The 2-column grid for the cards */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* Styling for each card */
.detail-card {
    background-color: #262626; /* Slightly lighter than the main bg */
    border: 1px solid #333;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

/* The interactive glow effect */
.detail-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--secondary-color), transparent, transparent);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 0;
}

.detail-card:hover {
    transform: translateY(-10px);
    border-color: #444;
}

.detail-card:hover::before {
    transform: scale(1);
    opacity: 0.1; /* Very subtle glow */
}

/* Card content must be above the pseudo-element glow */
.detail-card-icon, .detail-card-content {
    position: relative;
    z-index: 1;
}

.detail-card-icon {
    color: var(--secondary-color);
    margin-bottom: 25px;
}

.detail-card-content h3 {
    font-size: 1.8rem;
    color: var(--white-color);
    margin-bottom: 15px;
}

.detail-card-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

/* The shared CTA button */
.details-cta-link {
    text-align: center;
}
.details-cta-link .btn {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 15px 40px;
}
.details-cta-link .btn:hover {
    background-color: #a63a2f;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .details-grid {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .menu-details-section {
        padding: 80px 0;
    }
    .details-grid {
        grid-template-columns: 1fr; /* Stack the cards on mobile */
    }
}

/* ================================================================= */
/* ========= REVISED SUPERB SERVICES HERO STYLES (NO VIDEO) ========= */
/* ================================================================= */

.services-hero-showcase {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    color: var(--white-color);
    overflow: hidden;

    /* REVISED: Static background image instead of video */
    background: url('images/serv-hero.webp') no-repeat center center/cover;
    z-index: 1; /* Set a base z-index */
}

/* Image Overlay */
.hero-image-overlay { /* Was .hero-video-overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 20, 30, 0.6); /* A cool, dark overlay */
    z-index: 1; /* Sits directly on top of the parent's background image */
}

/* Ensure container content is on top of the overlay */
.services-hero-showcase .container {
    position: relative;
    z-index: 2; /* Highest z-index to be on top of everything */
}

/* The Editorial Grid Layout (No Changes Here) */
.services-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    align-items: center;
    gap: 40px;
}

/* Column Styling (No Changes Here) */
.hero-title-column, .hero-description-column, .hero-expertise-column {
    padding: 0 40px;
}
.hero-description-column, .hero-expertise-column {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-title-column h1 {
    font-size: 3.8rem;
    font-weight: 300;
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.hero-description-column p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}
.hero-expertise-column h4 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}
.expertise-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.expertise-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 500;
}
.expertise-list svg {
    color: var(--primary-color);
}

/* --- Responsive Adjustments (No Changes Here) --- */
@media (max-width: 992px) {
    .services-hero-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 30px;
    }
    .hero-title-column {
        grid-column: 1 / -1;
        text-align: center;
        padding: 0 0 30px 0;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .hero-description-column {
        border-left: none;
    }
}
@media (max-width: 768px) {
    .services-hero-showcase {
        padding: 80px 0;
        height: auto;
        min-height: 90vh;
    }
    .services-hero-grid {
        grid-template-columns: 1fr;
    }
    .hero-title-column {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .hero-description-column, .hero-expertise-column {
        border-left: none;
        text-align: center;
        padding: 30px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    .expertise-list {
        display: inline-flex;
        text-align: left;
    }
    /* This scroll-down-indicator rule can be re-added if you want it on desktop-only */
    .scroll-down-indicator {
        display: none;
    }
}

/* ================================================================= */
/* ========= NEW VERTICAL TABS SERVICE DETAILS STYLES ============== */
/* ================================================================= */

.service-details-vertical-tabs {
    padding: 120px 0;
    background-color: var(--light-gray-color);
}

.vertical-tabs-container {
    display: grid;
    grid-template-columns: 280px 1fr; /* Fixed width for nav, flexible for content */
    gap: 50px;
    background-color: var(--white-color);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* --- Left Panel: Tab Navigation --- */
.tabs-nav-panel {
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.tab-nav-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: transparent;
    border: none;
    border-left: 4px solid transparent;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tab-nav-btn:hover {
    background-color: rgba(0,0,0,0.03);
    color: var(--primary-color);
}
.tab-nav-btn.active {
    background-color: var(--white-color);
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color);
}
.tab-nav-btn svg {
    flex-shrink: 0;
}

/* --- Right Panel: Tab Content --- */
.tabs-content-panel {
    position: relative;
    min-height: 450px; /* Prevents layout shifts on tab change */
}

.tab-pane {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.tab-pane.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.tab-pane-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.tab-pane-text h2 {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
}
.tab-pane-text p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Image Collage in Content Pane */
.tab-pane-images {
    position: relative;
    height: 400px;
}
.tab-pane-images img {
    position: absolute;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    object-fit: cover;
    transition: transform 0.4s ease;
}
.tab-pane-images .image-back {
    width: 80%;
    height: 80%;
    bottom: 0;
    left: 0;
}
.tab-pane-images .image-front {
    width: 70%;
    height: 70%;
    top: 0;
    right: 0;
    border: 5px solid var(--white-color);
}
.tab-pane-images:hover .image-back {
    transform: translateX(-5px);
}
.tab-pane-images:hover .image-front {
    transform: translateX(5px);
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .vertical-tabs-container {
        grid-template-columns: 1fr; /* Stack nav and content */
        gap: 30px;
        padding: 25px;
    }
    .tabs-nav-panel {
        flex-direction: row; /* Make nav horizontal */
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        overflow-x: auto; /* Allow horizontal scrolling for buttons */
    }
    .tab-nav-btn {
        border-left: none;
        border-bottom: 4px solid transparent;
        white-space: nowrap; /* Prevent button text from wrapping */
    }
    .tab-nav-btn.active {
        border-bottom-color: var(--primary-color);
    }
    .tabs-content-panel {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .tab-pane-grid {
        grid-template-columns: 1fr; /* Stack text and images */
        gap: 30px;
    }
    .tab-pane-text {
        order: 2;
        text-align: center;
    }
    .tab-pane-images {
        order: 1;
        height: 300px;
    }
}

/* ================================================================= */
/* ============= NEW TYPOGRAPHIC GRID HERO STYLES ================== */
/* ================================================================= */

.company-hero-typographic {
    padding: 100px 0;
    background-color: var(--light-gray-color);
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

/* The giant "Est. 2005" in the background */
.hero-bg-year {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 15vw;
    font-weight: 800;
    color: rgba(0,0,0,0.03);
    z-index: 0;
    user-select: none;
}

/* The main CSS Grid container */
.hero-typographic-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* A 5-column grid for precision */
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px 40px; /* Row and column gap */
    position: relative;
    z-index: 1;
}

/* The massive headline styling */
.hero-main-headline {
    grid-column: 1 / span 4; /* Spans the first 4 columns */
    grid-row: 1;
    font-size: clamp(3rem, 9vw, 8rem); /* Responsive font size */
    line-height: 0.9;
    color: var(--dark-color);
    margin: 0;
    z-index: 2;
}
.hero-main-headline .headline-light {
    display: block;
    font-weight: 300;
}
.hero-main-headline .headline-bold {
    display: block;
    font-weight: 700;
    color: var(--primary-color);
    padding-left: 1em; /* Indent the second line */
}

/* The intro paragraph styling */
.hero-intro-paragraph {
    grid-column: 5 / span 1; /* Sits in the 5th column */
    grid-row: 1 / span 2; /* Spans both rows to align nicely */
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    padding-left: 20px;
    border-left: 2px solid #ddd;
}

/* The accent image styling */
.hero-accent-image {
    grid-column: 3 / span 2; /* Sits in columns 3 and 4 */
    grid-row: 2;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    z-index: 1;
    margin-top: -20px; /* Overlap the headline slightly */
}
.hero-accent-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    /* This creates the cool duotone effect */
    filter: grayscale(100%) contrast(1.1);
    mix-blend-mode: multiply;
    opacity: 0.8;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .hero-typographic-grid {
        grid-template-columns: repeat(3, 1fr); /* Simplify to 3 columns */
    }
    .hero-main-headline {
        grid-column: 1 / span 3;
    }
    .hero-intro-paragraph {
        grid-column: 1 / span 3;
        grid-row: 3;
        border-left: none;
        padding-left: 0;
        text-align: center;
        margin-top: 20px;
    }
    .hero-accent-image {
        grid-column: 2 / span 2;
        grid-row: 2;
        margin-left: -50px;
    }
}

@media (max-width: 768px) {
    .company-hero-typographic {
        padding: 80px 0;
        min-height: auto;
    }
    .hero-typographic-grid {
        grid-template-columns: 1fr; /* Stack everything */
        gap: 30px;
    }
    .hero-main-headline, .hero-intro-paragraph, .hero-accent-image {
        grid-column: 1 / -1; /* Reset all items to full width */
        grid-row: auto;
    }
    .hero-main-headline {
        text-align: center;
    }
    .hero-main-headline .headline-bold {
        padding-left: 0; /* Remove indent */
    }
    .hero-accent-image {
        margin: 0;
    }
    .hero-bg-year {
        display: none; /* Hide background text on mobile to reduce clutter */
    }
}

/* ================================================================= */
/* =========== NEW SOPHISTICATED CASE STUDY HERO STYLES ============ */
/* ================================================================= */

.case-study-hero-showcase {
    padding: 100px 0;
    background-color: var(--white-color);
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* The 12-column grid for precise, editorial-style placement */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto; /* Two rows for content */
    align-items: center;
    gap: 20px 30px; /* Row and column gap */
}

/* --- Grid Item Placement --- */
.showcase-meta {
    grid-column: 11 / span 2; /* Top right */
    grid-row: 1;
    justify-self: end; /* Align to the right edge of its columns */
    align-self: start; /* Align to the top of its row */
}
.showcase-headline {
    grid-column: 1 / span 8; /* Top left, spanning 8 columns */
    grid-row: 1;
}
.showcase-description {
    grid-column: 3 / span 5; /* Bottom left, indented and spanning 5 columns */
    grid-row: 2;
}
.showcase-image {
    grid-column: 8 / span 5; /* Right side, spanning both rows */
    grid-row: 1 / span 2;
}

/* --- Element Styling --- */
.showcase-meta span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.showcase-headline {
    font-size: clamp(3rem, 9vw, 7.5rem); /* Huge, responsive font size */
    font-weight: 700;
    line-height: 1;
    color: var(--dark-color);
    margin: 0;
}

.showcase-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

.showcase-image {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.showcase-image:hover {
    transform: scale(1.03) rotate(1deg);
}
.showcase-image img {
    width: 100%;
    display: block;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .case-study-hero-showcase {
        padding: 80px 0;
        min-height: auto;
    }
    .showcase-grid {
        grid-template-columns: 1fr; /* Stack everything into a single column */
        gap: 40px;
        text-align: center;
    }
    /* Reset all grid placements */
    .showcase-meta, .showcase-headline, .showcase-description, .showcase-image {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
    }
    .showcase-meta {
        order: 1;
    }
    .showcase-headline {
        order: 2;
    }
    .showcase-image {
        order: 3;
        max-width: 400px; /* Constrain image width */
    }
    .showcase-description {
        order: 4;
    }
}

/* ================================================================= */
/* ============= NEW GALLERY FEATURE SECTION STYLES ================ */
/* ================================================================= */

.gallery-feature-section {
    padding: 100px 0;
    background-color: var(--white-color);
}

.gallery-header {
    text-align: center;
    margin-bottom: 60px;
}
.gallery-header .section-subtitle {
    font-size: 1.1rem;
    color: #555;
    max-width: 700px;
    margin: -15px auto 0;
}

/* The Asymmetrical Grid */
.gallery-asymmetric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* A 3-column base grid */
    grid-auto-rows: 300px; /* Defines the height of a standard grid row */
    gap: 25px;
}

/* Grid item sizing */
.gallery-card.tall-card {
    grid-row: span 2; /* Makes this card 2 rows tall */
}
.gallery-card.wide-card {
    grid-column: span 2; /* Makes this card 2 columns wide */
}

/* Individual Card Styling */
.gallery-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.card-image-wrapper {
    width: 100%;
    height: 100%;
}
.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gallery-card:hover .card-image-wrapper img {
    transform: scale(1.05); /* Zoom effect on image */
}

/* The Interactive Overlay */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end; /* Aligns content to the bottom */
    padding: 30px;
    color: var(--white-color);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.4s ease;
}
.gallery-card:hover .card-overlay {
    opacity: 1; /* Show on hover */
}

.card-overlay-content {
    transform: translateY(15px); /* Start slightly lower */
    transition: transform 0.4s ease;
}
.gallery-card:hover .card-overlay-content {
    transform: translateY(0); /* Slide up on hover */
}

.card-category {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
}
.card-overlay h4 {
    font-size: 1.5rem;
    margin: 5px 0 0 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .gallery-asymmetric-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .gallery-asymmetric-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        grid-auto-rows: 350px; /* Taller rows for mobile portrait */
    }
    /* Reset all spans for single column layout */
    .gallery-card.tall-card, .gallery-card.wide-card {
        grid-row: span 1;
        grid-column: span 1;
    }
}

/* ================================================================= */
/* ============= NEW INTERACTIVE HELP HERO STYLES ================== */
/* ================================================================= */
/* ================================================================= */
/* ============= NEW HELP CENTER HERO SECTION STYLES =============== */
/* ================================================================= */

/* Keyframes for the slowly moving gradient */
@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.help-center-hero {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

/* The animated gradient background */
.animated-gradient-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(-45deg, #f0f9ff, #fff5f4, #f0f9ff, #fff5f4);
    background-size: 400% 400%;
    animation: moveGradient 15s ease infinite;
    z-index: -1;
}

/* The main search card */
.hero-search-card {
    background-color: var(--white-color);
    max-width: 800px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.07);
    text-align: center;
}
.hero-search-card h1 {
    font-size: 2.8rem;
    color: var(--dark-color);
    margin-bottom: 15px;
}
.hero-search-card p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
}

/* The interactive search form */
.hero-search-form {
    position: relative;
}
.hero-search-form input {
    width: 100%;
    padding: 20px 60px 20px 25px;
    font-size: 1.1rem;
    border: 1px solid #ddd;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.hero-search-form input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 4px rgba(0, 159, 227, 0.1);
}
.hero-search-form button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.hero-search-form button:hover {
    background-color: #a63a2f;
}

/* The grid of quick topic links below */
.quick-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 60px auto 0 auto;
}
.topic-card {
    display: block;
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    color: var(--dark-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.topic-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.topic-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px auto;
    background-color: rgba(0, 159, 227, 0.1);
    color: var(--secondary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topic-icon svg {
    width: 24px; height: 24px;
}
.topic-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.topic-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .quick-topics-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .help-center-hero {
        padding: 60px 0;
    }
    .hero-search-card {
        padding: 30px 25px;
    }
}

/* ================================================================= */
/* ============= NEW TYPOGRAPHIC GALLERY HERO STYLES =============== */
/* ================================================================= */

/* Keyframes for the drifting words */
@keyframes drift {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--x-end), var(--y-end)); opacity: 0; }
}

/* Keyframes for the headline animation */
@keyframes slide-in-up {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes slide-in-down {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.gallery-hero-typographic {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4; /* A very light base color */
    overflow: hidden;
}

/* The drifting words background container */
.drifting-words-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.drifting-words-bg span {
    position: absolute;
    font-size: 2.5rem;
    font-weight: 600;
    color: rgba(0,0,0,0.05);
    animation: drift 20s infinite linear;
    user-select: none;
}
/* Position and animate each word uniquely */
.drifting-words-bg span:nth-child(1) { top: 10%; left: 5%; animation-duration: 25s; --x-end: 100vw; --y-end: 10vh; }
.drifting-words-bg span:nth-child(2) { top: 20%; left: 80%; animation-duration: 30s; --x-end: -100vw; --y-end: 20vh; animation-delay: -5s; }
.drifting-words-bg span:nth-child(3) { top: 80%; left: 10%; animation-duration: 22s; --x-end: 100vw; --y-end: -30vh; }
.drifting-words-bg span:nth-child(4) { top: 50%; left: 50%; animation-duration: 35s; --x-end: -50vw; --y-end: 50vh; animation-delay: -10s; }
.drifting-words-bg span:nth-child(5) { top: 90%; left: 90%; animation-duration: 28s; --x-end: -80vw; --y-end: -60vh; }
.drifting-words-bg span:nth-child(6) { top: 5%; left: 30%; animation-duration: 26s; --x-end: 50vw; --y-end: 80vh; animation-delay: -15s; }
.drifting-words-bg span:nth-child(7) { top: 30%; left: 15%; animation-duration: 32s; --x-end: 70vw; --y-end: -20vh; }
.drifting-words-bg span:nth-child(8) { top: 70%; left: 60%; animation-duration: 24s; --x-end: -40vw; --y-end: 30vh; animation-delay: -7s; }
.drifting-words-bg span:nth-child(9) { top: 40%; left: 90%; animation-duration: 29s; --x-end: -90vw; --y-end: -10vh; }
.drifting-words-bg span:nth-child(10) { top: 60%; left: 5%; animation-duration: 33s; --x-end: 80vw; --y-end: 40vh; animation-delay: -12s; }


/* The main content container */
.hero-typographic-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
}
.hero-typographic-content h1 {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 25px 0;
    /* Create a text gradient */
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
/* Wrapper for the split headline animation */
.headline-part-1, .headline-part-2 {
    display: block;
    overflow: hidden; /* Hide the text before animation */
}
.headline-part-1 span, .headline-part-2 span {
    display: block;
}
/* Animate the first part */
.headline-part-1.is-visible span {
    animation: slide-in-down 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
/* Animate the second part with a delay */
.headline-part-2.is-visible span {
    animation: slide-in-up 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s forwards;
}


.hero-typographic-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #444;
    opacity: 0;
    transform: translateY(20px);
    animation: slide-in-up 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s forwards;
}
.hero-typographic-content.is-visible p {
    opacity: 1;
    transform: translateY(0);
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .drifting-words-bg span { font-size: 1.8rem; }
    .hero-typographic-content p { font-size: 1rem; }
    /* Hide scroll indicator on mobile if section is not always full height */
    .gallery-hero-typographic .scroll-down-indicator {
        bottom: 20px;
    }
}

/* ================================================================= */
/* ================== NEW THANK YOU PAGE STYLES ==================== */
/* ================================================================= */

/* Keyframes for the checkmark animation */
@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}
@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 30px var(--secondary-color); }
}
@keyframes fade-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Page Body Styling */
.thank-you-page {
    background: linear-gradient(135deg, rgba(199, 72, 59, 0.05), rgba(0, 159, 227, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Arial', sans-serif;
}
.thank-you-main {
    padding: 40px;
}

/* The Main Confirmation Box */
.thank-you-box {
    background-color: var(--white-color);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
.thank-you-box.fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

/* Animated Checkmark Styling */
.checkmark-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px auto;
}
.checkmark-svg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #fff; /* The checkmark itself is white */
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--secondary-color);
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--secondary-color);
    fill: none;
    animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}

/* Typography and Button */
.thank-you-box h1 {
    font-size: 2.8rem;
    color: var(--dark-color);
    margin-bottom: 15px;
}
.thank-you-box p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 40px;
}
.thank-you-box .btn {
    padding: 15px 40px;
    font-weight: 600;
}