/* --- 1. CSS Reset & Variables --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-blue: #01A4E1;
    --text-dark: #000000;
    --text-gray: #3E3E3E;
    --font-main: 'Google Sans Flex', sans-serif;
}

body {
    font-family: var(--font-main);
    color: #3E3E3E;
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 16px;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 40px;
}

/* All content links */

section a {
    color: #01A4E1;
    text-decoration: none;
}

.blue-text { color: var(--primary-blue); }

/* --- 2. Header & Navigation --- */


.logo img { 
    height: 59px; 
    width: auto; 
    display: block;
}
/* --- 2. Header & Navigation --- */
.main-header {
    height: 90px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #f1f3f4;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Desktop Menu Styling */
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 35px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s;
}

.nav-menu ul li {
    position: relative;
    padding: 20px 0; /* Creates a larger hover area */
}


/* Update this selector to find the link inside the div */
.nav-menu ul li.active .mobile-nav-item a {
    color: #00AEEF !important; /* Force Printr Blue */
    font-weight: 600;
}

/* Also ensure the active state works for simple links without dropdowns */
.nav-menu ul li.active > a {
    color: #00AEEF !important;
    font-weight: 600;
}

/* --- DROP-DOWN CONTAINER (SOLVES TRANSPARENCY & SPACING) --- */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff !important; /* Solid background */
    width: 520px; /* Wider for 2-column layout */
    
    /* Force 2-column Grid */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    
    padding: 10px !important;
    margin: 0 !important;
    list-style: none !important;
    
    /* UI Polish */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-radius: 10px;
    border: 1px solid #ebebeb;
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
    z-index: 1100;
    gap: 10px !important;
}

/* --- THE LIST ITEMS (ROWS) --- */
.dropdown li {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* --- THE LINKS (REDUCED VERTICAL SPACE) --- */
.dropdown li a {
    display: block !important;
    padding: 6px 15px !important; /* Minimal vertical padding to reduce height */
    font-size: 14px;
    color: #444;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.2 !important; /* Tight text lines */
    border-radius: 6px;
    transition: all 0.2s ease;
}

.dropdown li a:hover {
    background: #FFF;
    color: #00AEEF !important;
}

/* --- SHOW ON HOVER --- */
.nav-menu ul li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu ul li.active > a {
    color: #00AEEF; /* Your Printr Blue */
    font-weight: 500;
}

/* Fix for Narrow Menus (Signage & Vehicle) */
.nav-menu ul li:nth-child(3) .dropdown,
.nav-menu ul li:nth-child(4) .dropdown {
    width: 260px;
    grid-template-columns: 1fr;
}

/* --- QUOTE BUTTON --- */
.btn-quote-nav {
    background-color: #00AEEF;
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 6px;
    transition: background 0.3s;
}


/* --- FULL MOBILE NAVIGATION (MAX 1024px) --- */
@media (max-width: 1024px) {
    
    /* 1. Hamburger Toggle Button */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 2000 !important;
        position: relative;
    }

    .menu-toggle span {
        width: 28px;
        height: 3px;
        background-color: #333;
        transition: 0.3s ease;
    }

    /* Hamburger Animation */
    .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* 2. Side Menu Panel */
    .nav-menu {
        position: fixed !important;
        top: 0;
        right: -100%; /* Hidden by default */
        width: 280px;
        height: 100vh;
        background: #ffffff !important;
        padding: 60px 0 20px 0 !important; /* Zero horizontal padding to allow full-width borders */
        transition: 0.4s ease-in-out;
        overflow-y: auto;
        z-index: 1999 !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-menu.active {
        right: 0 !important; /* Slide in */
    }

    .nav-menu ul {
        flex-direction: column;
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        gap: 0px;
    }

    .nav-menu ul li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
    }

    /* 3. The Split Link & Trigger Container */
    .mobile-nav-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 44px;
        padding: 0 20px; /* Internal spacing for text and icon */
    }

    .mobile-nav-item a {
        flex: 1; /* Link takes up all space on the left */
        padding: 8px 0 !important;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        text-decoration: none;
        display: block;
    }

    /* 4. Dropdown Trigger (The Plus/Minus Icon) */
    .dropdown-trigger {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s;
    }

    .dropdown-trigger::after {
        content: '+';
        font-size: 18px;
        color: #00AEEF;
        font-weight: bold;
    }

    /* Active States for Open Menus */
    .has-dropdown.open .dropdown-trigger::after {
        content: '−'; /* Minus symbol */
        color: #333;
    }

    .has-dropdown.open .mobile-nav-item {
        background-color: #f9feff;
        border-left: 4px solid #00AEEF;
    }

    /* 5. The Dropdown Sub-Menu */
    .dropdown {
        display: none !important; /* Controlled by JS */
        background: #fafafa !important;
        list-style: none;
        padding: 0 !important;
    }

    .has-dropdown.open .dropdown {
        display: block !important;
    }

    .dropdown li {
        border-bottom: 1px solid #eee !important;
        padding-left: 30px !important; /* Indent sub-menu items */
    }

    .dropdown li a {
        padding: 8px 0 !important;
        font-size: 14px;
        color: #666;
        font-weight: 500;
        display: block;
    }

    /* 6. Special Handling for Quote Button */
    .nav-menu li:last-child {
        border-bottom: none;
        padding: 20px;
    }

    .btn-quote-nav {
        display: block;
        background-color: #00AEEF;
        color: #fff !important;
        text-align: center;
        padding: 12px !important;
        border-radius: 8px;
        font-weight: bold;
    }
}
/* --- 3. Hero Section (Desktop) --- */
.hero-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* REDUCED min-height: was 80vh, now 60vh to pull it up */
    min-height: 60vh; 
    max-width: 1250px;
    margin: 0 auto;
    /* REDUCED top padding: was 40px, now 20px */
    padding: 20px 40px 40px 40px; 
    gap: 60px;
}

.hero-content-wrapper { flex: 1; }

.hero-content-inner h1 {
    margin-top: 0 !important;
    font-size: 50px;
    line-height: 1.1;
    color: #000;
    margin-bottom: 24px;
    font-variation-settings: "wght" 600;
    white-space: nowrap;
}

.hero-content-inner p {
    font-size: 18px;
    color: var(--text-gray);
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

/* Image Wrapper (XD Spec) */
/* Image Wrapper (Updated for layout stacking) */
.hero-image-wrapper {
    flex: 0 0 764px;
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    position: relative; /* CRITICAL: Stays relative to contain absolutely positioned slides */
}

/* Individual Slides */
.hero-image-wrapper .hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0; /* Hidden by default */
    transition: opacity 1.2s ease-in-out; /* Controls the speed of the cross-fade transition */
    z-index: 1;
}

/* Active Slide State */
.hero-image-wrapper .hero-slide.active {
    opacity: 1; /* Fully visible when active */
    z-index: 2; /* Sits cleanly on top of the fading-out slide */
}

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

/* --- 4. Button Globals --- */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
    font-variation-settings: "wght" 600;
    transition: 0.3s;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: #fff !important;
    border: 1px solid var(--primary-blue);
}

.btn-secondary {
    background-color: #fff;
    color: var(--text-dark) !important;
    border: 1px solid #dadce0;
}

.btn-primary:hover { background: #0082c4; }
.btn-secondary:hover { background: #f8f9fa; }


/* --- 5. Responsive Adjustments --- */
@media (max-width: 1024px) {
    

    .hero-split {
        flex-direction: column;
        min-height: auto;
        text-align: center;
        padding: 60px 20px;
        gap: 50px;
    }

    .hero-content-inner h1 {
        font-size: 38px;
        white-space: normal;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 320px;
    }

    .hero-image-wrapper {
        flex: none;
        width: 100%;
        height: 350px;
        border-radius: 20px;
    }
}
/* --- Logo Bar Section --- */
.logo-bar {
    /* Exact background color and opacity from XD properties */
    background-color: #fff; 
    padding: 40px 0; /* Matches the ~140px section height in XD */
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.logo-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.logo-title h2 {
    /* Typography for 'Great brands, better partnerships.' */
    font-size: 24px;
    line-height: 1.25;
    color: var(--text-dark);
    font-variation-settings: "wght" 500;
    min-width: 260px;
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Vertical separator line */
    padding-right: 40px;
    /* Keeps the lines exactly as forced by the <br> tag */
    white-space: nowrap; 
}

/* Slider Container */
.logo-slider {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* The animated track */
.logo-track {
    display: flex;
    /* 24 logos total (12 original + 12 duplicates) */
    width: calc(180px * 24); 
    animation: scroll 30s linear infinite; /* Slightly slower for better feel */
}

.slide {
    /* THE FIX: Reduced from 280px to bring logos much closer together */
    width: 180px; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.slide img {
    /* Larger logo size as requested */
    height: 64px; 
    width: auto;
    max-width: 140px; /* Prevents wider logos from breaking out of the 180px box */
    object-fit: contain;
    /* Full color, no filters */
    filter: none;
    opacity: 1;
}

/* --- Infinite Scroll Animation --- */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly the width of the FIRST 12 logos */
        /* This makes the jump back to 0 completely invisible */
        transform: translateX(calc(-180px * 12));
    }
}

/* Pause animation on hover so users can see specific brands */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .logo-flex {
        gap: 30px;
    }
    .logo-title h3 {
        font-size: 20px;
        min-width: 200px;
    }
    .slide {
        width: 150px; /* Tighter grouping for tablets */
    }
    .logo-track {
        width: calc(150px * 24); /* Matches tablet slide width */
    }
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-150px * 12)); } /* Must also be 12 */
    }
}

@media (max-width: 768px) {
    .logo-bar {
        padding: 50px 0;
    }
    .logo-flex {
        flex-direction: column;
        text-align: center;
    }
    .logo-title h3 {
        border-right: none;
        padding-right: 0;
        margin-bottom: 30px;
        white-space: normal;
    }
    .slide img {
        height: 50px;
    }
}

/* --- Solutions Section Base Styles --- */
.solutions-section {
    padding: 60px 0;
    background-color: #fff;
}

.solutions-header {
    margin-bottom: 50px;
}

.solutions-header h2 {
    font-size: 40px;
    line-height: 1.1;
    color: var(--text-dark);
    font-variation-settings: "wght" 700;
    margin-bottom: 20px;
}

.solutions-header  .label {
    font-size: 16px;
    color: #000;
    display: block;
    margin-bottom: 8px;
    font-variation-settings: "wght" 500;
}

/* Grid Layout: Using minmax ensures cards stay 277px until they need to stack */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 277px);
    gap: 20px;
    justify-content: flex-start;
}

.solution-card {
    position: relative;
    width: 277px;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background-color: #000; /* Fallback for image loading */
}

.solution-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9; /* Slightly dim image to pop text */
    transition: transform 0.5s ease;
}

.solution-card:hover img {
    transform: scale(1.08);
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.card-overlay h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 28px; /* Exact XD spacing */
    font-variation-settings: "wght" 500;
}

.card-overlay a {

    color: #fff;
    text-decoration: none;
}

/* --- The Arrow (Pixel Perfect Fix) --- */
.arrow-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* Or whatever your design uses */
    height: 35px;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    text-decoration: none; /* Add this to remove link underline */
    transition: background-color 0.3s, color 0.3s;
}

.arrow-circle:hover {
    background-color: #fff;
    color: #000; /* Example hover effect */
}




/* Hover States */
.arrow-circle.active,
.solution-card:hover .arrow-circle {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* --- 3. Responsive Media Queries --- */

@media (max-width: 1200px) {
    .solutions-grid {
        justify-content: center; /* Center the grid on tablets */
    }
}

@media (max-width: 768px) {
    .solutions-header {
        text-align: center;
    }
    
    .solutions-header h2 {
        font-size: 32px;
    }

    .solutions-header p {
        margin: 0 auto;
    }

    .solutions-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        justify-items: center;
    }

    .solution-card {
        width: 100%; /* Make card wider on mobile for better touch target */
        max-width: 350px;
    }
}

/* ==========================================================================
   CASE STUDIES SECTION (Slider & Card Layout)
   ========================================================================== */

.case-studies {
    padding: 60px 0;
    background-color: #FAF9F6; /* White background for the section */
}

/* --- Header & Controls --- */
.cs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.cs-header .label {
    font-size: 16px;
    color: #000;
    display: block;
    margin-bottom: 10px;
    font-variation-settings: "wght" 500;
}

.cs-header h2 {
    font-size: 40px;
    line-height: 1.1;
    color: var(--text-dark);
    margin: 0;
    font-variation-settings: "wght" 700;
}

/* Slider Controls (Circle Buttons) */
.cs-controls {
    display: flex;
    gap: 12px;
}

.ctrl-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #DBD2B8;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.ctrl-btn:hover {
    background-color: #F4F1EA;
    border-color: var(--text-dark);
}

/* --- Slider Window & Track --- */
.cs-slider-window {
    width: 100%;
    overflow: hidden; /* Hides cards not in view */
    border-radius: 16px;
    border: 1px solid #DBD2B8; /* 20% Opacity Line */
}

