/* --- 1. Basic Setup & Typography --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: #ffffff;
    line-height: 1.7;
    overflow-x: hidden;
}

/* --- 2. Header Styling --- */
.services-header {
    text-align: center;
    padding: 6rem 1rem 4rem 1rem;
    position: relative;
    /* ADD THIS LINE */
    z-index: 2;
    /* ADD THIS LINE */
}

.sub-heading {
    color: #333;
    font-size: 0.9rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #777;
}

.main-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 0.5rem;
    color: #222;
}

/* --- 3. The Asymmetrical Grid Layout --- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    /* ADD THIS LINE */
    z-index: 2;
    /* ADD THIS LINE */
}

/* --- 4. Content Block Styling --- */
.service-content,
.deco-text {
    padding: 1rem;
    /* This ensures text blocks can center vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-number {
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.service-number:hover {
    color: #a18a6c;
    transform: translateX(5px);
}

/* REPLACE your old .service-title rule with this one */
.service-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #111;
    margin-bottom: 1rem;

    /* --- New styles for hover effect --- */
    position: relative;
    display: inline-block;
    /* Fits to text width */
    z-index: 1;
    /* Keeps text above the new background */
    padding: 0 4px;
    /* Adds a little space for the background */
    margin-left: -4px;
    /* Compensates for the padding */
    transition: color 0.4s ease-out;
    /* Fades the text color */
}

/* This creates the gold background "wipe" */
.service-title::before {
    content: '';
    position: absolute;
    background-color: #a18a6c;
    /* The elegant gold color */

    /* Covers the whole element */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    /* Starts at 0 width and grows from the left */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Places it *behind* the text */
    z-index: -1;
}

/* On hover, scale the background to 100% width */
.service-title:hover::before {
    transform: scaleX(1);
}

/* On hover, change the text color to white for contrast */
.service-title:hover {
    color: #ffffff;
}

.service-title,
.deco-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #111;
    margin-bottom: 1rem;
}

.service-description,
.deco-text p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.9;
    font-weight: 300;
}

.icons-container {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 5. Image & Decorative Frame Styling --- */
.service-image-wrapper,
.deco-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Ensure image zoom stays within bounds */
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.5);
    /* Stronger shadow */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.service-image-wrapper img,
.deco-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: relative;
    z-index: 2;
    transition: transform 0.6s ease-out;
    /* Smooth zoom effect */
}

.service-image-wrapper:hover img,
.deco-image:hover img {
    transform: scale(1.08);
    /* Zoom in on hover */
}

/* The Decorative Frame */
.service-image-wrapper::after {
    content: '';
    position: absolute;
    border: 1px solid #a18a6c;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: transform 0.4s ease-out, border-color 0.4s ease;
}

.service-image-wrapper:hover::after {
    transform: translate(10px, 10px);
    /* Shift frame on hover */
    border-color: #333;
    /* Darker border on hover */
}

/* --- 6. Grid Placement (Expanded for 13 Services) --- */

/* Service 1 */
.image-1 {
    grid-column: 2 / 8;
    grid-row: 1;
}

.content-1 {
    grid-column: 9 / 12;
    grid-row: 1;
}

.image-1::after {
    top: -30px;
    left: -30px;
}

/* Deco Block 1 */
.text-1 {
    grid-column: 3 / 6;
    grid-row: 2;
    padding-top: 4rem;
}

.image-2 {
    grid-column: 8 / 11;
    grid-row: 2;
    max-height: 400px;
}

/* Service 2 */
.content-2 {
    grid-column: 3 / 7;
    grid-row: 3;
    padding-top: 4rem;
}

.image-3 {
    grid-column: 7 / 12;
    grid-row: 3;
    margin-top: 4rem;
}

.image-3::after {
    top: 30px;
    left: -30px;
}

/* Service 3 */
.image-4 {
    grid-column: 3 / 7;
    grid-row: 4;
    margin-top: 4rem;
}

.content-3 {
    grid-column: 8 / 12;
    grid-row: 4;
    padding-top: 4rem;
}

.image-4::after {
    top: -30px;
    left: 30px;
}

/* Service 4 */
.content-4 {
    grid-column: 3 / 7;
    grid-row: 5;
    padding-top: 4rem;
}

.image-5 {
    grid-column: 7 / 12;
    grid-row: 5;
    margin-top: 4rem;
}

.image-5::after {
    top: 30px;
    left: -30px;
}

