body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #fff2ce; /* beige off-white */
    color: #333;
    line-height: 1.7;
}

h1, h2, h3 {
    font-weight: 700;
    color: #ba4a02;
}

p {
    font-size: 16px;
    color: #96380c;
}
/* =================== ABOUT SECTION =================== */
.about-section {
    padding: var(--section-space) 20px;
    margin: 0 auto;
    max-width: 1200px;
    margin-top:50px
}

    .about-section .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    /* --- Text Section --- */
    .about-section .text {
        flex: 1;
        min-width: 280px;
    }

        .about-section .text h3 {
            font-size: 18px;
            font-weight: 600;
            color: #888;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .about-section .text h1 {
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 700;
            margin-bottom: 20px;
            color: #222;
        }

            .about-section .text h1 span {
                color: #c0392b;
            }

        .about-section .text p {
            font-size: 1rem;
            line-height: 1.6;
            color: #555;
            margin-bottom: 16px;
        }

    /* --- Image Section --- */
    .about-section .image2 {
        flex: 1;
        display: flex;
        justify-content: center;
    }

        .about-section .image2 img {
            max-width: 100%;
            border-radius: 16px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.1);
        }

/* =================== RESPONSIVE =================== */

/* Small screens (phones) → stack vertically */
@media (max-width: 768px) {
    .about-section .container {
        flex-direction: column;
        text-align: center;
    }

    .about-section .text {
        order: 2; /* text below image */
    }

    .about-section .image2 {
        order: 1; /* image above text */
    }

    .about-section .text h1 {
        font-size: 24px;
    }

    .about-section .text p {
        font-size: 0.95rem;
    }
}

/* Medium screens (tablets) → two columns but smaller gap */
@media (min-width: 769px) and (max-width: 1024px) {
    .about-section .container {
        gap: 20px;
    }

    .about-section .text h1 {
        font-size: 28px;
    }
}

/* Large screens (desktops) → keep side by side */
@media (min-width: 1025px) {
    .about-section .container {
        gap: 40px;
    }
}



/* =================== HERO SECTION =================== */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 100vh;
    text-align: center;
}

.hero-left {
    background: #eeddbff3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 100vh; 
    color: #2d2d2d;
    
}

/* Top half (text) */
.hero-left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Bottom half (image covers it) */
.hero-left-image {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    
}

    .hero-left-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
        object-position: bottom;
    }
/* CENTER */
.hero-center {
    display: flex;
    flex-direction: column;
    height: 100vh; /* full height */
    text-align: center;
    color: #fff;
    padding: 0;
}

/* Image block = 80% */
.hero-center-image {
    flex: 1;
    width: 100%;
    background-color: #ffd789; /* bg for image section */
    display: flex;
    justify-content: center;
    align-items: center;
}

    .hero-center-image img {
        max-width: 60%; /* adjust as needed */
        height: auto;
    }

/* Text block = 20% */
.hero-center-content {
    flex: 2;
    width: 100%;
    background-color: #ffd789;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 6rem;
}

/* RIGHT SIDE */
.hero-right {
    background: url('/images/Tortila_stack_2.JPG') no-repeat center center/cover, #FF9E42;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* content stays at top */
    align-items: center; /* horizontally centered */
    text-align: center;
    color: #2d2d2d;
}

    .hero-right h2 {
        font-size: 26px;
        font-weight: 600;
        margin-top: 2rem;
    }

    .hero-right ul {
        list-style: none;
        padding: 0;
    }

        .hero-right ul li {
            margin: 1rem 0;
            font-weight: 500;
            color: #2f2f2f;
        }

/* =================== RESPONSIVE HERO SECTION =================== */

/* Small screens (xs: up to 640px) */
@media (max-width: 640px) {
    .hero {
        grid-template-columns: 1fr; /* stack all */
        min-height: auto;
    }

    .hero-left,
    .hero-center,
    .hero-right {
        height: auto;
        min-height: 60vh;
    }

    .hero-left-image img {
        height: 250px;
        object-fit: cover;
    }

    .hero-center-content {
        padding: 1rem 1.5rem;
    }

    .hero-center-image img {
        max-width: 80%;
    }

    .hero-right h2 {
        font-size: 20px;
    }

    .hero-right ul li {
        font-size: 14px;
    }
}