.cs-track {
    display: flex;
    /* Transformation is handled by JS */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- The Case Study Card --- */
.cs-card {
    min-width: 100%; /* One card fills the entire window */
    display: flex;
    height: 350px; /* Adjusted height to match XD proportions */
    background-color: #FAF9F6; /* Light beige content background */
}

/* Left Side: Image (Exact 400px Width) */
.cs-image-side {
    width: 400px; /* Fixed Width */
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

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

/* Right Side: Content Area */
.cs-content-side {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 0 80px; /* Generous padding for the "clean" look */
}

.cs-content-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 550px;
}

.cs-logo {
    height: 60px; /* Professional logo sizing */
    width: auto;
    margin-bottom: 10px;
    display: block;
    object-fit: contain;
}

.cs-card blockquote {
    font-size: 26px;
    line-height: 1.4;
    color: var(--text-dark);
    font-variation-settings: "wght" 500;
    margin: 0 0 40px 0;
    border: none;
    padding: 0;
}

/* The Link/Arrow */
.cs-link {
    text-decoration: none;
    color: var(--primary-blue);
    font-size: 15px;
    font-variation-settings: "wght" 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
}

.cs-link:hover {
    transform: translateX(5px);
}

/* --- Responsive Layout (Mobile/Tablet) --- */
@media (max-width: 992px) {
    .cs-card {
        flex-direction: column;
        height: auto;
    }
    
    .cs-image-side {
        width: 100%;
        height: 300px;
    }
    
    .cs-content-side {
        padding: 40px 30px;
    }
    
    .cs-header h2 {
        font-size: 32px;
    }

    .cs-card blockquote {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .cs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}
/* --- Process Section Fixes --- */

/* ==========================================================================
   PROCESS SECTION (Exact 382px & 700px x 509px Dimensions)
   ========================================================================== */

.process-section {
    padding: 60px 0;
    background-color: #fff;
    overflow: hidden; 
}

.process-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.process-header .label {
    font-size: 16px;
    color: #000;
    display: block;
    margin-bottom: 10px;
    font-variation-settings: "wght" 500;
}

.process-header h2 {
    font-size: 40px;
    line-height: 1.1;
    color: var(--text-dark);
    margin: 0;
    font-variation-settings: "wght" 700;
}

.cs-controls {
    display: flex;
    gap: 12px;
}

.process-outer-wrapper {
    /* Keep your existing padding logic */
    padding-left: calc((100vw - 1250px) / 2 + 40px);
    position: relative;
    overflow: hidden;

    /* THE FADE FIX: This makes content disappear smoothly on the right */
    -webkit-mask-image: linear-gradient(to right, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,1) 75%, 
        rgba(0,0,0,0) 95%
    );
    mask-image: linear-gradient(to right, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,1) 75%, 
        rgba(0,0,0,0) 95%
    );
}

/* This class will be added by JavaScript when a card is open */
.process-outer-wrapper.disable-fade {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Ensure the grid has enough space to show the last card fully */
.process-grid {
    display: flex;
    gap: 24px;
    width: max-content;
    padding-right: 200px; /* Increased padding to allow the 4th card to center better */
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother slide */
}

/* --- Base Card (Collapsed State) --- */
.process-card {
    background-color: #FAF9F6;
    padding: 40px;
    border-radius: 16px;
    flex: 0 0 360px; /* EXACT User Spec */
    height: 509px;   /* EXACT User Spec */
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden; /* THE FIX: Keeps images strictly inside the box */
}

/* --- Expanded State --- */
.process-card.expanded {
    flex: 0 0 700px; /* EXACT User Spec */
    background-color: #F8F3ED; 
}


.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.step-label {
    font-size: 15px;
    color: #000;
    font-variation-settings: "wght" 500;
}

.toggle-icon {
    width: 36px;
    height: 36px;
    border: 1px solid #DBD2B8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 20px;
    color: var(--text-dark);
}

/* H3 Constraints so text doesn't overlap image when expanded */
.process-card h3 {
    font-size: 26px;
    line-height: 1.3;
    margin: 0;
    color: var(--text-dark);
    font-variation-settings: "wght" 600;
    transition: max-width 0.4s ease;
}

.process-card.expanded h3 {
    max-width: 280px; /* Keeps title strictly in the left column */
}

/* --- Internal Content Layout --- */
.expanded-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fills remaining vertical space inside the 509px */
    width: 100%;
    position: static;
}

/* 1. TEXT LOGIC */
.content-text {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.process-card.expanded .content-text {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-width: 280px; /* Aligns with H3 */
    margin-top: auto; /* Pushes text to the bottom left */
}

.content-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    margin-bottom: 20px;
}

.learn-more {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 15px;
    font-variation-settings: "wght" 500;
}

/* 2. IMAGE LOGIC (The Fix) */

/* Collapsed: Image stretches to fill all empty white space */
.process-card:not(.expanded) .card-image {
    width: 100%;
    height: 240px; /* Uniform height for all closed cards */
    margin-top: auto; /* Pushes the image down perfectly to the padding line */
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded: Image is absolutely positioned to prevent 509px overflow */
.process-card.expanded .card-image {
    position: absolute;
    right: 40px;
    bottom: 40px;
    width: 304px;  
    height: 350px; 
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* --- Mobile Responsive Rules --- */
@media (max-width: 1250px) {
    .process-outer-wrapper { padding-left: 40px; }
}

@media (max-width: 850px) {
    /* 1. Reset Arrows */
.process-section .cs-controls, 
    .process-section #procNext, 
    .process-section #procPrev { 
        display: none !important; 
    }

    /* 2. Fix Width (Fills the green/white gap on the right) */
    .process-outer-wrapper {
        padding: 0 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .process-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        transform: none !important; /* Stops horizontal sliding */
        gap: 16px;
    }

    /* 3. Fix Bottom Space (Force card to shrink to fit text) */
    .process-card {
        width: 320px !important;
        flex: none !important;
        /* THE CRITICAL FIX: This removes the huge white gap at the bottom */
        height: auto !important; 
        min-height: 0 !important; 
        padding: 24px !important;
        box-sizing: border-box;
        border-radius: 20px;
        display: block; 
        overflow: visible !important;
    }

    /* 4. Formatting Title */
    .process-card h3 {
        font-size: 24px !important;
        padding-right: 45px !important;
        margin: 10px 0 0 0 !important;
    }

    /* 5. Formatting Image (Centered Square) */
    .process-card.expanded .card-image {
        position: relative !important;
        width: 250px;       /* Adjusted size for better fit */
        height: 250px;
        margin: 20px auto !important; /* Centers and adds equal space top/bottom */
        display: block !important;
        right: auto !important;
        bottom: auto !important;
    }

    .process-card.expanded .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }

    /* 6. Formatting Text & Link (Ensure they are visible) */
    .expanded-content {
        display: none;
    }

    .process-card.expanded .expanded-content {
        display: block;
    }

    .content-text p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .learn-more {
        display: inline-block !important;
        color: #0099db;
        font-weight: 600;
        text-decoration: none;
    }
}
/* ==========================================================================
   INDUSTRIES SECTION (Accordion & Image Swap)
   ========================================================================== */

.industries-section {
    padding: 60px 0;
    background-color: #fff;
}

.ind-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* --- Left Image Column (XD Spec) --- */
.ind-image-col {
    width: 500px;
    height: 468px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    /* Removed background-color and box-shadow */
}

.ind-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
}

/* --- Right Content Column --- */
.ind-content-col {
    flex: 1;
    padding-top: 5px;
}

.ind-content-col .label {
    font-size: 16px;
    color: #000;
    display: block;
    margin-bottom: 12px;
    font-variation-settings: "wght" 600;
}

.ind-content-col h2 {
    font-size: 40px;
    line-height: 1.1;
    color: #000000;
    margin-bottom: 20px;
    font-variation-settings: "wght" 700;
}

.ind-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    margin-bottom: 35px;
    max-width: 520px;
}

/* --- The Accordion --- */
.ind-accordion {
    width: 100%;
    border-top: 1px solid #Eaeaea;
}

.ind-item {
    border-bottom: 1px solid #Eaeaea;
}

/* Accordion Header - REDUCED SPACING */
.ind-header {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 13px 0; /* Tightened vertical spacing */
    font-family: Google Sans Flex;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: color 0.3s ease;
}

.ind-icon {
    color: var(--primary-blue);
    font-size: 20px;
    width: 18px;
    display: inline-block;
    text-align: center;
    transition: transform 0.3s ease;
}

/* Accordion Body */
.ind-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DESCRIPTION TEXT - NORMALIZED (No Bold, 16px) */
.ind-body p {
    font-size: 16px; /* Matches standard body text */
    font-weight: 400; /* REMOVED BOLD */
    line-height: 1.6;
    color: #3E3E3E;
    margin: 0;
    padding-left: 33px; /* Aligns with header text, past the icon */
    padding-bottom: 20px; /* Space before the bottom border */
    max-width: 480px;
}

/* Active State */
.ind-item.active .ind-header {
    color: var(--primary-blue);
}

.ind-item.active .ind-body {
    max-height: 200px; /* Adjust based on text length */
}

/* --- Global Link --- */
.view-all-link {
    display: inline-flex;
    align-items: center;
    margin-top: 40px;
    color: var(--primary-blue);
    font-size: 16px;
    text-decoration: none;
    font-variation-settings: "wght" 600;
    transition: transform 0.3s ease;
}