/* Service 5 */
.image-6 {
    grid-column: 2 / 8;
    grid-row: 6;
    margin-top: 4rem;
}

.content-5 {
    grid-column: 9 / 12;
    grid-row: 6;
    padding-top: 4rem;
}

.image-6::after {
    top: -30px;
    left: -30px;
}

/* Deco Block 2 */
.text-2 {
    grid-column: 8 / 11;
    grid-row: 7;
    padding-top: 4rem;
}

.image-7 {
    grid-column: 3 / 7;
    grid-row: 7;
    max-height: 400px;
    margin-top: 4rem;
}

/* Service 6 */
.content-6 {
    grid-column: 3 / 7;
    grid-row: 8;
    padding-top: 4rem;
}

.image-8 {
    grid-column: 7 / 12;
    grid-row: 8;
    margin-top: 4rem;
}

.image-8::after {
    top: 30px;
    left: -30px;
}

/* Service 7 */
.image-9 {
    grid-column: 3 / 7;
    grid-row: 9;
    margin-top: 4rem;
}

.content-7 {
    grid-column: 8 / 12;
    grid-row: 9;
    padding-top: 4rem;
}

.image-9::after {
    top: -30px;
    left: 30px;
}

/* Service 8 */
.content-8 {
    grid-column: 2 / 6;
    grid-row: 10;
    padding-top: 4rem;
}

.image-10 {
    grid-column: 6 / 12;
    grid-row: 10;
    margin-top: 4rem;
}

.image-10::after {
    top: 30px;
    left: -30px;
}

/* Service 9 */
.image-11 {
    grid-column: 2 / 8;
    grid-row: 11;
    margin-top: 4rem;
}

.content-9 {
    grid-column: 9 / 12;
    grid-row: 11;
    padding-top: 4rem;
}

.image-11::after {
    top: -30px;
    left: -30px;
}

/* Deco Block 3 */

.text-3 {
    grid-column: 3 / 6;
    grid-row: 12;
    padding-top: 4rem;
}

.image-12 {
    grid-column: 8 / 11;
    grid-row: 12;
    max-height: 400px;
    margin-top: 4rem;
}

/* Service 10 */
.content-10 {
    grid-column: 3 / 7;
    grid-row: 13;
    padding-top: 4rem;
}

.image-13 {
    grid-column: 7 / 12;
    grid-row: 13;
    margin-top: 4rem;
}

.image-13::after {
    top: 30px;
    left: -30px;
}

/* Service 11 */
.image-14 {
    grid-column: 3 / 7;
    grid-row: 14;
    margin-top: 4rem;
}

.content-11 {
    grid-column: 8 / 12;
    grid-row: 14;
    padding-top: 4rem;
}

.image-14::after {
    top: -30px;
    left: 30px;
}

/* Service 12 */
.content-12 {
    grid-column: 2 / 6;
    grid-row: 15;
    padding-top: 4rem;
}

.image-15 {
    grid-column: 6 / 12;
    grid-row: 15;
    margin-top: 4rem;
}

.image-15::after {
    top: 30px;
    left: -30px;
}