/* Medium screens (md: 641px–768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr 1fr; /* 2 columns */
        grid-template-rows: auto auto; /* allow wrap */
    }

    .hero-left {
        grid-column: 1 / 3; /* full width row */
        height: auto;
    }

    .hero-center,
    .hero-right {
        height: auto;
    }

    .hero-center-content {
        padding: 1rem 3rem;
    }

    .hero-center-image img {
        max-width: 70%;
    }
}

/* Large screens (lg: 769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
    }

    .hero-left, .hero-center, .hero-right {
        height: 100vh;
    }

    .hero-center-content {
        padding: 1rem 4rem;
    }

    .hero-center-image img {
        max-width: 65%;
    }
}

/* Extra large screens (xl: 1025px and up) */
@media (min-width: 1025px) {
    .hero {
        grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
    }

    .hero-left, .hero-center, .hero-right {
        height: 100vh;
    }

    .hero-center-content {
        padding: 2rem 6rem;
    }

    .hero-center-image img {
        max-width: 60%;
    }

    .hero-right h2 {
        font-size: 28px;
    }
}


/* =================== CONTENT SECTIONS =================== */
.hero-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* all columns same height */
    gap: 0;
    padding: 0;
    background-color: #fff2ce;
    height: auto; /* auto height so it won’t push footer */
}

/* Shared column styling */
.hero-column {
    flex: 1;
    display: grid; /* evenly split images */
    gap: 0;
}

/* Two images column (left & right) → 2 rows */
.column-one,
.column-three {
    grid-template-rows: repeat(2, 1fr);
}

/* Center column with 3 images → 3 rows */
.column-two {
    grid-template-rows: repeat(3, 1fr);
}

/* Image wrapper with overlay */
.hero-image {
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

    /* Images */
    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Dark overlay */
    .hero-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1;
        transition: background 0.3s ease;
    }

/* Text on images */
.hero-text {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    pointer-events: none;
}

/* Hover effect (lighter overlay) */
/*.hero-image:hover::after {
    background: rgba(0,0,0,0.25);
}*/

/* Column-specific colors (background behind images) */
.column-one {
    background-color: #FFD79A;
}

.column-two {
    background-color: #FFB366;
}

.column-three {
    background-color: #FF9E42;
}

/* 📱 Responsive (stack on mobile) */
@media (max-width: 768px) {
    .hero-wrapper {
        flex-direction: column;
        height: auto;
    }

    .hero-column {
        grid-template-rows: none; /* reset to auto */
    }
}
/* ========== RESPONSIVE BREAKPOINTS ========== */

/* 📱 Small screens (up to 640px) */
@media (max-width: 640px) {
    .hero-wrapper {
        flex-direction: column; /* stack columns */
    }

    .hero-text {
        font-size: 1.25rem; /* smaller text */
        letter-spacing: 1px;
    }

    .hero-image {
        min-height: 200px; /* maintain visibility */
    }
}

/* 📱 Medium screens (641px – 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .hero-wrapper {
        flex-direction: column; /* stack but bigger images */
    }

    .hero-text {
        font-size: 1.5rem;
    }

    .hero-image {
        min-height: 250px;
    }
}

/* 💻 Large screens (769px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-wrapper {
        flex-direction: row; /* keep 3 columns */
    }

    .hero-text {
        font-size: 1.75rem;
    }

    .hero-image {
        min-height: 300px;
    }
}

/* 🖥️ Extra large screens (1025px and up) */
@media (min-width: 1025px) {
    .hero-wrapper {
        flex-direction: row; /* 3 columns as default */
    }

    .hero-text {
        font-size: 2rem;
    }

    .hero-image {
        min-height: 350px;
    }
}