.view-all-link:hover {
    transform: translateX(5px);
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 1100px) {
    .ind-container {
        gap: 40px;
    }
    .ind-image-col {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 900px) {
    .industries-section {
        padding: 60px 0;
    }
    
    .ind-container {
        flex-direction: column-reverse; /* Text on top, Image on bottom for mobile */
        gap: 40px;
    }
    
    .ind-image-col {
        width: 100%;
        height: 300px; /* Shorter for mobile view */
    }
    
    .ind-content-col h2 {
        font-size: 32px;
    }
    
    .ind-subtitle {
        font-size: 16px;
    }
}
/* ==========================================================================
   MAIN FOOTER SECTION
   ========================================================================== */

.main-footer {
    padding: 80px 0 50px; 
    background-color: #fff;
    border-top: 1px solid rgba(112, 112, 112, 0.2); 
}

/* --- 1. Footer Top (Branding & Contact Box) --- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 60px;
}

.footer-logo {
    height: 59px;
    width: auto;
    margin-bottom: 25px;
    display: block;
}

.footer-tagline {
    font-size: 26px;
    line-height: 1.35;
    color: var(--text-dark);
    font-variation-settings: "wght" 600;
    margin: 0;
}

.ft-right {
    flex: 1;
    max-width: 935px;
}

.footer-contact-box {
    background-color: #FAF9F6;
    border-radius: 12px;
    padding: 40px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.contact-info h3 {
    font-size: 18px;
    color: var(--text-dark);
    font-variation-settings: "wght" 600;
    margin-bottom: 20px;
}

.contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text-dark);
}

.eq-label { width: 65px; color: var(--text-gray); }
.eq-colon { margin-right: 15px; color: var(--text-gray); }
.eq-value { font-variation-settings: "wght" 500; }
.eq-value a { color: var(--text-dark); text-decoration: none; }

.btn-solid-beige {
    display: inline-block;
    background-color: #C4BAA9;
    color: #fff;
    padding: 16px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
    font-variation-settings: "wght" 600;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.btn-solid-beige:hover { 
    background-color: #a89f8f; 
}

/* --- 2. Footer Bottom (Address & Links Layout) --- */
.footer-bottom {
    display: flex !important;
    justify-content: space-between !important; 
    align-items: flex-start !important;        /* Aligns columns strictly at the top */
    flex-wrap: nowrap !important;
}

/* Left Column: Address & Socials */
.fb-left {
    flex: 0 0 320px;
    padding-right: 40px;
    padding-top: 0 !important; 
    margin-top: 0 !important;
    border-right: 1px solid rgba(112, 112, 112, 0.2); 
}

.parent-company {
    padding-top: 0 !important;
    margin-top: -4px !important; /* Pulls the block slightly up to cancel line-box gap */
    display: flex;
    flex-direction: column;
}

.div-label {
    display: block;
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 8px;
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1 !important; /* Strips hidden text bounding box paddings */
}

.tangenc-logo {
    height: 35px;
    width: auto;
    margin-bottom: 30px;
    display: block;
}

.footer-address {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    font-style: normal;
}

.footer-address strong {
    font-variation-settings: "wght" 600;
    display: block;
    margin-bottom: 5px;
}

/* Internal Horizontal Dividers */
.social-divider {
    border: none;
    border-top: 1px solid rgba(112, 112, 112, 0.2);
    margin: 25px 0;
}

.col-divider {
    border: none;
    border-top: 1px solid rgba(112, 112, 112, 0.2);
    margin: 25px 0 20px 0;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a img {
    height: 20px;
    width: auto;
    transition: opacity 0.2s;
}

.social-icons a:hover img {
    opacity: 0.6;
}

/* --- 3. Links Grid --- */
.fb-right {
    flex: 1;
    max-width: 935px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.link-col {
    padding: 0 30px;
    border-right: 1px solid rgba(112, 112, 112, 0.2);
}

.link-col:first-child {
    padding-left: 45px; 
}

.link-col:last-child {
    border-right: none;
    padding-right: 0;
}

.link-col h4 {
    font-size: 14px;
    color: var(--text-dark);
    font-variation-settings: "wght" 600;
    margin-bottom: 12px;
    margin-top: 0 !important;   /* Flushes heading element to container ceiling */
    padding-top: 0 !important;
    line-height: 1 !important;  /* Matches top alignment line-height exactly */
    white-space: nowrap;
}

.link-col ul {
    list-style: none;
    padding: 0 !important;      /* Removes default 40px left padding pushing links */
    margin: 0 !important;  
}

.link-col ul li {
    margin-bottom: 5px;
    padding-left: 0 !important; 
}

.link-col a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
    white-space: nowrap;
}

.link-col a:hover {
    color: var(--primary-blue);
}

.view-all-services {
    display: inline-block;
    margin-top: 15px;
    color: var(--text-dark);
    text-decoration: none;
    font-variation-settings: "wght" 600;
    font-size: 14px;
}

/* --- 4. Responsive Adjustments --- */

/* TABLET VIEWPORTS */
@media (max-width: 1100px) {
    .footer-top { 
        flex-direction: row; 
        justify-content: space-between;
        align-items: center; 
        gap: 40px; 
        width: 100%;
    }
    
    .ft-left { 
        flex: 1;
        max-width: 45%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; 
        text-align: left;        
    }

    .footer-tagline {
        font-size: 22px;
        line-height: 1.35;
    }

    .ft-right { 
        flex: 1;
        max-width: 50%;
    }

    .footer-contact-box { 
        flex-direction: column; 
        align-items: flex-start;
        padding: 30px;
    }

    .footer-bottom {
        align-items: flex-start !important; 
    }

    .fb-left {
        padding-top: 0 !important;
    }

    .fb-right { 
        grid-template-columns: repeat(2, 1fr); 
        row-gap: 50px; 
    }
    
    .link-col:nth-child(2) {
        border-right: none;
        padding-right: 0;
    }
    
    .link-col:nth-child(3) {
        padding-left: 45px;
    }
}

/* MOBILE VIEWPORTS */
@media (max-width: 850px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Stacks top components item-by-item vertically */
    .footer-top {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .ft-left {
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-logo {
        margin: 0 auto 20px !important;
    }

  .fb-right { 
        width: 100% !important;
        padding-left: 0 !important; 
        display: grid !important;
        grid-template-columns: 1fr !important; 
        row-gap: 35px; /* Added slightly more space between categories */
        margin-top: 40px;
    }

    .link-col {
        width: 100% !important;
        border-right: none !important; 
        padding: 0 !important; 
        text-align: center !important; /* Perfect center alignment for headings */
    }
    
    /* THE MOB FIX: Centers the list wrapper and centers the text links inline */
    .link-col ul {
        display: block !important;    /* Changes from inline-block to block */
        text-align: center !important; /* Centers every single text link perfectly under the heading */
        padding: 0 !important;
        margin: 0 !important;
    }

    .link-col ul li {
        margin-bottom: 8px; /* Slightly easier to tap on mobile */
        padding-left: 0 !important; 
    }

    .footer-contact-box {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; 
        padding: 30px 20px !important; 
        box-sizing: border-box !important;
        border-radius: 16px;
        background-color: #FAF9F6;
        margin: 0 auto !important;
    }

    .contact-action {
        width: 100% !important;
        margin-top: 25px !important;
        display: block !important;
    }

    .contact-action a,
    .contact-action button {
        display: block !important;
        width: 100% !important;
        padding: 16px !important;
        text-align: center !important;
        background-color: #c4b8a7;
        color: #fff !important;
        border-radius: 8px;
        text-decoration: none;
        box-sizing: border-box !important;
        font-weight: 600;
    }

   .contact-info {
        width: 100% !important;
        text-align: left !important; /* Keeps the list content readable */
    }

    .contact-info h3 {
        text-align: center !important; /* Optional: Centers the heading box title */
        margin-bottom: 20px;
    }

    .contact-info ul li {
        display: flex !important;
        flex-direction: row !important; /* Forces layout to remain side-by-side */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin-bottom: 12px;
        font-size: 14px;
    }

    /* Keeps structural alignments clean and prevents telephone numbers from breaking into single characters */
    .eq-label { 
        min-width: 65px !important; 
        width: 65px !important;
    }
    
    .eq-colon { 
        margin-right: 10px !important; 
    }
    
    .eq-value { 
        flex: 1 !important; 
        white-space: nowrap !important; /* Prevents phone numbers from breaking onto multiple lines */
    }

    .footer-section, 
    .footer-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 40px 20px !important; 
        box-sizing: border-box !important; 
        overflow: hidden;
    }

    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important; 
    }

    /* Centers parent info layout on mobile viewports */
    .fb-left { 
        width: 100% !important; 
        padding-right: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 40px !important; 
        border-right: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        text-align: center !important;   
    }

    .parent-company {
        align-items: center !important;
        text-align: center !important;
        margin-top: 0 !important;
    }

    .tangenc-logo {
        margin: 0 auto 25px !important;
    }

    .social-icons {
        justify-content: center !important; 
        width: 100%;
    }

    .enquiry-box { 
        width: 100% !important; 
        max-width: 100% !important;
        padding: 30px 20px !important; 
        box-sizing: border-box !important; 
        margin: 0 auto !important;
        border-radius: 20px;
        background-color: #f8f7f4;
    }

    .contact-row {
        display: flex;
        margin-bottom: 12px;
        align-items: flex-start;
        width: 100%;
    }

    .contact-label {
        min-width: 75px;
        color: #707070;
        font-size: 14px;
    }

    .contact-value {
        color: #1a1a1a;
        font-weight: 500;
        font-size: 14px;
        word-break: break-all;
        flex: 1;
    }

   .ft-right {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }


    .link-col {
        width: 100% !important;
        border-right: none !important; 
        padding: 0 !important; 
        text-align: center !important; 
    }
    
    .link-col ul {
        display: inline-block;
        text-align: left; 
    }

    .enquiry-box button, 
    .enquiry-box .btn-quote {
        width: 100% !important; 
        display: block !important;
        padding: 16px;
        margin-top: 25px;
        border-radius: 12px;
        text-align: center;
        background-color: #c4b8a7;
        color: white;
        border: none;
    }
}
/* ==========================================================================
   MAP & FOOTER SECTIONS
   ========================================================================== */

/* --- Map Section --- */
.map-section {
    padding: 60px 0;
    background-color: #fff;
}

.map-wrapper {
    width: 100%;
    height: 400px;
    background-color: #EAEAEA; /* Placeholder color while map loads */
    border-radius: 4px; /* Slight rounding for a polished look */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Soft shadow to lift it off the page */
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}
/* --- Footer Section --- */
.site-footer {
    background-color: #F4F4F2; /* Matches the very light gray in your image */
    padding: 25px 0;
    border-top: 1px solid #E5E5E5;
    font-family: 'Google Sans Flex', sans-serif;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copy p {
    margin: 0;
    color: #000;
    font-size: 14px;
    font-weight: 400;
}

/* Link Styling Base */
.footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-links a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #AA9063; /* Theme gold tint hover color state */
}

/* Base Divider formatting rules */
.footer-links .divider {
    color: #CCC;
    font-size: 14px;
    user-select: none;
}

/* --- Responsive Adjustments (CSS Only Layout Fix) --- */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column; /* Stack sections vertically */
        gap: 12px;
        text-align: center;
    }

    .footer-links {
        flex-direction: row; /* Maintain horizontal link rows on mobile */
        flex-wrap: wrap;     /* Allow safe overflow drops if necessary */
        justify-content: center;
        gap: 0;              /* Clear gap to let pseudo-margins handle layouts precisely */
    }

    /* 1. Force the hardcoded HTML span divider element to hide safely */
    .footer-links .divider {
        display: none !important;
    }

    /* 2. Dynamically space out links cleanly without breaking vertical columns */
    .footer-links a:not(:last-child) {
        margin-right: 15px;
        position: relative;
    }

    /* 3. Inject a smooth visual divider via CSS that scales perfectly with text */
    .footer-links a:not(:last-child)::after {
        content: "|";
        position: absolute;
        right: -10px;
        color: #CCC;
        font-weight: 400;
        pointer-events: none;
    }
}


/* --- Solutions inner page --- */

/* --- Inner Hero Section --- */
.inner-hero {
    padding: 10px 0;
    background-color: #fff;
    overflow: hidden;
}

/* The main flex container */
.hero-split {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centers the text column with the image column */
    gap: 60px;
}

/* LEFT COLUMN: Text Content */
.hero-content {
    flex: 1;
}

.inner-hero h1 {
    font-size: 50px;
    line-height: 1.1;
    color: #000;
    margin-bottom: 20px;
    font-variation-settings: "wght" 600;
    max-width: 600px;
}

.inner-hero p {
    font-size: 18px;
    line-height: 1.6;
    color: #3E3E3E;
    margin-bottom: 35px;
    max-width: 520px;
}

/* RIGHT COLUMN: Breadcrumbs + Image */
.hero-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* THE FIX: Pushes breadcrumbs to the right edge of the image */
    flex-shrink: 0;
}

/* Breadcrumbs Styling */
.breadcrumbs {
    font-size: 13px;
    color: #707070;
    margin-bottom: 30px; /* Gap between breadcrumbs and image */
    text-align: right;
}

.breadcrumbs a {
    color: #707070;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs a:hover { 
    color: var(--primary-blue); 
}

.breadcrumbs span { 
    margin: 0 4px; 
    font-size: 13px; 
}

.breadcrumbs .current { 
    color: #707070; 
    font-weight: 500; 
}

/* Hero Image Spec (517x366) */
.hero-image {
    width: 517px;
    height: 366px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

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

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 1024px) {
    .inner-hero {
        padding: 60px 0;
    }

    .hero-split {
        flex-direction: column;
        text-align: left;
        gap: 40px;
    }

    .hero-right-col {
        width: 100%;
        align-items: flex-start; /* Reset to left-align for mobile */
    }

    .breadcrumbs {
        text-align: left;
        order: -1; /* Puts breadcrumbs at the very top of the stack on mobile */
        margin-bottom: 20px;
    }

    .hero-image {
        width: 100%;
        height: 300px; /* Reduced height for smaller screens */
    }

    .inner-hero h1 {
        font-size: 38px;

    }
}

@media (max-width: 850px) {
    .inner-hero h1 { 
        font-size: 32px; 
         line-height: 44px;
    }
    
    .inner-hero p { 
        font-size: 16px; 
    }

    .inner-hero {
        padding: 20px 0;
    }
}

/* --- 1. Main Section Settings --- */
.benefits-section {
    padding: 60px 0 0px 0; /* Consistent vertical spacing */
    background-color: #fff;
    width: 100%;
    overflow-x: hidden;
}

.benefits-section .container {
    padding: 0 20px;
    box-sizing: border-box;
}

/* --- 2. Split Layout (Heading vs. Text) --- */
.benefits-intro, 
.benefits-definition {
    display: flex;
    gap: 20px; /* Tightened gap for better flow */
    margin-bottom: 60px;
    align-items: flex-start;
}

.intro-left { 
    flex: 0 0 40%; /* Locks the heading width across the whole site */
}

.intro-right { 
    flex: 0 0 55%; /* Locks the text width */
}

.intro-left h2 {
    font-size: 40px;
    line-height: 1.1;
    color: #000;
    margin-top: 0;
    font-weight: 700;
}

.intro-right p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    margin-bottom: 20px;
}

.intro-right p:last-child { 
    margin-bottom: 0; 
}

/* --- 3. Service Card Grid (The Squares) --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 icons on Desktop */
    gap: 24px;
    margin-bottom: 100px;
    width: 100%;
}

.benefit-card {
    border: 1px solid #B2A07F;
    border-radius: 12px;
    background: #fff;
    aspect-ratio: 1 / 1; /* Forces the perfect square shape */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(178, 160, 127, 0.15);
}

.benefit-icon {
    width: 75px;
    height: 75px;
    margin-bottom: 20px;
}

.benefit-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.benefit-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #3E3E3E;
    text-align: center;
    line-height: 1.3;
    margin: 0;
}

/* --- 4. Custom Arrow List --- */
.list-title {
    margin-top: 30px;
    font-weight: 700;
    color: #000;
}

.custom-arrow-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.custom-arrow-list li {
    font-size: 16px;
    color: #3E3E3E;
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.4;
}

.custom-arrow-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    background-image: url('../images/arrow.png'); /* Ensure path is correct */
    background-size: contain;
    background-repeat: no-repeat;
}

/* --- 5. Full Responsive Overrides --- */

@media (max-width: 1100px) {
    .intro-left h2 { font-size: 34px; }
}

@media (max-width: 900px) {
    .benefits-intro, .benefits-definition {
        flex-direction: column;
        gap: 20px;
    }
    
    .intro-left, .intro-right {
        flex: 0 0 100%;
        width: 100%;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 grid on Tablet */
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* Single column on Mobile */
        max-width: 320px;
        margin: 0 auto 60px auto;
    }

    .benefit-card {
        aspect-ratio: auto; /* Allow height flexibility for better text room on small phones */
        padding: 40px 20px;
    }

    .intro-left h2 { font-size: 28px; line-height:44px }
    .intro-right p { font-size: 16px; }
}
/* --- Texture Section Styles --- */
.texture-section {
    padding: 60px 0;
    background-color: #FAF9F6; /* Light beige background like your cards */
    overflow: hidden;
}

.texture-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.texture-header .title-area h2 {
    font-size: 40px;
    margin-bottom: 15px;
    font-variation-settings: "wght" 700;
    color: #000;
}

.texture-header .title-area p {
    font-size: 16px;
    color: #3E3E3E;
    max-width: 600px;
}

.tex-controls {
    display: flex;
    gap: 12px;
}

/* Slider Track Logic */
.texture-outer-wrapper {
    padding-left: calc((100vw - 1250px) / 2 + 20px);
}

.texture-grid {
    display: flex;
    gap: 24px;
    width: max-content;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- The Card Styling --- */
.texture-card {
    width: 350px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #EAEAEA;
}

.tex-image {
    width: 100%;
    height: 240px;
}

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

.tex-content {
    padding: 30px;
}

.tex-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #000;
    font-variation-settings: "wght" 600;
}

.tex-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #3E3E3E;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .texture-header { flex-direction: column; align-items: flex-start; gap: 30px; }
    .texture-card { width: 320px; }
}