/* Service 13 */
.image-16 {
    grid-column: 2 / 8;
    grid-row: 16;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.content-13 {
    grid-column: 9 / 12;
    grid-row: 16;
    padding-top: 4rem;
}

.image-16::after {
    top: -30px;
    left: -30px;
}


/* --- 7. NEW Animation Classes (for JavaScript) --- */

/* Define the "before" state for each animation */
.animate-fade-up,
.animate-slide-left,
.animate-slide-right,
.animate-zoom-in {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.7s ease-out;
}

.animate-fade-up {
    transform: translateY(40px);
}

.animate-slide-left {
    transform: translateX(-50px);
}

.animate-slide-right {
    transform: translateX(50px);
}

.animate-zoom-in {
    transform: scale(0.9);
}

/* This is the "after" state, added by JS when the element is visible */
.show {
    opacity: 1;
    transform: none;
    /* Resets translate and scale to default */
}




/* --- 8. Responsive (Mobile) --- */
@media (max-width: 768px) {
    .services-header {
        padding: 4rem 1rem 3rem 1rem;
    }

    .service-grid {
        display: block;
        /* Disables the grid */
        padding: 1rem;
    }

    .service-grid>div {
        grid-column: auto !important;
        /* !important to override desktop grid */
        grid-row: auto !important;
        margin-top: 1rem !important;
        /* Standardize spacing */
        margin-bottom: 3rem !important;
        padding: 0 !important;
    }

    /* On mobile, we want image-then-text */
    /* This re-orders the items that have text first */
    .content-2 {
        grid-row: 4;
    }

    .image-3 {
        grid-row: 3;
    }

    .content-4 {
        grid-row: 6;
    }

    .image-5 {
        grid-row: 5;
    }

    .content-6 {
        grid-row: 9;
    }

    .image-8 {
        grid-row: 8;
    }

    /* ... (add more for each reversed block) ... */
    .content-8 {
        grid-row: 12;
    }

    .image-10 {
        grid-row: 11;
    }

    .content-10 {
        grid-row: 15;
    }

    .image-13 {
        grid-row: 14;
    }

    .content-12 {
        grid-row: 18;
    }

    .image-15 {
        grid-row: 17;
    }


    /* Simplify frames on mobile */
    .service-image-wrapper::after {
        top: -15px;
        left: -15px;
    }

    .image-3::after,
    .image-5::after,
    .image-8::after,
    .image-10::after,
    .image-13::after,
    .image-15::after {
        top: 15px;
        left: 15px;
    }

    /* Improve text readability on mobile */
    .service-title,
    .deco-text h3 {
        font-size: 1.8rem;
    }

    .service-description,
    .deco-text p {
        font-size: 1rem;
    }

    /* Make icons stack on mobile */
    .icons-container {
        flex-direction: column;
        gap: 1rem;
    }
}

/* --- Tablet Responsive (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(8, 1fr);
        padding: 1.5rem;
    }

    /* Adjust grid spans for tablet */
    .image-1 { grid-column: 1 / 6; }
    .content-1 { grid-column: 6 / 9; }
    
    .text-1 { grid-column: 2 / 5; }
    .image-2 { grid-column: 5 / 8; }
    
    .content-2 { grid-column: 2 / 5; }
    .image-3 { grid-column: 5 / 9; }
    
    .image-4 { grid-column: 1 / 5; }
    .content-3 { grid-column: 5 / 8; }
    
    .content-4 { grid-column: 2 / 5; }
    .image-5 { grid-column: 5 / 9; }
    
    .image-6 { grid-column: 1 / 6; }
    .content-5 { grid-column: 6 / 9; }
    
    .text-2 { grid-column: 5 / 8; }
    .image-7 { grid-column: 2 / 5; }
    
    .content-6 { grid-column: 2 / 5; }
    .image-8 { grid-column: 5 / 9; }
    
    .image-9 { grid-column: 1 / 5; }
    .content-7 { grid-column: 5 / 8; }
    
    .content-8 { grid-column: 1 / 5; }
    .image-10 { grid-column: 5 / 9; }
    
    .image-11 { grid-column: 1 / 6; }
    .content-9 { grid-column: 6 / 9; }
    
    .text-3 { grid-column: 2 / 5; }
    .image-12 { grid-column: 5 / 8; }
    
    .content-10 { grid-column: 2 / 5; }
    .image-13 { grid-column: 5 / 9; }
    
    .image-14 { grid-column: 1 / 5; }
    .content-11 { grid-column: 5 / 8; }
    
    .content-12 { grid-column: 1 / 5; }
    .image-15 { grid-column: 5 / 9; }
    
    .image-16 { grid-column: 1 / 6; }
    .content-13 { grid-column: 6 / 9; }

    /* Adjust font sizes for tablet */
    .service-title,
    .deco-text h3 {
        font-size: 2rem;
    }
}


/* --- 9. NEW Hover Animations --- */

/* Add transition and z-index to the original elements */
.service-image-wrapper,
.deco-image {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* On hover, lift and scale the entire block */
.service-image-wrapper:hover,
.deco-image:hover {
    transform: translateY(-8px) scale(1.02);
    /* z-index ensures the hovered element comes "on top" of others */
    z-index: 10;
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .service-image-wrapper:hover,
    .deco-image:hover {
        transform: none;
    }
    
    .service-image-wrapper:hover img,
    .deco-image:hover img {
        transform: none;
    }
    
    .service-title:hover {
        color: #111;
    }
    
    .service-title:hover::before {
        transform: scaleX(0);
    }
}

/* --- 10. NEW Floating Background Objects (Updated) --- */

/* --- 10. Floating Orbs Removed --- */