/* ==========================================================================
   UNIVERSAL.CSS - Core Theme Styles
   ========================================================================== */
:root {
    --theme-brown: #C06126; 
    --theme-dark: #141414;
    --theme-gray: #6b6a68;
    --bg-light: #fcfbfa;
    --border-light: #eae8e5;
    --font-heading: 'Nunito', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--theme-gray);
    line-height: 1.7;
    background-color: #ffffff;
    overflow-x: hidden;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; }
.bg-light { background-color: var(--bg-light); }

/* PERFECT TEXT JUSTIFICATION FOR ALL PARAGRAPHS */
p { text-align: justify; text-justify: inter-word; color: #6b6a68; line-height: 1.8; margin-bottom: 15px; }

/* ==========================================================================
   HEADING STYLES (Solid Black Main Heading, Orange Subtitle)
   ========================================================================== */
.section-heading { text-align: center; margin-bottom: 50px; }
.section-heading .sub-title {
    display: inline-block; font-size: 12px; font-weight: 800; color: var(--theme-brown);
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px;
    font-family: var(--font-heading); position: relative; padding-bottom: 5px;
}
.section-heading h2 {
    font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: var(--theme-dark);
    font-family: var(--font-heading); margin-bottom: 20px; line-height: 1.3;
}
/* REMOVED SPAN COLORING SO HEADINGS STAY SOLID BLACK AS REQUESTED */
.section-heading h2 span { color: inherit; } 
.section-heading.text-left { text-align: left; }
.section-heading p { max-width: 800px; margin: 0 auto; }
.section-heading.text-left p { margin: 0; }

/* ==========================================================================
   BREADCRUMB HERO BANNER 
   ========================================================================== */
.page-hero {
    margin-top: 60px; /* FIXED: Changed from 70px to exactly match the 60px header, removing the white gap */
    background-color: var(--theme-brown);
    padding: 40px 0; /* FIXED: Reduced from 80px to match the slim "About Us" banner height */
    text-align: center;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.page-hero h1 { font-family: var(--font-heading); font-size: clamp(32px, 5vw, 40px); font-weight: 800; margin-bottom: 10px; color: #ffffff; }
.page-hero .breadcrumbs { font-size: 16px; font-weight: 600; font-family: var(--font-heading); }
.page-hero .breadcrumbs a { color: #ffffff; text-decoration: none; transition: opacity 0.3s; }
.page-hero .breadcrumbs a:hover { opacity: 0.8; }
.page-hero .breadcrumbs .dot { margin: 0 8px; font-size: 12px; opacity: 0.7;}

/* ==========================================================================
   NEWSLETTER BOX (Solid Orange, Dark Button)
   ========================================================================== */
.newsletter-bar { background-color: var(--theme-brown); padding: 25px 0; color: #ffffff; } /* FIXED: Reduced padding from 50px to slim it down */
.nl-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.nl-text-box { display: flex; align-items: center; gap: 20px; }
.nl-icon { font-size: 45px; color: #ffffff; }
.nl-text-box h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; margin-bottom: 5px; color: #ffffff; }
.nl-text-box p { font-size: 15px; margin: 0; opacity: 0.9; color: #fff; text-align: left; }
.nl-form { display: flex; width: 100%; max-width: 500px; background: #ffffff; border-radius: 6px; overflow: hidden; }
.nl-form input { flex: 1; border: none; padding: 15px 20px; font-size: 15px; outline: none; font-family: var(--font-body); }
.nl-form button { background: var(--theme-dark); color: #ffff; border: none; padding: 0 30px; font-weight: 700; cursor: pointer; transition: opacity 0.3s; font-family: var(--font-heading); text-transform: uppercase; }
.nl-form button:hover { opacity: 0.9; }

/* ==========================================================================
   LAYOUTS (Grid, Split, Horizontal Cards, Process Cards)
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

/* Standard Vertical Card */
.service-card {
    background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px;
    padding: 40px 30px; text-align: center; transition: all 0.3s ease;
}
.service-card:hover { box-shadow: 0 15px 35px rgba(192, 97, 38, 0.1); border-color: var(--theme-brown); transform: translateY(-5px); }
.icon-wrapper { width: 70px; height: 70px; background: rgba(192, 97, 38, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; font-size: 28px; color: var(--theme-brown); transition: all 0.3s ease; }
.service-card:hover .icon-wrapper { background: var(--theme-brown); color: #ffffff; transform: scale(1.1); }
.service-card h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--theme-dark); margin-bottom: 15px; }

/* Horizontal Card (From Provided Reference Picture) */
.horizontal-card-list { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.horizontal-card {
    display: flex; align-items: flex-start; gap: 25px; background: #ffffff;
    border: 1px solid var(--border-light); border-radius: 12px; padding: 35px 40px;
    transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}
.horizontal-card:hover { box-shadow: 0 15px 35px rgba(192, 97, 38, 0.1); border-color: var(--theme-brown); transform: translateY(-3px); }
.horizontal-card .h-icon {
    flex-shrink: 0; width: 65px; height: 65px; background: rgba(192, 97, 38, 0.1);
    color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 26px; transition: all 0.3s;
}
.horizontal-card:hover .h-icon { background: var(--theme-brown); color: #ffffff; }
.horizontal-card-text { text-align: left; }
.horizontal-card-text h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--theme-dark); margin-bottom: 10px; text-transform: uppercase; }

/* Numbered Process List */
.process-grid { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.process-step { display: flex; align-items: flex-start; gap: 25px; background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: 0 5px 15px rgba(0,0,0,0.02); transition: transform 0.3s, border-color 0.3s; }
.process-step:hover { transform: translateY(-3px); border-color: var(--theme-brown); }
.process-step .step-num {
    flex-shrink: 0; width: 50px; height: 50px; background: var(--theme-brown);
    color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; font-family: var(--font-heading);
}
.process-step-text { text-align: left; }
.process-step-text h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--theme-dark); margin-bottom: 10px; margin-top: 5px; }

/* Split Content */
.split-wrap { display: flex; align-items: center; gap: 60px; }
.split-content { flex: 1; }
.split-image { flex: 1; }
.split-image img { width: 100%; border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.split-content p { margin-bottom: 20px; }

/* FAQ Accordion */
.faq-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.faq-item { background: #ffffff; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; }
.faq-header { width: 100%; text-align: left; padding: 20px 25px; background: transparent; border: none; font-size: 16px; font-weight: 700; font-family: var(--font-heading); color: var(--theme-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(192, 97, 38, 0.1); color: var(--theme-brown); transition: transform 0.3s ease; }
.faq-content { max-height: 0; overflow: hidden; padding: 0 25px; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-item.active { border-color: var(--theme-brown); box-shadow: 0 5px 15px rgba(192, 97, 38, 0.08); }
.faq-item.active .faq-icon { background: var(--theme-brown); color: #fff; transform: rotate(180deg); }
.faq-item.active .faq-content { padding-bottom: 25px; }

/* Buttons */
.btn-primary { display: inline-block; background: var(--theme-brown); color: #fff; padding: 12px 30px; font-family: var(--font-heading); font-weight: 700; border-radius: 6px; text-decoration: none; text-transform: uppercase; transition: opacity 0.2s; border: none; cursor: pointer; }
.btn-primary:hover { opacity: 0.9; color: #fff; }

/* ==========================================================================
   FLOATING ANIMATION & UTILITY CLASSES (For All Service Pages)
   ========================================================================== */

.floating-motion-icon {
    max-width: 280px;
    width: 100%;
    height: auto;
    background: transparent;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    animation: floatUpDown 4s ease-in-out infinite;
    display: block;
    margin: 0 auto;
}

@keyframes floatUpDown {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Utility Classes */
.align-items-center { 
    align-items: center; 
}

.mb-4 { 
    margin-bottom: 25px !important; 
}


/* Mobile */
@media (max-width: 991px) { .split-wrap { flex-direction: column; } .nl-inner { flex-direction: column; text-align: center; } .nl-text-box { flex-direction: column; gap: 10px; } }
@media (max-width: 768px) { .page-hero { padding: 40px 0; margin-top: 60px; } .nl-form { flex-direction: column; gap: 10px; background: transparent; } .nl-form input, .nl-form button { width: 100%; border-radius: 6px; padding: 15px; } .horizontal-card { flex-direction: column; text-align: center; align-items: center; } .horizontal-card-text { text-align: center; } .process-step { flex-direction: column; text-align: center; align-items: center; } .process-step-text { text-align: center; } }








/* ==========================================================================
   PAGE-SPECIFIC COMPONENT LAYOUTS - ABOUT US 
   ========================================================================== */

/* --- FORCE SOLID BLACK HEADINGS GLOBALLY ON THIS PAGE --- */
h1, h2, h3, h4, h5, h6, 
.section-heading h2, 
.section-heading h2 span,
.interactive-card h3,
.stat-title {
    color: #141414 !important;
}
/* ------------------------------------------------------------------ */

.about-hero-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

/* Stats Component */
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.stat-col {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 30px;
}
.bordered-stat { border-left: 1px solid var(--border-light); }
.stat-num-box { text-align: left; min-width: 120px; }
.stat-num-box .counter, .stat-num-box {
    font-size: 56px; font-weight: 800; font-family: var(--font-heading); color: var(--theme-dark); line-height: 1;
}
.stat-title {
    display: block; font-size: 13px; font-weight: 700; font-family: var(--font-body);
    color: var(--theme-dark); text-transform: uppercase; letter-spacing: 1px; margin-top: 5px;
}
.stat-text p { font-size: 15px; margin: 0; }

/* Interactive Card Layouts */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.interactive-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 35px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.interactive-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-5px);
}
.interactive-card .card-icon {
    width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08);
    color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
}
.interactive-card:hover .card-icon { background: var(--theme-brown); color: #ffffff; }
.interactive-card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 800; color: var(--theme-dark); margin-bottom: 12px; }
.interactive-card p { font-size: 14.5px; margin: 0; text-align: justify; }

/* Progress Bars */
.progress-container { display: flex; flex-direction: column; gap: 22px; margin-top: 15px; }
.progress-item { width: 100%; }
.progress-labels { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14.5px; color: var(--theme-dark); font-weight: 600; }
.progress-bar-bg { width: 100%; height: 6px; background-color: #E6E6E7; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; background-color: var(--theme-brown); border-radius: 4px; width: 0; transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); }


/* ==========================================================================
   NEW INTERACTIVE IMAGE LAYOUTS (Technology Expertise & Future Horizon)
   ========================================================================== */

/* 1. Floating Tech Stack Image */
.floating-tech-wrapper {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

.floating-tech-wrapper img {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

.float-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--theme-brown);
    box-shadow: 0 15px 30px rgba(192, 97, 38, 0.15);
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.5);
    animation: floaty 4s ease-in-out infinite;
}

.fi-1 { top: -20px; left: -20px; animation-delay: 0s; }
.fi-2 { top: 40%; right: -30px; animation-delay: 1s; }
.fi-3 { bottom: -20px; left: 10%; animation-delay: 2s; }
.fi-4 { bottom: 20%; left: -30px; animation-delay: 3s; }

@keyframes floaty {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* 2. Interactive Stacked Image (Shaping the Future) */
.image-stack-interactive {
    position: relative;
    width: 100%;
    height: 500px;
}

.img-back {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 85%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: transform 0.5s ease;
}

.img-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 55%;
    height: 60%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 8px solid #ffffff;
    transition: transform 0.5s ease;
}

.image-stack-interactive:hover .img-back {
    transform: translate(-10px, 10px);
}

.image-stack-interactive:hover .img-front {
    transform: translate(10px, -10px);
}

.experience-badge {
    position: absolute;
    bottom: 40px;
    right: -20px;
    background: var(--theme-brown);
    color: #ffffff;
    padding: 20px 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(192, 97, 38, 0.3);
    z-index: 3;
    animation: pulseGlow 2s infinite;
}

.experience-badge .badge-icon {
    font-size: 32px;
}

.experience-badge span {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(192, 97, 38, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(192, 97, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 97, 38, 0); }
}


/* Mobile Adjustments */
@media (max-width: 992px) {
    .split-wrap { flex-direction: column !important; gap: 40px; }
    .stats-row { flex-direction: column; gap: 35px; }
    .stat-col { padding: 0; flex-direction: column; align-items: center; text-align: center; }
    .stat-num-box { text-align: center; }
    .bordered-stat { border-left: none; border-top: 1px solid var(--border-light); padding-top: 25px; }
    .about-hero-img { height: auto; min-height: 350px; }
    
    /* Interactive Image Mobile Tweaks */
    .image-stack-interactive { height: 400px; margin-top: 20px; }
    .experience-badge { right: 10px; bottom: -10px; padding: 15px 20px; }
    .float-icon { width: 50px; height: 50px; font-size: 20px; }
    .fi-2 { right: -10px; }
    .fi-4 { left: -10px; }
}








        /* ===== PAGE SPECIFIC & STRUCTURAL STYLES ===== */
        h1, h2, h3, h4, h5, h6, .section-heading h2, .interactive-card h3 { color: var(--theme-dark) !important; font-family: var(--font-heading); }
        
        /* Correcting the paragraph wrapping & making it look clean */
        p { 
            color: var(--theme-gray); 
            line-height: 1.8; 
            font-size: 16px; 
            margin-bottom: 20px;
            max-width: 100%;
        }

        /* Image Styling - White borders like 'About Us' */
        .framed-img {
            width: 100%;
            height: auto;
            max-height: 600px;
            object-fit: cover;
            border: 8px solid #ffffff;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: transform 0.5s ease;
        }
        .framed-img:hover {
            transform: scale(1.02);
        }
        
        /* INCREASED IMAGE SIZE FOR HERO */
        .product-hero-img {
            width: 100%;
            height: auto;
            max-height: 750px; /* Increased from 600px */
            object-fit: contain;
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
            animation: float 6s ease-in-out infinite;
            transform: scale(1.08); /* Makes the app mockup pop out more */
        }

        @keyframes float {
            0% { transform: translateY(0px) scale(1.08); }
            50% { transform: translateY(-15px) scale(1.08); }
            100% { transform: translateY(0px) scale(1.08); }
        }

        /* App Store Buttons */
        .app-badges {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        .app-badge-btn {
            display: inline-flex;
            align-items: center;
            background: #C06126;
            color: #ffffff !important;
            padding: 10px 24px;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s ease;
            gap: 12px;
            border: 1px solid transparent;
        }
        .app-badge-btn i { font-size: 28px; }
        .app-badge-text { display: flex; flex-direction: column; text-align: left; }
        .app-badge-text small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; line-height: 1; margin-bottom: 2px;}
        .app-badge-text strong { font-size: 18px; font-family: var(--font-heading); font-weight: 700; line-height: 1;}
        .app-badge-btn:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
            background: #C06126;
            color: #ffffff;
            border-color: #141414;
        }

        /* Interactive Grid for Features */
        .interactive-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        .interactive-card {
            background: #ffffff;
            border: 1px solid var(--border-light);
            border-radius: 16px;
            padding: 35px 30px;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .interactive-card:hover {
            box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
            border-color: var(--theme-brown);
            transform: translateY(-5px);
        }
        .interactive-card .card-icon {
            width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08);
            color: var(--theme-brown); border-radius: 12px; display: flex; align-items: center;
            justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
        }
        .interactive-card:hover .card-icon { background: var(--theme-brown); color: #ffffff; transform: rotate(10deg); }
        .interactive-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }

        /* Custom Lists */
        .check-list { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
        .check-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--theme-dark); }
        .check-list li i { color: var(--theme-brown); font-size: 18px; }

        /* ===== STICKY SCROLL LAYOUT (Image 6 Constraint) ===== */
        .sticky-grid-container {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 50px;
            align-items: flex-start;
            margin-top: 40px;
        }
        .sticky-sidebar {
            position: sticky;
            top: 100px; /* Offset from fixed header */
            background: var(--theme-brown);
            padding: 50px 40px;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(192, 97, 38, 0.2);
            color: #ffffff;
        }
        .sticky-sidebar .sub-title { color: rgba(255,255,255,0.8) !important; letter-spacing: 2px; }
        .sticky-sidebar h2 { color: #ffffff !important; font-size: 32px; margin-bottom: 20px; }
        .sticky-sidebar p { color: rgba(255,255,255,0.9); margin-bottom: 0; }
        
        .scroll-content {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        .scroll-card {
            background: #ffffff;
            border: 1px solid var(--border-light);
            border-radius: 16px;
            padding: 35px 30px;
            display: flex;
            gap: 25px;
            transition: all 0.3s ease;
        }
        .scroll-card:hover {
            border-color: var(--theme-brown);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transform: translateY(-3px);
        }
        .scroll-card .card-icon {
            width: 60px; height: 60px; background: #fdf5f0; color: var(--theme-brown);
            border-radius: 12px; display: flex; align-items: center; justify-content: center;
            font-size: 24px; flex-shrink: 0; transition: all 0.3s;
        }
        .scroll-card:hover .card-icon { background: var(--theme-brown); color: #fff; }
        .scroll-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; margin-top: 5px; }
        .scroll-card p { margin-bottom: 0; font-size: 15px; }

        /* CTA App Block */
        .app-cta-block { 
            background: var(--theme-brown); 
            border-radius: 20px; 
            padding: 80px 40px; 
            text-align: center; 
            color: #ffffff; 
            margin-top: 60px; 
            margin-bottom: 120px; /* <--- ADDED LARGE GAP HERE BETWEEN THE TWO ORANGE BOXES */
            box-shadow: 0 20px 40px rgba(192, 97, 38, 0.25);
        }
        .app-cta-block h2 { color: #ffffff !important; font-size: clamp(32px, 4vw, 48px); font-family: var(--font-heading); font-weight: 900; margin-bottom: 25px; }
        .app-cta-block p { color: rgba(255,255,255,0.95); max-width: 850px; margin: 0 auto 25px auto; font-size: 17px;}
        .app-cta-block .app-badges { justify-content: center; margin-top: 40px; }

        @media (max-width: 992px) {
            .split-wrap { flex-direction: column !important; gap: 40px; }
            .sticky-grid-container { grid-template-columns: 1fr; gap: 30px; }
            .sticky-sidebar { position: relative; top: 0; }
            .scroll-card { flex-direction: column; gap: 15px; }
            .scroll-card .card-icon { margin-bottom: 5px; }
            .app-cta-block { margin-bottom: 80px; } /* Slightly smaller gap on mobile */
        }
    








/* ==========================================================================
   LEADERSHIP TEAM - SPECIFIC COMPONENT LAYOUTS
   ========================================================================== */

/* Hero Image Specific */
.hero-rounded-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

/* Add sticky behavior to images on the side of tall content */
.sticky-image {
    position: sticky;
    top: 100px;
}

.context-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--theme-brown);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* CUSTOM HORIZONTAL CARDS */
.custom-card-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

.custom-horizontal-card {
    background: #ffffff;
    border: 1px solid rgba(192, 97, 38, 0.35); 
    border-radius: 12px;
    padding: 45px 40px;
    display: flex;
    align-items: flex-start;
    gap: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.custom-horizontal-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    transform: translateY(-4px);
    border-color: var(--theme-brown);
}

.ch-icon {
    width: 85px; 
    height: 85px;
    background: var(--theme-brown);
    color: #ffffff;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

.custom-horizontal-card:hover .ch-icon {
    transform: scale(1.08);
}

.ch-subtitle {
    color: var(--theme-brown); 
    font-size: 13px; 
    font-weight: 800;
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    display: block; 
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

.ch-text h3 {
    font-size: 26px; 
    font-weight: 800; 
    color: #141414 !important;
    text-transform: uppercase; 
    margin-bottom: 20px;
    line-height: 1.3;
}

.ch-text p {
    margin-bottom: 15px;
}
.ch-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .custom-horizontal-card { flex-direction: column; gap: 20px; padding: 30px 20px; }
}

/* --------------------------------------------------------------------------
   PRINCIPLES GRID (FIX 3: Removed black hover, enforced theme color hover)
   -------------------------------------------------------------------------- */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-top: 40px;
}

.principle-item {
    display: flex;
    align-items: flex-start; 
    gap: 20px;
    padding: 45px 30px;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    transition: background 0.3s ease;
}

.principle-item:nth-child(n+4) { border-bottom: none; }
.principle-item:nth-child(3n) { border-right: none; }

/* Changed background hover to a soft, subtle tint instead of aggressive block color */
.principle-item:hover { background: #fffafa; }

.principle-icon-area {
    text-align: center;
    min-width: 110px;
}

.p-icon {
    font-size: 55px;
    color: var(--theme-brown); 
    margin-bottom: 15px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s;
}

/* Kept the hover color strictly the theme color instead of black */
.principle-item:hover .p-icon {
    transform: scale(1.15) translateY(-5px);
    color: var(--theme-brown) !important; 
    filter: drop-shadow(0px 6px 8px rgba(192,97,38,0.25));
}

.p-title {
    font-size: 13px; 
    font-weight: 800; 
    text-transform: uppercase;
    color: #141414 !important; 
    line-height: 1.4; 
    letter-spacing: 0.5px;
    display: block;
}

.principle-text-area p { margin: 0; font-size: 15px; text-align: justify; text-justify: inter-word; }

@media (max-width: 992px) {
    .principles-grid { grid-template-columns: 1fr; border-top: none; border-bottom: none; }
    .principle-item { border-right: none; border: 1px solid var(--border-light); margin-bottom: 20px; border-radius: 8px; }
    .principle-item:nth-child(n+4) { border-bottom: 1px solid var(--border-light); }
    .sticky-image { position: relative; top: 0; margin-bottom: 30px; } /* Disable sticky behavior on small screens */
}

/* --------------------------------------------------------------------------
   STACKED CARDS CONTENT BLOCK 
   -------------------------------------------------------------------------- */
.content-block {
    background: #ffffff;
    border-radius: 12px;
    padding: 50px 40px;
    border: 1px solid var(--border-light);
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s ease;
}

.content-block:hover {
    box-shadow: 0 10px 35px #C06126;
}

/* FIX 2: Centered the Content Block Heading */
.cb-heading {
    font-size: 30px;
    font-weight: 800;
    color: #141414 !important;
    margin-bottom: 25px;
    text-align: center; /* THIS CENTERS THE HEADING */
}

.content-block p {
    margin-bottom: 20px;
}
.content-block p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   PERFECT TEXT SPLIT GRID 
   -------------------------------------------------------------------------- */
.text-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-top: 20px;
}

.ts-subtitle {
    color: var(--theme-brown); 
    font-size: 12px; 
    font-weight: 800;
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    display: block; 
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.text-split-col h2 {
    font-size: 36px;
    font-weight: 800;
    color: #141414 !important;
    margin-bottom: 25px;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .text-split-grid { grid-template-columns: 1fr; gap: 50px; }
}

/* --------------------------------------------------------------------------
   INTERACTIVE GRID UI 
   -------------------------------------------------------------------------- */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.interactive-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 35px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.interactive-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-5px);
}
.interactive-card .card-icon {
    width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08);
    color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
}
.interactive-card:hover .card-icon { background: var(--theme-brown); color: #ffffff; }
.interactive-card h3 { font-size: 19px; font-weight: 800; color: #141414 !important; margin-bottom: 12px; line-height: 1.4; }
.interactive-card p { font-size: 14.5px; margin-bottom: 15px; text-align: justify; text-justify: inter-word; }
.interactive-card p:last-child { margin-bottom: 0; }


/* ==========================================================================
   BLOG ARCHIVE PAGE - FULL STYLES
   ========================================================================== */

/* Main Wrapper */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto;
}

/* Individual Card */
.blog-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    height: auto; 
    transition: transform 0.3s ease;
    overflow: hidden; 
}





/* Featured Image - FORCES ALL IMAGES TO BE EXACTLY IDENTICAL */
.blog-card-image {
    margin-bottom: 25px;
    width: 100%;
    aspect-ratio: 14 / 9; 
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background-color: #fcfbfa; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-image img {
    width: 100%;
    height: 100% !important; 
    object-fit: cover !important; 
    object-position: center !important; 
    display: block;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}




/* Typography & Content Spacing */
.blog-meta, 
.blog-card h2, 
.blog-card p.excerpt, 
.blog-card-footer {
    padding: 0 30px;
}

.blog-meta {
    font-size: 14px;
    color: var(--theme-gray);
    margin-bottom: 10px;
    font-family: var(--font-body);
}

.blog-cat { 
    color: var(--theme-dark); 
    font-weight: bold; 
    transition: color 0.3s;
}
.blog-cat:hover { color: var(--theme-brown); }

.blog-card h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
}

.blog-card h2 a { color: var(--theme-dark); text-decoration: none; transition: color 0.3s ease;}
.blog-card h2 a:hover { color: var(--theme-brown); }

.blog-card p.excerpt {
    color: var(--theme-gray);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: justify;
    text-justify: inter-word;
}

/* Footer Interaction */
.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-light);
    padding-top: 20px !important;
    margin-top: auto;
}

.read-more {
    color: var(--theme-brown);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.3s;
}

.read-more:hover { opacity: 0.8; }

/* Social Icons */
.post-share-interactive {
    display: flex; 
    align-items: center; 
    gap: 15px;
}

.share-wrapper {
    display: flex; 
    align-items: center; 
    gap: 10px;
}

.social-icons {
    display: flex; 
    gap: 12px;
    align-items: center;
}

/* Separator line */
.social-icons::after {
    content: "";
    display: block;
    width: 1px;
    height: 18px;
    background-color: #cccccc;
    margin-left: 5px;
}

.social-icons a {
    color: var(--theme-brown);
    font-size: 16px;
    transition: transform 0.2s ease, color 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.social-icons a:hover {
    transform: translateY(-2px);
    color: var(--theme-brown);
}

.share-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-brown);
    font-size: 16px;
    transition: transform 0.2s ease, color 0.3s ease;
    display: flex;
    align-items: center;
}

.share-toggle:hover { 
    color: var(--theme-brown); 
    transform: translateY(-2px);
}

.like-button {
    font-size: 16px;
    color: var(--theme-brown);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.like-button:hover { 
    color: var(--theme-brown); 
    transform: translateY(-2px);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .blog-meta, 
    .blog-card h2, 
    .blog-card p.excerpt, 
    .blog-card-footer {
        padding: 0 20px;
    }
}
















/* Hero Image Specific */
.hero-rounded-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

/* Small contextual badge text used above H3s */
.context-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--theme-brown);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   CUSTOM HORIZONTAL CARDS (Recreates Screenshot 1 perfectly)
   -------------------------------------------------------------------------- */
.custom-card-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

.custom-horizontal-card {
    background: #ffffff;
    border: 1px solid rgba(192, 97, 38, 0.35); /* Soft orange border */
    border-radius: 12px;
    padding: 45px 40px;
    display: flex;
    align-items: flex-start;
    gap: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.custom-horizontal-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    transform: translateY(-4px);
    border-color: var(--theme-brown);
}

.ch-icon {
    width: 85px; 
    height: 85px;
    background: var(--theme-brown);
    color: #ffffff;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

.custom-horizontal-card:hover .ch-icon {
    transform: scale(1.08);
}

.ch-subtitle {
    color: var(--theme-brown); 
    font-size: 13px; 
    font-weight: 800;
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    display: block; 
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

.ch-text h3 {
    font-size: 26px; 
    font-weight: 800; 
    color: var(--theme-dark);
    text-transform: uppercase; 
    margin-bottom: 20px;
    font-family: var(--font-heading);
    line-height: 1.3;
}

.ch-text p {
    margin-bottom: 15px;
}
.ch-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .custom-horizontal-card { flex-direction: column; gap: 20px; padding: 30px 20px; }
}

/* --------------------------------------------------------------------------
   PRINCIPLES GRID (Recreates Screenshot 3 perfectly)
   -------------------------------------------------------------------------- */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-top: 40px;
}

.principle-item {
    display: flex;
    align-items: flex-start; 
    gap: 20px;
    padding: 45px 30px;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    transition: background 0.3s ease;
}

/* Remove bottom borders for the last row elements */
.principle-item:nth-child(n+4) { border-bottom: none; }
/* Remove right borders for the last column elements */
.principle-item:nth-child(3n) { border-right: none; }

.principle-item:hover { background: #C06126; }

.principle-icon-area {
    text-align: center;
    min-width: 110px;
}

.p-icon {
    font-size: 55px;
    color: var(--theme-brown); /* Custom interactive theme color as requested */
    margin-bottom: 15px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s, filter 0.3s;
}

.principle-item:hover .p-icon {
    transform: scale(1.15) translateY(-5px);
    color: var(--theme-dark); /* Color shift and scale effect on hover */
    filter: drop-shadow(0px 6px 8px rgba(192,97,38,0.25));
}

.p-title {
    font-size: 13px; 
    font-weight: 800; 
    text-transform: uppercase;
    color: var(--theme-dark); 
    font-family: var(--font-heading);
    line-height: 1.4; 
    letter-spacing: 0.5px;
    display: block;
}

.principle-text-area p { margin: 0; font-size: 15px; text-align: justify; text-justify: inter-word; }

@media (max-width: 992px) {
    .principles-grid { grid-template-columns: 1fr; border-top: none; border-bottom: none; }
    .principle-item { border-right: none; border: 1px solid var(--border-light); margin-bottom: 20px; border-radius: 8px; }
    .principle-item:nth-child(n+4) { border-bottom: 1px solid var(--border-light); }
}

/* --------------------------------------------------------------------------
   STACKED CARDS CONTENT BLOCK (Recreates Screenshot 2 perfectly)
   -------------------------------------------------------------------------- */
.content-block {
    background: #ffffff;
    border-radius: 12px;
    padding: 50px 40px;
    border: 1px solid var(--border-light);
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s ease;
}

.content-block:hover {
    box-shadow: 0 10px 35px #C06126;
}

.cb-heading {
    font-size: 30px;
    font-weight: 800;
    color: var(--theme-dark);
    font-family: var(--font-heading);
    margin-bottom: 25px;
}

.content-block p {
    margin-bottom: 20px;
}
.content-block p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   PERFECT TEXT SPLIT GRID (Recreates Screenshot 4 perfectly)
   -------------------------------------------------------------------------- */
.text-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-top: 20px;
}

.ts-subtitle {
    color: var(--theme-brown); 
    font-size: 12px; 
    font-weight: 800;
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    display: block; 
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.text-split-col h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--theme-dark);
    font-family: var(--font-heading);
    margin-bottom: 25px;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .text-split-grid { grid-template-columns: 1fr; gap: 50px; }
}

/* --------------------------------------------------------------------------
   INTERACTIVE GRID UI (Kept from original design)
   -------------------------------------------------------------------------- */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.interactive-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 35px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.interactive-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-5px);
}
.interactive-card .card-icon {
    width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08);
    color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
}
.interactive-card:hover .card-icon { background: var(--theme-brown); color: #ffffff; }
.interactive-card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 800; color: var(--theme-dark); margin-bottom: 12px; line-height: 1.4; }
.interactive-card p { font-size: 14.5px; margin-bottom: 15px; text-align: justify; text-justify: inter-word; }
.interactive-card p:last-child { margin-bottom: 0; }











        /* ==========================================================================
           SERVICES - SPECIFIC COMPONENT LAYOUTS
           ========================================================================== */

      
        .srv-list-sm {
            list-style: none !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }

        .srv-list-sm li {
            list-style-type: none !important;
            display: flex;
            align-items: flex-start;
            color: var(--theme-gray, #6b6a68);
            font-size: 14.5px;
            margin-bottom: 8px;
            gap: 8px;
            line-height: 1.5;
        }

        .srv-list-sm li::before, .srv-list-sm li::after {
            display: none !important;
            content: none !important;
        }

        .srv-list-sm li i {
            color: var(--theme-brown, #C06126) !important;
            margin-top: 4px;
            font-size: 14px;
        }

        /* Context Badges */
        .context-label {
            display: block;
            font-size: 13px;
            font-weight: 800;
            color: var(--theme-brown, #C06126);
            font-family: 'Nunito', sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        /* Image Placeholder Sizes */
        .hero-rounded-img {
            width: 100%;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(147, 111, 53, 0.06);
            transition: transform 0.4s ease;
        }
        .hero-rounded-img:hover {
            transform: translateY(-5px);
        }

     

        /* --------------------------------------------------------------------------
           INTERACTIVE GRID UI (Core Services)
           -------------------------------------------------------------------------- */
        .interactive-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
        }
        .interactive-card {
            background: #ffffff;
            border: 1px solid var(--border-light, #eae8e5);
            border-radius: 12px;
            padding: 35px 30px;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .interactive-card:hover {
            box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
            border-color: var(--theme-brown, #C06126);
            transform: translateY(-5px);
        }
        .interactive-card .card-icon {
            width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08);
            color: var(--theme-brown, #C06126); border-radius: 50%; display: flex; align-items: center;
            justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
        }
        .interactive-card:hover .card-icon { 
            background: var(--theme-brown, #C06126); 
            color: #ffffff; 
            transform: scale(1.1);
        }
        .interactive-card h3 { 
            font-family: 'Nunito', sans-serif; 
            font-size: 20px; 
            font-weight: 800; 
            color: var(--theme-dark, #141414); 
            margin-bottom: 15px; 
            line-height: 1.4; 
        }
        .interactive-card p { 
            font-size: 14.5px; 
            text-align: justify; 
            text-justify: inter-word; 
            margin-bottom: 15px;
        }

        /* Service Navigation Button*/
        .btn-service-link {
            display: inline-block;
            margin-top: auto; 
            padding: 10px 20px; 
            width: fit-content; 
            margin-left: auto;
            margin-right: auto;
            background: var(--theme-brown, #C06126);
            color: #ffffff; 
            font-family: 'Nunito', sans-serif;
            font-weight: 800;
            font-size: 13px; 
            text-transform: uppercase;
            text-align: center;
            border-radius: 6px;
            border: 1px solid var(--theme-brown, #C06126);
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn-service-link:hover {
            background: #ffffff;
            color: var(--theme-brown, #C06126); 
        }
        .btn-service-link i {
            margin-left: 5px;
            transition: transform 0.3s ease;
        }
        .btn-service-link:hover {
            background: var(--theme-brown, #C06126);
            color: #ffffff;
            box-shadow: 0 5px 15px rgba(182, 100, 44, 0.2);
        }
        .btn-service-link:hover i {
            transform: translateX(4px);
        }

        @media (max-width: 992px) {
            .interactive-grid { grid-template-columns: 1fr; }
            .interactive-card { padding: 30px 25px; }
        }

        /* --------------------------------------------------------------------------
           APPROACH GRID (4 Columns)
           -------------------------------------------------------------------------- */
        .approach-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .approach-card {
            background: #ffffff;
            border: 1px solid var(--border-light, #eae8e5);
            border-radius: 12px;
            padding: 40px 25px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.02);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .approach-card:hover {
            box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
            border-color: var(--theme-brown, #C06126);
            transform: translateY(-5px);
        }

        .a-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 20px auto;
            background: var(--theme-brown, #C06126);
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 800;
            font-family: 'Nunito', sans-serif;
            transition: all 0.4s ease;
            box-shadow: 0 5px 15px rgba(192, 97, 38, 0.2);
        }

        .approach-card:hover .a-icon {
            transform: scale(1.1);
        }

        .approach-card h3 {
            font-family: 'Nunito', sans-serif;
            font-size: 18px;
            font-weight: 800;
            color: var(--theme-dark, #141414);
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .approach-card p {
            font-size: 14px;
            text-align: center;
            text-justify: auto;
            margin: 0;
        }

        @media (max-width: 1024px) {
            .approach-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .approach-grid { grid-template-columns: 1fr; }
        }

        /* --------------------------------------------------------------------------
           HORIZONTAL TECH PANELS (Industries)
           -------------------------------------------------------------------------- */
        .tech-list-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
        }

        .tech-panel {
            display: flex;
            align-items: center;
            gap: 30px;
            background: #ffffff;
            border: 1px solid var(--border-light, #eae8e5);
            border-radius: 12px;
            padding: 30px 40px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.02);
        }

        .tech-panel:hover {
            box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
            border-color: var(--theme-brown, #C06126);
            transform: translateX(10px);
        }

        .tp-icon {
            width: 70px;
            height: 70px;
            background: rgba(192, 97, 38, 0.05);
            color: var(--theme-brown, #C06126);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .tech-panel:hover .tp-icon {
            background: var(--theme-brown, #C06126);
            color: #ffffff;
            transform: rotate(15deg);
        }

        .tp-content {
            flex: 1;
        }

        .tp-content h3 {
            font-family: 'Nunito', sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: var(--theme-dark, #141414);
            margin-bottom: 8px;
        }

        .tp-content p {
            font-size: 15px;
            margin: 0;
            text-align: left;
            text-justify: auto;
        }

        @media (max-width: 768px) {
            .tech-panel { flex-direction: column; padding: 30px 25px; align-items: center; text-align: center; }
            .tech-panel:hover { transform: translateY(-5px); }
            .tp-content p { text-align: center; }
        }













/* Stats Banner Row */
.stats-banner { padding: 60px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); background: #fff; }
.stats-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.stat-col { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 0 30px; }
.bordered-stat { border-left: 1px solid var(--border-light); }
.stat-num-box { text-align: left; margin-bottom: 8px; }
.stat-num-box .counter, .stat-num-box { font-size: 56px; font-weight: 800; font-family: var(--font-heading); color: var(--theme-brown); line-height: 1; }
.stat-title { display: block; font-size: 14px; font-weight: 800; font-family: var(--font-body); color: var(--theme-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.stat-text p { font-size: 15px; margin: 0; text-align: left; color: #666; }

/* ===== STICKY SECTION LAYOUTS ===== */
.sticky-wrapper { display: flex; align-items: flex-start; gap: 60px; position: relative; }
.sticky-side { flex: 1; position: sticky; top: 100px; align-self: flex-start; } 
.scrolling-content { flex: 1.2; }
.reversed-sticky { flex-direction: row-reverse; }
.deep-text-block h3 { font-size: 1.8rem; margin: 40px 0 15px; color: var(--theme-brown) !important; font-family: var(--font-heading); font-weight: 800; }
.scroll-block { margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid var(--border-light); }

/* --- NEW: PILLARS STICKY DESIGN (Solid Brown Left, Clean Cards Right) --- */
.solid-brown-box {
    background: var(--theme-brown);
    padding: 60px 50px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(192, 97, 38, 0.2);
    min-height: 450px;
}
.pillar-card {
    background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 35px 30px;
    display: flex; gap: 25px; align-items: flex-start; margin-bottom: 30px; transition: all 0.3s ease;
}
.pillar-card:hover { border-color: var(--theme-brown); box-shadow: 0 15px 35px rgba(0,0,0,0.06); transform: translateX(5px); }
.pillar-icon {
    width: 60px; height: 60px; background: rgba(192, 97, 38, 0.1); color: var(--theme-brown); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; transition: 0.3s;
}
.pillar-card:hover .pillar-icon { background: var(--theme-brown); color: #fff; }
.pillar-text h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.pillar-text p { font-size: 15px; margin: 0; color: #555; text-align: justify; }

/* Interactive Cards & Grids */
.interactive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 30px; margin-top: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.interactive-card, .service-card {
    background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 35px 30px;
    transition: all 0.4s ease; display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden;
}
.interactive-card::before, .service-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--theme-brown); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.interactive-card:hover, .service-card:hover { box-shadow: 0 20px 40px rgba(192, 97, 38, 0.08); border-color: var(--theme-brown); transform: translateY(-5px); }
.interactive-card:hover::before, .service-card:hover::before { transform: scaleX(1); }
.card-icon, .icon-wrapper {
    width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08); color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
}
.interactive-card:hover .card-icon, .service-card:hover .icon-wrapper { background: var(--theme-brown); color: #ffffff; }
.interactive-card h3, .service-card h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 800; margin-bottom: 12px; }

/* Progress Bars */
.progress-container { display: flex; flex-direction: column; gap: 22px; margin-top: 15px; width: 100%; }
.progress-labels { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14.5px; color: var(--theme-dark); font-weight: 700; }
.progress-bar-bg { width: 100%; height: 8px; background-color: #E6E6E7; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; background-color: var(--theme-brown); border-radius: 4px; width: 0; transition: width 2s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Horizontal Feature Cards */
.horizontal-card-list { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.horizontal-card { background: #fff; border: 1px solid var(--border-light); border-radius: 12px; padding: 30px; display: flex; gap: 30px; align-items: flex-start; transition: all 0.3s; }
.horizontal-card:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.05); transform: translateX(5px); border-color: var(--theme-brown); }
.h-icon { width: 70px; height: 70px; background: rgba(192, 97, 38, 0.1); color: var(--theme-brown); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; transition: all 0.3s; }
.horizontal-card:hover .h-icon { background: var(--theme-brown); color: #fff; }
.horizontal-card-text h3 { font-size: 20px; margin-bottom: 10px; }
.horizontal-card-text p { margin-bottom: 0; font-size: 15px; text-align: justify; }

/* Floating Elements & Image Stacks */
.floating-tech-wrapper { position: relative; width: 100%; max-width: 550px; margin: 0 auto; }
.floating-tech-wrapper img { border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); position: relative; z-index: 1; width: 100%; }
.float-icon { position: absolute; width: 70px; height: 70px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--theme-brown); box-shadow: 0 15px 30px rgba(192, 97, 38, 0.15); z-index: 2; border: 1px solid rgba(255,255,255,0.5); animation: floaty 4s ease-in-out infinite; }
.fi-1 { top: -20px; left: -20px; animation-delay: 0s; }
.fi-2 { top: 40%; right: -30px; animation-delay: 1s; }
.fi-3 { bottom: -20px; left: 10%; animation-delay: 2s; }
@keyframes floaty { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }

.image-stack-interactive { position: relative; width: 100%; height: 500px; }
.img-back { position: absolute; top: 0; right: 0; width: 75%; height: 85%; object-fit: cover; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); transition: transform 0.5s ease; }
.img-front { position: absolute; bottom: 0; left: 0; width: 55%; height: 60%; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); border: 8px solid #ffffff; transition: transform 0.5s ease; }
.image-stack-interactive:hover .img-back { transform: translate(-10px, 10px); }
.image-stack-interactive:hover .img-front { transform: translate(10px, -10px); }
.experience-badge { position: absolute; bottom: 40px; right: -20px; background: var(--theme-brown); color: #ffffff; padding: 20px 30px; border-radius: 12px; display: flex; align-items: center; gap: 15px; box-shadow: 0 15px 30px rgba(192, 97, 38, 0.3); z-index: 3; animation: pulseGlow 2s infinite; }
.experience-badge .badge-icon { font-size: 32px; }
.experience-badge span { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.2; }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(192, 97, 38, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(192, 97, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 97, 38, 0); } }

/* Elite Partners Grid Section (Dark Theme Design) */
.bg-dark-theme { background-color: var(--theme-dark); padding: 100px 0; }
.light-heading h2 { color: #ffffff !important; }
.partner-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 50px; }
.partner-badge { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 35px 20px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; }
.partner-badge i { font-size: 38px; color: var(--theme-brown); margin-bottom: 18px; transition: transform 0.3s; }
.partner-badge .client-name { font-size: 18px; font-weight: 800; font-family: var(--font-heading); letter-spacing: 1px; color: #fff; }
.partner-badge:hover { background: var(--theme-brown); border-color: var(--theme-brown); transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
.partner-badge:hover i { color: #fff; transform: scale(1.1); }




/* ===== REDESIGNED INDUSTRY STANDARD ARCHITECTURE SECTION ===== */
.numbered-card-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.numbered-step-card {
    background: #ffffff;
    border: 1px solid var(--theme-brown); /* Orange outline like your uploaded design */
    border-radius: 12px;
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.numbered-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(192, 97, 38, 0.1);
}

.step-circle {
    width: 65px;
    height: 65px;
    background: var(--theme-brown);
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    font-family: var(--font-heading);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(192, 97, 38, 0.3);
}

.step-content h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--theme-dark) !important;
    margin-bottom: 15px;
    margin-top: 10px; /* Aligns text perfectly with the circle */
}

.step-content p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}

/* Mobile Responsiveness for this section */
@media (max-width: 768px) {
    .numbered-step-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    .step-content h3 {
        margin-top: 0;
    }
    .step-content p {
        text-align: center;
    }
}

/* --- NEW: TESTIMONIALS CAROUSEL --- */
.testimonial-section {
    position: relative;
    overflow: hidden;
}
.floating-icons-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}
.float-item {
    position: absolute;
    width: 60px; height: 60px;
    background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    animation: floaty 5s ease-in-out infinite;
}
.t-icon-1 { top: 20%; left: 15%; color: #4CAF50; animation-delay: 0s; }
.t-icon-2 { top: 45%; left: 22%; color: #E91E63; animation-delay: 1.5s; width: 50px; height: 50px; font-size: 20px;}
.t-icon-3 { bottom: 20%; left: 18%; color: #FFC107; animation-delay: 0.5s; }
.t-icon-4 { top: 25%; right: 15%; color: #2196F3; animation-delay: 2s; }

.testimonial-carousel-wrapper {
    max-width: 800px;
    margin: 40px auto 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--theme-brown);
}
.testimonial-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}
.testimonial-slide {
    min-width: 100%;
    padding: 60px 50px;
    text-align: center;
    box-sizing: border-box;
}
.quote-mark {
    font-size: 60px;
    color: rgba(192, 97, 38, 0.3);
    font-family: Georgia, serif;
    line-height: 1;
    margin-bottom: 10px;
}
.testimonial-text {
    font-size: 1.25rem;
    color: var(--theme-dark);
    font-weight: 600;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 30px;
    text-align: center;
}
.client-info h4 {
    font-size: 18px;
    margin-bottom: 5px;
    font-family: var(--font-heading);
}
.client-info span {
    font-size: 14px;
    color: #888;
}
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-bottom: 30px;
}
.carousel-dots .dot {
    width: 12px; height: 12px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}
.carousel-dots .dot.active {
    background: var(--theme-brown);
    transform: scale(1.2);
}



/* Responsive Adjustments */
@media (max-width: 1024px) {
    .nt-nav, .nt-desktop-btn { display: none; }
    .nt-mobile-btn { display: block; }
    .split-wrap, .sticky-wrapper { flex-direction: column !important; gap: 40px; }
    .sticky-side { position: relative; top: 0; width: 100%; }
    .solid-brown-box { min-height: auto; padding: 40px 30px; }
    .stats-row { flex-direction: column; gap: 35px; }
    .stat-col { padding: 0; flex-direction: column; align-items: center; text-align: center; }
    .stat-num-box { text-align: center; }
    .bordered-stat { border-left: none; border-top: 1px solid var(--border-light); padding-top: 25px; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .nl-inner { flex-direction: column; gap: 30px; text-align: center; }
    .nl-text-box { flex-direction: column; }
    .image-stack-interactive { height: 400px; }
    .about-hero-img { height: auto !important; min-height: 300px; }
}

@media (max-width: 768px) {
    .grid-3 { grid-template-columns: 1fr; }
    .nl-form { flex-direction: column; width: 100%; }
    .nl-form input { width: 100%; }
    .page-hero h1 { font-size: 2.8rem; }
    .section-heading h2 { font-size: 2.4rem; }
    .custom-icon-list li { flex-direction: column; align-items: center; text-align: center; }
    .horizontal-card { flex-direction: column; align-items: center; text-align: center; }
    .pillar-card { flex-direction: column; align-items: center; text-align: center; }
    .float-item { display: none; } /* Hide floating icons on mobile for space */
    .testimonial-slide { padding: 40px 20px; }
    .testimonial-text { font-size: 1.1rem; }
}




/* ==========================================================================
   CASE STUDIES INTEGRATED DESIGN MATRIX
   Primary Page Branding Theme Accent: #C06126
   ========================================================================== */



/* Modular Split Content Formats */
.split-wrap { display: flex; align-items: center; gap: 60px; }
.split-content { flex: 1; }
.split-image { flex: 1; position: relative; }
.section-heading { margin-bottom: 40px; }
.section-heading.text-left { text-align: left; }
.sub-title { display: block; color: var(--theme-brown); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin-bottom: 10px; }
.section-heading h2 { font-size: 3.2rem; font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.section-heading h2 span { color: var(--theme-brown); }

/* Decorative Tech Placeholders & Elements */
.tech-placeholder-grid {
    width: 100%;
    height: 480px;
    background-color: #eae8e5;
    background-image: radial-gradient(var(--theme-brown) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}
.floating-tech-wrapper { position: relative; width: 100%; max-width: 550px; margin: 0 auto; }
.float-icon { position: absolute; width: 70px; height: 70px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--theme-brown); box-shadow: 0 15px 30px rgba(192, 97, 38, 0.15); z-index: 2; border: 1px solid rgba(255,255,255,0.5); animation: floatEffect 4s ease-in-out infinite; }
.fi-1 { top: -20px; left: -20px; animation-delay: 0s; }
.fi-2 { top: 40%; right: -30px; animation-delay: 1s; }
.fi-3 { bottom: -20px; left: 10%; animation-delay: 2s; }
@keyframes floatEffect { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ==========================================================================
   CASE STUDY COMPLEX MODULE GENERATOR
   ========================================================================== */
.cs-master-card {
    display: flex;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.04);
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.cs-master-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(192, 97, 38, 0.08);
    border-color: rgba(192, 97, 38, 0.25);
}
.reverse-card { flex-direction: row-reverse; }

.cs-image-box {
    flex: 1;
    position: relative;
    background-color: #f0edea;
    min-height: 520px;
}
.image-wrapper-box {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f5f4f2, #eae8e5);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(192,97,38,0.02) 35px, rgba(192,97,38,0.02) 70px);
}
.cs-tag-group { position: absolute; top: 30px; left: 30px; display: flex; gap: 10px; flex-wrap: wrap; z-index: 5; }
.cs-tag { background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(5px); color: #fff; padding: 8px 16px; border-radius: 50px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

.cs-content-box { flex: 1.3; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.cs-title { font-size: 2.2rem; font-weight: 800; color: var(--theme-dark) !important; margin-bottom: 20px; transition: color 0.3s; }
.cs-master-card:hover .cs-title { color: var(--theme-brown) !important; }
.cs-description { font-size: 1.05rem; line-height: 1.8; color: #555; margin-bottom: 35px; text-align: justify; }

/* Metrics Panel (Structured from image_c8cb89.jpg) */
.cs-metrics-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 30px 0;
    margin-bottom: 35px;
    gap: 20px;
}
.metric-block { flex: 1; display: flex; flex-direction: column; text-align: left; }
.metric-number { font-size: 3.5rem; font-weight: 800; color: var(--theme-dark); line-height: 1; font-family: var(--font-heading); }
.metric-symbol { font-size: 1.8rem; font-weight: 700; color: var(--theme-brown); margin-left: 2px; display: inline-block; vertical-align: super; }
.metric-label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #777; margin-top: 10px; letter-spacing: 0.5px; line-height: 1.4; font-family: var(--font-body); }

/* Download Actions Container (Structured from image_c8cfac.png) */
.badge-action-container { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.store-badge-link {
    display: flex;
    align-items: center;
    background-color: var(--theme-brown);
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.store-badge-link i { font-size: 32px; margin-right: 12px; color: #ffffff; }
.store-badge-link div { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.store-badge-link span { font-size: 10px; text-transform: uppercase; opacity: 0.9; font-weight: 500; font-family: var(--font-body); }
.store-badge-link strong { font-size: 18px; font-weight: 700; font-family: var(--font-heading); }
.store-badge-link:hover { background-color: var(--theme-brown); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

.action-discover { background-color: var(--theme-brown) !important; font-size: 14px; font-weight: 700; padding: 16px 28px; border-radius: 10px; margin-left: auto; text-transform: uppercase; letter-spacing: 0.5px; }
.action-discover:hover { background-color: var(--theme-brown) !important; }

/* ==========================================================================
   STICKY SCROLLING MATRIX (Methodology Framework)
   ========================================================================== */
.solid-brown-box {
    background-color: var(--theme-brown);
    padding: 60px 50px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(192, 97, 38, 0.15);
}
.pillar-card {
    background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 35px 30px;
    display: flex; gap: 25px; align-items: flex-start; margin-bottom: 30px; transition: all 0.3s ease;
}
.pillar-card:hover { border-color: var(--theme-brown); box-shadow: 0 15px 35px rgba(0,0,0,0.05); transform: translateX(5px); }
.pillar-icon {
    width: 60px; height: 60px; background: rgba(192, 97, 38, 0.08); color: var(--theme-brown); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.pillar-card:hover .pillar-icon { background: var(--theme-brown); color: #fff; }
.pillar-text h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.pillar-text p { font-size: 15px; margin: 0; color: #555; text-align: justify; }

/* ==========================================================================
   FIXED LAYOUT WRAPPER BLUEPRINT (Structured from image_c8c8a0.png)
   ========================================================================== */
.fixed-cta-layout { padding: 90px 0; background-color: #ffffff; }
.cta-flex-inner { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.cta-left-text-box { flex: 1.6; text-align: left; }
.cta-left-text-box h2 { font-size: 3rem; font-weight: 800; color: var(--theme-dark) !important; margin-bottom: 20px; letter-spacing: -0.5px; }
.cta-left-text-box p { font-size: 1.15rem; color: #555; margin: 0; line-height: 1.7; text-align: left; max-width: 90%; }
.cta-right-btn-box { flex: 1; text-align: right; }
.action-cta-button { padding: 18px 36px; font-size: 16px; font-weight: 700; border-radius: 8px; border: none; white-space: normal; text-align: center; display: inline-block; box-shadow: 0 10px 25px rgba(192, 97, 38, 0.25); }


/* ==========================================================================
   MEDIA QUERY RESPONSIVENESS MATRIX
   ========================================================================== */
@media (max-width: 1200px) {
    .cs-content-box { padding: 40px; }
    .action-discover { margin-left: 0; width: 100%; text-align: center; margin-top: 10px; }
    .badge-action-container { justify-content: flex-start; width: 100%; }
}

@media (max-width: 1024px) {
    .split-wrap { flex-direction: column; gap: 40px; }
    .cs-master-card, .reverse-card { flex-direction: column; }
    .cs-image-box { min-height: 300px; height: 300px; }
    .sticky-wrapper { flex-direction: column !important; gap: 40px; }
    .sticky-side { position: relative; top: 0; width: 100%; }
    .cta-flex-inner { flex-direction: column; text-align: center; gap: 30px; }
    .cta-left-text-box { text-align: center; }
    .cta-left-text-box p { text-align: center; max-width: 100%; }
    .cta-right-btn-box { text-align: center; width: 100%; }
    .action-cta-button { width: 100%; max-width: 400px; }
    .nl-inner { flex-direction: column; gap: 30px; text-align: center; }
    .nl-text-box { flex-direction: column; }
}

@media (max-width: 768px) {
    .page-hero h1 { font-size: 2.8rem; }
    .section-heading h2 { font-size: 2.3rem; }
    .cs-title { font-size: 1.8rem; }
    .cs-metrics-row { flex-direction: column; gap: 25px; align-items: center; text-align: center; }
    .metric-block { align-items: center; width: 100%; }
    .badge-action-container { flex-direction: column; align-items: stretch; width: 100%; }
    .store-badge-link { justify-content: center; }
    .action-discover { margin-top: 5px; }
    .pillar-card { flex-direction: column; align-items: center; text-align: center; }
    .nl-form { flex-direction: column; width: 100%; }
    .nl-form input { width: 100%; }
}








/* ==========================================================================
   RESOURCES - SPECIFIC COMPONENT LAYOUTS
   ========================================================================== */

/* Typography & Headers */
.res-h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--theme-dark);
    margin-bottom: 15px;
}

/* ==========================================================================
   STRICT LIST OVERRIDES (Fix for Double Bullet Issue)
   ========================================================================== */
.res-list, .res-list-sm {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.res-list li, .res-list-sm li {
    list-style-type: none !important;
    display: flex;
    align-items: flex-start;
    color: var(--theme-gray);
}

/* Hard override to block any global pseudo-elements creating dots */
.res-list li::before, .res-list-sm li::before,
.res-list li::after, .res-list-sm li::after {
    display: none !important;
    content: none !important;
}

/* Regular List Sizing */
.res-list li {
    font-size: 16px;
    margin-bottom: 10px;
    gap: 12px;
}
.res-list li i {
    color: var(--theme-brown) !important;
    margin-top: 5px;
    font-size: 16px;
}

/* Small List Sizing */
.res-list-sm li {
    font-size: 14.5px;
    margin-bottom: 8px;
    gap: 8px;
}
.res-list-sm li i {
    color: var(--theme-brown) !important;
    margin-top: 4px;
    font-size: 14px;
}

/* Context Badges */
.context-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--theme-brown);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Image Placeholder Sizes */
.hero-rounded-img {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(147, 111, 53, 0.06);
    transition: transform 0.4s ease;
}
.hero-rounded-img:hover {
    transform: translateY(-5px);
}

/* --------------------------------------------------------------------------
   SPLIT HEADER (New Layout for "Our Library")
   -------------------------------------------------------------------------- */
.split-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.sh-left {
    flex: 1;
}
.sh-left .sub-title {
    display: inline-block; font-size: 12px; font-weight: 800; color: var(--theme-brown);
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px;
    font-family: var(--font-heading); position: relative; padding-bottom: 5px;
}
.sh-left .sub-title::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--theme-brown);
}
.sh-left h2 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: var(--theme-dark);
    margin: 0;
    line-height: 1.2;
}

.sh-right {
    flex: 0 0 45%;
}
.sh-right p {
    margin: 0;
    font-size: 16px;
    color: var(--theme-gray);
    border-left: 3px solid var(--theme-brown);
    padding-left: 20px;
}

@media (max-width: 768px) {
    .split-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .sh-right { width: 100%; flex: 1; }
}

/* --------------------------------------------------------------------------
   INTERACTIVE GRID UI (Cards)
   -------------------------------------------------------------------------- */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}
.interactive-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 40px 35px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}
.interactive-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-5px);
}
.interactive-card .card-icon {
    width: 70px; height: 70px; background: rgba(192, 97, 38, 0.1);
    color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 30px; margin-bottom: 25px; transition: all 0.3s;
}
.interactive-card:hover .card-icon { 
    background: var(--theme-brown); 
    color: #ffffff; 
    transform: scale(1.1);
}
.interactive-card h3 { 
    font-family: var(--font-heading); 
    font-size: 24px; 
    font-weight: 800; 
    color: var(--theme-dark); 
    margin-bottom: 10px; 
    line-height: 1.4; 
}
.interactive-card p { 
    font-size: 15px; 
    text-align: justify; 
    text-justify: inter-word; 
    margin-bottom: 15px;
}
.span-full-center { 
    grid-column: 1 / -1; 
    max-width: 800px; 
    margin: 0 auto; 
}
@media (max-width: 992px) {
    .interactive-grid { grid-template-columns: 1fr; }
    .interactive-card { padding: 30px 25px; }
}

/* --------------------------------------------------------------------------
   STICKY SIDEBAR (Audience & Strategic Value)
   -------------------------------------------------------------------------- */
.sticky-section {
    padding: 80px 0;
    position: relative;
}

.sticky-split-layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.sticky-left {
    flex: 0 0 40%;
    position: sticky;
    top: 100px;
}

.sticky-content-box {
    background: var(--theme-brown);
    color: #ffffff;
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(192, 97, 38, 0.2);
}

.scrolling-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.scroll-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.scroll-card:hover {
    border-color: var(--theme-brown);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.s-icon {
    width: 60px;
    height: 60px;
    background: rgba(192, 97, 38, 0.1);
    color: var(--theme-brown);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.scroll-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--theme-dark);
    font-weight: 800;
    font-family: var(--font-heading);
}

.scroll-card p {
    text-align: justify;
    text-justify: inter-word;
    margin: 0;
}

@media (max-width: 992px) {
    .sticky-split-layout { flex-direction: column; }
    .sticky-left { position: relative; top: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   DUAL BLOCK GRID & CONCLUSION MASTER BLOCK
   -------------------------------------------------------------------------- */
.dual-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.staggered-conclusion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.conclusion-intro-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 60px 50px;
    border: 1px solid var(--border-light);
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
}

.content-block {
    background: #ffffff;
    border-radius: 12px;
    padding: 50px 40px;
    border: 1px solid var(--border-light);
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s ease;
}

.content-block:hover {
    box-shadow: 0 10px 35px rgba(192, 97, 38, 0.08);
}

.content-block p {
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .dual-block-grid, .staggered-conclusion-grid { grid-template-columns: 1fr; }
    .content-block { padding: 40px 30px; }
    .conclusion-intro-box { padding: 40px 30px; }
}

/* --------------------------------------------------------------------------
   HORIZONTAL TECH PANELS
   -------------------------------------------------------------------------- */
.tech-list-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.tech-panel {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 40px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.tech-panel:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-3px);
}

.tp-icon {
    width: 80px;
    height: 80px;
    background: #fcfbfa;
    border: 1px solid var(--border-light);
    color: var(--theme-brown);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.tech-panel:hover .tp-icon {
    background: var(--theme-brown);
    color: #C06126;
    border-color: var(--theme-brown);
    transform: scale(1.05) rotate(5deg);
}

.tp-content {
    flex: 1;
}

.tp-content h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--theme-dark);
    margin-bottom: 15px;
}

.tp-content p {
    font-size: 15px;
    margin-bottom: 15px;
    text-align: justify;
    text-justify: inter-word;
}

@media (max-width: 768px) {
    .tech-panel { flex-direction: column; padding: 30px 25px; align-items: center; text-align: center; }
    .tp-content p { text-align: center; text-justify: auto; }
}





/* ==========================================================================
   MISSION & VISION - SPECIFIC COMPONENT LAYOUTS
   ========================================================================== */

/* Hero Image Spaces */
.hero-rounded-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transition: transform 0.4s ease;
}
.hero-rounded-img:hover {
    transform: translateY(-5px);
}

/* Small contextual badge text used above H3s */
.context-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--theme-brown);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   INTERACTIVE GRID UI (Cards)
   -------------------------------------------------------------------------- */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.interactive-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 35px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.interactive-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-5px);
}
.interactive-card .card-icon {
    width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08);
    color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
}
.interactive-card:hover .card-icon { 
    background: var(--theme-brown); 
    color: #ffffff; 
}
.interactive-card h3 { 
    font-family: var(--font-heading); 
    font-size: 19px; 
    font-weight: 800; 
    color: var(--theme-dark); 
    margin-bottom: 12px; 
    line-height: 1.4; 
}
.interactive-card p { 
    font-size: 14.5px; 
    margin-bottom: 15px; 
    text-align: justify; 
    text-justify: inter-word; 
}
.interactive-card p:last-child { 
    margin-bottom: 0; 
}

/* --------------------------------------------------------------------------
   PRINCIPLES GRID (Perfect Interactive Theme Colored Icons)
   -------------------------------------------------------------------------- */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-top: 40px;
}

.principle-item {
    display: flex;
    align-items: flex-start; 
    gap: 20px;
    padding: 45px 30px;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    transition: background 0.3s ease;
}

.principle-item:hover { 
    background: #fcfbfa; 
}

.principle-icon-area {
    text-align: center;
    min-width: 100px;
}

/* Interactive Theme Colored Icon */
.p-icon {
    font-size: 50px;
    color: var(--theme-brown); 
    margin-bottom: 15px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s;
}

.principle-item:hover .p-icon {
    transform: scale(1.2) translateY(-4px);
    filter: drop-shadow(0px 8px 12px rgba(192, 97, 38, 0.4)); 
}

.p-title {
    font-size: 13px; 
    font-weight: 800; 
    text-transform: uppercase;
    color: var(--theme-dark); 
    font-family: var(--font-heading);
    line-height: 1.4; 
    letter-spacing: 0.5px;
    display: block;
}

.principle-text-area p { 
    margin: 0; 
    font-size: 15px; 
    text-align: justify; 
    text-justify: inter-word; 
}

/* --------------------------------------------------------------------------
   CONTENT BLOCKS FOR HEAVY TEXT (Single Column Layouts)
   -------------------------------------------------------------------------- */
.content-block {
    background: #ffffff;
    border-radius: 12px;
    padding: 60px 50px;
    border: 1px solid var(--border-light);
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s ease;
}
.content-block:hover {
    box-shadow: 0 10px 35px rgba(192, 97, 38, 0.08);
}
.content-block p {
    margin-bottom: 20px;
    text-align: justify;
    text-justify: inter-word;
    font-size: 16px;
    line-height: 1.8;
}
.content-block p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   MOBILE RESPONSIVENESS
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .principles-grid { grid-template-columns: 1fr; border-top: none; border-bottom: none; }
    .principle-item { border-right: none; border: 1px solid var(--border-light); margin-bottom: 20px; border-radius: 8px; }
    .interactive-grid { grid-template-columns: 1fr; }
    .content-block { padding: 40px 25px; }
    .hero-rounded-img { height: auto; min-height: 300px; }
    .split-wrap { flex-direction: column !important; gap: 40px; }
}













/* ==========================================================================
   CAREERS - SPECIFIC COMPONENT LAYOUTS
   ========================================================================== */
.hero-rounded-img {
    width: 100%; height: 520px; object-fit: cover; border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06); transition: transform 0.4s ease;
}
.hero-rounded-img:hover { transform: translateY(-5px); }

.context-label {
    display: block; font-size: 13px; font-weight: 800; color: var(--theme-brown);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}

/* 1. STAGGERED REASONS GRID */
.career-reasons-section { padding: 80px 0 120px 0; }
.staggered-reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.staggered-card {
    background: #ffffff; border: 1px solid var(--border-light); border-radius: 16px;
    padding: 40px 30px; position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.4s ease; display: flex; flex-direction: column;
}
.staggered-card:hover { box-shadow: 0 20px 40px rgba(192, 97, 38, 0.08); border-color: var(--theme-brown); transform: translateY(-8px); }
.translate-down { transform: translateY(40px); }
.translate-down:hover { transform: translateY(32px); }
.staggered-icon {
    width: 70px; height: 70px; background: rgba(192, 97, 38, 0.1); color: var(--theme-brown);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 25px; transition: all 0.3s ease;
}
.staggered-card:hover .staggered-icon { background: var(--theme-brown); color: #ffffff; transform: scale(1.1); }
.staggered-content h3 { font-size: 20px; font-weight: 800; margin-bottom: 15px; line-height: 1.4; }
.staggered-content p { font-size: 14.5px; margin-bottom: 15px; }
.staggered-content p:last-child { margin-bottom: 0; }

/* 2. INTERACTIVE GRID UI */
.interactive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 40px; }
.interactive-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 35px 30px; transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; }
.interactive-card:hover { box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08); border-color: var(--theme-brown); transform: translateY(-5px); }
.interactive-card .card-icon { width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08); color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s; }
.interactive-card:hover .card-icon { background: var(--theme-brown); color: #ffffff; }
.interactive-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 12px; line-height: 1.4; }
.interactive-card p { font-size: 14.5px; margin-bottom: 15px; }
.interactive-card p:last-child { margin-bottom: 0; }
.span-full-center { grid-column: 1 / -1; max-width: 500px; margin: 0 auto; }

/* 3. CORE VALUES */
.values-section { padding: 80px 0; }
.value-block { background: #ffffff; border-radius: 16px; padding: 50px; border: 1px solid var(--border-light); box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 40px; }
.value-header { display: flex; align-items: center; gap: 25px; margin-bottom: 20px; border-bottom: 1px solid var(--border-light); padding-bottom: 20px; }
.value-header .v-icon { font-size: 60px; color: var(--theme-brown); }
.value-header h2 { font-size: 24px; margin: 0 0 5px 0; line-height: 1.2; }
.values-flex-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.v-card { flex: 1 1 350px; max-width: 48%; background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 40px; transition: all 0.3s ease; }
.v-card:hover { box-shadow: 0 15px 30px rgba(192, 97, 38, 0.08); transform: translateY(-5px); border-color: rgba(192, 97, 38, 0.3); }
.v-card-icon { font-size: 45px; color: var(--theme-brown); margin-bottom: 20px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.v-card:hover .v-card-icon { transform: scale(1.15) rotate(-5deg); filter: drop-shadow(0 5px 10px rgba(192,97,38,0.3)); }
.v-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.v-card-sub { display: block; font-size: 13px; font-weight: 700; color: var(--theme-brown); margin-bottom: 15px; }

/* 4. A CULTURE THAT INSPIRES */
.culture-sticky-section { padding: 80px 0; position: relative; }
.sticky-split-layout { display: flex; gap: 60px; align-items: flex-start; }
.sticky-left { flex: 0 0 40%; position: sticky; top: 100px; }
.sticky-content-box { background: var(--theme-brown); color: #ffffff; padding: 50px 40px; border-radius: 16px; box-shadow: 0 20px 40px rgba(192, 97, 38, 0.2); }
.scrolling-right { flex: 1; display: flex; flex-direction: column; gap: 30px; }
.scroll-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 40px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; }
.scroll-card:hover { border-color: var(--theme-brown); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.s-icon { width: 60px; height: 60px; background: rgba(192, 97, 38, 0.1); color: var(--theme-brown); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }
.scroll-card h3 { font-size: 22px; margin-bottom: 15px; }


/* Fix for the right-side scrolling cards */
.scrolling-right .scroll-card {
    display: flex !important;
    flex-direction: column !important; /* Forces elements to stack vertically */
    align-items: flex-start !important; /* Aligns items to the left */
    gap: 16px; /* Adds consistent breathing room between the elements */
}

/* Ensure the text elements take up the full width of their new vertical container */
.scrolling-right .scroll-card .context-label,
.scrolling-right .scroll-card h3,
.scrolling-right .scroll-card p {
    display: block;
    width: 100%;
    margin: 0; /* Resets margins to rely on the flex gap above */
}

/* 5. CONTENT BLOCKS */
.content-block { background: #ffffff; border-radius: 12px; padding: 60px 40px; border: 1px solid var(--border-light); box-shadow: 0 5px 25px rgba(0,0,0,0.03); transition: box-shadow 0.3s ease; }
.content-block:hover { box-shadow: 0 10px 35px rgba(192, 97, 38, 0.08); }

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;     
    padding: 20px 0;         
}
/* ==========================================================================
   MOBILE RESPONSIVENESS (Ensures layout collapses properly on phones)
   ========================================================================== */
@media (max-width: 992px) {
    .staggered-reasons-grid { grid-template-columns: 1fr; gap: 30px; }
    .translate-down, .translate-down:hover { transform: none; }
    .sticky-split-layout { flex-direction: column; }
    .sticky-left { position: relative; top: 0; width: 100%; }
    .split-wrap { flex-direction: column; gap: 40px; }
    .split-wrap[style*="flex-direction: row-reverse"] { flex-direction: column !important; }
    .split-image img { width: 100%; height: auto; min-height: 300px; }
    .nl-inner { flex-direction: column; text-align: center; }
    .nl-text-box { flex-direction: column; text-align: center; gap: 10px; }
}

@media (max-width: 768px) {
    .v-card { max-width: 100%; flex: 1 1 100%; }
    .value-header { flex-direction: column; text-align: center; }
    .grid-3 { grid-template-columns: 1fr; }
    .content-block { padding: 40px 20px; }
    
    /* Newsletter Mobile Fix */
    .nl-form { 
        flex-direction: column; 
        background: transparent; 
        overflow: visible; 
        gap: 12px; 
    }
    .nl-form input { 
        width: 100%; 
        border-radius: 8px; 
        padding: 15px; 
        border: 1px solid var(--border-light); 
        background: #ffffff; 
    }
    .nl-form button { 
        width: 100%; 
        border-radius: 8px; 
        padding: 15px; 
    }
}













/* ==========================================================================
   KNOWLEDGE BASE - SPECIFIC COMPONENT LAYOUTS
   ========================================================================== */

/* Typography & Lists */
.kb-h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--theme-dark);
    margin-bottom: 15px;
}

.kb-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kb-list li {
    font-size: 15.5px;
    color: var(--theme-gray);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.kb-list li i {
    color: var(--theme-brown);
    margin-top: 4px;
    font-size: 18px;
}

.kb-list-sm {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kb-list-sm li {
    font-size: 14.5px;
    color: var(--theme-gray);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kb-list-sm li i {
    color: var(--theme-brown);
    font-size: 14px;
}

/* Image Placeholder Sizes */
.hero-rounded-img {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transition: transform 0.4s ease;
}
.hero-rounded-img:hover {
    transform: translateY(-5px);
}

/* --------------------------------------------------------------------------
   STEPPER GRID (Information Architecture)
   -------------------------------------------------------------------------- */
.stepper-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 50px auto 0 auto;
    position: relative;
}

/* Creating the connecting line behind steps */
.stepper-grid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 45px;
    width: 2px;
    background: var(--border-light);
    z-index: 1;
}

.stepper-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.stepper-card:hover {
    box-shadow: 0 10px 30px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateX(5px);
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--theme-brown);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 8px #fcfbfa; /* Matches bg-light to break the line cleanly */
}

.stepper-card h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: var(--theme-dark);
    margin-bottom: 5px;
}

.stepper-card p {
    margin: 0;
    font-size: 15px;
}

@media (max-width: 768px) {
    .stepper-grid::before { left: 35px; }
    .stepper-card { flex-direction: column; align-items: flex-start; gap: 15px; padding: 25px; }
    .step-number { width: 40px; height: 40px; font-size: 20px; }
}

/* --------------------------------------------------------------------------
   INTERACTIVE GRID UI (Core Modules)
   -------------------------------------------------------------------------- */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.interactive-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 35px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.interactive-card:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-5px);
}
.interactive-card .card-icon {
    width: 65px; height: 65px; background: rgba(192, 97, 38, 0.08);
    color: var(--theme-brown); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
}
.interactive-card:hover .card-icon { 
    background: var(--theme-brown); 
    color: #ffffff; 
}
.interactive-card h3 { 
    font-family: var(--font-heading); 
    font-size: 20px; 
    font-weight: 800; 
    color: var(--theme-dark); 
    margin-bottom: 15px; 
    line-height: 1.4; 
}
.interactive-card p { 
    font-size: 14.5px; 
    text-align: justify; 
    text-justify: inter-word; 
}

/* --------------------------------------------------------------------------
   HORIZONTAL TECH PANELS (Developer/API/Ref section)
   -------------------------------------------------------------------------- */
.tech-list-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.tech-panel {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 40px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.tech-panel:hover {
    box-shadow: 0 15px 35px rgba(192, 97, 38, 0.08);
    border-color: var(--theme-brown);
    transform: translateY(-3px);
}

.tp-icon {
    width: 80px;
    height: 80px;
    background: #fcfbfa;
    border: 1px solid var(--border-light);
    color: var(--theme-brown);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.tech-panel:hover .tp-icon {
    background: var(--theme-brown);
    color: #ffffff;
    border-color: var(--theme-brown);
    transform: scale(1.05) rotate(5deg);
}

.tp-content {
    flex: 1;
}

.tp-content h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--theme-dark);
    margin-bottom: 15px;
}

.tp-content p {
    font-size: 15px;
    margin-bottom: 15px;
}

.tp-content ul {
    margin: 0 0 15px 20px;
    padding: 0;
    color: var(--theme-gray);
    font-size: 15px;
    line-height: 1.7;
}

.tp-content ul li {
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .tech-panel { flex-direction: column; padding: 30px 25px; align-items: center; text-align: center; }
    .tp-content ul { text-align: left; display: inline-block; margin-left: 0; }
}




















/* ==========================================================================
   BLOG SINGLE POST - COMPONENT LAYOUTS
   ========================================================================== */

.page-hero {
    margin-top: 60px; 
    background-color: var(--theme-brown);
    height: 180px; 
    padding: 0 15px; 
    text-align: center;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-hero h1 { 
    font-family: var(--font-heading); 
    font-size: clamp(22px, 3.5vw, 32px); 
    line-height: 1.3;
    font-weight: 800; 
    margin-bottom: 10px; 
    color: #ffffff !important; /* Keep hero title white */
}
.page-hero .breadcrumbs { 
    font-size: 16px; 
    font-weight: 600; 
    font-family: var(--font-heading); 
}
.page-hero .breadcrumbs a { 
    color: #ffffff; 
    text-decoration: none; 
    transition: opacity 0.3s; 
}
.page-hero .breadcrumbs a:hover { 
    opacity: 0.8; 
}
.page-hero .breadcrumbs .dot { 
    margin: 0 8px; 
    font-size: 12px; 
    opacity: 0.7;
}

/* Main Section Spacing */
.blog-main-section {
    padding: 60px 0 100px 0;
}

/* Full Screen Container (No Sidebar) */
.single-post-full-layout {
    max-width: 950px; 
    margin: 0 auto;
}

/* Featured Image - FORCED CONSISTENCY */
.single-post-image {
    margin-bottom: 50px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.blog-main-image {
    width: 100%;
    height: 650px; /* Forces exactly identical sizes across all blog pages */
    object-fit: best;
    display: block;
}

/* Typography & Content Formatting */

/* STRICT BLACK HEADINGS FOR ALL CONTENT */
.post-content h1, 
.post-content h2, 
.post-content h3, 
.post-content h4, 
.post-content h5, 
.post-content h6 {
    font-family: var(--font-heading);
    color: #141414 !important; /* Forces absolute black */
    font-weight: 800;
    line-height: 1.3;
}

.post-content h3 {
    font-size: 28px;
    margin: 45px 0 15px 0;
}

.post-content h4 {
    font-size: 22px;
    margin: 30px 0 12px 0;
}

.post-content p {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.6; /* REDUCED line spacing as requested */
    color: var(--theme-gray);
    font-size: 16px;
    margin-bottom: 18px;
}

/* Custom Bullet Lists */
.styled-list {
    margin: 0 0 30px 0;
    padding-left: 20px;
    list-style: none;
}

.styled-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--theme-gray);
    line-height: 1.6; /* Reduced line spacing */
    text-align: justify;
    text-justify: inter-word;
}

.styled-list li::before {
    content: "\f058"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--theme-brown);
    font-size: 16px;
}

/* ==========================================================================
   MINIMALIST SOCIAL SHARING BAR
   ========================================================================== */
.post-bottom-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    padding: 20px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 20px;
}

.single-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    flex: 1; 
}

.single-post-tags a {
    color: var(--theme-brown);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.single-post-tags a:hover {
    opacity: 0.8;
}

.post-share-simple {
    display: flex;
    align-items: center;
    gap: 15px;
}

.post-share-simple a, 
.post-share-simple .action-icon {
    color: #C06126;
    font-size: 16px; 
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.post-share-simple a:hover, 
.post-share-simple .action-icon:hover {
    color: var(--theme-brown);
    transform: translateY(-2px);
}

.share-divider {
    width: 1px;
    height: 16px;
    background-color: #cccccc;
    margin: 0 5px;
}

.heart-interaction { gap: 6px; }
.heart-count { font-family: var(--font-body); font-size: 14px; font-weight: 500; }

/* ==========================================================================
   NAVIGATION, COMMENTS & FORMS
   ========================================================================== */
.separator {
    border: 0;
    border-top: 1px solid var(--border-light);
    margin: 40px 0;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-prev, .nav-next {
    display: flex;
    flex-direction: column;
    max-width: 45%;
    color: #141414 !important; /* Strict black */
    font-weight: 700;
    font-size: 18px;
    font-family: var(--font-heading);
    line-height: 1.4;
    transition: color 0.3s;
    text-decoration: none;
}

.nav-next { text-align: right; }

.nav-prev span, .nav-next span {
    font-size: 13px;
    color: var(--theme-brown);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.nav-prev:hover, .nav-next:hover { color: var(--theme-brown) !important; }

/* Comments Section */
.comments-section {
    background: #ffffff;
    padding: 50px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 5px 25px rgba(0,0,0,0.02);
}

.widget-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: #141414 !important; /* Strict black */
    margin-bottom: 10px;
}

.comment-notes {
    font-size: 15px;
    color: var(--theme-gray);
    margin-bottom: 30px;
}

.form-row { display: flex; gap: 25px; margin-bottom: 25px; }
.input-group { flex: 1; display: flex; flex-direction: column; margin-bottom: 20px; }
.input-group label { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--theme-dark); font-family: var(--font-heading); }
.input-group input, .input-group textarea {
    padding: 15px 20px; border: 1px solid var(--border-light); border-radius: 8px;
    background: #fcfbfa; outline: none; font-family: var(--font-body); font-size: 15px;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.input-group input:focus, .input-group textarea:focus { border-color: var(--theme-brown); background: #ffffff; }

/* Custom Checkbox */
.custom-checkbox-group { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.custom-checkbox-group input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
    border: 2px solid var(--border-light); border-radius: 5px; background-color: #fcfbfa;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    transition: all 0.2s ease;
}
.custom-checkbox-group input[type="checkbox"]:checked { background-color: var(--theme-brown); border-color: var(--theme-brown); }
.custom-checkbox-group input[type="checkbox"]:checked::after { content: '\2714'; color: #ffffff; font-size: 14px; font-weight: 900; }
.custom-checkbox-group label { font-size: 15px; color: var(--theme-gray); cursor: pointer; }

/* Submit Button */
.comment-btn-colored {
    background-color: var(--theme-brown);
    background-image: linear-gradient(96deg, var(--theme-brown) 0%, #9a5323 100%);
    color: #ffffff; border: none; padding: 14px 35px; font-family: var(--font-heading);
    font-weight: 700; border-radius: 6px; cursor: pointer; margin-top: 25px;
    transition: opacity 0.3s ease, transform 0.2s ease;
}
.comment-btn-colored:hover { opacity: 0.9; transform: translateY(-2px); }

/* ==========================================================================
   RELATED POSTS SECTION
   ========================================================================== */
.related-posts-section { margin: 50px 0; }
.related-posts-section .widget-title { margin-bottom: 25px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.related-card { display: flex; flex-direction: column; }
.related-img-wrapper { border-radius: 8px; overflow: hidden; margin-bottom: 15px; }
.related-img-wrapper img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.related-card:hover .related-img-wrapper img { transform: scale(1.05); }
.related-meta { font-size: 13px; color: var(--theme-gray); margin-bottom: 8px; }
.related-meta a { color: var(--theme-brown); text-decoration: none; }
.related-card h4 { font-family: var(--font-heading); font-size: 17px; font-weight: 800; line-height: 1.4; margin: 0; }
.related-card h4 a { color: #141414 !important; text-decoration: none; transition: color 0.3s ease; } /* Strict black */
.related-card h4 a:hover { color: var(--theme-brown) !important; }

/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */
@media (max-width: 900px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .blog-main-image { height: 250px; } /* Ensures the main image looks perfect on phones */
    .form-row { flex-direction: column; gap: 0; margin-bottom: 0; }
    .post-content h3 { font-size: 24px; }
    .comments-section { padding: 30px 20px; }
    .comment-btn-colored { width: 100%; }
}

@media (max-width: 600px) {
    .post-bottom-meta { flex-direction: column; align-items: flex-start; }
    .related-grid { grid-template-columns: 1fr; }
    .post-navigation { flex-direction: column; gap: 20px; text-align: center; }
    .nav-prev, .nav-next { max-width: 100%; text-align: center; }
}













/* ==========================================================================
   WHITE PAPERS - SPECIFIC COMPONENT LAYOUTS
   ========================================================================== */

/* Universal Section Spacing for Perfect Gaps */
section {
    padding: 80px 0;
}
.mt-5 {
    margin-top: 50px !important;
}

/* Typography & Lists */
.wp-h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--theme-brown);
    margin-bottom: 15px;
}

.wp-list, .wp-list-sm {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wp-list li {
    font-size: 15.5px;
    color: var(--theme-gray);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.wp-list li i {
    color: var(--theme-brown);
    margin-top: 4px;
    font-size: 18px;
}
.wp-list-sm li {
    font-size: 14.5px;
    color: var(--theme-gray);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wp-list-sm li i {
    color: var(--theme-brown);
    font-size: 14px;
}

.context-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--theme-brown);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Image Placeholder Sizes */
.hero-rounded-img {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(147, 111, 53, 0.06);
    transition: transform 0.4s ease;
}
.hero-rounded-img:hover {
    transform: translateY(-5px);
}

/* ==========================================================================
   THE "HANGOVER" & IMAGE BG EFFECTS (Applied to all cards)
   ========================================================================== */
.interactive-card, 
.method-card, 
.content-block, 
.tech-panel, 
.scroll-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Needed for the background effect */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 1. The Lift & Shadow Hover Effect */
.interactive-card:hover, 
.method-card:hover, 
.content-block:hover, 
.tech-panel:hover, 
.scroll-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(192, 97, 38, 0.12); /* Theme brown glowing shadow */
    border-color: var(--theme-brown);
}

/* 2. The Theme-Brown Background Gradient Effect on Hover */
.interactive-card::before, 
.method-card::before, 
.content-block::before, 
.tech-panel::before, 
.scroll-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(192, 97, 38, 0.05) 0%, transparent 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.interactive-card:hover::before, 
.method-card:hover::before, 
.content-block:hover::before, 
.tech-panel:hover::before, 
.scroll-card:hover::before {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   INTERACTIVE GRID UI (Cards)
   -------------------------------------------------------------------------- */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.interactive-card {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.interactive-card .card-icon {
    width: 65px; height: 65px; 
    background: rgba(192, 97, 38, 0.08);
    color: var(--theme-brown); 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 26px; margin-bottom: 20px; transition: all 0.3s;
}
.interactive-card:hover .card-icon { 
    background: var(--theme-brown); 
    color: #ffffff; 
}
.interactive-card h3 { 
    font-family: var(--font-heading); 
    font-size: 20px; font-weight: 800; color: var(--theme-dark); 
    margin-bottom: 15px; line-height: 1.4; 
}
.interactive-card p { 
    font-size: 14.5px; text-align: justify; text-justify: inter-word; 
}
.span-full-center { 
    grid-column: 1 / -1; max-width: 500px; margin: 0 auto; 
}

/* --------------------------------------------------------------------------
   METHODOLOGY GRID (1st Picture Exact Match)
   -------------------------------------------------------------------------- */
.methodology-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.method-card {
    padding: 40px;
    text-align: center;
}
.m-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px auto;
    background: #C06126; /* Matched the dark black from your 1st picture */
    color: #ffffff;      /* White icons */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all 0.4s ease;
}
.method-card:hover .m-icon {
    background: var(--theme-brown); /* Turns theme-brown on hover */
    transform: scale(1.1); /* Subtle pop effect instead of full flip */
}
.method-card h3 {
    font-family: var(--font-heading);
    font-size: 22px; font-weight: 800; color: var(--theme-brown); margin-bottom: 15px;
}
.method-card p {
    font-size: 15px; text-align: center; text-justify: auto;
}
.method-card ul {
    text-align: left; display: inline-block; margin-top: 15px;
}
@media (max-width: 992px) {
    .methodology-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   STICKY SIDEBAR (Audience & Strategic Value)
   -------------------------------------------------------------------------- */
.sticky-section {
    padding: 80px 0;
    position: relative;
}
.sticky-split-layout {
    display: flex; gap: 60px; align-items: flex-start;
}
.sticky-left {
    flex: 0 0 40%; position: sticky; top: 100px;
}
.sticky-content-box {
    background: var(--theme-brown);
    color: #ffffff;
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(192, 97, 38, 0.2);
}
.scrolling-right {
    flex: 1; display: flex; flex-direction: column; gap: 30px;
}
.scroll-card {
    padding: 40px;
}
.s-icon {
    width: 60px; height: 60px; background: rgba(192, 97, 38, 0.1);
    color: var(--theme-brown); border-radius: 8px; display: flex;
    align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px;
}
.scroll-card h3 {
    font-size: 24px; margin-bottom: 15px; color: var(--theme-dark);
    font-weight: 800; font-family: var(--font-heading);
}
@media (max-width: 992px) {
    .sticky-split-layout { flex-direction: column; }
    .sticky-left { position: relative; top: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   DUAL BLOCK GRID (Featured Papers & Frameworks)
   -------------------------------------------------------------------------- */
.dual-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.content-block {
    padding: 50px 40px;
}
@media (max-width: 992px) {
    .dual-block-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   HORIZONTAL TECH PANELS
   -------------------------------------------------------------------------- */
.tech-list-grid {
    display: flex; flex-direction: column; gap: 25px;
    max-width: 1000px; margin: 0 auto;
}
.tech-panel {
    display: flex; align-items: flex-start; gap: 30px; padding: 40px;
}
.tp-icon {
    width: 80px; height: 80px; background: #fcfbfa;
    border: 1px solid var(--border-light); color: var(--theme-brown);
    border-radius: 12px; display: flex; align-items: center;
    justify-content: center; font-size: 32px; flex-shrink: 0; transition: all 0.3s ease;
}
.tech-panel:hover .tp-icon {
    background: var(--theme-brown); color: #ffffff;
    border-color: var(--theme-brown); transform: scale(1.05) rotate(5deg);
}
.tp-content { flex: 1; }
.tp-content h3 {
    font-family: var(--font-heading); font-size: 22px; font-weight: 800;
    color: var(--theme-dark); margin-bottom: 15px;
}
.tp-content p { font-size: 15px; margin-bottom: 15px; }
.tp-content ul {
    margin: 0 0 15px 20px; padding: 0; color: var(--theme-gray); font-size: 15px; line-height: 1.7;
}
.tp-content ul li { margin-bottom: 5px; }
@media (max-width: 768px) {
    .tech-panel { flex-direction: column; padding: 30px 25px; align-items: center; text-align: center; }
    .tp-content ul { text-align: left; display: inline-block; margin-left: 0; }
}










/* ==============================================================
   GLOBAL TYPOGRAPHY (Forced Black Headings as requested)
   ============================================================== */
h1, h2, h3, h4, h5, h6, .widget-title, .blog-card h2 a, .rp-info a {
    font-family: 'Nunito', sans-serif;
    color: #262626 !important; /* Perfect crisp black matching your 1st picture */
}

/* ==========================================================================
   BLOG ARCHIVE (blog.html) - MAIN GRID & SIDEBAR LAYOUT
   ========================================================================== */

.blog-page-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr; 
    gap: 50px;
    margin-top: 60px;
    margin-bottom: 80px;
    align-items: start;
}

.blog-grid-area {
    width: 100%;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.blog-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    transition: all 0.3s ease;
}

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

.blog-card-image {
    overflow: hidden;
    margin-bottom: 0; 
}

.blog-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 25px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta {
    font-size: 13px;
    color: var(--theme-gray);
    margin-bottom: 10px;
    font-family: var(--font-body);
}

.blog-cat { 
    color: #262626; 
    font-weight: bold; 
}

.blog-card h2 {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
    min-height: 52px; 
}

.blog-card h2 a {
    transition: color 0.3s ease;
}

.blog-card h2 a:hover { 
    color: var(--theme-brown) !important; 
}

.blog-card p.excerpt {
    color: var(--theme-gray);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    text-align: left !important; 
}

/* ==========================================================================
   NEW CARD FOOTER (Tags & Social Icons combined perfectly)
   ========================================================================== */
.blog-card-footer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid #eeeeee;
    padding-top: 15px;
    margin-top: auto;
}

.single-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.single-post-tags a {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--theme-gray);
    background: #f4f4f4;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.single-post-tags a:hover {
    background: var(--theme-brown);
    color: #ffffff;
}

.card-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.read-more-btn {
    color: var(--theme-brown);
    font-weight: 800;
    font-size: 14px;
    font-family: var(--font-heading);
    text-decoration: none;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.read-more-btn:hover {
    color: #C06126;
}

.post-share-simple {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-share-simple a, .action-icon {
    color: #C06126;
    font-size: 14px;
    transition: color 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.post-share-simple a:hover, .action-icon:hover {
    color: var(--theme-brown);
}

.share-divider {
    height: 14px;
    width: 1px;
    background: #dddddd;
    margin: 0 4px;
}

.heart-interaction {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 13px;
}

/* ==========================================================================
   SIDEBAR STYLING
   ========================================================================== */
.sidebar-area {
    padding-left: 20px;
}

.sidebar-widget {
    margin-bottom: 50px;
}

.sidebar-widget .widget-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* Search Widget */
.search-widget form {
    display: flex;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 8px;
    transition: border-color 0.3s ease;
}
.search-widget form:focus-within {
    border-color: var(--theme-brown);
}
.search-widget input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: var(--font-body);
    background: transparent;
}
.search-widget button {
    background: none;
    border: none;
    color: #262626;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s ease;
}
.search-widget button:hover {
    color: var(--theme-brown);
}

/* Categories List */
.widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget-list li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px;
}
.widget-list li::before {
    content: "\f105"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--theme-brown);
    font-size: 14px;
}
.widget-list li a {
    color: #262626;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
}
.widget-list li a:hover {
    color: var(--theme-brown);
}

/* Recent Posts List */
.recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recent-posts-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.recent-posts-list img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0; 
}
.rp-info {
    display: flex;
    flex-direction: column;
}
.rp-info span {
    font-size: 12px;
    color: var(--theme-gray);
    margin-bottom: 5px;
}
.rp-info a {
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.3s ease;
}
.rp-info a:hover {
    color: var(--theme-brown) !important;
}

/* Popular Searches (Tags) */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-cloud a {
    background-color: #fcfbfa; 
    color: var(--theme-gray);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}
.tag-cloud a:hover {
    background-color: var(--theme-brown);
    color: #ffffff;
    border-color: var(--theme-brown);
}

/* Pagination */
.pagination { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 8px; 
    margin-top: 30px; 
}
.page-link { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px; 
    background: #ffffff; 
    color: #262626; 
    font-family: var(--font-heading); 
    font-weight: 700; 
    font-size: 15px;
    border-radius: 4px; 
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease; 
}
.page-link:hover { 
    background: rgba(182, 100, 44, 0.05);
    color: var(--theme-brown);
    border-color: var(--theme-brown);
}
.page-link.active { 
    background: var(--theme-brown);
    color: #ffffff; 
    border-color: var(--theme-brown);
}

/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */
@media (max-width: 1024px) {
    .card-footer-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 900px) {
    .blog-page-layout {
        grid-template-columns: 1fr; 
    }
    .sidebar-area {
        padding-left: 0;
        margin-top: 20px;
        border-top: 1px solid #eeeeee;
        padding-top: 40px;
    }
    .card-footer-actions {
        flex-direction: row; /* Reset to row when it has full width again */
        align-items: center;
    }
}

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

@media (max-width: 480px) {
    .card-footer-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

















/* --------------------------------------------------------------------------
           PREMIUM CONTACT FORM & IMAGE LAYOUT contact page
           -------------------------------------------------------------------------- */
        .premium-contact-section {
            padding: 80px 0;
            overflow: hidden;
        }

        .premium-contact-wrapper {
            display: flex;
            align-items: center;
            gap: 60px;
        }

        @media (max-width: 992px) {
            .premium-contact-wrapper {
                flex-direction: column;
            }
        }

        .premium-form-container {
            flex: 1;
            max-width: 600px;
        }

        .premium-image-container {
            flex: 1;
            position: relative;
            border-radius: 20px;
        }

        /* Premium Imagery & Floating Box */
        .premium-contact-img {
            width: 100%;
            height: 650px;
            object-fit: cover;
            border-radius: 24px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
        }

        .quick-contact-floating {
            position: absolute;
            bottom: -30px;
            left: -30px;
            background: #ffffff;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            gap: 20px;
            border: 1px solid var(--border-light, #eae8e5);
        }

        @media (max-width: 992px) {
            .quick-contact-floating {
                position: relative;
                bottom: 0;
                left: 0;
                margin-top: -50px;
                margin-inline: 20px;
            }
            .premium-contact-img {
                height: 400px;
            }
        }

        .qc-item {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .qc-item i {
            font-size: 24px;
            color: var(--theme-brown, #C06126);
            background: rgba(192, 97, 38, 0.1);
            padding: 15px;
            border-radius: 50%;
        }

        .qc-item span {
            display: block;
            font-size: 13px;
            color: var(--theme-gray, #6b6a68);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .qc-item strong {
            font-size: 16px;
            color: var(--theme-dark, #141414);
            font-family: 'Nunito', sans-serif;
        }

        /* Modern Floating Label Form */
        .premium-form .form-row {
            display: flex;
            gap: 20px;
        }

        @media (max-width: 576px) {
            .premium-form .form-row {
                flex-direction: column;
                gap: 0;
            }
        }

        .premium-form .form-group {
            position: relative;
            margin-bottom: 25px;
            width: 100%;
        }

        .premium-form input, 
        .premium-form textarea {
            width: 100%;
            padding: 20px 20px 10px;
            border: none;
            border-bottom: 2px solid #e0e0e0;
            background: transparent;
            font-size: 16px;
            font-family: 'Nunito', sans-serif;
            transition: all 0.3s ease;
            outline: none;
        }

        .premium-form input:focus, 
        .premium-form textarea:focus {
            border-bottom-color: var(--theme-brown, #C06126);
        }

        .premium-form label {
            position: absolute;
            top: 18px;
            left: 20px;
            font-size: 16px;
            color: #999;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .premium-form input:focus ~ label,
        .premium-form input:not(:placeholder-shown) ~ label,
        .premium-form textarea:focus ~ label,
        .premium-form textarea:not(:placeholder-shown) ~ label {
            top: 0;
            font-size: 12px;
            color: var(--theme-brown, #C06126);
            font-weight: 600;
        }

        .premium-btn {
            width: 100%;
            padding: 18px;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            transition: all 0.4s ease;
            background-color: var(--theme-brown, #C06126);
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .premium-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(192, 97, 38, 0.2);
        }

        /* --------------------------------------------------------------------------
           CONTACT DETAILS GRID
           -------------------------------------------------------------------------- */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .contact-card {
            background: #ffffff;
            border: 1px solid var(--border-light, #eae8e5);
            border-radius: 12px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .premium-card {
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
        }

        .contact-card:hover, .premium-card:hover {
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            border-color: var(--theme-brown, #C06126);
            transform: translateY(-5px);
        }

        .contact-icon {
            width: 70px;
            height: 70px;
            background: rgba(192, 97, 38, 0.1);
            color: var(--theme-brown, #C06126);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin: 0 auto 20px auto;
            transition: all 0.3s ease;
        }

        .contact-card:hover .contact-icon {
            background: var(--theme-brown, #C06126);
            color: #ffffff;
            transform: scale(1.1);
        }

        .contact-card h3 {
            font-family: 'Nunito', sans-serif;
            font-size: 22px;
            font-weight: 800;
            color: var(--theme-dark, #141414);
            margin-bottom: 15px;
        }

        .contact-card p {
            font-size: 15px;
            color: var(--theme-gray, #6b6a68);
            line-height: 1.7;
            text-align: center;
        }

        /* Hero Image Spaces */
        .hero-rounded-img {
            width: 100%;
            height: 520px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.06);
            transition: transform 0.4s ease;
        }
        .hero-rounded-img:hover {
            transform: translateY(-5px);
        }

        /* --------------------------------------------------------------------------
           STEPPER GRID (Process Layout)
           -------------------------------------------------------------------------- */
        .stepper-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 900px;
            margin: 50px auto 0 auto;
            position: relative;
        }

        .stepper-grid::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 45px;
            width: 2px;
            background: var(--border-light, #eae8e5);
            z-index: 1;
        }

        .stepper-card {
            background: #ffffff;
            border: 1px solid var(--border-light, #eae8e5);
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            align-items: flex-start;
            gap: 30px;
            position: relative;
            z-index: 2;
            box-shadow: 0 5px 15px rgba(0,0,0,0.02);
            transition: all 0.3s ease;
        }

        .stepper-card:hover {
            box-shadow: 0 10px 30px rgba(192, 97, 38, 0.08);
            border-color: var(--theme-brown, #C06126);
            transform: translateX(5px);
        }

        .step-number {
            width: 50px;
            height: 50px;
            background: var(--theme-brown, #C06126);
            color: #ffffff;
            font-family: 'Nunito', sans-serif;
            font-size: 24px;
            font-weight: 800;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 0 0 8px #ffffff;
        }

        .stepper-card h3 {
            font-family: 'Nunito', sans-serif;
            font-size: 22px;
            font-weight: 800;
            color: var(--theme-dark, #141414);
            margin-bottom: 10px;
            margin-top: 5px;
        }

        .stepper-card p {
            margin: 0;
            font-size: 15px;
        }

        @media (max-width: 768px) {
            .stepper-grid::before { left: 35px; }
            .stepper-card { flex-direction: column; align-items: flex-start; gap: 15px; padding: 25px; }
            .step-number { width: 40px; height: 40px; font-size: 20px; }
        }

        .custom-notify.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* Added for the small attractive image in the final section */
        .small-attractive-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: 0 8px 25px rgba(192, 97, 38, 0.2);
            border: 4px solid #ffffff;
            margin: 0 auto 25px auto;
            display: block;
        }





















































/* ==========================================================================
   INDEX.CSS - HOME PAGE SPECIFIC STYLES & MOBILE OVERRIDES
   All rules are strictly prefixed so they ONLY apply to the index.html page.
   ========================================================================== */

/* --- DYNAMIC NAVIGATION BAR (Transparent to Solid) --- */
#header.home-header {
    background-color: transparent !important; 
    box-shadow: none !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    height: 68px !important;   transition: transform 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Active solid background when scrolling */
#header.home-header.scrolled-active {
    background-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

/* Class applied by JS to hide the header when mobile overlay is active */
#header.home-header.header-hidden {
    transform: translateY(-100%) !important;
}

#header.home-header .nav-links li a {
    color: #19191A !important;
    transition: color 0.3s ease !important;
}

/* Consistent Hover Brown Color across all items */
#header.home-header .nav-links li a:hover, 
#header.home-header .nav-links li a.active {
    color: var(--theme-brown, #B6642C) !important;
}

/* Remove tap highlight and focus from the mobile hamburger menu to keep it clean */
#header.home-header .mobile-menu-btn {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    background: transparent !important;
}
#header.home-header .mobile-menu-btn:focus,
#header.home-header .mobile-menu-btn:active {
    outline: none !important;
    background: transparent !important;
}

/* Universal Section padding for Index */
#home-main section {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    padding: 100px 0 !important;
    box-sizing: border-box !important;
}

#home-main .section-header {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 50px auto !important;
    display: block !important;
}

#home-main .section-header h2 {
    font-size: 42px !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    font-family: var(--font-heading, 'Nunito', sans-serif) !important;
    font-weight: 800 !important;
    color: #19191A !important;
    text-align: center !important;
}

#home-main .subtitle {
    color: var(--theme-brown, #B6642C) !important;
    font-family: var(--font-heading, 'Nunito', sans-serif) !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: inline-block !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

/* --- Hero Section --- */
#home-hero { padding: 160px 0 120px !important; background: var(--light-bg, #f9f9f9) !important; overflow: hidden !important; position: relative !important;}
#home-hero .hero-bg-glow { position: absolute !important; top: -20% !important; left: -10% !important; width: 50% !important; height: 60% !important; background: radial-gradient(circle, rgba(182, 100, 44, 0.15) 0%, transparent 70%) !important; z-index: 0 !important; }
#home-hero .hero-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 50px !important; position: relative !important; z-index: 1 !important; }
#home-hero .hero-content { flex: 1 !important; padding-right: 20px !important; text-align: left !important; }
#home-hero .hero-content h1 { font-size: clamp(40px, 5vw, 58px) !important; line-height: 1.1 !important; margin-bottom: 25px !important; color: #19191A !important; text-align: left !important; font-family: var(--font-heading, 'Nunito', sans-serif) !important; font-weight: 800 !important;}
#home-hero .dynamic-text-wrapper { color: var(--theme-brown, #B6642C) !important; display: inline-block !important; }
#home-hero .cursor { display: inline-block !important; width: 3px !important; background-color: var(--theme-brown, #B6642C) !important; animation: blink 0.7s infinite !important; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
#home-hero .hero-content p { font-size: 17px !important; margin-bottom: 35px !important; max-width: 550px !important; text-align: left !important; color: #555 !important; line-height: 1.7 !important;}
#home-hero .hero-contact { display: flex !important; align-items: center !important; gap: 20px !important; margin-top: 40px !important; }
#home-hero .hero-contact .icon-box { width: 50px !important; height: 50px !important; background: rgba(182, 100, 44, 0.1) !important; color: var(--theme-brown, #B6642C) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; }
#home-hero .hero-contact span { font-size: 22px !important; font-weight: 800 !important; font-family: var(--font-heading, 'Nunito', sans-serif) !important; color: #19191A !important;}

/* Fix for Hero Image Overlap */
#home-hero .hero-image { flex: 1 !important; position: relative !important; margin-top: 50px !important; }

#home-hero .blob-bg { position: absolute !important; top: -5% !important; left: -5% !important; width: 100% !important; height: 100% !important; background: #5d4a3d !important; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important; z-index: 1 !important; animation: morph 8s ease-in-out infinite alternate !important; }
#home-hero .blob-shape { position: relative !important; width: 100% !important; height: 550px !important; background: var(--theme-brown, #B6642C) !important; border-radius: 50% 50% 30% 70% / 50% 40% 60% 50% !important; overflow: hidden !important; z-index: 2 !important; animation: morph 10s ease-in-out infinite alternate-reverse !important; }
#home-hero .blob-shape img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
@keyframes morph { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 100% { border-radius: 50% 50% 30% 70% / 50% 40% 60% 50%; } }
#home-hero .floating-icon { position: absolute !important; background: #fff !important; padding: 18px !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; z-index: 3 !important; font-size: 24px !important; color: var(--theme-brown, #B6642C) !important; animation: float 4s ease-in-out infinite !important; }
#home-hero .icon-1 { top: 15% !important; left: -30px !important; animation-delay: 0s !important; }
#home-hero .icon-2 { bottom: 15% !important; right: -20px !important; animation-delay: 2s !important; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* --- Marquee --- */
#home-marquee { background: linear-gradient(90deg, rgb(41, 39, 39), rgb(41, 39, 39)) !important; padding: 11px 0 !important; overflow: hidden !important; white-space: nowrap !important; position: relative !important; }
#home-marquee .scrolling-text { display: inline-block !important; font-family: var(--font-heading, 'Nunito', sans-serif) !important; font-size: 24px !important; font-weight: 800 !important; color: rgba(255, 255, 255, 0.9) !important; text-transform: uppercase !important; animation: scroll 20s linear infinite !important; }
#home-marquee .scrolling-text span { margin: 0 15px !important; }
#home-marquee .scrolling-text i { font-size: 14px !important; margin: 0 15px !important; color: rgba(255,255,255,0.5) !important; vertical-align: middle !important; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- About Us --- */
#home-about { background-color: #ffffff !important; }
#home-about .about-inner { display: flex !important; align-items: center !important; gap: 80px !important; }
#home-about .about-image { flex: 1 !important; position: relative !important; }
#home-about .about-shape { width: 100% !important; height: 500px !important; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important; overflow: hidden !important; position: relative !important; z-index: 2 !important; animation: morph 9s ease-in-out infinite alternate !important; }
#home-about .about-shape img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#home-about .about-bg-shape { position: absolute !important; top: 20px !important; left: -20px !important; width: 100% !important; height: 100% !important; border: 3px solid var(--theme-brown, #B6642C) !important; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important; z-index: 1 !important; animation: morph 9s ease-in-out infinite alternate-reverse !important; }
#home-about .about-content { flex: 1.2 !important; text-align: left !important; }
#home-about .about-content h2 { font-size: 42px !important; line-height: 1.4 !important; margin-bottom: 25px !important; text-align: left !important; }
#home-about .about-content p { font-size: 16px !important; margin-bottom: 35px !important; text-align: left !important; color:#555 !important;}

/* --- Services --- */
#home-services { background-color: var(--light-bg, #f9f9f9) !important; }
#home-services .services-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; width: 100% !important; }
#home-services .service-card { background-color: #ffffff !important; padding: 50px 30px !important; border-radius: 12px !important; text-align: center !important; box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; transition: all 0.3s ease !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-bottom: 4px solid transparent !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; }
#home-services .service-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 0% !important; background: linear-gradient(180deg, rgba(182, 100, 44, 0.05) 0%, transparent 100%) !important; transition: all 0.4s ease !important; z-index: 0 !important; }
#home-services .service-card:hover::before { height: 100% !important; }
#home-services .service-card:hover { transform: translateY(-12px) !important; box-shadow: 0 15px 40px rgba(182, 100, 44, 0.15) !important; border-bottom-color: var(--theme-brown, #B6642C) !important; }
#home-services .service-icon { font-size: 55px !important; color: var(--theme-brown, #B6642C) !important; margin-bottom: 20px !important; transition: all 0.3s ease !important; position: relative !important; z-index: 1 !important; }
#home-services .service-card:hover .service-icon { transform: scale(1.1) !important; color: #242C64 !important; }
#home-services .service-card h4 { font-size: 20px !important; font-family: var(--font-heading, 'Nunito', sans-serif) !important; font-weight: 800 !important; color: #19191A !important; margin: 0 !important; position: relative !important; z-index: 1 !important; }

/* --- Growth --- */
#home-growth { background-color: #ffffff !important; }
#home-growth .growth-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 50px !important; width: 100% !important; }
#home-growth .growth-content { flex: 1.2 !important; text-align: left !important; }
#home-growth .growth-content h2 { text-align: left !important; font-size: 42px !important; margin-bottom: 20px !important; line-height: 1.4 !important; display: block !important; }
#home-growth .growth-content p { text-align: left !important; margin-bottom: 30px !important; font-size: 16px !important; color: #555 !important; line-height: 1.7 !important;}
#home-growth .growth-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#home-growth .growth-list li { display: flex !important; align-items: flex-start !important; gap: 15px !important; margin-bottom: 20px !important; text-align: left !important; color: #555 !important; font-size: 16px !important;}
#home-growth .check-icon { background: var(--theme-brown, #B6642C) !important; color: #fff !important; width: 25px !important; height: 25px !important; min-width: 25px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; font-size: 12px !important; margin-top: 3px !important; }
#home-growth .growth-stats { flex: 1 !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 25px !important; }
#home-growth .stat-box { background: #fff !important; padding: 40px 20px !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; text-align: center !important; border: 1px solid #f0f0f0 !important; transition: all 0.3s ease !important; }
#home-growth .stat-box:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(182, 100, 44, 0.15) !important; border-color: rgba(182, 100, 44, 0.2) !important; }
#home-growth .stat-box h3 { font-size: 50px !important; color: var(--theme-brown, #B6642C) !important; margin-bottom: 5px !important; font-weight: 900 !important; font-family: var(--font-heading, 'Nunito', sans-serif) !important; }
#home-growth .stat-box h3 span { color: #19191A !important; font-size: 30px !important; }
#home-growth .stat-box p { font-size: 16px !important; font-weight: 700 !important; color: #19191A !important; margin: 0 !important; text-align: center !important; }

/* --- Testimonials --- */
#home-testimonials { background-color: var(--light-bg, #f9f9f9) !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; text-align: center !important;}
#home-testimonials .floating-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: radial-gradient(circle at center, rgba(182, 100, 44, 0.05) 0%, transparent 60%) !important; z-index: 0 !important; }

/* Floating FontAwesome Icons */
#home-testimonials .floating-logo { 
    position: absolute !important; 
    background: #fff !important; 
    border-radius: 50% !important; 
    width: 70px !important; 
    height: 70px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; 
    z-index: 1 !important; 
    animation: float 6s ease-in-out infinite !important; 
}
#home-testimonials .fl-1 { top: 15% !important; left: 10% !important; animation-delay: 0s !important; }
#home-testimonials .fl-2 { top: 40% !important; left: 20% !important; animation-delay: 1s !important; }
#home-testimonials .fl-3 { bottom: 20% !important; left: 15% !important; animation-delay: 2s !important; }
#home-testimonials .fl-4 { top: 20% !important; right: 15% !important; animation-delay: 3s !important; }

#home-testimonials .testi-center { max-width: 800px !important; margin: 0 auto !important; background: #ffffff !important; padding: 50px !important; border-radius: 15px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important; position: relative !important; z-index: 10 !important; border-top: 4px solid var(--theme-brown, #B6642C) !important; text-align: center !important; }
#home-testimonials .testi-quote-icon { font-size: 40px !important; color: var(--theme-brown, #B6642C) !important; opacity: 0.3 !important; margin-bottom: 20px !important; text-align: center !important;}
#home-testimonials .testimonial-slide { display: none !important; animation: fadeEffect 0.6s !important; }
#home-testimonials .testimonial-slide.active { display: block !important; }
@keyframes fadeEffect { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#home-testimonials .testi-text { font-size: 20px !important; color: #19191A !important; margin-bottom: 30px !important; font-weight: 500 !important; font-style: italic !important; line-height: 1.6 !important; text-align: center !important; }
#home-testimonials .testi-author { display: flex !important; align-items: center !important; justify-content: center !important; gap: 20px !important; }
#home-testimonials .testi-info { text-align: left !important; border-left: 2px solid #eee !important; padding-left: 20px !important; }
#home-testimonials .testi-info h5 { font-size: 18px !important; margin-bottom: 2px !important; font-family: var(--font-heading, 'Nunito', sans-serif) !important; color: #19191A !important;}
#home-testimonials .testi-info p { font-size: 14px !important; color: #555 !important; margin:0 !important; text-align:left !important;}
#home-testimonials .testi-dots { margin-top: 30px !important; display: flex !important; justify-content: center !important; gap: 8px !important; }
#home-testimonials .dot { display: inline-block !important; width: 12px !important; height: 12px !important; background: #ddd !important; border-radius: 50% !important; cursor: pointer !important; transition: all 0.3s ease !important; }
#home-testimonials .dot.active { background: var(--theme-brown, #B6642C) !important; transform: scale(1.3) !important; }

/* --- Clients Interactive Text Marquee --- */
#home-clients { background: #ffffff !important; text-align: center !important; border-bottom: 1px solid #f0f0f0 !important; }
#home-clients .client-marquee-wrapper { overflow: hidden !important; padding: 30px 0 !important; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%) !important; position: relative !important; }
#home-clients .client-marquee { display: flex !important; width: max-content !important; animation: marquee 30s linear infinite !important; align-items: center !important; }

/* Interactive Text Formatting */
#home-clients .client-name { 
    font-size: 32px !important; 
    font-weight: 800 !important; 
    font-family: var(--font-heading, 'Nunito', sans-serif) !important; 
    color: #cccccc !important; 
    margin: 0 50px !important; 
    transition: all 0.3s ease !important; 
    cursor: default !important;
    white-space: nowrap !important;
}
#home-clients .client-name:hover { 
    color: var(--theme-brown, #B6642C) !important; 
    transform: scale(1.15) !important; 
    text-shadow: 0 10px 20px rgba(182, 100, 44, 0.2) !important; 
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* --- Full Feature Blog Card Integration (Strictly Matches image_30be81.jpg) --- */


/* --- Optimized Blog Grid for Screenshot Match --- */
#home-blog { 
    background: #ffffff !important; /* Matches reference background */
    padding: 80px 0 !important; 
}

#home-blog .blog-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 30px !important; 
    max-width: 1200px !important;
    margin: 0 auto !important;
}

#home-blog .blog-card { 
    background: #fff !important; 
    border-radius: 8px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    transition: all 0.3s ease !important; 
    border: 1px solid #eee !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; /* Subtle shadow */
    overflow: hidden !important;
}

#home-blog .blog-card-image { 
    margin-bottom: 20px !important; 
    overflow: hidden !important; 
    width: 100% !important; 
    aspect-ratio: 16 / 10 !important; 
}

#home-blog .blog-card-image img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; 
}

/* Card Content Spacing */
#home-blog .blog-card-content { 
    padding: 0 20px 20px 20px !important; 
    text-align: left !important; 
    display: flex !important; 
    flex-direction: column !important; 
    flex-grow: 1 !important;
}

#home-blog .blog-card h2 { 
    font-family: var(--font-heading, 'Nunito', sans-serif) !important; 
    font-size: 18px !important; /* Adjusted to match reference size */
    font-weight: 800 !important; 
    margin-bottom: 12px !important; 
    line-height: 1.4 !important; 
    color: #111 !important;
}

#home-blog .blog-meta { 
    font-size: 13px !important; 
    color: #666 !important; 
    margin-bottom: 15px !important; 
    font-family: var(--font-body, 'Roboto', sans-serif) !important; 
}

#home-blog .blog-card-footer { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    margin-top: auto !important; /* Ensures footer sits at bottom of card */
}

#home-blog .read-more { 
    color: #B6642C !important; /* Your brand brown */
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    font-size: 13px !important; 
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}

#home-blog .share-wrapper { 
    display: flex !important; 
    align-items: center !important; 
    gap: 5px !important; 
    color: #888 !important; 
    font-size: 13px !important;
}










#home-blog .blog-card h2 a:hover { 
    color: var(--theme-brown, #B6642C) !important; 
}

#home-blog .blog-meta { 
    font-size: 13px !important; 
    color: #777 !important; 
    margin-bottom: 25px !important; 
    font-family: var(--font-body, 'Roboto', sans-serif) !important; 
    text-align: left !important; 
    flex-grow: 1 !important; /* Pushes footer down */
}

#home-blog .blog-card-footer { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    padding-top: 15px !important; 
    border-top: 1px solid #f0f0f0 !important; 
}
#home-blog .read-more { 
    color: var(--theme-brown, #B6642C) !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    font-size: 13px !important; 
    transition: opacity 0.3s !important; 
    text-decoration: none !important;
}
#home-blog .read-more:hover { 
    opacity: 0.8 !important; 
}

#home-blog .share-wrapper { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    color: #aaa !important; 
    font-size: 14px !important;
}
#home-blog .share-wrapper i { 
    cursor: pointer !important; 
    transition: color 0.3s ease !important;
}
#home-blog .share-wrapper i:hover { 
    color: var(--theme-brown, #B6642C) !important; 
}
#home-blog .share-count { 
    font-weight: 600 !important; 
    color: #444 !important; 
    margin-left: 2px !important;
}


/* --- Contact Section --- */
#home-contact { background: #ffffff !important; }
#home-contact .contact-inner { display: flex !important; align-items: center !important; gap: 60px !important; }
#home-contact .contact-image { flex: 1 !important; position: relative !important; }
#home-contact .contact-blob { width: 100% !important; height: 550px !important; background: #5d4a3d !important; border-radius: 40% 60% 50% 50% / 50% 50% 60% 40% !important; overflow: hidden !important; position: relative !important; z-index: 2 !important; }
#home-contact .contact-bg-shape { position: absolute !important; top: -20px !important; left: 20px !important; width: 100% !important; height: 100% !important; background: var(--theme-brown, #B6642C) !important; border-radius: 50% 50% 30% 70% / 50% 40% 60% 50% !important; z-index: 1 !important; }
#home-contact .contact-blob img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#home-contact .contact-form-wrap { flex: 1 !important; text-align: left !important;}
#home-contact .contact-form-wrap h2 { font-size: 38px !important; margin-bottom: 15px !important; text-align: left !important;}
#home-contact .contact-form-wrap p { color: #555 !important; margin-bottom: 30px !important; font-size: 16px !important; text-align:left !important;}

#home-contact .form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; width: 100% !important; }
#home-contact .form-group.full { grid-column: span 2 !important; }
#home-contact .form-group input, #home-contact .form-group textarea { 
    width: 100% !important; padding: 15px !important; border: 1px solid #e0e0e0 !important; background: #fafafa !important; border-radius: 6px !important; 
    font-family: var(--font-body, 'Roboto', sans-serif) !important; font-size: 15px !important; outline: none !important; transition: all 0.3s ease !important; box-sizing: border-box !important;
}
#home-contact .form-group input:focus, #home-contact .form-group textarea:focus { border-color: var(--theme-brown, #B6642C) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(182, 100, 44, 0.1) !important; }
#home-contact .form-group textarea { height: 120px !important; resize: vertical !important; }

/* Submit Button Centered */
#home-contact .submit-wrapper {
    display: flex !important;
    justify-content: center !important; 
    width: 100% !important;
}
#home-contact .btn-submit { 
    width: auto !important; 
    padding: 10px 30px !important; 
    font-size: 14px !important; 
    display: inline-flex !important; 
    justify-content: center !important;
    align-items: center !important;
    border-radius: 5px !important;
    border: none !important;
    margin-top: 10px !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (Fixes Logo & Hamburger Layout Issues)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Critical Fix: Ensure Logo & Hamburger sit perfectly on the same line */
    #header.home-header .nav-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    #header.home-header .logo {
        flex-shrink: 0 !important; /* Prevent Logo from squishing */
    }
    
    #header.home-header .logo img {
        max-height: 40px !important; /* Cap height to prevent wrapping */
        width: auto !important;
    }
    
    #header.home-header .fallback-logo {
        font-size: 24px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    #header.home-header .mobile-menu-btn {
        display: block !important;
        flex-shrink: 0 !important;
    }

    #home-main #home-hero { padding: 150px 15px 80px !important; } 
    #home-hero .hero-inner, #home-about .about-inner, #home-growth .growth-inner, #home-contact .contact-inner { flex-direction: column !important; text-align: center !important; gap: 40px !important; }
    #home-hero .hero-content, #home-hero .hero-image, #home-about .about-image, #home-about .about-content, #home-growth .growth-content, #home-growth .growth-stats, #home-contact .contact-image, #home-contact .contact-form-wrap { width: 100% !important; padding-right: 0 !important; }
    #home-hero .hero-content p, #home-about .about-content p, #home-growth .growth-content p, #home-contact .contact-form-wrap p { text-align: center !important; margin: 0 auto 30px auto !important;}
    #home-hero .hero-content h1, #home-about .about-content h2, #home-growth .growth-content h2, #home-contact .contact-form-wrap h2 { text-align: center !important;}
    #home-hero .hero-contact { justify-content: center !important; }
    #home-services .services-grid, #home-blog .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #home-contact .submit-wrapper { justify-content: center !important; }
}

@media screen and (max-width: 768px) {
    #home-main section { padding: 60px 0 !important; }
    #home-main #home-hero { padding: 130px 15px 60px !important; } 
    #home-main .section-header h2 { font-size: 28px !important; line-height: 1.3 !important; }
    #home-hero .hero-content h1 { font-size: 38px !important; line-height: 1.2 !important; }
    
    #home-services .services-grid, #home-blog .blog-grid, #home-growth .growth-stats { grid-template-columns: 1fr !important; gap: 30px !important; }
    
    #home-contact .form-grid { grid-template-columns: 1fr !important; }
    #home-contact .form-group.full { grid-column: span 1 !important; }
    #home-contact .form-group input, #home-contact .form-group textarea { width: 100% !important; }
    
    #home-contact .submit-wrapper { justify-content: center !important; }
    #home-contact .btn-submit { 
        width: 100% !important; 
        max-width: 250px !important; 
        display: flex !important; 
        margin: 0 auto !important; 
    } 
    
    #home-clients .client-name {
        font-size: 24px !important;
        margin: 0 30px !important;
    }
}
























/* ==========================================================================
   NEW HOME LAYOUT — nh- prefixed (index.html redesign)
   ========================================================================== */

/* --- Hero --- */
#home-hero {
    padding: 0 !important;
    background: #fcfbfa !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: calc(100vh - 68px) !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 68px !important;
}

.nh-hero-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 60px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

.nh-hero-text {
    flex: 1 !important;
    max-width: 600px !important;
}

.nh-hero-text h1 {
    font-size: clamp(38px, 5vw, 72px) !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    line-height: 1.05 !important;
    margin-bottom: 24px !important;
    color: #141414 !important;
    font-family: var(--font-heading) !important;
}

.nh-hero-text p {
    font-size: 18px !important;
    color: #6b6a68 !important;
    margin-bottom: 36px !important;
    max-width: 500px !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

.nh-hero-form {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #d4d2cd !important;
    border-radius: 10px !important;
    padding: 6px !important;
    max-width: 460px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

.nh-hero-form input {
    border: none !important;
    flex-grow: 1 !important;
    font-size: 15px !important;
    padding: 0 16px !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--font-body) !important;
}

.nh-hero-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--theme-brown) !important;
    font-family: var(--font-heading) !important;
    transition: opacity 0.2s !important;
}

.nh-hero-link:hover { opacity: 0.75 !important; }

.nh-play-btn {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid var(--theme-brown) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    color: var(--theme-brown) !important;
}

.nh-hero-visual {
    flex: 1 !important;
    position: relative !important;
    min-height: 500px !important;
}

/* --- Services Grid (3-col card layout) --- */
#home-services { background: #ffffff !important; }

.nh-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    margin-top: 48px !important;
}

.nh-service-card {
    background: #fcfbfa !important;
    border: 1px solid #eae8e5 !important;
    border-radius: 14px !important;
    padding: 36px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
    position: relative !important;
    overflow: hidden !important;
}

.nh-service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 32px rgba(182,100,44,0.12) !important;
    border-color: var(--theme-brown) !important;
}

.nh-svc-icon {
    font-size: 36px !important;
    color: var(--theme-brown) !important;
    margin-bottom: 20px !important;
    transition: transform 0.2s !important;
}

.nh-service-card:hover .nh-svc-icon { transform: scale(1.1) !important; }

.nh-service-card h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #141414 !important;
    margin-bottom: 10px !important;
    font-family: var(--font-heading) !important;
}

.nh-service-card p {
    font-size: 14px !important;
    color: #6b6a68 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
    text-align: left !important;
}

.nh-svc-link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--theme-brown) !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* --- About Feature Row --- */
#home-about { padding: 100px 0 !important; }
.nh-section-light { background: #f7f6f5 !important; }

.nh-feature-row {
    display: flex !important;
    align-items: center !important;
    gap: 80px !important;
}

.nh-feature-visual {
    flex: 1 !important;
    position: relative !important;
}

.nh-feature-text {
    flex: 1.2 !important;
}

.nh-feature-text h2 {
    font-size: clamp(28px, 3.5vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    color: #141414 !important;
    font-family: var(--font-heading) !important;
}

.nh-feature-text p {
    font-size: 16px !important;
    color: #6b6a68 !important;
    line-height: 1.8 !important;
    text-align: left !important;
}

/* --- Stats Grid --- */
#home-growth { background: #ffffff !important; }

.nh-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-top: 48px !important;
}

.nh-stat-card {
    background: #fcfbfa !important;
    border: 1px solid #eae8e5 !important;
    border-radius: 14px !important;
    padding: 36px 24px !important;
    text-align: left !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.nh-stat-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 32px rgba(182,100,44,0.1) !important;
}

.nh-stat-number {
    font-size: 52px !important;
    font-weight: 900 !important;
    color: var(--theme-brown) !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    font-family: var(--font-heading) !important;
}

.nh-stat-label {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #141414 !important;
    margin-bottom: 12px !important;
    font-family: var(--font-heading) !important;
}

.nh-stat-card p {
    font-size: 13px !important;
    color: #6b6a68 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* --- Contact Section --- */
#home-contact { background: #fcfbfa !important; }

.nh-contact-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 80px !important;
}

.nh-contact-text {
    flex: 1 !important;
    padding-top: 20px !important;
}

.nh-contact-text h2 {
    font-size: clamp(28px, 3.5vw, 40px) !important;
    font-weight: 800 !important;
    color: #141414 !important;
    margin-bottom: 16px !important;
    font-family: var(--font-heading) !important;
}

.nh-contact-text p {
    font-size: 16px !important;
    color: #6b6a68 !important;
    margin-bottom: 32px !important;
    text-align: left !important;
}

.nh-contact-info { display: flex !important; flex-direction: column !important; gap: 16px !important; }

.nh-ci-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 16px !important;
    color: #141414 !important;
    font-weight: 600 !important;
    font-family: var(--font-heading) !important;
}

.nh-ci-row i {
    width: 40px !important;
    height: 40px !important;
    background: rgba(182,100,44,0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--theme-brown) !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.nh-contact-form {
    flex: 1.2 !important;
    background: #ffffff !important;
    border: 1px solid #eae8e5 !important;
    border-radius: 16px !important;
    padding: 48px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.05) !important;
}

/* ==========================================================================
   NEW HOME LAYOUT — RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .nh-hero-inner { flex-direction: column !important; text-align: center !important; padding-top: 40px !important; }
    .nh-hero-text { max-width: 100% !important; }
    .nh-hero-text p { margin: 0 auto 36px !important; }
    .nh-hero-form { margin: 0 auto 32px !important; }
    .nh-hero-link { justify-content: center !important; }
    .nh-hero-visual { width: 100% !important; min-height: 350px !important; }

    .nh-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .nh-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    .nh-feature-row { flex-direction: column !important; gap: 40px !important; }
    .nh-contact-inner { flex-direction: column !important; gap: 40px !important; }
    .nh-contact-form { padding: 32px !important; width: 100% !important; }
}

@media (max-width: 768px) {
    #home-hero { min-height: auto !important; padding: 40px 0 !important; }
    .nh-hero-text h1 { letter-spacing: -1px !important; }
    .nh-hero-form { flex-direction: column !important; border-radius: 10px !important; padding: 12px !important; gap: 10px !important; }
    .nh-hero-form input { padding: 10px !important; width: 100% !important; }

    .nh-services-grid { grid-template-columns: 1fr !important; }
    .nh-stats-grid { grid-template-columns: 1fr 1fr !important; }
    .nh-contact-form { padding: 24px !important; }
}

@media (max-width: 480px) {
    .nh-stats-grid { grid-template-columns: 1fr !important; }
}



/* ==========================================================================
   1. FIX FOR "KNOW MORE" / ALL BUTTONS (Match Image 2)
   ========================================================================== */
.btn-discover, 
.btn-quote, 
.btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #C06126 !important; /* Solid Brand Brown */
    background-image: none !important; /* Remove any old gradients */
    color: #ffffff !important; /* Force white text */
    font-family: var(--font-heading, 'Nunito', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 32px !important; /* Correct padding to stop squishing */
    border-radius: 6px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.btn-discover:hover, 
.btn-quote:hover, 
.btn-submit:hover {
    opacity: 0.9 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   2. FIX FOR HERO EMAIL FORM (Match Image 3)
   ========================================================================== */
/* The outer white container (Pill shape) */
.nh-hero-form { 
    display: flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 6px !important; /* Creates the white space around the button */
    max-width: 500px !important; /* Width matching the reference */
    width: 100% !important;
    margin-bottom: 32px !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; /* Subtle depth */
}

/* The text input field */
.nh-hero-form input {
    border: none !important;
    flex-grow: 1 !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
    outline: none !important;
    background: transparent !important;
    color: #141414 !important;
    font-family: var(--font-body, 'Roboto', sans-serif) !important;
    height: auto !important;
    box-shadow: none !important;
}

.nh-hero-form input::placeholder {
    color: #888888 !important;
}

/* The inner "GET STARTED" button */
.nh-hero-form button, 
.nh-hero-form .btn-quote {
    background: #C06126 !important; 
    color: #ffffff !important;
    font-family: var(--font-heading, 'Nunito', sans-serif) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 0 28px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important; 
    height: auto !important;
    box-shadow: none !important;
    transform: none !important;
}

.nh-hero-form button:hover, 
.nh-hero-form .btn-quote:hover {
    opacity: 0.9 !important;
    transform: none !important; /* Prevents button from jumping outside the pill */
}

/* Fix for the Play Button & Text Alignment below the form */
.nh-hero-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.nh-play-btn {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    color: #ffffff !important;
    padding-left: 2px !important; /* Visually centers the play triangle */
}


/* ==========================================================================
   EXACT FIX FOR HERO EMAIL FORM & BUTTON (Match Target Image)
   ========================================================================== */

/* 1. The main white pill container */
.nh-hero-form { 
    display: flex !important;
    align-items: stretch !important; /* Critical: Forces button to stretch vertically */
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 6px !important; /* Creates the exact uniform white border around the button */
    max-width: 500px !important;
    width: 100% !important;
    margin-bottom: 32px !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    height: 64px !important; /* Explicit height makes it chunky like the reference */
    box-sizing: border-box !important;
}

/* 2. The text input field */
.nh-hero-form input {
    border: none !important;
    flex-grow: 1 !important;
    font-size: 16px !important;
    padding: 0 20px !important; /* Horizontal padding only */
    outline: none !important;
    background: transparent !important;
    color: #141414 !important;
    font-family: var(--font-body, 'Roboto', sans-serif) !important;
    box-shadow: none !important;
    height: 100% !important; /* Fill container height */
}

.nh-hero-form input::placeholder {
    color: #888888 !important;
}

/* 3. The "GET STARTED" Button */
.nh-hero-form button, 
.nh-hero-form .btn-quote {
    background: #C06126 !important; 
    color: #ffffff !important;
    font-family: var(--font-heading, 'Nunito', sans-serif) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    padding: 0 32px !important; /* Wide side padding */
    border-radius: 6px !important; /* Inner radius slightly smaller than the 8px container */
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important; 
    height: 100% !important; /* Fill the exact height minus the 6px container padding */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: opacity 0.3s ease !important;
}

.nh-hero-form button:hover, 
.nh-hero-form .btn-quote:hover {
    opacity: 0.9 !important;
}