@media (max-width: 850px) {
    /* 1. Hide the arrow buttons on mobile */
    .tex-controls {
        display: none !important;
    }

    /* 2. Reset the wrapper padding to match your site's margins */
    .texture-outer-wrapper {
        padding: 0 20px !important;
        overflow: visible !important;
    }

    /* 3. Force cards to stack vertically and kill the slider transform */
    .texture-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
        /* THE CRITICAL FIX: Stops JS from sliding these cards */
        transform: none !important; 
    }

    /* 4. Make cards full width */
    .texture-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    .texture-header {
        margin-bottom: 30px;
        text-align: left;
    }

    .texture-header .title-area h2 {
        font-size: 28px;
        line-height: 44px;

    }
}

/* --- Brands Section --- */
.brands-section {
    padding: 60px 0;
}

.brands-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

.brands-text { flex: 1; }

.brands-text h2 {
    font-size: 40px;
    margin-bottom: 20px;
    font-variation-settings: "wght" 700;
    color: #000;
    line-height: 44px;
}

.brands-text p {
    color: #3E3E3E;
    line-height: 1.6;
    margin-bottom: 15px;
}

.brands-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.brand-item {
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.brand-item img {
    max-width: 80%;
    max-height: 60px;
    object-fit: contain;

}

/* --- Brands Section Responsive --- */

@media (max-width: 1100px) {
    .brands-split {
        gap: 40px; /* Tighten the gap like previous sections */
    }

    .brands-text h2 {
        font-size: 34px;
        line-height: 1.2;
    }
}

@media (max-width: 900px) {
    .brands-split {
        flex-direction: column; /* Stack text on top of logos */
        text-align: center;
        gap: 40px;
    }

    .brands-text, .brands-grid {
        flex: 0 0 100%;
        width: 100%;
    }

    .brands-text p {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- PRECISION BOX (XD MATCH) --- */
.precision-box-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; 
    width: 100% !important;
    max-width: 612px; /* Matches your XD file */
    min-height: 321px; /* Matches your XD file */
    border: 1px solid #E6D9C8 !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    overflow: hidden;
    /* Reset any inherited flex properties */
    flex: none !important; 
}

.precision-quadrant {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
    gap: 12px !important;
    background: #FCFAF9 !important;
    box-sizing: border-box;
}

/* --- THE CROSSHAIR BORDERS --- */

/* Horizontal Divider (Top Two) */
.precision-quadrant:nth-child(1), 
.precision-quadrant:nth-child(2) {
    border-bottom: 1px solid #E6D9C8 !important;
}

/* Vertical Divider (Left Two) */
.precision-quadrant:nth-child(1), 
.precision-quadrant:nth-child(3) {
    border-right: 1px solid #E6D9C8 !important;
}

/* Content Styling */
.precision-quadrant img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    margin-bottom: 5px !important;
}

.precision-quadrant span {
    font-size: 16px !important;
    color: #333 !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center;
}

/* Responsive: Stack for small mobile screens */
@media (max-width: 600px) {
    .precision-box-wrapper {
        grid-template-columns: 1fr !important;
        max-width: 100%;
        min-height: auto;
    }
    .precision-quadrant:nth-child(odd) {
        border-right: none !important;
    }
    .precision-quadrant:not(:last-child) {
        border-bottom: 1px solid #E6D9C8 !important;
    }
}

@media (max-width: 600px) {
    .brands-section {
        padding: 60px 0;
    }

    .brands-text h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .brands-grid {
        /* Keep 2 columns unless logos are very wide, then switch to 1fr */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }

    .brand-item {
        height: 100px; /* Slightly shorter for mobile screens */
        padding: 15px;
    }
}

/* --- Overall Section Width Reduction --- */
.work-container {
    max-width: 1180px; /* Reduced from standard container for a sleeker look */
    margin: 0 auto;
    padding: 0 20px;
}

.work-slider-box {
    background: linear-gradient(to right, 
        #C1AB83 0% 50%,    
        #CBB690 50% 60%,   
        #DBCBAE 60% 80%,   
        #E4D6BD 80% 90%,   
        #EADDC6 90% 100%   /* Warm beige at the end */
    );
    border-radius: 40px;
    display: flex;
    padding: 70px 0 40px 70px; /* 0 padding on right to make image flush */
    align-items: center;
    position: relative;
    overflow: hidden;
}

.work-content {
    flex: 0 0 42%; /* Reduced from 44% to create more space */
    color: #fff;
    z-index: 2;
    padding-right: 60px; /* This creates the clear gap between text and image */
}

.work-content h2 {
    font-size: 40px;
    margin-bottom: 25px;
    line-height: 1.1;
    font-weight: 700;
}

.work-visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers dots under the image */
}

.work-img-container {
    width: 100%;
    height: 420px;
    /* FLUSH RIGHT: Rounded ONLY on the left side */
    border-radius: 30px 0 0 30px; 
    overflow: hidden;
    position: relative;
    box-shadow: -15px 10px 40px rgba(0,0,0,0.12);
}

.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.slide-img.active {
    opacity: 1;
}

/* Dots Styling */
.work-dots {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    padding-right: 70px; /* Offsets the dots to visually center under the photo */
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #fff;
    transform: scale(1.2);
}

@media (max-width: 850px) {
    /* 1. Force the parent box to be as wide as possible */
    .work-slider-box {
        flex-direction: column;
        background: none !important; 
        padding: 0 !important; 
        margin: 0 -10px; /* This pulls the box closer to the screen edges */
        gap: 10px; /* Small gap to keep them looking like a set */
        width: calc(100% + 20px) !important; /* Forces extra width */
        min-height: auto;
    }

    /* 2. Top Text Card - Wider and Centered */
    .work-content {
        background-color: #C1AB83;
        padding: 50px 20px;
        border-radius: 35px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .work-content h2 {
        font-size: 28px;
        margin-bottom: 15px;
        color: #fff;
        line-height: 44px;
    }

    .work-content p {
        font-size: 15px;
        line-height: 1.5;
        color: rgba(255,255,255,0.9);
    }

    /* 3. Bottom Visual Card - The Square Image */
    .work-visual {
        background-color: #F1E5D2;
        padding: 25px; /* Less padding = larger image */
        border-radius: 35px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* FORCED SQUARE IMAGE */
    .work-visual .slider-image {
        width: 100% !important;
        max-width: 100% !important; /* Allows it to grow to card width */
        aspect-ratio: 1 / 1 !important; /* FORCES SQUARE */
        object-fit: cover !important; /* Crops the photo to fit the square */
        border-radius: 20px;
        display: block;
    }

    /* Dots adjustment */
    .slider-dots {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .brands-text h2 {
    font-size: 28px;
    line-height: 44px;
    
}

}
/* --- Benefits Accordion Section --- */
.benefits-acc-section {
    padding: 80px 0;
    background-color: #fff;
}

.benefits-acc-grid {
    display: flex;
    gap: 100px;
    align-items: flex-start;
}

.benefits-acc-left { flex: 1; }

.benefits-acc-left h2 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 25px;
    font-variation-settings: "wght" 700;
    color: #000;
}

.benefits-acc-left p {
    font-size: 16px;
    color: #3E3E3E;
    max-width: 320px;
}

.benefits-acc-right { flex: 1.5; }

/* The Accordion List */
.benefit-accordion {
    border-top: none; 
}

.benefit-acc-item {
    border-bottom: 1px solid #EAEAEA;
}

.benefit-acc-header {
    width: 100%;
    padding: 25px 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: Google Sans Flex;
}

.acc-label {
    display: flex;
    align-items: center;
    gap: 15px;
}

.acc-label img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.5;/* Makes the icon look light gray */
    filter: grayscale(1); 
    transition: all 0.3s ease;
}

.acc-label span {
    font-size: 16px;
    color: #707070; /* Gray text for inactive items */
    font-variation-settings: "wght" 500;
    transition: color 0.3s ease;
}

.acc-chevron {
    font-size: 14px;
    color: #AAA;
    transform: rotate(90deg);
    transition: transform 0.4s;
}

/* --- Active State Styling --- */

.benefit-acc-item.active .acc-label img {
    /* opacity: 1;*/
    filter: brightness(0); /* THE FIX: Forces the icon to pure black */
}

.benefit-acc-item.active .acc-label span {
    color: #3E3E3E; /* Text turns black */
    font-variation-settings: "wght" 600;
}

.acc-chevron {
    font-size: 14px;
    color: #AAA;
    transform: rotate(90deg);
    transition: transform 0.4s, color 0.4s;
}

.benefit-acc-item.active .acc-chevron {
    transform: rotate(-90deg);
    color: #000;
}

.benefit-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-acc-body p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    padding-left: 39px; /* Aligns description text with the title text */
    padding-bottom: 25px;
    margin: 0;
}

.benefit-acc-item.active .benefit-acc-body {
    max-height: 150px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .benefits-acc-grid { flex-direction: column; gap: 50px; }
    .benefits-acc-left p { max-width: 100%; }
}

@media (max-width: 850px) {
.benefits-acc-left h2 {
    font-size: 28px;
    line-height: 44px;}
}

/* --- COMPARISON SECTION --- */
.compare-section {
  padding: 100px 0;
  background: #f3f1ef;
}

.compare-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.compare-left {
  flex: 0 0 38%; /* Ensures the left text keeps its design scale */
}

.compare-left h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 25px;
  color: #000;
}

.compare-table-card {
  flex: 0 0 58%; /* Table card takes 60% */
  background: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

.compare-grid {
  display: flex;
  gap: 12px;
}

/* --- COLUMNS --- */
.compare-col {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.col-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #3e3e3e;
  padding-left: 10px;
}

.col-item {
  font-size: 15px;
  height: 50px; /* Reduced gap between rows */
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 10px;
  color: #3E3E3E;
  border-bottom: 1px solid #f0f0f0; /* Row lines for all columns */
}

/* --- THE TICK FIX (CUSTOM SVG) --- */
.check {
  display: inline-block;
  width: 18px;
  height: 18px;
  /* This SVG matches the thin, sharp tick in your XD file */
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L9 17L19 7' stroke='%235B8C5A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.cross {
  color: #D96C6C;
  font-weight: bold;
  font-size: 16px;
  width: 18px;
  text-align: center;
}

/* --- PILLAR LOGIC (RECTANGULAR) --- */
.frosted-pill, .etched-pill {
  border-radius: 12px;
  padding: 15px 5px;
  margin-top: -10px;
}

.frosted-pill { background: #f2e8d9; }
.etched-pill { background: #f8f8f8; }

/* Keep pills solid by hiding internal row lines */
.frosted-pill .col-item, 
.etched-pill .col-item {
  border-bottom: none !important;
}

/* Remove bottom border from the very last row on the far left */
.feature-col .col-item:last-child {
  border-bottom: none;
}

/* Feature column specific font */
.feature-col .col-item {
  font-weight: 600;
  color: #333;
}

/* --- COMPREHENSIVE RESPONSIVE CODE --- */

/* 1. TABLET VIEW (Under 1024px) */
@media (max-width: 1024px) {
  .compare-wrapper {
    flex-direction: column; /* Stack text on top of table */
    align-items: flex-start;
    gap: 40px;
  }

  .compare-left {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
  }

  .compare-left h2 {
    font-size: 36px; /* Slightly smaller heading */
  }

  .compare-table-card {
    flex: 0 0 100%;
    width: 100%;
    padding: 30px 20px; /* Tighter padding */
  }
}

/* 2. MOBILE VIEW (Under 768px) */
@media (max-width: 768px) {
  .compare-section {
    padding: 60px 0; /* Less vertical space */
  }

  /* Allow the table to scroll horizontally so columns don't squash */
  .compare-table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
  }

  .compare-grid {
    min-width: 600px; /* Forces enough width for the 3 columns to stay readable */
    padding-bottom: 10px; /* Space for the scrollbar if needed */
  }

  .col-title {
    font-size: 15px;
    margin-bottom: 15px;
  }

  .col-item {
    font-size: 14px;
    height: 45px; /* Tighter rows for mobile */
    gap: 8px;
  }
  
  .compare-left h2 {
    font-size: 30px;
    line-height: 44px;
  }
}

/* 3. SMALL PHONE VIEW (Under 480px) */
@media (max-width: 480px) {
  .compare-left h2 {
    font-size: 28px;
    line-height: 44px;
  }
  
  .compare-left p {
    font-size: 15px;
  }

  .compare-table-card {
    padding: 25px 15px;
    border-radius: 15px;
  }
  
  .custom-tick, .cross {
    width: 14px;
    height: 14px;
    background-size: 14px;
  }
}

/* --- Custom Designs Section --- */
.custom-designs-section {
    padding: 60px 0;
    background-color: #fff;
    border-top: 1px solid #F0F0F0; /* Subtle divider from the beige section above */
}

.designs-split {
    display: flex;
    gap: 80px; /* Matching the gap of your top sections */
    align-items: flex-start;
}

/* Reusing your left/right layout logic */
.custom-designs-section .intro-left {
    flex: 1;
}

.custom-designs-section .intro-right {
    flex: 1.2;
}

.custom-designs-section h2 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
    font-variation-settings: "wght" 700;
}

.custom-designs-section p {
    font-size: 16px;
    color: #3E3E3E;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* List Styling */
.list-header {
    font-weight: 700;
    color: #000 !important;
    margin-bottom: 20px !important;
}

.custom-designs-section .custom-arrow-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.custom-designs-section .custom-arrow-list li {
    font-size: 16px;
    color: #3E3E3E;
    padding-left: 35px;
    position: relative;
    margin-bottom: 18px;
    line-height: 1.4;
}

/* Using your arrow.png */
.custom-designs-section .custom-arrow-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image: url('../images/arrow.png'); /* Verify this path */
    background-size: contain;
    background-repeat: no-repeat;
}

.design-note {
    font-size: 16px !important;
    color: #3E3E3E;
    margin-top: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
    .designs-split {
        flex-direction: column;
        gap: 30px;
    }
    
    .custom-designs-section h2 {
        font-size: 28px;
        line-height: 44px;
    }
}

/* --- Why Choose Printr Section --- */
.why-choose-section {
    padding: 60px 0;
    background-color: #C1AB83; /* Your requested gold/brown color */
    color: #fff; /* All text in this section is white */
}

.why-grid {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.why-left {
    flex: 1;
}

.why-left h2 {
    font-size: 40px;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 30px;
    font-variation-settings: "wght" 700;
}

.why-intro p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.95;
}

/* Feature List Logic */
.why-right {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between each feature row */
}

.why-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.why-tick {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-top: 5px; /* Aligns tick with the first line of the title */
}

.why-text h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.why-text p {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.9;
}

/* --- Responsive Layout --- */
@media (max-width: 1024px) {
    .why-grid {
        flex-direction: column;
        gap: 50px;
    }
    
    .why-left h2 {
        font-size: 28px;
        line-height: 44px;
    }

    .why-right {
        width: 100%;
    }
}

/* --- Installation Process Section --- */
.process-section {
    padding: 70px 0;
    background-color: #fff; /* Light off-white background */
}

.process-wrapper {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.process-left {
    flex: 0 0 35%;
}

.process-left h2 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 30px;
    font-variation-settings: "wght" 700;
    color: #000;

}

.process-left p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    max-width: 380px;
}

/* Timeline Logic */
.process-right {
    flex: 1;
    position: relative;
}

.timeline-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* THE DOTTED LINE */
.timeline-container::before {
    content: "";
    position: absolute;
    left: 25px; /* Centers it behind the 50px circle */
    top: 20px;
    bottom: 20px;
    width: 2px;
    border-left: 2px dotted #D1C4B0;
    z-index: 1;
}

.timeline-item {
    display: flex;
    gap: 30px;
    position: relative;
    z-index: 2;
    /* Aligns the top of the content with the top of the box */
    align-items: flex-start; 
}

.step-number {
    flex: 0 0 50px;
    height: 50px;
    background-color: #C1AB83;
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    /* Ensure the box doesn't shrink */
    flex-shrink: 0; 
}

.step-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
    /* THE FIX: Adjust this value to center the text with the box */
    /* 12px usually centers a 20px font with a 50px box */
    line-height: 1.2;
}

.step-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    max-width: 550px;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .process-wrapper {
        flex-direction: column;
        gap: 50px;
    }
    
    .process-left h2 { font-size: 28px; line-height:44px }
    
    .timeline-container::before {
        left: 20px;
    }
    
    .step-number {
        flex: 0 0 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* --- FAQ Section --- */
.faq-section {
    padding: 60px 0;
    background-color: #fff;
}

.faq-grid {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.faq-left {
    flex: 0 0 35%;
}

.faq-left h2 {
    font-size: 40px;
    line-height: 1.1;
    color: #000;
    font-variation-settings: "wght" 700;
}

.faq-right {
    flex: 1;
}

/* Accordion Styling */
.faq-accordion {
    border-top: 1px solid #EAEAEA;
}

.faq-item {
    border-bottom: 1px solid #EAEAEA;
}

.faq-question {
    width: 100%;
    padding: 30px 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.faq-question span:first-child {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    transition: color 0.3s;
    font-family: Google Sans flex;
}

.faq-chevron {
    font-size: 14px;
    color: #999;
    transform: rotate(90deg); /* Points down */
    transition: transform 0.4s, color 0.4s;
}

/* Active State Styles */
.faq-item.active .faq-question span:first-child {
    font-weight: 700;
    color: #3E3E3E;
}

.faq-item.active .faq-chevron {
    transform: rotate(-90deg); /* Points up */
    color: #C1AB83; /* Using your theme gold for the active arrow */
}

/* Answer Body Logic */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    padding-bottom: 30px;
    margin: 0;
    max-width: 90%;
    font-family: Google Sans flex;
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Enough to fit the text */
}




/* Responsive View */
@media (max-width: 1024px) {
    .faq-grid {
        flex-direction: column;
        gap: 50px;
    }
    
    .faq-left h2 {
        font-size: 28px;
        line-height: 44px;
    }
}

/* --- Footer CTA / Solutions Section --- */
.footer-cta-section {
    display: flex;
    width: 100%;
    color: #fff;
}

/* LEFT SIDE: Related Solutions */
.cta-left-bg {
    flex: 1;
    background-color: #AA9063; /* Your specified left color */
    padding: 60px 5% 60px 10%; /* Extra left padding for container alignment */
    display: flex;
    justify-content: flex-end;
}

.cta-left-content {
    max-width: 500px;
    width: 100%;
}

.cta-left-content h2 {
    font-size: 40px;
    margin-bottom: 40px;
    font-variation-settings: "wght" 700;
}

.white-arrow-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.white-arrow-list li {
    font-size: 16px;
    padding-left: 35px;
    position: relative;
    margin-bottom: 20px;
    opacity: 0.9;
}

.white-arrow-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-image: url('../images/white-arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.white-arrow-list li a {

    color: #FFFFFF !important; /* Forces text to White */
    text-decoration: none;
    
}

.white-arrow-list li a:hover {

    color: #FFFFFF !important; /* Forces text to White */
    text-decoration: underline;
    
}

/* Special 2-column layout for Branding Solutions page */
.white-arrow-list.branding-col-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two equal columns */
    column-gap: 30px;               /* Space between the columns */
    max-width: 650px;               /* Adjust this to fit your text width */
}

/* Ensure the left background can handle the extra width on desktop */
@media (min-width: 1101px) {
    .cta-left-content {
        max-width: 700px; /* Increased from 500px to allow side-by-side text */
    }
}

/* On mobile, revert to 1 column so text doesn't overlap */
@media (max-width: 600px) {
    .white-arrow-list.branding-col-layout {
        grid-template-columns: 1fr;
    }
}

/* RIGHT SIDE: Contact Area */
.cta-right-bg {
    flex: 1;
    background-color: #C1AB83; /* Your specified right color */
    padding: 60px 10% 60px 5%;
    display: flex;
    justify-content: flex-start;
}

.cta-right-content {
    max-width: 600px;
    width: 100%;
}

/* Button Styling */
.quote-btn-wrapper {
    display: flex;
    justify-content: center; 
    width: 100%;
    margin-bottom: 60px;
}
.btn-quote {
    display: inline-block;
    background-color: #FFF9F2;
    color: #000;
    padding: 18px 50px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    text-align: center; /* Centers the text inside the button */
}

.btn-quote:hover {
    transform: translateY(-3px);
}

/* Contact Grid Logic */
.contact-info-grid {
    display: flex;
    gap: 40px;
}

.contact-block {
    flex: 1;
}

/* Divider line between contact and address */
.address-block {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 35px;
}

.contact-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 20px;
    object-fit: contain;
}

.contact-block h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.contact-details p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 5px;
    opacity: 0.9;
}

.contact-details p span {
    display: inline-block;
    width: 65px; /* Aligns the labels (Mobile, Email) */
}

.contact-link {
    color: inherit; /* Keeps the text white like the rest of the block */
    text-decoration: none;
    transition: 0.3s ease;
    opacity: 1; /* Overrides the 0.9 parent opacity for better visibility */
}

.contact-link:hover {
    color: #FFF9F2; /* Subtle change to match the button color on hover */
    text-decoration: none;
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
    .cta-left-content h2{font-size: 28px; line-height: 44px}
}

@media (max-width: 850px) {
    .footer-cta-section { flex-direction: column; }
    .cta-left-bg, .cta-right-bg { padding: 80px 5%; justify-content: center; }
    .cta-left-content, .cta-right-content { max-width: 100%; }
    .address-block { border-left: none; padding-left: 0; margin-top: 40px; }
    .contact-info-grid { flex-direction: column; }
}

/* --- 1. SOLUTIONS FOOTER MAIN --- */
.solutions-footer {
    padding: 80px 0 0px 0;
    background-color: #ffffff;
    width: 100%;
    border-top: 1px solid #f0f0f0;
}

.footer-flex {
    display: flex;
    justify-content: space-between;
    /* TOP ALIGNMENT: Ensures Logo, Links, and Review Header all start on the same line */
    align-items: flex-start; 
    gap: 30px;
}

/* --- 2. BRANDING COLUMN --- */

.footer-logo {
    width: 135px;
    margin: 0 0 25px 0; 
    display: block;
}

.footer-tagline {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    color: #000000;
    margin: 0;
}

/* --- 3. VERTICAL DIVIDERS --- */
.footer-divider {
    width: 1px;
    background-color: #eaeaea;
    align-self: stretch; 
    margin: 0;
}

/* --- 4. NAVIGATION LINKS COLUMN --- */
.footer-links {
    display: flex;
    gap: 50px;
    flex: 1;
    padding-left: 30px;
    padding-top: 2px; 
}

.link-column {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.link-column a {
    text-decoration: none;
    color: #333333;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 25px;
    transition: color 0.3s ease;
    line-height: 1;
}

.link-column a::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #000000;
    font-weight: 700;
}

.link-column a:hover {
    color: #01a4e1;
}

/* --- 5. REVIEW COLUMN (RESTORED STYLE) --- */
.footer-reviews-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.post-review-header {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0; 
}

.review-row-flex {
    display: flex;
    gap: 35px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* QR Wrapper */
.qr-column-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-code-box {
    width: 124px;
    height: 121px;
    background-color: #F7f7f7;
    border: 1px solid #F7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.qr-code-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-text-link {
    margin-top: 10px;
    margin-bottom: 0;
}

.qr-text-link a {
    text-decoration: none;
    color: #464646;
    font-size: 13px;
    font-weight: 800;
}

.qr-text-link :hover {
    color: #01A4E1;
    /* text-decoration: underline;  <-- Uncomment this if you want an underline */
}

/* Google Card (RESTORED FIX) */
.google-card-outer {
    width: 221px;
    height: 121px;
    background-color: #F7f7f7;
    border: 1px solid #F7f7f7;
    display: flex;
    align-items: center;    /* Vertically center inner card */
    justify-content: center; /* Horizontally center inner card */
    box-sizing: border-box;
}

.google-card-inner {
    width: 201px;
    height: 103px;
    background-color: #ffffff;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Align text inside white card */
}

.google-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #000000;
}

.google-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.rating-val {
    font-size: 24px;
    font-weight: 900;
    color: #fabb05;
    line-height: 1;
}

/* THICK STARS */
.stars-css {
    display: flex;
    font-size: 20px;
    color: #fabb05;
    text-shadow: 0.5px 0 0 #fabb05, -0.5px 0 0 #fabb05, 0 0.5px 0 #fabb05, 0 -0.5px 0 #fabb05;
}

.g-icon {
    width: 25px;
    height: auto;
    margin-left: 2px;
}

.review-link {
    font-size: 13px;
    font-weight: 800;
    color: #464646;
    text-decoration: none;
}

.review-link:hover {
    color: #01A4E1;
    /* text-decoration: underline;  <-- Uncomment this if you want an underline */
}

/* --- 6. SOCIALS & DATE --- */
.footer-social-block {
    width: 380px; 
}

.social-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    justify-content: flex-end; 
}

.social-row img {
    height: 22px;
    width: auto;
}

.date-stamp {
    font-size: 13px;
    color: #464646;
    text-align: right;
    margin: 0;
    padding-right: 15px;
}

/* --- 7. MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
    .footer-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers children horizontally */
        text-align: center;
        width: 100%;
    }

    /* 2. Center the logo image specifically */
    .footer-logo {
        margin: 0 auto 25px auto !important; /* Forces horizontal centering */
        display: block;
    }

    /* 3. Ensure the tagline is also centered */
    .footer-tagline {
        margin-left: auto;
        margin-right: auto;
        max-width: 300px; /* Optional: keeps the tagline neat */
    }

    .footer-links {
        flex-direction: column;
        padding-left: 0;
        gap: 25px;
        width: 100%;
        align-items: center;
    }

    .link-column {
        width: 100%;
        align-items: center;
    }

    .link-column a {
        justify-content: center;
        width: fit-content;
    }

    .footer-reviews-section {
        align-items: center;
        width: 100%;
    }

    .review-row-flex {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 100%;
    }

    .qr-column-wrapper {
        align-items: center;
        width: 100%;
    }

    .social-row {
        justify-content: center;
        width: 100%;
        margin-top: 20px;
    }

    .date-stamp {
        text-align: center;
        padding-right: 0;
        width: 100%;
    }

    .footer-divider {
        display: none;
    }
}

/* --- SECTION 1: ABOUT HERO --- */
/* --- SECTION 1: ABOUT HERO (WIDTH REDUCED FIX) --- */
.about-intro-section {
    padding: 40px 0 60px 0; /* Updated padding for better spacing */
    background-color: #fff;
    width: 100%;
}

.about-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 60px; /* Space between text and banner */
}

.about-hero-text {
    flex: 1.2;
}

.about-hero-text h1 {
    font-size: 50px;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
    font-weight: 600;
}

.about-hero-text p {
    font-size: 16px;
    color: #3E3E3E;
    margin-bottom: 20px;
    max-width: 650px;
}

/* ABOUT PROMISE CARD */
.about-promise-card {
    flex: 0 0 450px;
    background-color: #FFF;
    border: 1px solid #EDEDED;
    border-radius: 24px;
    padding: 50px 25px;
    position: relative;
    margin-top: 135px; /* Alignment with paragraph */
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.about-promise-header {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 10px 35px;
    border: 1px solid #dddbdb;
    border-radius: 100px;
    font-weight: 700;
    font-size: 18px;
    color: #000;
    white-space: nowrap;
}

.about-promise-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.about-promise-item {
    flex: 1;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-promise-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: #EDEDED;
}

.about-promise-item img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    margin-bottom: 15px;
}

.about-promise-item span {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

/* --- THE REDUCED-WIDTH BANNER --- */
.about-hero-banner-container {
    width: 100%;
    max-width: 1250px; /* Limits the max width of the banner section */
    margin: 0 auto; /* Centers the whole container */
    padding: 0 40px; /* Consistent left/right padding with rest of site */
}

.about-hero-banner {
    width: 100%;
}

.about-hero-banner img {
    width: 100%;
    height: auto;
    border-radius: 24px; /* Retains the soft corners from XD */
    display: block;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05); /* Added subtle lift for depth */
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1024px) {
    .about-flex-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    .about-promise-card {
        width: 100%;
        margin-top: 30px;
    }
}




/* --- SECTION 2: ABOUT SOLUTIONS --- */
.about-solutions-section {
    padding: 40px 0 80px 0;
    background-color: #F8F4F0;
}

.about-solutions-header {
    margin-bottom: 50px;
}

.about-solutions-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.about-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1250px;
    margin: 0 auto;
    align-items: start;
}

/* THE REFINED CARD */
.about-solution-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid #EFEFEF;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.about-solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.about-card-content {
    margin-bottom: 20px;
}

.about-card-subtitle {
    font-size: 20px;
    color: #000;
    font-weight: 500;
    display: block;
}

.about-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.about-card-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-top: auto;
}

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

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1024px) {
    .about-flex-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    .about-promise-card {
        width: 100%;
        margin-top: 30px;
    }
}



/* --- SECTION 3: WHY PRINTR --- */
.about-why-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.about-why-header {
    margin-bottom: 50px;
    padding: 0 40px;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.about-why-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.about-why-header p {
    font-size: 16px;
    color: #3E3E3E;
    line-height: 1.5;
}

/* --- THE GRID --- */
.about-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 Grid */
    gap: 30px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- THE CARD (EXACT XD SPECS) --- */
.about-why-card {
    /* We apply the opacity directly into the gradient colors so text stays 100% sharp */
  background: linear-gradient(226deg, 
        rgba(243, 237, 226, 0.8) 0%,   /* Champagne - Top Right */
        rgba(250, 249, 246, 0.7) 43%,  /* Near White - Middle */
        rgba(248, 243, 237, 0.7) 67%,  /* Light Cream - Middle */
        rgb(224, 216, 202, 0.8) 100%  /* Dark Tan - Bottom Left */
    );
    
    border: 1px solid rgba(232, 220, 198, 0.7);
    border-radius: 20px;
    
    /* Ensure the container itself is 100% opaque so the 
       background transparency doesn't stack with anything else */
    opacity: 1;
    
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    
    /* REMOVED overall opacity: 0.7; to keep text/images clear */
}

.about-why-content h3, 
.about-why-content p {
    color: #000;
    opacity: 1; 
}


.about-why-content h3 {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin-bottom: 15px;
}

.about-why-content h3 strong {
    font-weight: 600;
}

.about-why-content p {
    font-size: 16px;
    color: #000;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- IMAGE FRAME --- */
.about-why-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.about-why-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    /* Keeps the image crisp */
    opacity: 1; 
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .about-why-grid {
        grid-template-columns: 1fr; /* Stacks to 1 column */
    }
}

/* --- SECTION 4: CLIENTS GRID --- */
.about-clients-section {
    padding: 60px 0;
    background-color: #F8F4F0; /* Matches the soft background in screenshot */
}

.about-clients-header {
    margin-bottom: 50px;
    padding: 0 40px;
}

.about-clients-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
}

.about-clients-header p {
    font-size: 16px;
    color: #3E3E3E;
    max-width: 700px;
    line-height: 1.5;
}

/* --- THE LOGO GRID --- */
.about-clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 logos per row */
    gap: 20px;
    padding: 0 40px;
    max-width: 1250px;
    margin: 0 auto;
}

.client-logo-box {
    background-color: #ffffff;
    border: 1px solid #EDEDED;
    border-radius: 15px; /* Softer rounded corners */
    height: 140px; /* Uniform height for all boxes */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-logo-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.client-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Keeps logos looking clean and professional */
    filter: grayscale(0); 
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1100px) {
    .about-clients-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 per row on tablets */
    }
}



/* --- FULL MOBILE RESPONSIVE (768px and below) --- */
@media (max-width: 768px) {
    
    /* 1. TYPOGRAPHY STANDARDIZATION */
    .about-page-wrapper h1, 
    .about-hero-text h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        text-align: center;
        margin-bottom: 20px !important;
    }

    .about-page-wrapper h2,
    .about-solutions-header h2,
    .about-why-header h2,
    .about-clients-header h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        text-align: center;
    }

    .about-hero-text p,
    .about-solutions-header p,
    .about-why-header p,
    .about-clients-header p {
        text-align: center;
        margin: 0 auto 20px auto;
        padding: 0 10px; /* Small padding for text readability */
    }

    /* 2. HERO LAYOUT RESET */
    .about-flex-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        margin-bottom: 40px !important;
        padding: 0 15px !important; /* Increased width for text area */
    }

    .about-hero-text {
        width: 100% !important;
    }

    /* 3. PROMISE CARD "LONG BOX" FIX */
    .about-promise-card {
        display: table !important; 
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 20px auto 0 auto !important; 
        padding: 45px 20px 30px 20px !important;
        width: 95% !important; /* Made wider */
        max-width: 360px !important;
        border-radius: 24px !important;
    }

    .about-promise-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    /* 4. BANNER ADJUSTMENT */
    .about-hero-banner-container {
        padding: 0 15px !important; /* Reduced padding for wider banner */
        margin-top: 30px !important;
    }

    .about-hero-banner img {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 20px !important;
    }

    /* 5. SOLUTIONS & WHY PRINTR GRIDS (INCREASED WIDTH) */
    .about-solutions-section,
    .about-why-section {
        padding: 60px 0 !important;
    }

    .about-solutions-section .container,
    .about-why-section .container {
        padding: 0 15px !important; /* This is the main fix to make cards wider */
        max-width: 100% !important;
    }

    .about-solutions-grid,
    .about-why-grid {
        grid-template-columns: 1fr !important; 
        gap: 25px !important;
        padding: 0 !important; /* Removing inner padding to let cards stretch */
        width: 100% !important;
    }

    .about-solution-card,
    .about-why-card {
        padding: 30px 20px !important; /* Keep internal padding but let card width grow */
        width: 100% !important;
        margin: 0 auto !important;
    }

    .about-why-image img {
        height: 200px !important; /* Controlled height for the wider cards */
    }

    /* 6. CLIENTS LOGO GRID */
    .about-clients-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 15px !important;
    }

    .client-logo-box {
        height: 110px !important;
        padding: 15px !important;
    }
}

/* --- CONTACT PAGE SECTION --- */
.about-contact-section {
    padding: 60px 0;
    background-color: #F9F7F2;
    font-family: 'Google Sans Flex', sans-serif;
}

.about-contact-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

/* BREADCRUMB */
.breadcrumb.right-align {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb a {
    text-decoration: none;
    color: #666;
}

.breadcrumb-separator {
    margin: 0 4x;
    color: #999;
}

/* LEFT COLUMN: INFO & ACTION ICONS */
.about-contact-info {
    flex: 1;
}

.about-contact-info h1 {
   font-size: 50px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #000;
}

.about-contact-info h3 {
   font-size: 30px;
    font-weight: 500;
    margin-bottom: 25px;
    color: #000;
}

/* Action Icons (Call & WhatsApp) */
.contact-actions-flex {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 30px 0 40px 0;
    padding-bottom: 5px;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.action-item:hover {
    transform: translateY(-3px);
}

.action-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    object-fit: contain;
}

.action-item span {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.action-separator {
    width: 1px;
    height: 40px;
    background-color: #E0DED9;
}

/* Details Block */
.contact-details-block {
    margin-bottom: 40px;
    margin-top: 20px;
}

.enquiry-label {
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}

.detail-row {
    display: flex;
    margin-bottom: 6px;
    font-size: 16px;
}

.detail-row .label { width: 80px; color: #000;  }
.detail-row .separator { width: 20px; color: #000; }
.detail-row .value { font-weight: 400; color: #000; }

.address-block-contact {
    font-size: 16px;
    line-height: 1.6;
    border-bottom: 1px solid #E0DED9;
    padding-bottom: 30px;
    margin-bottom: 30px;
    color: #000;
}

.contact-brand-division p {
    font-size: 14px;
    margin-bottom: 10px;
}

.contact-brand-division img {
    height: 40px;
}

/* RIGHT COLUMN: FORM CARD */
.about-contact-form-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.contact-form-card {
    background: #ffffff;
    padding: 50px;
    border-radius: 12px;
    border: 1px solid #EDEDED;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    margin-top: 100px;
}

.contact-form-card h3 {
    margin-top: -30px;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 30px;
    color: #262836;
}

.input-group {
    position: relative;
    margin-bottom: 15px;
}

.input-group img {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.6;
    z-index: 2;
}

.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 15px 15px 15px 45px; 
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    font-size: 15px;
    background-color: #FAFAFA;
    transition: all 0.3s ease;
    font-family: inherit;
    color: #000;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #999;
}

.input-group.no-icon textarea {
    padding-left: 15px;
}

.input-group input:focus, 
.input-group textarea:focus {
    outline: none;
    border-color: #B2A07F;
    background-color: #fff;
}

.contact-submit-btn {
    width: 100%;
    padding: 18px;
    background-color: #B2A07F; /* Using your gold theme from CSS */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;
}

.contact-submit-btn:hover {
    background-color: #9a8a6d;
}

.contact-links {
    color: #000 !important;
    text-decoration: none;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .about-contact-flex {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }

    .about-contact-form-wrapper {
        justify-content: center;  /* ADD THIS */
        width: 100%;              /* ADD THIS */
    }

    .contact-form-card {
        padding: 30px 20px;
        margin-top: 0;            /* REMOVE the 100px top margin */
        max-width: 100%;          /* Let it fill the column */
    }

    .about-contact-info h2,
    .contact-form-card h3 {
        text-align: center;
        margin-top: 10px !important;
    }

    .contact-actions-flex {
        justify-content: center;
    }

    .about-contact-info {
        text-align: center;
    }

    .detail-row {
        justify-content: center;
    }
}


/* --- Mobile Container & reCAPTCHA Fix --- */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .g-recaptcha {
        transform: scale(0.78);
        transform-origin: left top;
        height: 65px; /* prevents extra whitespace after scaling */
        margin-bottom: 0 !important;
    }

    .contact-form-card {
        padding: 25px 15px;
    }

    .inline-callback-container {
        width: 100%;
    }
}

/* reCAPTCHA overflow fix on small screens */
@media (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.82);
        transform-origin: left top;
        margin-bottom: 5px !important;
    }
}
/* --- ACRYLIC PAGE WRAPPER --- */
.acrylic-page-wrapper {
    background-color: #F8F4F0; /* Soft design background */
    font-family: 'Google Sans Flex', sans-serif;
}

/* --- HERO TEXT AREA --- */
.acrylic-hero-section {
    padding: 30px 0 30px 0;
    text-align: center;
}

.acrylic-hero-section h1 {
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #000;
}

.acrylic-hero-section p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    max-width: 850px;
    margin: 0 auto 60px auto;
}

.section-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

/* --- SPECIALTIES GRID --- */
.acrylic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for top row */
    gap: 30px;
    max-width: 1250px;
    margin: 0 auto;
    margin-bottom: 60px;
}

/* Individual Card Styling */
.acrylic-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    border: 1px solid #E8DCC6;
}

.acrylic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Card Image Area */
.acrylic-card .card-image {
    width: 100%;
    /* This forces the rectangle shape regardless of screen size */
    aspect-ratio: 1.8 / 1; 
    overflow: hidden;
    /* Soft rounding only at the top to match design */
    border-radius: 12px 12px 0 0 ; 
}

.acrylic-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the rectangle without stretching */
    display: block;
}

/* Card Body Area */
.acrylic-card .card-body {
padding: 25px 25px 30px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.acrylic-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000;
}

.acrylic-card p {
    font-size: 16px;
    line-height: 1.5;
    color: #3E3E3E;
    margin-bottom: 25px;
}

.acrylic-card a {

    color: #000;
    text-decoration: none;
}

/* Blue "Learn More" Link */
.learn-more {
    color: #00A4E1 !important; /* Sky blue as per design */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin-top: auto;
    transition: opacity 0.3s;
}

.learn-more:hover {
    opacity: 0.7;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
    .acrylic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .acrylic-hero-section h1 { font-size: 32px; }
    .acrylic-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
    .acrylic-card .card-image { height: 180px; }
}


/* --- COMPACT MASONRY WORK SAMPLES --- */
/* Scoped to .work-samples-section to avoid global conflicts */

.work-samples-section {
    padding: 20px 0 60px 0; /* Reduced top padding to pull heading up */
    background-color: #fff;
    font-family: 'Google Sans Flex', sans-serif;
}

/* THE ALIGNMENT FIX */
/* Matches the 40% / 55% split logic of your benefits section */
.work-samples-section .container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

.work-samples-header {
    /* This width (40%) ensures the 'Our Work Samples' text starts 
       exactly where the 'Why Choose' heading starts */
    width: 40%; 
    margin-bottom: 30px;
}

.work-samples-header h2 {
    font-size: 40px; /* Matches standard H2 scale */
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.1;
}

/* 4-COLUMN COMPACT GRID */
.foam-masonry-wrapper {
    display: flex;
    gap: 15px; /* Tight gap for professional look */
    width: 100%;
    align-items: flex-start;
}

.masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.masonry-item {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.masonry-item img {
   width: 100%;
    height: auto;
    object-fit: cover; /* Keeps it flush */
    display: block;
    max-height: 400px; /* Prevents one giant portrait from breaking the page */
}
/* --- LIGHTBOX POPUP --- */
.foam-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content img {
    max-height: 85vh; /* Large view on click */
    max-width: 90%;
    object-fit: contain;
    border-radius: 5px;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .work-samples-header {
        width: 100%;
        text-align: left;
    }
    
    .foam-masonry-wrapper {
        flex-wrap: wrap;
    }
    
    .masonry-col {
        flex: 0 0 calc(50% - 8px); /* 2 Columns on Tablet */
    }
}

@media (max-width: 600px) {
    .work-samples-header h2 {
        font-size: 28px;
        line-height: 44px;
    }
    
    .masonry-col {
        flex: 0 0 100%; /* Single column on small phones to see detail */
    }
}

/* Navigation arrows - Fixed to the screen edges */
.l-prev, .l-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 50px; /* Larger for better visibility */
    padding: 30px;
    text-decoration: none;
    user-select: none;
    transition: all 0.3s ease;
    z-index: 10005; /* Ensures they stay above the image */
    background: rgba(0,0,0,0.1); /* Subtle background for better contrast */
    border-radius: 50%;
}

.l-prev { 
    left: 40px; /* Pushes to far left */
}

.l-next { 
    right: 40px; /* Pushes to far right */
}

.l-prev:hover, .l-next:hover {
    color: #00AEEF;
    background: rgba(255,255,255,0.1);
}

/* Mobile Tweak: Keep arrows visible but smaller */
@media (max-width: 768px) {
    .l-prev { left: 10px; }
    .l-next { right: 10px; }
    .l-prev, .l-next {
        font-size: 30px;
        padding: 10px;
    }
}

/* --- PROFESSIONAL SPECIFICATIONS SECTION --- */
.specs-section {
    padding: 80px 0;
    background-color: #F9F7F2; /* Light beige background from your XD */
    font-family: 'Google Sans Flex', sans-serif;
}

.specs-section .container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

.specs-split {
    display: flex;
    gap: 20px; /* Consistent gap */
    align-items: flex-start;
}

/* Aligns with your standard 40/55 layout */
.specs-left {
    flex: 0 0 40%;
}

.specs-right {
    flex: 0 0 55%;
}

.specs-left h2 {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: #000;
    margin: 0;
}

/* List Item Styling */
.spec-item {
    margin-bottom: 25px;
}

.spec-item:last-child {
    margin-bottom: 0;
}

.spec-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.spec-arrow {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.spec-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.spec-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    padding-left: 31px; /* Aligns text under the H3, skipping the arrow */
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .specs-split {
        flex-direction: column;
        gap: 40px;
    }

    .specs-left, .specs-right {
        flex: 0 0 100%;
        width: 100%;
    }

    .specs-left h2 {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .specs-section {
        padding: 50px 0;
    }
    
    .specs-left h2 {
        font-size: 28px;
        line-height: 1.2;
    }
}

/* --- SIMPLE INSTALLATION & MAINTENANCE --- */
.install-section {
    padding: 40px 0;
    background-color: #fff;
    font-family: 'Google Sans Flex', sans-serif;
}

.install-section .container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

.install-split {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.install-left {
    flex: 0 0 40%;
}

.install-right {
    flex: 0 0 55%;
    display: flex;
    gap: 24px; /* Space between the two cards */
}

.install-left h2 {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: #000;
    margin: 0;
}

/* Card Styling */
.install-card {
    flex: 1;
    background-color: #FCFAF9; /* Very light off-white/beige */
    border: 1px solid #F1EBE3;
    border-radius: 15px;
    padding: 40px 30px;
    transition: transform 0.3s ease;
}

.install-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.card-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 25px;
    object-fit: contain;
}

.install-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}

.install-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #3E3E3E;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .install-split {
        flex-direction: column;
        gap: 40px;
    }

    .install-left, .install-right {
        flex: 0 0 100%;
        width: 100%;
    }

    .install-left h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .install-right {
        flex-direction: column; /* Stacks cards on mobile */
        gap: 20px;
    }
    
    .install-card {
        padding: 30px;
    }
}

@media (max-width: 600px) {
    .install-left h2 {
        font-size: 28px;
        line-height: 1.2;
    }
}

/* --- HOW TO PREPARE ARTWORK SECTION --- */
.artwork-prep-section {
    padding: 80px 0;
    background-color: #F9F9F9;
    font-family: 'Google Sans Flex', sans-serif;
}

.artwork-prep-section .container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

.prep-split {
    display: flex;
    gap: 20px;
    /* THE FIX: align-items: flex-start ensures the heading and box start together at the top */
    align-items: flex-start; 
}

.prep-left {
    flex: 0 0 40%;
}

.prep-right {
    flex: 0 0 55%;
}

.prep-left h2 {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: #000;
    margin-bottom: 25px;
    /* Optional: Adjust this if the heading needs to drop slightly to match the first H3 */
    margin-top: 0; 
}

.prep-left p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    max-width: 340px;
}

/* --- THE GRID BOX --- */
.artwork-grid-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Removed overflow: hidden to ensure borders align sharply at the edges */
}

.artwork-quadrant {
    /* Top padding adjusted to 0 or 5px can help align the H3 with the H2 on the left */
    padding: 0px 40px 40px 40px; 
    margin-bottom: 40px;
}

/* Vertical Divider */
.artwork-quadrant:nth-child(odd) {
    border-right: 1px solid #EAEAEA;
}

/* Horizontal Divider */
.artwork-quadrant:nth-child(1),
.artwork-quadrant:nth-child(2) {
    border-bottom: 1px solid #EAEAEA;
    padding-bottom: 40px;
}

/* Add padding to bottom row so they don't look squashed */
.artwork-quadrant:nth-child(3),
.artwork-quadrant:nth-child(4) {
    padding-top: 40px;
}

.artwork-quadrant h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}

.artwork-quadrant p {
    font-size: 15px;
    line-height: 1.5;
    color: #3E3E3E;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .prep-split {
        flex-direction: column;
        gap: 40px;
    }
    .prep-left, .prep-right {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* --- 1. MOBILE BOTTOM BAR (Split Layout) --- */
.mobile-bottom-bar {
    display: none; /* Hidden on Desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 2000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* Left part (Beige Background) */
.bar-left-icons {
    width: 50%;
    background: #EADDC6; /* Light Beige */
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 15px;
}

.bar-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


.bar-icon-circle img { width: 35px; height: auto; }

.vertical-divider {
    width: 1px;
    height: 30px;
    background: rgba(0,0,0,0.1);
}

/* Right part (Brown Call Button) */
.bar-right-button {
    width: 50%;
    background: #A68E65; /* Theme Brown */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-weight: 500;
    font-size: 17px;
    cursor: pointer;
}

.bar-right-button img { 
    width: 35px; 
}

/* --- BOTTOM SHEET (SWIPE-UP) MODAL --- */
.call-modal-overlay {
    display: none; /* Controlled by JS */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); /* Dark background */
    z-index: 3000;
    align-items: flex-end; /* ALIGN TO BOTTOM */
    justify-content: center;
}

.call-modal-content {
    background: #fff;
    width: 100%; /* Full width for mobile swipe-up */
    max-width: 500px; /* Optional: keeps it neat on tablets */
    padding: 40px 25px 30px;
    border-radius: 25px 25px 0 0; /* Rounded top corners only */
    position: relative;
    text-align: center;
    
    /* ANIMATION */
    transform: translateY(100%); /* Start off-screen */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* When active, slide up */
.call-modal-overlay.active .call-modal-content {
    transform: translateY(0);
}

/* THE SWIPE HANDLE (Visual indicator at the top) */
.call-modal-content::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 10px;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}

/* --- 3. FORM ELEMENTS --- */
/* --- SIMPLIFIED FORM STYLING --- */
.call-modal-content input[type="text"],
.call-modal-content input[type="tel"] {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    margin-bottom: 15px;
    border: 1px solid #EDEDED;
    border-radius: 12px;
    background: #F7F7F7;
    font-size: 15px;
    outline: none;
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

.call-modal-content input:focus {
    border-color: #A68E65; /* Theme brown on focus */
}

.submit-call-btn {
    width: 100%;
    background: #A68E65;
    color: #fff;
    border: none;
    height: 55px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    margin-top: 5px;
}

/* --- 4. RESPONSIVE --- */
@media (max-width: 768px) {
    .mobile-bottom-bar { 
        display: flex; 
    }
    /* Remove this: */
    /* body { padding-bottom: 70px; } */
    
    /* Add this instead: */
    .site-footer {
        padding-bottom: 80px; /* Covers the 50px bar + breathing room */
    }
}
/* --- Request a Callback Form Container --- */
.inline-callback-container {
    width: 100%;
    max-width: 400px; /* Limits width to keep a tight, clean look */
    margin-top: 20px;
}

.inline-callback-form {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Uniform spacing between fields */
}

/* --- Base Input Styling --- */
.inline-callback-form input[type="text"],
.inline-callback-form input[type="tel"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    color: #333;
    background-color: #f8f9fa; /* Matches the soft white background of the right form */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.inline-callback-form input:focus {
    outline: none;
    border-color: #bfa37a; /* Subtle gold/tan accent color focus matching your buttons */
    background-color: #fff;
}

/* --- Custom Phone Field with Flag Wrapper --- */
.phone-input-wrapper {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding-left: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Changes outer wrapper appearance when the internal telephone field is focused */
.phone-input-wrapper:focus-within {
    border-color: #bfa37a;
    background-color: #fff;
}

.phone-input-wrapper :is(input, input:focus) {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    padding-left: 8px;
}

/* Country Code & Flag Styling */
.country-code {
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    border-right: 1px solid #dee2e6; /* Separates the code from the entry field */
    padding-right: 10px;
    height: 100%;
}

.country-code img {
    width: 20px;
    height: auto;
    object-fit: contain;
    border-radius: 2px;
}

.country-code span {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

/* --- Call Me Back Button --- */
.submit-call-btn {
    width: 100%;
    background-color: #b39a74; /* Matches your brand's tan/gold button color */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(179, 154, 116, 0.15);
}

.submit-call-btn:hover {
    background-color: #a18862; /* Slightly deeper tone on hover */
}

.submit-call-btn:active {
    transform: scale(0.99);
}

/* Prevent active class from turning the quote button text blue */
.nav-menu ul li.active > a.btn-quote-nav,
.nav-menu ul li.active .mobile-nav-item a.btn-quote-nav {
    color: #ffffff !important;
}

/* --- Breadcrumbs Styling (Right-Aligned) --- */
.cs-breadcrumb-container {
    padding: 20px 0 10px 0;
    background-color: #ffffff;
}

.cs-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns breadcrumbs to the right */
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
}

.cs-breadcrumbs li {
    color: #707070;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-breadcrumbs li a {
    text-decoration: none;
    color: #707070;
    transition: color 0.2s ease;
}

.cs-breadcrumbs li a:hover {
    color: #707070; /* Printr Blue */
}

/* Breadcrumb Divider Arrow */
.cs-breadcrumbs li:not(:last-child)::after {
    content: "\203A";
    color: #707070;
    font-size: 13px;
    line-height: 1;
}

.cs-breadcrumbs li.active {
    color: #707070;
}

/* --- Case Study Hero Styles --- */
.cs-hero-section {
    padding: 40px 0 60px 0;
    background-color: #ffffff;
}

.cs-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Left Content Column */
.cs-hero-left {
    padding-right: 20px;
}

.cs-badge {
    display: inline-block;
    font-size: 18px;
    color: #464646;
    margin-bottom: 15px;
    font-weight: 500;
}

/* Base style for the rest of the text in H1 */
.cs-hero-left h1 {
    font-size: 30px; 
    line-height: 1.25;
    color: #000000;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Target specific style for the primary phrase */
.cs-hero-main-title {
    font-size: 50px;
    display: inline-block;
    margin-bottom: 10px;
}

.cs-hero-left p {
    font-size: 18px;
    line-height: 1.6;
    color: #3E3E3E;
    margin: 0;
}

/* Right Media Column */
.cs-hero-right {
    display: flex;
    justify-content: flex-end;
}

.cs-single-banner-wrapper {
    width: 100%;
    max-width: 540px;
}

.cs-banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: none; /* Box shadow explicitly removed */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .cs-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .cs-hero-left {
        padding-right: 0;
        text-align: center;
    }
    
    .cs-hero-right {
        justify-content: center;
    }
    
    .cs-breadcrumbs {
        justify-content: center; /* Centers breadcrumbs on tablet/mobile views */
    }
}

@media (max-width: 480px) {
    /* Responsive downsizing for smaller breakpoints */
    .cs-hero-main-title {
        font-size: 36px;
    }

    .cs-hero-left h1 {
        font-size: 24px;
    }
    
    .cs-breadcrumbs {
        font-size: 12px;
        flex-wrap: wrap;
    }
}

/* --- Client Overview & Project Objective Styles --- */
.cs-overview-section {
    padding: 80px 0;
    background-color: #F8F6F4; /* Requested background color */
}

.cs-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.cs-overview-col h2 {
    font-size: 30px;
    color: #000;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.cs-overview-col p {
    font-size: 16px;
    line-height: 1.6;
    color: #3e3e3e;
    margin: 0;
}

/* Custom Bullet List using images/arrow.png */
.cs-arrow-list-v2 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cs-arrow-list-v2 li {
    font-size: 16px;
    line-height: 1.5;
    color: #3e3e3e;
    position: relative;
    padding-left: 28px; /* Room for the custom arrow icon */
}

.cs-arrow-list-v2 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px; /* Align vertically with the first line of text */
    width: 14px;
    height: 14px;
    background-image: url('../images/arrow.png'); /* Ensure path is correct */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .cs-overview-grid {
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .cs-overview-section {
        padding: 60px 0;
    }
    
    .cs-overview-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .cs-overview-col h2 {
        font-size: 24px;
        margin-bottom: 18px;
    }
}

/* --- Scope of Work Section Styles --- */
.cs-scope-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.cs-scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Accordion Column */
.cs-scope-left h2 {
    font-size: 30px;
    color: #000;
    font-weight: 700;
    margin-bottom: 20px;
}

.cs-scope-accordion {
    display: flex;
    flex-direction: column;
}

.cs-scope-item {
    border-bottom: 1px solid #ebebeb;
}

/* Accordion Header / Button styling */
.cs-scope-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 18px 0;
    cursor: pointer;
    text-align: left;
    outline: none;
}

.cs-trigger-text {
    font-size: 16px;
    color: #707070;
    font-weight: 500;
    transition: color 0.2s ease;
    font-family: 'Google Sans Flex', sans-serif;
}

/* Plus / Minus Custom CSS Icons matching print blue accent */
.cs-icon-plus::before {
    content: "+";
    display: inline-block;
    width: 24px;
    font-size: 18px;
    color: #00AEEF; /* Printr Blue */
    font-weight: bold;
}

.cs-icon-minus::before {
    content: "\2212"; /* Standard geometric minus sign */
    display: inline-block;
    width: 24px;
    font-size: 18px;
    color: #C1AB83;
    font-weight: bold;
}

/* Active Open Row Text Modifications */
.cs-scope-item.active .cs-trigger-text {
    color: #111111;
}

/* Inner Description Area Styling */
.cs-scope-content {
    display: none;
    padding: 0 0 24px 24px;
}

/* Force show only when parent has the active class */
.cs-scope-item.active .cs-scope-content {
    display: block;
}

.cs-scope-content p {
    font-size: 16px;
    color: #3E3E3E;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

/* Sub-list using images/arrow.png */
.cs-nested-arrow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.cs-nested-arrow-list li {
    font-size: 16px;
    color: #3E3E3E;
    position: relative;
    padding-left: 20px;
    line-height: 1.4;
}

.cs-nested-arrow-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 11px;
    height: 11px;
    background-image: url('../images/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Right Media Column */
.cs-scope-right {
    display: flex;
    justify-content: flex-end;
}

.cs-scope-image-wrapper {
    width: 100%;
    max-width: 540px;
}

.cs-scope-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .cs-scope-grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .cs-scope-section {
        padding: 60px 0;
    }

    .cs-scope-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cs-scope-right {
        justify-content: center;
        order: -1; /* Puts the imagery over text layout stack on smaller dynamic viewpoints */
    }
}

/* ==========================================================================
   Case Study Metrics & Insights Styles (Intelligently Auto-Flexible)
   ========================================================================== */

.cs-insights-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* Base structural layout grid */
.cs-insights-grid {
    display: grid;
    gap: 45px;
    align-items: start;
}

/* --- DYNAMIC CONDITION 1: If there is ONLY 1 column in the HTML --- */
.cs-insights-grid:not(:has(.cs-insights-col:nth-child(2))) {
    grid-template-columns: 1fr;
    max-width: 680px; /* Limits width so a single list doesn't stretch too wide */
    margin: 0 auto;   /* Centers the single list on the page */
}

/* --- DYNAMIC CONDITION 2: If there are EXACTLY 2 columns in the HTML --- */
.cs-insights-grid:has(.cs-insights-col:nth-child(2)):not(:has(.cs-insights-col:nth-child(3))) {
    grid-template-columns: 1fr 1fr;
    max-width: 950px; /* Balances the layout width for two items */
    margin: 0 auto;   /* Centers the dual block on the page */
}

/* --- DYNAMIC CONDITION 3: Standard default setup for 3 columns --- */
.cs-insights-grid:has(.cs-insights-col:nth-child(3)) {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 100%;
}


/* --- Column Elements Styling --- */
.cs-insights-col h2 {
    font-size: 30px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.cs-insights-col p {
    font-size: 16px;
    line-height: 1.5;
    color: #3E3E3E;
    margin: 0 0 20px 0;
}

/* --- Left/Single Column: Custom Arrow List --- */
.cs-arrow-list-v3 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cs-arrow-list-v3 li {
    font-size: 16px;
    line-height: 1.5;
    color: #3E3E3E;
    position: relative;
    padding-left: 24px;
}

.cs-arrow-list-v3 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    background-image: url('../images/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Middle & Right Columns: Custom Tick List --- */
.cs-tick-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cs-tick-list li {
    font-size: 16px;
    line-height: 1.5;
    color: #3E3E3E;
    position: relative;
    padding-left: 26px;
}

.cs-tick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px;
    height: 12px;
    background-image: url('../images/tick-cs.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Vertical Separation Borders --- */
.cs-insights-col.cs-border-left {
    position: relative;
    padding-left: 15px;
}

.cs-insights-col.cs-border-left::after {
    content: "";
    position: absolute;
    left: -20px;
    top: 10px;
    width: 1px;
    height: calc(100% - 10px);
    background-color: #ebebeb;
}


/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet Optimization Layouts */
@media (max-width: 1024px) {
    .cs-insights-grid {
        gap: 30px;
    }
    
    .cs-insights-col.cs-border-left {
        padding-left: 0;
    }
    
    .cs-insights-col.cs-border-left::after {
        display: none; /* Safely strips the vertical line rules on tablet layouts */
    }
}

/* Mobile Screen Layouts */
@media (max-width: 768px) {
    .cs-insights-section {
        padding: 60px 0;
    }
    
    /* Fallback everything down completely to standard stacked layout blocks */
    .cs-insights-grid,
    .cs-insights-grid:not(:has(.cs-insights-col:nth-child(3))),
    .cs-insights-grid:not(:has(.cs-insights-col:nth-child(2))) {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .cs-insights-col h2 {
        font-size: 22px;
        margin-bottom: 18px;
    }
}


/* --- Case Study Conclusion Section Styles --- */
.cs-conclusion-section {
    padding: 10px 0 80px 0; /* Tightened top padding to sit closely below the metrics section */
    background-color: #ffffff;
}

.cs-conclusion-card {
    background-color: #FDFBF9; /* Warm tint card background matching the screenshot */
    border: 1px solid #F5EFEA;
    border-radius: 12px;
    padding: 40px 50px;
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1000px; /* Centers the content container nicely on desktop */
    margin: 0 auto;
}

/* Left Side: Fixed Dimension Icon Container */
.cs-conclusion-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-conclusion-icon img {
    width: 90px;
    height: auto;
    display: block;
}

/* Right Side: Text Context */
.cs-conclusion-content h2 {
    font-size: 30px;
    color: #000;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
}

.cs-conclusion-content p {
    font-size: 16px;
    line-height: 1.65;
    color: #3E3E3E;
    margin: 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .cs-conclusion-section {
        padding: 10px 0 60px 0;
    }
    
    .cs-conclusion-card {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
        gap: 20px;
    }
    
    .cs-conclusion-icon img {
        width: 75px;
    }
    
    .cs-conclusion-content h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }
}

/* --- Read More Case Studies Section Styles --- */
.cs-related-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff;
}

.cs-related-title {
    font-size: 30px;
    color: #000;
    font-weight: 700;
    margin-bottom: 35px;
    line-height: 1.2;
}

.cs-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.cs-related-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card Image Container */
.cs-card-image {
    width: 100%;
    height: 200px; /* Constrained viewport container for row uniformity */
    overflow: hidden;
}

.cs-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures uniform resizing across various image aspect ratios */
    display: block;
}

/* Card Text Body */
.cs-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cs-card-content h3 {
    font-size: 24px;
    color: #000;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.cs-card-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E3E3E;
    font-style: normal; /* Follows standard body layout while capturing blockquote style */
    margin: 0 0 20px 0;
    flex-grow: 1; /* Pushes the read button down cleanly if copy lengths mismatch */
}

/* Printr Blue Arrow Link Styling */
.cs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #00AEEF; /* Printr Blue */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.cs-card-link span {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.cs-related-card:hover .cs-card-link span {
    transform: translateX(4px); /* Interactive nudge on card hover */
}

.cs-card-link:hover {
    color: #008ec4;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .cs-related-grid {
        gap: 20px;
    }
    
    .cs-card-content {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .cs-related-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 450px; /* Centers and constrains stack on mobile */
        margin: 0 auto;
    }
    
    .cs-card-image {
        height: 220px;
    }
}

/* ==========================================================================
   Terms & Conditions Page Styles
   ========================================================================== */

/* Full-Width Gold Top Banner */
.terms-hero-banner {
    background-color: #AA9063;
    padding: 40px 0;
    width: 100%;
}

/* Banner container to align text perfectly with the body content site container */
.terms-banner-container {
    max-width: 1140px; /* Adjust this to match your site's standard container width */
    margin: 0 auto;
    padding: 0 24px;
    text-align: left;
}

/* White Heading Inside the Gold Banner */
.terms-hero-banner h1 {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Body Section Content Wrapper */
.terms-body-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff;
}

/* Constrained typography width optimized for clean left-to-right scanning */
.terms-content-container {
    max-width: 1140px; /* Adjust to your main structure layout limits */
    margin: 0 auto;
    padding: 0 24px;
    text-align: left;
}

/* Intro Paragraph font boost style */
.terms-intro {
    font-size: 17px;
    line-height: 1.65;
    color: #222222;
    margin-bottom: 35px;
}

/* Section Subheadings */
.terms-content-container h2 {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin-top: 40px;
    margin-bottom: 16px;
    line-height: 1.3;
}

/* Regular Body Text Blocks */
.terms-content-container p {
    font-size: 16px;
    line-height: 1.65;
    color: #3E3E3E;
    margin: 0 0 20px 0;
}

/* Bullet Point Formatting Layouts */
.terms-bullet-list {
    list-style-type: disc;
    padding-left: 24px;
    margin: 0 0 24px 0;
}

.terms-bullet-list li {
    font-size: 16px;
    line-height: 1.65;
    color: #3E3E3E;
    margin-bottom: 12px;
}

.terms-bullet-list li strong {
    color: #000000;
}

/* ==========================================================================
   Mobile Optimization Overrides
   ========================================================================== */

@media (max-width: 768px) {
    .terms-hero-banner {
        padding: 30px 0;
    }

    .terms-hero-banner h1 {
        font-size: 28px;
    }

    .terms-body-section {
        padding: 40px 0 60px 0;
    }

    .terms-content-container h2 {
        font-size: 19px;
        margin-top: 30px;
    }

    .terms-intro {
        font-size: 16px;
    }

    .terms-content-container p, 
    .terms-bullet-list li {
        font-size: 15px;
    }
}

/* Thank You State Styles inside Modal */
.cs-thankyou-box {
    text-align: center;
    padding: 20px 10px;
}

.cs-thankyou-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    background-color: #f7f3ee; /* Matches your gold/beige button tint lightened */
    color: #bfa383; /* Matches your modal button color base */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
}

.cs-thankyou-box h3 {
    font-size: 24px;
    color: #111111;
    margin-bottom: 10px;
    font-weight: 700;
}

.cs-thankyou-box p {
    font-size: 15px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* Standalone Page Structural Layout */
        .cs-page-thankyou-wrapper {
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            background-color: #ffffff;
            font-family: 'Google Sans Flex', sans-serif;
        }

        .cs-page-thankyou-card {
            text-align: center;
            max-width: 550px;
            width: 100%;
            padding: 50px 40px;
            background: #ffffff;
            border-radius: 12px;
           
        }

        .cs-page-ty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px auto;
            background-color: #fcfaf7;
            color: #bfa383; /* Form button accent tint color */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 38px;
            font-weight: bold;
            border: 1px solid #f3ece4;
        }

        .cs-page-thankyou-card h1 {
            font-size: 32px;
            color: #111111;
            margin: 0 0 15px 0;
            font-weight: 700;
        }

        .cs-page-thankyou-card p {
            font-size: 16px;
            color: #555555;
            line-height: 1.6;
            margin: 0 0 30px 0;
        }

        /* Return Home Button Link Styling */
        .cs-ty-btn-home {
            display: inline-block;
            background-color: #00AEEF; /* Printr Blue */
            color: #ffffff !important;
            text-decoration: none;
            padding: 12px 30px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 15px;
            transition: background 0.3s ease;
        }

        .cs-ty-btn-home:hover {
            background-color: #008ec4;
        }

        /* Auto Redirect Notice Text Counter formatting */
        .cs-ty-countdown-text {
            font-size: 13px;
            color: #999999;
            margin-top: 25px;
            margin-bottom: 0;
        }

        .cs-ty-countdown-text span {
            font-weight: bold;
            color: #111111;
        }

        @media (max-width: 480px) {
            .cs-page-thankyou-card {
                padding: 35px 20px;
            }
            .cs-page-thankyou-card h1 {
                font-size: 26px;
            }
        }