/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 4.0
*/

@import url('https://fonts.googleapis.com/css2?family=Volkhov:wght@400;700&display=swap');

/**
 * ==========================================================================
 * TABLE OF CONTENTS
 * ==========================================================================
 *
 * 0.  FOUNDATIONS
 *     0.1  Fonts & @font-face .................. line ~11
 *     0.2  CSS Custom Properties ............... line ~45
 *     0.3  Global Font Reset ................... line ~58
 *
 * 1.  GLOBAL / SHARED COMPONENTS
 *     1.1  Buttons ............................. line ~77
 *     1.2  Slider dots (pill shape) ............ line ~435
 *     1.3  Green accent text ................... line ~470
 *
 * 2.  HEADER
 *     2.1  Header bar & nav .................... line ~486
 *
 * 3.  BLOG
 *     3.1  Blog layout ......................... line ~580
 *     3.2  Blog filter dropdown ................ line ~700
 *     3.3  Table of Contents (Sticky) .......... line ~981
 *
 * 4.  HOMEPAGE SECTIONS (in visual order)
 *     4.1  Hero Banner ......................... line ~2476
 *     4.2  Focus Blocks ........................ line ~2622
 *     4.3  Solutions ........................... line ~2750
 *     4.4  Digital Ecosystem ................... line ~2850
 *     4.5  Statistics .......................... line ~2930
 *     4.6  Projects (Tabs) ..................... line ~3180
 *     4.7  Consultation Form ................... line ~3322
 *     4.8  Partners & Clients .................. line ~3461
 *     4.9  Farmer Stories (Blog cards) ......... line ~3493
 *     4.10 CTA Banner .......................... line ~3537
 *     4.11 Testimonial / Nhận xét .............. line ~3557
 *
 * 5.  RESPONSIVE (Homepage) .................... line ~3600
 *
 * 6.  HOMEPAGE SECONDARY STYLES
 *     6.1  Blog card overlays .................. line ~3760
 *     6.2  Partners grid ....................... line ~3875
 *     6.3  Testimonial (extended) .............. line ~4010
 *
 * 7.  FOOTER .................................. line ~4105
 *
 * 8.  COPYRIGHT BAR ........................... line ~4155
 *
 * ==========================================================================
 */

/*************** ADD CUSTOM CSS HERE.   ***************/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: 'UTM Avo';
    src: url('assets/fonts/utm-avo/UTM Avo.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UTM Avo';
    src: url('assets/fonts/utm-avo/UTM AvoBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UTM Avo';
    src: url('assets/fonts/utm-avo/UTM AvoItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'UTM Avo';
    src: url('assets/fonts/utm-avo/UTM AvoBold_Italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --cp-dark: #003224;
    --cp-green: #00B54B;
    --cp-blue: #00A9E0;
    --cp-light-green: #8dc63f;
    --cp-white: #ffffff;
    --cp-text: #333333;
    --cp-grey: #777;
    --cp-border: #e5e5e5;
    --cp-radius: 12px;
    --xc-font: 'UTM Avo', 'Roboto', sans-serif;
}

/* ── Global Font: UTM Avo for text elements ── */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
span,
label,
button,
input,
textarea,
select,
td,
th,
.button,
.header-nav .nav > li > a,
.header-nav-main .nav-top-link,
.nav-dropdown li a,
.mobile-nav a,
#main-menu a {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
}

.fa:before,
.fas:before,
.far:before,
.fab:before,
.fa,
.fas,
.far,
.fab {
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
}

#wpadminbar,
#wpadminbar * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* ===================================================
   ENSURE WP ADMIN BAR ALWAYS VISIBLE
   =================================================== */
body.admin-bar #wpadminbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 99999 !important;
}

body.admin-bar {
    margin-top: 32px !important;
}

body.admin-bar .header-wrapper {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        margin-top: 46px !important;
    }

    body.admin-bar .header-wrapper {
        top: 46px !important;
    }
}

/* ===================================================
   HEADER — cropin.com style overrides
   =================================================== */

/* ── Top Bar ── */
.header-top {
    background: #214336 !important;
}

.header-top .flex-col {
    color: #fff !important;
}

.header-top a {
    color: #fff !important;
}

/* ── Main Header ── */
.header-main {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Menu items: sentence case, proper font */
.header-nav .nav>li>a,
.header-nav .nav>li>a>span,
.header-main .nav>li>a,
.header-main .nav>li>a>span,
.header .nav>li>a,
.header .nav>li>a>span {
    text-transform: none !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    letter-spacing: 0 !important;
}

.header-nav .nav>li>a:hover,
.header-main .nav>li>a:hover {
    color: #00B54B !important;
}

/* ── Search icon — green circle ── */
/* Target Flatsome's: li.header-search > a.nav-top-link > i.icon-search */
li.header-search>a.nav-top-link {
    width: 42px !important;
    height: 42px !important;
    background: #00A859 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    margin-right: 10px !important;
    transition: background 0.25s ease !important;
    padding: 0 !important;
}

li.header-search>a.nav-top-link:hover {
    background: #008a47 !important;
}

li.header-search>a.nav-top-link .icon-search {
    color: #fff !important;
    font-size: 18px !important;
}

/* ── Language Switcher — [xc_language_switch] shortcode ── */
.xc-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 24px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    white-space: nowrap;
}

.xc-lang-switch:hover {
    border-color: #00A859;
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.08);
    text-decoration: none;
    color: #333;
}

.xc-lang-switch__globe {
    width: 22px;
    height: 22px;
    fill: #00A859;
    flex-shrink: 0;
}

.xc-lang-switch__label {
    font-weight: 600;
    color: #333;
}

.xc-lang-switch__arrow {
    width: 10px;
    height: 10px;
    fill: #666;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.xc-lang-switch:hover .xc-lang-switch__arrow {
    transform: rotate(180deg);
}

/* Dropdown menu */
.xc-lang-switch__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    z-index: 9999;
    overflow: hidden;
}

.xc-lang-switch:hover .xc-lang-switch__dropdown,
.xc-lang-switch.xc-lang-switch--open .xc-lang-switch__dropdown {
    display: block;
}

.xc-lang-switch__dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}

.xc-lang-switch__dropdown a:hover {
    background: #f0f9f4;
    color: #00A859;
}

.xc-lang-switch__dropdown a.xc-lang-switch__active {
    font-weight: 600;
    color: #00A859;
}

.xc-lang-switch__flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

/* Hide default WPML/Polylang language elements if present */
.header-main .wpml-ls,
.header-main .is-language-switcher {
    display: none !important;
}

/* ===================================================
   BLOG ARCHIVE — cropin.com/blogs/ design
   Scoped to: .xc-blogs-hero, .xc-blogs-featured, .xc-blogs-all
   Uses Flatsome section/row/col HTML structure
   =================================================== */

/* ── Reset: prevent Flatsome defaults from conflicting ── */
.xc-blogs-hero,
.xc-blogs-featured,
.xc-blogs-all {
    margin: 0;
    padding: 0;
}

/* Hide default page title on blog pages */
body.home .page-title-inner,
body.blog .page-title-inner {
    display: none !important;
}

/* ── HERO SECTION ── */
.xc-blogs-hero {
    background: radial-gradient(ellipse at 30% 50%, #004d35 0%, #003324 50%, #00261a 100%);
    position: relative;
    overflow: hidden;
}

/* Dark bottom divider strip (matching cropin.com) */
.xc-blogs-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #1a6b4a 0%, #003324 30%, #001a10 100%);
    z-index: 2;
}

.xc-blogs-hero .section-content {
    padding: 130px 0 160px;
}

.xc-blogs-hero__heading {
    font-family: 'Roboto', sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.15;
    color: #8BC34A;
    margin: 0 0 24px;
}

.xc-blogs-hero__highlight {
    color: #00D4E7;
}

.xc-blogs-hero__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 550px;
}

/* SVG line-art decoration — leaf, notepad, plant/drops matching cropin.com */
.xc-blogs-hero::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 55%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450'%3E%3C!-- Leaf in circle (top-right) --%3E%3Ccircle cx='480' cy='80' r='55' fill='none' stroke='%231a7a56' stroke-width='1.5'/%3E%3Cpath d='M480 45 C460 65 460 95 480 115 C500 95 500 65 480 45Z' fill='none' stroke='%231a7a56' stroke-width='1.5'/%3E%3Cline x1='480' y1='65' x2='480' y2='105' stroke='%231a7a56' stroke-width='1'/%3E%3C!-- Notepad with pencil (center) --%3E%3Crect x='300' y='160' width='80' height='100' rx='6' fill='none' stroke='%231a7a56' stroke-width='1.5'/%3E%3Cline x1='318' y1='185' x2='362' y2='185' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cline x1='318' y1='205' x2='362' y2='205' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cline x1='318' y1='225' x2='348' y2='225' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cpath d='M390 155 L395 175 L375 180 Z' fill='none' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cline x1='390' y1='155' x2='410' y2='135' stroke='%231a7a56' stroke-width='1.2'/%3E%3C!-- Leaf drops (bottom area) --%3E%3Cpath d='M200 360 C190 340 210 320 220 340 C230 360 210 380 200 360Z' fill='none' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cpath d='M260 390 C250 370 270 350 280 370 C290 390 270 410 260 390Z' fill='none' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cpath d='M350 380 C345 370 355 360 360 370 C365 380 355 390 350 380Z' fill='none' stroke='%231a7a56' stroke-width='1'/%3E%3Cpath d='M420 400 C415 390 425 380 430 390 C435 400 425 410 420 400Z' fill='none' stroke='%231a7a56' stroke-width='1'/%3E%3C!-- Plant stems at bottom --%3E%3Cpath d='M150 420 Q170 380 190 400 Q210 420 230 380' fill='none' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cpath d='M300 430 Q320 400 340 420 Q360 440 380 400' fill='none' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cpath d='M450 420 Q470 390 490 410' fill='none' stroke='%231a7a56' stroke-width='1'/%3E%3C!-- Circle with plus (bottom-right) --%3E%3Ccircle cx='540' cy='300' r='40' fill='none' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cline x1='540' y1='275' x2='540' y2='325' stroke='%231a7a56' stroke-width='1.2'/%3E%3Cline x1='515' y1='300' x2='565' y2='300' stroke='%231a7a56' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
}

/* ── FEATURED BLOGS SECTION ── */
.xc-blogs-featured {
    background: #f0f5f3;
}

.xc-blogs-featured .section-content {
    padding: 60px 0 80px;
}

/* Header row with title + nav arrows — has full-width border-bottom */
.xc-blogs-featured .row-collapse.align-middle {
    padding-bottom: 20px;
    border-bottom: 1px solid #d5ddd9;
    margin-bottom: 30px;
}

@media (max-width: 549px) {
    .xc-blogs-featured .row-collapse.align-middle {
        padding-left: 15px !important;
        padding-right: 15px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .xc-blogs-featured .row-collapse.align-middle > .col {
        padding: 0 !important;
    }

    .xc-blogs-featured__title {
        font-size: 20px !important;
    }
}

.xc-blogs-featured__title {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #003324;
    margin: 0;
    padding: 0;
    border: none;
}

/* Featured cards */
.xc-blogs-featured .box {
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.xc-blogs-featured .box:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Hide date badge on featured */
.xc-blogs-featured .badge {
    display: none !important;
}

.xc-blogs-featured .box-image {
    border-radius: 10px;
    overflow: hidden;
}

.xc-blogs-featured .box-text .box-title {
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.45;
    color: #1a1a2e;
    text-align: left;
    /* Clamp to exactly 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(16px * 1.45 * 3);
    /* 3 lines reserved */
}

.xc-blogs-featured .box-text .is-divider {
    display: none;
}

.xc-blogs-featured .box-text .is-small {
    color: #888;
    font-size: 13px;
}

/* Read more pill button */
.xc-blogs-featured .button {
    background: #2a9d8f !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 7px 18px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* Slider dots */
.xc-blogs-featured .flickity-page-dots {
    margin-top: 20px;
}

.xc-blogs-featured .flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    background: #b8d4cc;
    opacity: 1;
}

.xc-blogs-featured .flickity-page-dots .dot.is-selected {
    background: #2a9d8f;
}

/* Slider circle nav arrows — Flatsome default */
.xc-blogs-featured .flickity-prev-next-button {
    width: 44px;
    height: 44px;
    border: 1.5px solid #333;
    background: transparent;
}

.xc-blogs-featured .flickity-prev-next-button:hover {
    background: #003324;
    border-color: #003324;
}

/* ── ALL BLOGS SECTION ── */
.xc-blogs-all {
    background: #f0f5f3;
}

.xc-blogs-all .section-content {
    padding: 50px 0 60px;
}

.xc-blogs-all__title {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #003324;
    margin: 0;
}

/* Filter dropdowns row */
.xc-blogs-all__filters {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end;
}

.xc-blogs-all__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    border: 1px solid #ccc !important;
    border-radius: 25px !important;
    padding: 10px 42px 10px 20px !important;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    min-width: 180px;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.xc-blogs-all__select:hover {
    border-color: #2a9d8f;
}

.xc-blogs-all__select:focus {
    outline: none;
    border-color: #2a9d8f;
    box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}

/* Blog grid cards */
.xc-blogs-all .box {
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.xc-blogs-all .box:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.xc-blogs-all .box .box-image {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

/* Hide date badge on grid cards */
.xc-blogs-all .badge {
    display: none !important;
}

.xc-blogs-all .box .box-text {
    padding: 20px 20px 18px;
    text-align: left;
}

.xc-blogs-all .box-text .box-title {
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.45;
    color: #1a1a2e;
    text-align: left;
    margin-bottom: 12px;
    /* Clamp to exactly 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(16px * 1.45 * 2);
    /* 2 lines reserved */
}

.xc-blogs-all .box-text .box-title a {
    color: #1a1a2e;
}

.xc-blogs-all .box-text .box-title a:hover {
    color: #2a9d8f;
}

/* Hide excerpt + divider */
.xc-blogs-all .box-text .is-divider {
    display: none;
}

.xc-blogs-all .box-text .from_the_blog_excerpt {
    display: none;
}

/* Pagination */
.xc-blogs-all .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: #2a9d8f;
    background: #dff0ed;
    border: none;
    text-decoration: none;
    transition: all 0.25s ease;
}

.xc-blogs-all .page-numbers:hover {
    background: #c5e5df;
    color: #003324;
}

.xc-blogs-all .page-numbers.current {
    background: #2a9d8f;
    color: #fff;
}

.xc-blogs-all .page-numbers.dots {
    background: transparent;
    color: #888;
}

/* ── Custom Pagination ── */
.xc-blogs-pagination {
    text-align: center;
    padding: 40px 0 20px;
}

.xc-blogs-pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.xc-blogs-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    color: #2a9d8f;
    background: #dff0ed;
    border: none;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}

.xc-blogs-pagination__btn:hover {
    background: #c5e5df;
    color: #003324;
    text-decoration: none;
}

.xc-blogs-pagination__btn--active {
    background: #2a9d8f !important;
    color: #fff !important;
    cursor: default;
}

/* ── Custom Slider Nav Shortcode [xc_slider_nav] ── */
.xc-slider-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.xc-slider-nav__btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    border: 1.5px solid #333 !important;
    background: transparent !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #333 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0 !important;
    margin: 0;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.xc-slider-nav__btn:hover {
    background: #003324 !important;
    border-color: #003324 !important;
    color: #fff !important;
}

/* Hide Flatsome's default slider nav — visually hidden but accessible for JS fallback */
.xc-blogs-featured .flickity-prev-next-button {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none;
}

/* ── Author + Date row (injected via flatsome_blog_post_after) ── */
.xc-blog-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #666;
}

.xc-blog-author__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.xc-blog-author__name {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

.xc-blog-author__sep {
    color: #ccc;
    margin: 0 2px;
}

.xc-blog-author__date {
    color: #888;
    white-space: nowrap;
}

/* ── Responsive ── */
@media screen and (max-width: 849px) {
    .xc-blogs-hero__heading {
        font-size: 30px;
    }

    .xc-blogs-hero .section-content {
        padding: 70px 0 90px;
    }

    .xc-blogs-hero::after {
        display: none;
    }

    .xc-blogs-featured__title {
        font-size: 22px;
    }

    .xc-blogs-all__filters {
        flex-direction: column;
        width: 100%;
    }

    .xc-blogs-all__select {
        width: 100%;
    }

    .xc-blogs-all .row-collapse.align-middle {
        padding-left: 15px !important;
        padding-right: 15px !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .xc-blogs-all .row-collapse.align-middle > .col {
        padding: 0 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .xc-blogs-all .row-collapse.align-middle > .col.text-right {
        text-align: left !important;
    }

    .xc-blogs-all__title {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .xc-blogs-all__filters {
        flex-direction: row !important;
        gap: 8px !important;
    }

    .xc-blogs-all__select {
        flex: 1 !important;
        width: auto !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* ===================================================
   SINGLE POST PAGE
   =================================================== */

/* Flatsome overrides for single post — force full-width on 4K */
body.single-post #wrapper,
body.single-post .page-wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

body.single-post #content>.row {
    max-width: 100% !important;
    width: 100% !important;
}

body.single-post #main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.single-post .page-title-inner,
body.single-post #secondary,
body.single-post .large-3.col {
    display: none !important;
}

body.single-post .large-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

body.single-post .footer-widgets .widget_archive,
body.single-post .footer-widgets .widget_categories {
    display: none !important;
}

.cps-single-wrap {
    margin-top: 80px;
    padding-top: 30px;
    background: var(--cp-white);
}

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

/* --- Title + Share --- */
.cps-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 24px;
}

.cps-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--cp-dark) !important;
    margin: 0 !important;
    text-transform: none !important;
    flex: 1;
}

.cps-share-icons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 8px;
}

.cps-share-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #555 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.cps-share-icons a:hover {
    background: var(--cp-green);
    color: var(--cp-white) !important;
}

.cps-share-icons a svg {
    fill: currentColor;
}

/* --- Author Meta --- */
.cps-author-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.cps-author-meta .cps-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.cps-author-meta .cps-author-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

.cps-author-name {
    font-weight: 600;
    color: var(--cp-green);
}

.cps-meta-sep {
    color: #ccc;
}

.cps-date,
.cps-read-time {
    color: var(--cp-grey);
}

/* --- Featured Image --- */
.cps-featured-img {
    margin-bottom: 40px;
    border-radius: 20px;
    overflow: hidden;
}

.cps-featured-img img {
    width: 100% !important;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* --- Synopsis Highlight Box --- */
.xc-single-post__highlight {
    background: #f0f9f4;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 32px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    border-left: 4px solid #2a9d8f;
}

.xc-single-post__highlight strong {
    color: #005f4b;
    font-weight: 600;
}

/* --- Content Layout --- */
.cps-content-layout {
    display: flex;
    gap: 50px;
    margin-bottom: 50px;
}

/* --- Table of Contents (Sticky) --- */
.cps-toc {
    flex: 0 0 280px;
    width: 280px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.cps-toc h3 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cp-dark) !important;
    margin: 0 0 16px !important;
    text-transform: none !important;
    border-bottom: 2px solid var(--cp-border);
    padding-bottom: 10px;
}

.cps-toc-list a {
    display: block;
    padding: 8px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: var(--cp-text) !important;
    text-decoration: none !important;
    line-height: 1.45;
    border-left: 3px solid transparent;
    padding-left: 12px;
    transition: all 0.3s ease;
}

.cps-toc-list a:hover,
.cps-toc-list a.active {
    color: var(--cp-green) !important;
    border-left-color: var(--cp-green);
}

.cps-toc-list a.toc-sub {
    padding-left: 28px;
    font-size: 12px;
}

/* --- Article Content --- */
.cps-article-content {
    flex: 1;
    min-width: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--cp-text);
}

.cps-article-content h2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--cp-green) !important;
    margin: 40px 0 16px !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

.cps-article-content h3 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--cp-green) !important;
    margin: 30px 0 12px !important;
    text-transform: none !important;
}

.cps-article-content h4 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--cp-dark) !important;
    margin: 24px 0 10px !important;
    text-transform: none !important;
}

.cps-article-content p {
    margin: 0 0 18px;
}

.cps-article-content ul,
.cps-article-content ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.cps-article-content li {
    margin-bottom: 8px;
}

.cps-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
}

.cps-article-content blockquote {
    border-left: 4px solid var(--cp-green);
    padding: 16px 20px;
    margin: 20px 0;
    background: #f8faf5;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #555;
}

.cps-article-content strong {
    font-weight: 700;
    color: var(--cp-dark);
}

.cps-article-content a {
    color: var(--cp-green);
    text-decoration: underline;
}

/* --- CTA Banner --- */
.cps-cta-banner {
    background: linear-gradient(135deg, #003224 0%, #005038 100%);
    border-radius: 16px;
    padding: 55px 50px;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.cps-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.05)"/></svg>');
    pointer-events: none;
}

.cps-cta-inner {
    position: relative;
    z-index: 1;
}

.cps-cta-banner h2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--cp-white) !important;
    margin: 0 0 12px !important;
    text-transform: none !important;
}

.cps-cta-banner p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 24px;
}

.cps-cta-btn {
    display: inline-block;
    background: transparent;
    color: var(--cp-white) !important;
    border: 2px solid var(--cp-white);
    padding: 12px 32px;
    border-radius: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.cps-cta-btn:hover {
    background: var(--cp-white);
    color: var(--cp-dark) !important;
}

/* --- Author Bio --- */
.cps-author-bio {
    margin-bottom: 50px;
}

.cps-author-bio h2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--cp-green) !important;
    margin: 0 0 20px !important;
    text-transform: none !important;
}

.cps-bio-card {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.cps-bio-avatar {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}

.cps-bio-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.cps-bio-info h3 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--cp-dark) !important;
    margin: 0 0 10px !important;
    text-transform: none !important;
}

.cps-bio-info p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--cp-text);
    margin: 0;
}

/* --- Similar Blogs (matches cropin.com original) --- */
.cps-similar-section {
    padding: 50px 0 60px;
    background: var(--cp-white);
}

/* Section heading */
.xc-blogs-similar .xc-blogs-featured__title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 38px !important;
    font-weight: 500 !important;
    color: #134300 !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* Divider under heading */
.xc-similar-divider {
    border-top: 1.8px solid #000;
    margin: 15px 0 25px;
}

/* Hide Flatsome default nav/dots — we use xc-slider-nav */
.xc-blogs-similar .flickity-prev-next-button {
    display: none !important;
}
.xc-blogs-similar .flickity-page-dots {
    display: none !important;
}

/* --- Card --- */
.xc-similar-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid #EBEBEB;
    border-radius: 20px;
    padding: 16px;
    background: #fff;
    height: 100%;
    transition: box-shadow 0.3s ease;
}
.xc-similar-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Card Image — left 50% */
.xc-similar-card__img {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
}
.xc-similar-card__img a {
    display: block;
}
.xc-similar-card__img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
    display: block;
}

/* Card Body — right 50% */
.xc-similar-card__body {
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    padding: 15px 15px 15px 25px;
}

/* Title */
.xc-similar-card__title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.25em !important;
    color: #333 !important;
    margin: 0 0 auto !important;
}
.xc-similar-card__title a {
    color: inherit !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}
.xc-similar-card__title a:hover {
    color: #134300 !important;
}

/* Meta: date + read time */
.xc-similar-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    opacity: 0.6;
    margin-top: 12px;
    margin-bottom: 16px;
}
.xc-similar-card__meta span:not(:last-child)::after {
    content: '·';
    margin-left: 16px;
    opacity: 0.6;
}

/* Read more button */
.xc-similar-card__btn {
    display: inline-block;
    background-color: #134300 !important;
    color: #fff !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    padding: 16px 25px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background-color 0.3s;
    align-self: flex-start;
}
.xc-similar-card__btn:hover {
    background-color: #0a2600 !important;
    color: #fff !important;
}

/* Ensure equal card heights in slider */
.xc-blogs-similar .flickity-slider .col.post-item {
    height: auto;
}
.xc-blogs-similar .col-inner {
    height: 100%;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .xc-blogs-similar .xc-blogs-featured__title {
        font-size: 34px !important;
    }
}

@media (max-width: 767px) {
    .xc-blogs-similar .xc-blogs-featured__title {
        font-size: 24px !important;
    }

    .xc-similar-card {
        flex-direction: column;
        border-radius: 15px;
        padding: 14px;
    }

    .xc-similar-card__img {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .xc-similar-card__img img {
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }

    .xc-similar-card__body {
        width: 100%;
        flex: 0 0 100%;
        padding: 15px 0 0 0;
        gap: 12px;
    }

    .xc-similar-card__title {
        font-size: 18px !important;
    }

    .xc-similar-card__meta {
        font-size: 14px;
    }

    .xc-similar-card__btn {
        font-size: 14px;
    }
}

/* ===================================================
   RESPONSIVE - SINGLE POST
   =================================================== */
@media (max-width: 991px) {
    .cps-title {
        font-size: 28px !important;
    }

    .cps-content-layout {
        flex-direction: column;
    }

    .cps-toc {
        position: static;
        flex: none;
        width: 100%;
        max-height: none;
        margin-bottom: 30px;
        border: 1px solid var(--cp-border);
        border-radius: 8px;
        padding: 16px;
    }

    .cps-bio-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .cps-bio-avatar {
        flex: none;
        width: 120px;
        height: 120px;
    }


}

@media (max-width: 600px) {
    .cps-title {
        font-size: 24px !important;
    }

    .cps-title-row {
        flex-direction: column;
        gap: 16px;
    }

    .cps-share-icons {
        padding-top: 0;
    }

    .cps-author-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cps-featured-img {
        border-radius: 12px;
    }

    .cps-featured-img img {
        border-radius: 12px;
    }

    .cps-cta-banner {
        padding: 35px 20px;
    }


}

/* ==========================================================================
   CASE STUDY — ARCHIVE PAGE
   Following Flatsome SKILL.md: BEM with xc__ prefix, scoped specificity
   ========================================================================== */

/* --- Flatsome layout overrides for CS archive --- */
body.post-type-archive-case_study #main {
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body.post-type-archive-case_study .large-3.col,
body.post-type-archive-case_study #secondary {
    display: none;
}

body.post-type-archive-case_study .large-9 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

body.post-type-archive-case_study .page-title-inner {
    display: none;
}

/* --- Hero Section --- */
.xc__cs-hero {
    background: var(--cp-dark);
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.xc__cs-hero__inner {
    padding: 80px 20px 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 350px;
}

.xc__cs-hero__text {
    max-width: 550px;
    position: relative;
    z-index: 2;
}

.xc__cs-hero__text p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.xc__cs-hero__label {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    display: block;
    margin-bottom: 4px;
}

.xc__cs-hero__title {
    font-family: 'Roboto', sans-serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2;
    color: #4ec3e0;
    margin: 0 0 20px;
}

.xc__cs-hero__art {
    flex: 0 0 400px;
    opacity: 0.8;
}

.xc__cs-hero__art svg {
    width: 100%;
    height: auto;
}

.xc__cs-hero__gradient-bar {
    height: 5px;
    background: linear-gradient(90deg, #8dc63f, #4ec3e0, #00a9e0);
}

/* --- Archive Header (title + filters) --- */
.xc__cs-archive {
    padding: 50px 0 60px;
    background: var(--cp-light, #f5f7f6);
}

.xc__cs-archive__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

.xc__cs-archive__title {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #005f4b;
    margin: 0;
}

.xc__cs-archive__filters {
    display: flex;
    gap: 12px;
}

/* Flatsome overrides select globally — must use !important + parent scope */
.xc__cs-archive__filters select.xc__cs-select {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 40px 10px 16px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 25px !important;
    background: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    min-width: 170px !important;
    height: auto !important;
    line-height: normal !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: border-color 0.3s ease;
    display: inline-block !important;
}

.xc__cs-archive__filters select.xc__cs-select:hover,
.xc__cs-archive__filters select.xc__cs-select:focus {
    border-color: #2a9d8f !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Card overrides (scoped via .xc__cs-archive) --- */
.xc__case-studies .box {
    border-radius: 12px;
    overflow: hidden;
    background: var(--cp-white, #fff);
}

.xc__case-studies .box-image {
    position: relative;
}

.xc__case-studies .box-text {
    padding: 0;
}

.xc__case-studies .box-text-inner {
    padding: 22px 24px 28px;
}

.xc__case-studies .post-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
}

.xc__case-studies .post-title a {
    color: var(--cp-dark, #003224);
}

.xc__case-studies .post-title a:hover {
    color: #2a9d8f;
}

.xc__case-studies .from_the_blog_excerpt {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cp-grey, #666);
    margin: 0 0 18px;
}

/* Tag badge on image */
.xc__cs-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #2a9d8f;
    padding: 5px 14px;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    text-transform: capitalize;
    backdrop-filter: blur(4px);
}

/* Read more button */
.xc__cs-readmore {
    display: inline-block;
    background: var(--cp-green, #7aba59);
    color: #fff;
    padding: 10px 24px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.3s;
}

.xc__cs-readmore:hover {
    background: #69a548;
    color: #fff;
}

/* Placeholder image */
.xc__cs-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    font-size: 48px;
}

.xc__case-studies__empty {
    padding: 60px 0;
}

/* --- Pagination --- */
.xc__cs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 45px;
}

.xc__cs-pagination a,
.xc__cs-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #b5e6e8;
    color: #2a9d8f;
    background: transparent;
}

.xc__cs-pagination a:hover {
    background: #e0f1f5;
}

.xc__cs-pagination span.current {
    background: #2a9d8f;
    border-color: #2a9d8f;
    color: #fff;
}

.xc__cs-pagination .dots {
    border: none;
    color: #999;
}

/* ==========================================================================
   CASE STUDY — SINGLE PAGE
   ========================================================================== */

/* Flatsome layout overrides */
body.single-case_study #main {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

body.single-case_study .large-3.col,
body.single-case_study #secondary {
    display: none;
}

body.single-case_study .large-9 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

body.single-case_study .page-title-inner {
    display: none;
}

/* --- Single Hero --- */
.xc__cs-single-hero {
    background: var(--cp-dark);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
}

.xc__cs-single-hero .container {
    padding-top: 50px;
    padding-bottom: 55px;
}

/* Breadcrumb */
.xc__cs-single-hero__breadcrumb {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
}

.xc__cs-single-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.xc__cs-single-hero__breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.xc__cs-single-hero__breadcrumb span {
    margin: 0 6px;
}

.xc__cs-single-hero__current {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Title */
.xc__cs-single-hero__title {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 18px;
}

/* Meta */
.xc__cs-single-hero__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.xc__cs-single-hero__tag {
    display: inline-block;
    background: rgba(42, 157, 143, 0.2);
    color: #4ec3e0;
    padding: 4px 14px;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.xc__cs-single-hero__date,
.xc__cs-single-hero__reading {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.xc__cs-single-hero__reading::before {
    content: '•';
    margin-right: 16px;
}

/* --- Featured Image --- */
.xc__cs-single-featured {
    margin-top: -20px;
    position: relative;
    z-index: 2;
}

.xc__cs-single-featured img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    display: block;
}

/* --- Content --- */
.xc__cs-single-content {
    padding: 45px 0 30px;
}

.xc__cs-single-content .container {
    max-width: 900px;
}

.xc__cs-single-content__article {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--cp-text, #333);
}

.xc__cs-single-content__article h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 35px 0 16px;
}

.xc__cs-single-content__article h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 28px 0 12px;
}

.xc__cs-single-content__article p {
    margin: 0 0 16px;
}

.xc__cs-single-content__article ul,
.xc__cs-single-content__article ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.xc__cs-single-content__article li {
    margin-bottom: 8px;
}

/* Download button */
.xc__cs-single-download {
    margin: 35px 0 25px;
}

.xc__cs-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2a9d8f;
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.xc__cs-btn-download:hover {
    background: #238b7e;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(42, 157, 143, 0.3);
    color: #fff;
}

/* Share links */
.xc__cs-single-share {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid var(--cp-border, #e5e5e5);
}

.xc__cs-single-share__label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-grey, #666);
}

.xc__cs-single-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    color: var(--cp-grey, #666);
    text-decoration: none;
    transition: all 0.3s ease;
}

.xc__cs-single-share__link:hover {
    background: var(--cp-dark);
    color: #fff;
}

/* --- Related / Similar Cases --- */
.xc__cs-related {
    background: #f8faf9;
    padding: 60px 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.xc__cs-related__title {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 30px;
}

.xc__cs-related .post-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.xc__cs-related__meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.xc__cs-readmore--small {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2a9d8f;
    text-decoration: none;
}

.xc__cs-readmore--small:hover {
    color: #238b7e;
}

.xc__cs-related .box {
    border-radius: 12px;
}

/* ==========================================================================
   RESPONSIVE — Tablet (max-width: 849px) — Flatsome breakpoint
   ========================================================================== */
@media (max-width: 849px) {
    .xc__cs-hero__title {
        font-size: 36px;
    }

    .xc__cs-archive__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .xc__cs-single-hero__title {
        font-size: 28px;
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (max-width: 549px) — Flatsome breakpoint
   ========================================================================== */
@media (max-width: 549px) {
    .xc__cs-hero__inner {
        padding: 45px 15px 40px;
        min-height: auto;
    }

    .xc__cs-hero__title {
        font-size: 28px;
    }

    .xc__cs-hero__label {
        font-size: 22px;
    }

    .xc__cs-archive__filters {
        flex-direction: column;
        width: 100%;
    }

    .xc__cs-select {
        width: 100%;
    }

    .xc__cs-single-hero .container {
        padding-top: 35px;
        padding-bottom: 40px;
    }

    .xc__cs-single-hero__title {
        font-size: 24px;
    }
}



/* ===================================================
   CONNECT PAGE
   =================================================== */

/* --- Hero Section --- */
.xc-connect.section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.xc-connect .col {
    padding-top: 0;
    padding-bottom: 0;
}

.xc-connect h1,
.xc-connect h2,
.xc-connect p {
    color: #ffffff;
}

.xc-connect {
    min-height: 590px;
    display: flex;
    align-items: center;
}

.xc-connect>.section-content {
    width: 100%;
}

.xc-connect>.section-content>.row {
    align-items: center;
}

/* Text Block */
.xc-connect__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 60px 0;
}

.xc-connect__subtitle {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.25em;
    color: #ffffff !important;
    margin: 0 0 5px 0;
}

.xc-connect__heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2em;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
}

.xc-connect__heading span {
    color: #8DC63F !important;
}

.xc-connect__desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #ffffff !important;
    max-width: 83%;
    margin: 0 0 10px 0 !important;
}

/* Buttons */
.xc-connect .button.xc-connect__btn-contact,
.xc-connect .button.xc-connect__btn-talk {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 13px;
    border-radius: 30px !important;
    padding: 18px 25px 16px 25px !important;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: none !important;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

.xc-connect .button.xc-connect__btn-contact {
    background-color: #8DC63F !important;
    color: #ffffff !important;
}

.xc-connect .button.xc-connect__btn-contact:hover {
    background-color: #ffffff !important;
    color: #003324 !important;
    box-shadow: none;
}

.xc-connect .button.xc-connect__btn-talk {
    background-color: #00AED1 !important;
    color: #ffffff !important;
}

.xc-connect .button.xc-connect__btn-talk:hover {
    background-color: #ffffff !important;
    color: #003324 !important;
    box-shadow: none;
}

/* Buttons row */
.xc-connect__btn-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

.xc-connect__btn-row>.col {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

.xc-connect__btn-row>.col:not(:first-child) {
    flex: 1 1 0 !important;
}

.xc-connect__btn-row>.col:not(:first-child) .button {
    width: 100%;
    box-sizing: border-box;
}

.xc-connect__btn-row .col-inner {
    padding: 0 !important;
}

.xc-connect__btn-row>.col:first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* Images */
.xc-connect__img {
    position: relative;
    overflow: visible !important;
}

.xc-connect .xc-connect__img-1 img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
}

.xc-connect .xc-connect__img-2 {
    position: absolute !important;
    bottom: -23px;
    left: -103px;
    z-index: 2;
    width: auto !important;
}

.xc-connect .xc-connect__img-2 img {
    width: 260px;
    border: 6px solid #003324;
    border-radius: 16px;
}

/* --- Connect Responsive — Tablet --- */
@media only screen and (max-width: 64em) {
    .xc-connect {
        min-height: 380px;
    }

    .xc-connect__heading {
        font-size: 30px;
    }

    .xc-connect__desc {
        max-width: 100%;
    }

    .xc-connect .xc-connect__img-2 {
        left: -20px;
        bottom: 29px;
    }

    .xc-connect .xc-connect__img-2 img {
        width: 200px;
    }
}

/* --- Connect Responsive — Mobile --- */
@media only screen and (max-width: 48em) {
    .xc-connect.section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .xc-connect {
        min-height: auto;
    }

    .xc-connect__text {
        padding: 30px 15px;
    }

    .xc-connect__subtitle {
        font-size: 15px;
    }

    .xc-connect__heading {
        font-size: 24px;
    }

    .xc-connect__desc {
        font-size: 15px;
        max-width: 100%;
    }

    .xc-connect__btn-row {
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    .xc-connect .button.xc-connect__btn-contact,
    .xc-connect .button.xc-connect__btn-talk {
        font-size: 14px !important;
        padding: 13px 13px !important;
    }

    .xc-connect .xc-connect__img-2 {
        position: relative !important;
        left: auto;
        bottom: auto;
    }

    .xc-connect .xc-connect__img-2 img {
        width: 100%;
    }
}

/* --- Contact Form Section --- */
.xc-connect-form.section {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}

.xc-connect-form .row {
    gap: 0;
}

/* Left Column */
.xc-connect-form__left {
    padding-right: 46px !important;
}

.xc-connect-form__heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #002613 !important;
    margin-bottom: 12px !important;
}

.xc-connect-form__desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #475569 !important;
    margin-top: -10px;
    margin-bottom: 25px !important;
}

.xc-connect-form__photo img {
    border-radius: 20px !important;
}

/* Right Column — Form Container */
.xc-connect-form .wpcf7 {
    background-color: #ffffff;
    background-image: url('/wp-content/uploads/form-bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
    padding: 37px;
    color: #333;
}

/* Form Labels */
.xc-connect-form .wpcf7 label {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px;
    margin-bottom: 8px;
    display: block;
}

/* Form Fields */
.xc-connect-form .wpcf7 input[type="text"],
.xc-connect-form .wpcf7 input[type="email"],
.xc-connect-form .wpcf7 select,
.xc-connect-form .wpcf7 textarea {
    width: 100%;
    padding: 12px 16px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    font-size: 14px !important;
    color: #d5d5d5 !important;
    transition: border-color 0.3s ease;
    box-shadow: none !important;
    height: auto !important;
}

.xc-connect-form .wpcf7 input[type="text"]:focus,
.xc-connect-form .wpcf7 input[type="email"]:focus,
.xc-connect-form .wpcf7 select:focus,
.xc-connect-form .wpcf7 textarea:focus {
    border-color: #00E6C3 !important;
    outline: none;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

.xc-connect-form .wpcf7 textarea {
    min-height: 100px;
}

/* Form Layout — Side-by-side fields (BEM) */
.xc-contact-form__row {
    display: flex;
    justify-content: space-between;
}

.xc-contact-form__row .xc-contact-form__field {
    width: 49%;
}

.xc-contact-form__field {
    margin-bottom: 14px;
}

.xc-connect-form .wpcf7 select {
    width: 100%;
    padding: 12px 16px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    font-size: 14px !important;
    color: #d5d5d5 !important;
    height: auto !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Submit Button */
.xc-connect-form .wpcf7 input[type="submit"],
.xc-contact-form__submit {
    background-color: #79c25c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 13px 28px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    width: auto;
    margin: 0 !important;
}

.xc-connect-form .wpcf7 input[type="submit"]:hover,
.xc-contact-form__submit:hover {
    background-color: #6aaf4a !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Actions Row */
.xc-contact-form__actions {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 20px;
}

.xc-contact-form__actions .wpcf7-form-control-wrap,
.xc-contact-form__actions p {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-contact-form__actions .wpcf7-spinner {
    display: none;
}

/* Reset Button */
.xc-contact-form__reset {
    background: #ffffff !important;
    border: 2px solid #79c25c !important;
    border-radius: 30px !important;
    color: #79c25c !important;
    padding: 11px 28px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    font-family: 'Roboto', sans-serif !important;
    margin: 0 !important;
    vertical-align: middle;
}

.xc-contact-form__reset:hover {
    background-color: #79c25c !important;
    color: #ffffff !important;
}

/* --- Connect Form Responsive — Tablet --- */
@media only screen and (max-width: 64em) {
    .xc-connect-form.section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .xc-connect-form__left {
        padding-right: 15px !important;
    }

    .xc-connect-form__heading {
        font-size: 28px !important;
    }

    .xc-connect-form .wpcf7 {
        padding: 18px;
    }
}

/* --- Connect Form Responsive — Mobile --- */
@media only screen and (max-width: 48em) {
    .xc-connect-form.section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .xc-connect-form__left {
        padding-right: 15px !important;
        min-height: 58vw;
    }

    .xc-connect-form__heading {
        font-size: 24px !important;
    }

    .xc-connect-form__desc {
        margin-top: 1px;
        font-size: 15px;
    }

    .xc-connect-form__photo img {
        border-radius: 12px !important;
    }

    .xc-connect-form .wpcf7 {
        padding: 10px;
    }

    .xc-contact-form__row {
        display: block;
    }

    .xc-contact-form__row .xc-contact-form__field {
        width: 100%;
    }
}

/* --- Join Us Section --- */
.xc-join-us.section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #ffffff;
}

.xc-join-us__row-bg {
    background-color: #14A3DC2E;
    border-radius: 18px;
    padding: 80px 30px !important;
    position: relative;
    overflow: hidden;
}

.xc-join-us__row-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/uploads/Carto_Maplines-1.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.5;
    pointer-events: none;
    border-radius: 18px;
}

.xc-join-us__heading {
    position: relative;
    z-index: 1;
}

.xc-join-us__heading h2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #333 !important;
    text-align: center;
    margin-bottom: 15px !important;
}

/* Cards */
.xc-join-us__card {
    background-color: #14A3DC;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    height: 100%;
    position: relative;
    z-index: 1;
}

.xc-join-us__card-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.25em !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
}

.xc-join-us__card-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
    min-height: 4.5em;
}

.xc-join-us__card-btn {
    display: inline-block;
    background-color: #ffffff !important;
    color: #14A3DC !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    border-radius: 30px;
    padding: 16px 25px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin-top: auto;
}

.xc-join-us__card-btn:hover {
    background-color: #79c25c !important;
    color: #ffffff !important;
}

/* --- Join Us Responsive — Tablet --- */
@media only screen and (max-width: 64em) {
    .xc-join-us__row-bg {
        padding: 30px 18px !important;
    }

    .xc-join-us__heading h2 {
        font-size: 28px !important;
    }

    .xc-join-us__card {
        padding: 20px 10px;
    }

    .xc-join-us__card-btn {
        font-size: 13px !important;
        padding: 12px 14px;
    }
}

/* --- Join Us Responsive — Mobile --- */
@media only screen and (max-width: 48em) {
    .xc-join-us.section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .xc-join-us__heading h2 {
        font-size: 24px !important;
    }

    .xc-join-us__card-desc {
        font-size: 15px !important;
    }

    .xc-join-us__card-btn {
        font-size: 14px !important;
    }

    .xc-join-us__card {
        margin-bottom: 15px;
    }
}

/* --- Location / Offices Section --- */
.xc-location.section {
    padding-top: 80px;
    padding-bottom: 40px;
}

.xc-location__card.box {
    background-color: #ffffff;
    border: 1px solid #EBEBEB;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xc-location__card .box-image {
    border-radius: 12px;
    overflow: hidden;
}

.xc-location__card .box-image img {
    border-radius: 12px;
    width: 100%;
    height: auto;
}

.xc-location__card .box-text {
    text-align: left;
    padding: 0;
}

.xc-location__card .box-text-inner {
    padding: 0;
}

.xc-location__card-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.25em !important;
    color: #14A3DC !important;
    margin-bottom: 8px !important;
}

.xc-location__card-location {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #555 !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.xc-location__card-location::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%2314A3DC' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-top: 3px;
}

/* --- Location Responsive — Tablet --- */
@media only screen and (max-width: 64em) {
    .xc-location.section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .xc-location__card.box {
        padding: 10px;
    }

    .xc-location__card-title {
        font-size: 18px !important;
        line-height: 1.3em !important;
    }
}

/* --- Location Responsive — Mobile --- */
@media only screen and (max-width: 48em) {
    .xc-location.section {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .xc-location__card.box {
        border-radius: 15px;
        padding: 14px;
    }

    .xc-location__card-title {
        font-size: 18px !important;
    }
}

/* ===================================================
   HOMEPAGE — VIIS Landing Page (from Figma)
   BEM: .xc__home-{section}__{element}--{modifier}
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

/* ── Global helper ── */
.xc__green {
    color: #4cbe9e;
}

.xc__green-light {
    color: #8fc342;
}

/* ── HERO BANNER ── */
.xc__home-hero .xc__home-hero__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-transform: capitalize;
    margin-bottom: 24px;
}

.xc__home-hero .xc__home-hero__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: #fff;
    line-height: 1.64;
    letter-spacing: 0.72px;
    margin-bottom: 40px;
}

.xc__home-hero .xc__home-hero__btn {
    border-radius: 100px !important;
    padding: 12px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background-color: #8FC342 !important;
    border-color: #8FC342 !important;
}

/* Hero slider dots - dash style per Figma */
.xc__home-hero .flickity-page-dots {
    bottom: 30px;
}

.xc__home-hero .flickity-page-dots .dot {
    width: 24px !important;
    height: 8px !important;
    border-radius: 100px !important;
    background: #fff !important;
    margin: 0 4px !important;
    opacity: 0.3 !important;
    box-shadow: none !important;
    border: none !important;
}

.xc__home-hero .flickity-page-dots .dot.is-selected {
    width: 40px !important;
    height: 8px !important;
    background: #4CBE9E !important;
    opacity: 1 !important;
}

/* Hero slider arrows - closer to content */
.xc__home-hero .flickity-prev-next-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #fff;
}

.xc__home-hero .flickity-prev-next-button.previous {
    left: 5%;
}

.xc__home-hero .flickity-prev-next-button.next {
    right: 5%;
}

.xc__home-hero .flickity-prev-next-button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ── WE FOCUS ── */
.xc__home-focus__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #2a2b2c;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 8px;
}

.xc__home-focus__green {
    color: #4cbe9e;
}

.xc__home-focus__desc {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 18px;
    color: #2a2b2c;
    text-align: center;
    line-height: 1.64;
    letter-spacing: 0.54px;
    max-width: 1058px;
    margin: 0 auto 40px;
}

/* ── Card base: override ux_image_box ── */
/* Flatsome renders [ux_image_box] as .box, NOT .image-box */
.box.xc__home-focus__card {
    border-radius: 24px !important;
    padding: 48px !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
    min-height: 460px;
}

/* Horizontal layout: text left, image right */
.box.xc__home-focus__card.box-text-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.box.xc__home-focus__card.box-text-left>.box-image {
    order: 2 !important;
    width: 42% !important;
    flex-shrink: 0;
    position: static !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.box.xc__home-focus__card.box-text-left>.box-text {
    order: 1 !important;
    width: 58% !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
}

/* Card color variants */
.box.xc__home-focus__card--green {
    background: #f0ffeb !important;
}

.box.xc__home-focus__card--blue {
    background: #ebf5ff !important;
}

.box.xc__home-focus__card--orange {
    background: #fff5e1 !important;
}

/* Card title */
.xc__home-focus__card-title {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2a2b2c;
    margin-bottom: 24px;
    letter-spacing: 0.72px;
    line-height: 1.64;
}

/* Card text content */
.box.xc__home-focus__card .box-text ul {
    padding-left: 24px;
    margin-bottom: 24px;
    text-align: left;
}

.box.xc__home-focus__card .box-text li {
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
    letter-spacing: 0.48px;
    margin-bottom: 4px;
    margin-left: 0 !important;
    text-align: left;
}

.box.xc__home-focus__card .box-text p {
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
    letter-spacing: 0.48px;
    text-align: left;
}

/* Card image */
.box.xc__home-focus__card .box-image img {
    border-radius: 16px;
    object-fit: contain;
}

/* Card button — exact Figma specs */
.box.xc__home-focus__card .button {
    border-radius: 100px !important;
    background: #8FC342 !important;
    border-color: #8FC342 !important;
    box-shadow: 2px 4px 8px -4px rgba(0, 0, 0, 0.25) !important;
    display: inline-flex !important;
    width: 200px !important;
    padding: 12px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.48px !important;
    text-transform: none !important;
    color: #fff !important;
}

.box.xc__home-focus__card .button:hover {
    background: #7db338 !important;
    border-color: #7db338 !important;
}

/* ── Grid row spacing ── */
.xc__home-focus__grid {
    align-items: stretch !important;
}

.xc__home-focus__grid .col {
    margin-bottom: 0 !important;
    display: flex !important;
}

.xc__home-focus__grid .col > .col-inner {
    display: flex !important;
    flex: 1 !important;
}

.xc__home-focus__grid .col > .col-inner > .box.xc__home-focus__card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ── Full width card (3rd card) special layout ── */
.xc__home-focus__card-full .box.xc__home-focus__card.box-text-left>.box-image {
    width: 35% !important;
}

.xc__home-focus__card-full .box.xc__home-focus__card.box-text-left>.box-text {
    width: 55% !important;
}

.xc__home-focus__card-full .box.xc__home-focus__card {
    min-height: 480px;
}

/* ── SOLUTION ── */
.xc__home-solution__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #2a2b2c;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 1.68px;
    margin-bottom: 80px;
}

.xc__home-solution__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.xc__home-solution__label-text {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2a2b2c;
    letter-spacing: 0.72px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.xc__home-solution__label-text::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 32px;
    background: url('/wp-content/themes/flatsome-child/assets/img/viis-leaf-icon.svg') no-repeat center / contain;
    flex-shrink: 0;
}

.xc__home-solution__title {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #2a2b2c;
    line-height: 1.5;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.xc__home-solution__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #2a2b2c;
    line-height: 1.64;
    margin-bottom: 24px;
}

.xc__home-solution__features {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
}

.xc__home-solution__features ul {
    flex: 1;
    padding-left: 24px;
}

.xc__home-solution__features li {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
    margin-bottom: 4px;
}

.xc__home-solution__product {
    margin-top: 24px;
}

.xc__home-solution__product-item {
    margin-bottom: 24px;
}

.xc__home-solution__product-item h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2a2b2c;
    letter-spacing: 0.72px;
    margin-bottom: 8px;
}

.xc__home-solution__product-item ul {
    padding-left: 24px;
}

.xc__home-solution__product-item li {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
}

.xc__home-solution__feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
}

.xc__home-solution__feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: calc(50% - 8px);
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #323c4b;
    padding: 12px 0;
}

.xc__home-solution__feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #4CBE9E;
    opacity: 0.15;
    flex-shrink: 0;
}

/* ── Solution Images — overlapping 2-image stack (per Figma) ── */
/* Container: 788×785 in Figma. Image 1 at (0,0), Image 2 at (328, 121), both 460×664 */
.xc__home-solution__images {
    position: relative !important;
    min-height: 500px;
    z-index: 1;
}

.xc__home-solution__images .col-inner {
    position: relative;
    height: 100%;
    min-height: 600px;
}

/* Image 1 — top-left, 58.4% width (460/788) */
.xc__home-solution__img-main {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
    width: 58% !important;
    max-width: 58% !important;
}

.xc__home-solution__img-main img {
    border-radius: 24px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 460 / 664;
    object-fit: cover;
}

/* Image 2 — offset right + down, same size, thick white border */
.xc__home-solution__img-overlay {
    position: absolute !important;
    top: 15.4% !important;
    left: 41.6% !important;
    z-index: 2 !important;
    width: 58% !important;
    max-width: 58% !important;
}

.xc__home-solution__img-overlay img {
    border-radius: 24px !important;
    border: 8px solid #fff !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 460 / 664;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.xc__home-solution__img-stack {
    position: relative;
}

.xc__home-solution__note {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
    margin-top: 24px;
}

.xc__home-solution__diagram {
    margin-top: 24px;
}

.xc__home-solution__diagram img {
    border-radius: 16px;
    width: 100%;
    height: auto;
}

/* ── ECOSYSTEM (radial icon cards around center image) ── */
/* Ecosystem radial layout */
.xc__ecosystem {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    aspect-ratio: 1600 / 1320;
}

.xc__ecosystem__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
}

.xc__ecosystem__center img {
    width: 100%;
    height: auto;
    display: block;
}

.xc__ecosystem__card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 100px;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15);
    max-width: 290px;
    z-index: 2;
    overflow: hidden;
}

.xc__ecosystem__card span:not(.xc__ecosystem__icon) {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 18px;
    color: #2a2b2c;
    line-height: 1.64;
    letter-spacing: 0.54px;
}

.xc__ecosystem__card--right {
    text-align: right;
}

.xc__ecosystem__icon {
    display: inline-block;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: #E1F7FE;
    flex-shrink: 0;
}

/* ── TISSUE CULTURE ── */
.xc__home-tissue .xc__home-tissue__img img {
    border-radius: 24px;
    border: 8px solid #8fc342;
}

.xc__home-tissue__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
}

.xc__home-tissue__card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 16px -4px rgba(8, 123, 160, 0.25);
    min-height: 180px;
}

.xc__home-tissue__card h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #00402e;
    margin-bottom: 10px;
}

.xc__home-tissue__card p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
}

/* ── SỐ HOÁ DỮ LIỆU ── */
.xc__home-digital__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #2a2b2c;
    line-height: 1.5;
    letter-spacing: 1.68px;
    margin-bottom: 40px;
}

.xc__home-digital__list {
    padding-left: 24px;
}

.xc__home-digital__list li {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
    margin-bottom: 4px;
}

/* 3-image layout: 1 large left + 2 small stacked right */
.xc__home-digital__images {
    display: flex;
    gap: 24px;
    height: 100%;
    min-height: 400px;
}

.xc__home-digital__img-left {
    flex: 1;
}

.xc__home-digital__img-left img {
    border-radius: 24px !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.xc__home-digital__img-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.xc__home-digital__img-right img {
    border-radius: 24px !important;
    width: 100% !important;
    flex: 1;
    object-fit: cover;
}

.xc__home-digital__card {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    padding: 48px 24px;
}

.xc__home-digital__card-icon {
    width: 80px;
    height: 80px;
    aspect-ratio: 1/1;
    background: #E1F7FE;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.xc__home-digital__card-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 12px;
}

.xc__home-digital__card h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #00402e;
    margin-bottom: 8px;
}

.xc__home-digital__card p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #2a2b2c;
    line-height: 1.64;
}

/* ── STATISTICS ── */
.xc__home-stats__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 40px;
    white-space: nowrap;
}

.xc__home-stats .row {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.xc__home-stats .row>.col {
    flex: 1 1 0 !important;
    width: 20% !important;
    max-width: 20% !important;
}

.xc__home-stats__number {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #2a2b2c !important;
    line-height: 1.5;
    letter-spacing: 1.68px;
    margin-bottom: 16px;
    text-transform: capitalize;
}

.xc__home-stats__bar {
    width: 160px;
    height: 6px;
    background: #f47c5f;
    margin: 0 0 16px;
}

.xc__home-stats__label {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 24px;
    color: #fff;
    line-height: 1.64;
    letter-spacing: 0.72px;
}

/* ── DIGITAL FEATURED (Stats Grid — cropin.com style) ── */
.xc-digital-featured {
    background-color: #09382A !important;
    padding: 100px 0 !important;
}

/* Override Flatsome row → CSS grid 5 columns */
.xc-digital-featured__row-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
    flex-wrap: unset !important;
}

/* Reset Flatsome col defaults inside grid */
.xc-digital-featured__row-grid > .col {
    flex-basis: unset !important;
    max-width: unset !important;
    width: unset !important;
    padding: 0 !important;
}

/* Card wrapper */
.xc-digital-featured-card {
    text-align: center;
}

/* Icon image */
.xc-digital-featured-card .icon-box-img {
    width: 80px !important;
    margin: 0 auto 15px !important;
}

.xc-digital-featured-card .icon-box-img img {
    transition-duration: 0.3s;
}

/* Title text */
.xc-digital-featured-card .icon-box-text p {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.25em !important;
    color: #FFFFFF !important;
    margin-bottom: 0 !important;
}

/* fadeInUp animation */
.xc-digital-featured-card {
    animation: fadeInUp 1.25s ease;
    animation-delay: 200ms;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Responsive: Laptop ≤1366px ── */
@media (max-width: 1366px) {
    .xc-digital-featured {
        padding: 100px 15px !important;
    }

    .xc-digital-featured-card .icon-box-img {
        width: 60px !important;
    }
}

/* ── Responsive: Tablet ≤1024px ── */
@media (max-width: 1024px) {
    .xc-digital-featured {
        padding: 60px 15px !important;
    }

    .xc-digital-featured-card .icon-box-text p {
        font-size: 18px !important;
    }
}

/* ── Responsive: Mobile ≤767px ── */
@media (max-width: 767px) {
    .xc-digital-featured {
        padding: 50px 15px !important;
    }

    .xc-digital-featured__row-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 20px !important;
    }

    .xc-digital-featured-card .icon-box-text p {
        font-size: 16px !important;
    }
}

/* ── DỰ ÁN TIÊU BIỂU ── */
.xc__home-projects__subtitle {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #686868;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.72px;
    line-height: 1.64;
}

.xc__home-projects__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #2a2b2c;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 40px;
}

/* Projects tabgroup vertical style */
.xc__home-projects__tabgroup.tabbed-content {
    display: flex !important;
    min-height: 521px;
    gap: 0 !important;
}

.xc__home-projects__tabgroup.tabbed-content ul.nav {
    border-right: none !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 320px !important;
    min-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.xc__home-projects__tabgroup.tabbed-content ul.nav li.tab {
    flex: 1 0 0 !important;
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    align-self: stretch !important;
    background: transparent !important;
}

.xc__home-projects__tabgroup.tabbed-content ul.nav li.tab a {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #686868 !important;
    line-height: 164% !important;
    letter-spacing: 0.72px !important;
    padding: 24px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    flex: 1 0 0 !important;
    align-self: stretch !important;
    width: 100% !important;
    text-transform: none !important;
    background: none !important;
    transition: all 0.3s ease;
}

.xc__home-projects__tabgroup.tabbed-content ul.nav li.tab.active a,
.xc__home-projects__tabgroup.tabbed-content ul.nav li.tab a:hover {
    color: #4cbe9e !important;
    font-weight: 700 !important;
    border-left: 8px solid #4cbe9e !important;
    background: #fff !important;
}

.xc__home-projects__tabgroup.tabbed-content ul.nav li.tab a:before {
    display: none !important;
}

.xc__home-projects__tabgroup .tab-panels {
    background: #fff;
    border-radius: 0 40px 40px 40px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    flex: 1;
    border-left: none !important;
}

.xc__home-projects__tabgroup .tab-panels img {
    border-radius: 24px !important;
}

.xc__home-projects__card-title {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #2a2b2c;
    margin-bottom: 16px;
    letter-spacing: 0.96px;
    line-height: 1.64;
}

.xc__home-projects__label--problem {
    color: #f47c5f;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.72px;
}

.xc__home-projects__label--solution {
    color: #275cbe;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.72px;
}

.xc__home-projects__label--result {
    color: #4cbe9e;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.72px;
}

.xc__home-projects__card-section {
    margin-bottom: 16px;
}

.xc__home-projects__card-section p {
    font-size: 18px;
    color: #2a2b2c;
    line-height: 1.64;
    letter-spacing: 0.54px;
}

/* Consultation box */
.xc__home-consult__box {
    background: #fff;
    border: 2px solid #ededed;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.xc__home-consult__title {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #2a2b2c;
    margin-bottom: 40px;
    letter-spacing: 0.96px;
    line-height: 1.64;
}

/* CF7 Form inside consultation box */
.xc-form-consultation .wpcf7-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.xc-form-consultation__fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

.xc-form-consultation__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

/* Fix CF7 auto-wrapping */
.xc-form-consultation .wpcf7-form p {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-form-consultation__field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.xc-form-consultation__field label {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 16px;
    color: #000;
    letter-spacing: 0.48px;
    line-height: 1.64;
}

.xc-form-consultation__field input,
.xc-form-consultation__field select {
    border: 1px solid #2a2b2c !important;
    border-radius: 4px !important;
    padding: 16px !important;
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    color: #2a2b2c !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.64;
    letter-spacing: 0.48px;
    height: auto !important;
    min-height: 60px !important;
}

.xc-form-consultation__field .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.xc-form-consultation__field select.wpcf7-select {
    height: 54px !important;
    appearance: auto;
    cursor: pointer;
}

.xc-form-consultation__field input::placeholder {
    color: #2a2b2c;
    opacity: 0.5;
}

.xc-form-consultation__field select {
    appearance: auto;
    cursor: pointer;
}

.xc-form-consultation__submit {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.xc-form-consultation__btn,
.xc-form-consultation input[type="submit"] {
    background: #8fc342 !important;
    color: #fff !important;
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-radius: 100px !important;
    border: none !important;
    width: 300px !important;
    max-width: 100%;
    margin: 0 !important;
    cursor: pointer;
    box-shadow: 2px 4px 8px -4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.48px;
    line-height: 1.64;
    transition: opacity 0.3s ease;
}

.xc-form-consultation__btn:hover,
.xc-form-consultation input[type="submit"]:hover {
    opacity: 0.9;
}

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

@media (max-width: 480px) {
    .xc-form-consultation__fields {
        grid-template-columns: 1fr;
    }
}

/* ── PARTNERS 2-row ── */
.xc__home-partners__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #2a2b2c;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 40px;
}

.xc__home-partners__logo img {
    max-height: 92px;
    object-fit: contain;
    padding: 10px;
}

.xc__home-partners .flickity-slider {
    display: flex !important;
}

.xc__home-partners .slider-item {
    width: 20% !important;
    flex-shrink: 0;
}

.xc__home-partners__row2 {
    margin-top: -10px;
}

/* ── CÂU CHUYỆN NÔNG DÂN ── */
.xc__home-stories__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #11442b;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.xc__home-stories__tabgroup.tabbed-content {
    position: relative;
}

.xc__home-stories__tabgroup.tabbed-content .tabs {
    position: absolute;
    top: -80px;
    right: 0;
    display: flex;
    gap: 12px;
    border: none !important;
}

.xc__home-stories__tabgroup.tabbed-content .tabs li a {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #2a2b2c;
    color: #2a2b2c;
    opacity: 0.5;
    transition: all 0.25s ease;
}

.xc__home-stories__tabgroup.tabbed-content .tabs li.active a,
.xc__home-stories__tabgroup.tabbed-content .tabs li a:hover {
    background: #5bc1a4;
    color: #fff;
    border-color: #5bc1a4;
    opacity: 1;
}

/* ── CTA BANNER ── */
.xc__home-cta {
    margin-bottom: 0 !important;
}

.xc__home-cta .banner-layers {
    position: relative;
    z-index: 2;
}

/* Gradient fade at bottom of CTA banner into footer color */
.xc__home-cta .banner-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent 0%, rgb(0, 64, 46) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Remove gap between CTA and footer */
.xc__home-cta + .xc__footer {
    margin-top: -1px;
}

.xc__home-cta .xc__home-cta__heading {
    font-family: 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-transform: capitalize;
    margin-bottom: 24px;
}

.xc__home-cta .xc__home-cta__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: #fff;
    line-height: 1.64;
    margin-bottom: 40px;
}

/* ── TESTIMONIAL ── */
.xc__home-testimonial__label {
    color: #fff !important;
}

.xc__home-testimonial__title {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1.64;
    margin-bottom: 16px;
}

.xc__home-testimonial__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #fff;
    line-height: 1.64;
}

.xc__home-testimonial .testimonial-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 18px;
}

/* ── RESPONSIVE ── */
@media (max-width: 849px) {

    .xc__home-hero .xc__home-hero__heading,
    .xc__home-focus__heading,
    .xc__home-solution__heading,
    .xc__home-digital__heading,
    .xc__home-stats__heading,
    .xc__home-projects__heading,
    .xc__home-partners__heading,
    .xc__home-stories__heading,
    .xc__home-cta .xc__home-cta__heading {
        font-size: 36px;
    }

    .xc__home-solution__title {
        font-size: 28px;
    }

    .xc__home-stats .row {
        flex-wrap: wrap !important;
    }

    .xc__home-stats .row>.col {
        flex: 0 0 33.33% !important;
        max-width: 33.33% !important;
    }

    .xc__home-stats__number {
        font-size: 28px;
    }

    .box.xc__home-focus__card.box-text-left {
        flex-direction: column !important;
    }

    .box.xc__home-focus__card.box-text-left>.box-image {
        position: static !important;
        width: 100% !important;
        order: 0;
        margin-bottom: 24px;
    }

    .box.xc__home-focus__card.box-text-left>.box-text {
        width: 100% !important;
    }

    .box.xc__home-focus__card {
        min-height: auto !important;
    }

    .xc__home-solution__features {
        flex-direction: column;
    }

    .xc__home-solution__feature-item {
        width: 100%;
    }

    .xc__home-tissue__cards {
        grid-template-columns: 1fr;
    }

    .xc__home-projects__tabgroup.tabbed-content .tabs {
        border-right: none;
    }
}

@media (max-width: 549px) {
    .xc__home-hero .xc__home-hero__heading {
        font-size: 22px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 12px !important;
    }

    .xc__home-hero .xc__home-hero__heading br,
    .xc__home-hero .xc__home-hero__desc br {
        display: none;
    }

    .xc__home-hero .xc__home-hero__desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .xc__home-hero .xc__home-hero__btn {
        font-size: 13px !important;
        padding: 10px 24px !important;
    }

    .xc__home-solution__label-text {
        font-size: 16px !important;
        letter-spacing: 0.3px !important;
    }

    .xc__home-solution__label-text::before {
        width: 28px;
        height: 22px;
    }

    .xc__home-consult__box {
        padding: 20px 16px !important;
        border-radius: 16px;
    }

    .xc__home-consult__title {
        font-size: 22px !important;
        margin-bottom: 20px !important;
        letter-spacing: 0.3px !important;
    }

    .box.xc__home-focus__card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
        min-height: auto !important;
    }

    /* Stats section: 1 card per row on mobile */
    .xc__home-stats .row > .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .xc__home-stats__number br,
    .xc__home-stats__heading br {
        display: none;
    }

    .xc__home-stats__number {
        font-size: 24px !important;
        white-space: nowrap;
    }

    .xc__home-stats__heading {
        font-size: 24px !important;
        white-space: normal;
    }

    /* Stories section: heading + tabs stacked */
    .xc__home-stories__heading {
        font-size: 20px !important;
        margin-bottom: 24px !important;
    }

    .xc__home-stories__heading br {
        display: none;
    }

    .xc__home-stories .tabbed-content > ul.nav {
        position: static !important;
        top: auto !important;
        right: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px !important;
        gap: 12px !important;
        scrollbar-width: none;
    }

    .xc__home-stories .tabbed-content > ul.nav::-webkit-scrollbar {
        display: none;
    }

    .xc__home-stories .tabbed-content > ul.nav li.tab {
        flex-shrink: 0;
    }

    /* Partners heading */
    .xc__home-partners__heading {
        font-size: 24px !important;
    }

    .xc__home-partners__heading br {
        display: none;
    }

    /* Testimonial mobile: avatar+stars 1 row, text below */
    .xc__home-testimonial .testimonial-box.icon-box-left {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .xc__home-testimonial .testimonial-image {
        width: 50px !important;
        min-width: 50px !important;
    }

    .xc__home-testimonial .testimonial-image img {
        width: 50px !important;
        height: 50px !important;
    }

    .xc__home-testimonial .icon-box-text {
        flex: 1;
        min-width: 0;
    }

    .xc__home-testimonial .testimonial-text p {
        font-size: 13px !important;
    }

    .xc__home-testimonial__title {
        font-size: 20px !important;
    }

    .xc__home-testimonial__title br {
        display: none;
    }

    .xc__home-testimonial__desc {
        font-size: 13px !important;
    }

    /* Partners slider: arrows inside on mobile */
    .xc__partners-slider {
        position: relative !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }

    .xc__partners-slider__arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 32px !important;
        height: 32px !important;
        background: rgba(255,255,255,0.9) !important;
        border: 1px solid #ccc !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .xc__partners-slider__arrow--prev {
        left: 4px !important;
    }

    .xc__partners-slider__arrow--next {
        right: 4px !important;
    }

    .xc__partners-slider__slide {
        padding: 0 !important;
        gap: 20px !important;
    }

    .xc__partners-slider__arrow br {
        display: none !important;
    }

    .xc__partners-slider__arrow svg {
        display: block !important;
        width: 10px !important;
        height: 16px !important;
    }

    /* Fix: next button wrapped in <p> tag */
    .xc__partners-slider > p {
        position: static;
        margin: 0;
    }

    /* Project card title */
    .xc__home-projects__card-title {
        font-size: 14px !important;
    }

    /* Quote icon smaller on mobile */
    .xc__home-testimonial .large-7 > .col-inner::after {
        width: 40px !important;
        height: 52px !important;
    }

    /* CTA heading */
    .xc__home-cta__heading {
        font-size: 16px !important;
    }

    .xc__home-cta__heading br {
        display: none;
    }

    /* Case studies section title */
    .xc-case-case-study .xc-section-title {
        font-size: 20px !important;
    }

    .xc-case-case-study .xc-section-title br {
        display: none;
    }
}

/* ── STORIES / CÂU CHUYỆN NÔNG DÂN ── */
.xc__home-stories__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #11442b;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

/* Wrapper positions heading left, tab nav will overlay right */
.xc__home-stories__wrapper {
    margin-bottom: 0;
}

/* Tabbed content: relative for absolute nav positioning */
.xc__home-stories .tabbed-content {
    position: relative !important;
    display: block !important;
}

/* Tab nav: absolute top-right, same line as heading (desktop only) */
@media (min-width: 550px) {
    .xc__home-stories .tabbed-content>ul.nav {
        position: absolute !important;
        top: -70px !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 24px !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        min-width: unset !important;
        z-index: 2 !important;
    }
}

.xc__home-stories .tabbed-content>ul.nav li.tab {
    flex: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.xc__home-stories .tabbed-content>ul.nav li.tab a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #2a2b2c !important;
    background: transparent !important;
    color: #2a2b2c !important;
    opacity: 0.5 !important;
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.64 !important;
    letter-spacing: 0.48px !important;
    text-transform: none !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

.xc__home-stories .tabbed-content>ul.nav li.tab a:before {
    display: none !important;
}

.xc__home-stories .tabbed-content>ul.nav li.tab.active a {
    background: #5BC1A4 !important;
    color: #fff !important;
    border-color: #5BC1A4 !important;
    opacity: 1 !important;
}

.xc__home-stories .tabbed-content>ul.nav li.tab a:hover {
    opacity: 1 !important;
}

/* Tab panels: no border, no padding from Flatsome */
.xc__home-stories .tabbed-content>.tab-panels {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Blog post cards — manual overlay on normal style */
.xc__home-stories .box-blog-post {
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
}

.xc__home-stories .box-blog-post .box-image {
    position: relative !important;
}

.xc__home-stories .box-blog-post .box-image::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.xc__home-stories .box-blog-post .box-text {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    padding: 24px !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.xc__home-stories .box-blog-post .box-text * {
    color: #f8f8f8 !important;
}

.xc__home-stories .box-blog-post .post-title {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.64 !important;
    letter-spacing: 0.72px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.xc__home-stories .box-blog-post .post-title a {
    color: #f8f8f8 !important;
}

.xc__home-stories .box-blog-post .from_the_blog_excerpt {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.64 !important;
    letter-spacing: 0.54px !important;
    color: #f8f8f8 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    position: static !important;
    transform: none !important;
}

.xc__home-stories .box-blog-post .from_the_blog_excerpt.show-on-hover {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    position: static !important;
    transform: none !important;
    display: -webkit-box !important;
}

.xc__home-stories .box-blog-post .box-text {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.xc__home-stories .box-blog-post .is-divider {
    display: none !important;
}

.xc__home-stories .box-blog-post .post-date {
    display: none !important;
}

.xc__home-stories .box-blog-post .cat-label {
    color: #4cbe9e !important;
    font-size: 18px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

.xc__home-stories .box-blog-post .cat-label a {
    color: #4cbe9e !important;
}

.xc__home-stories__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 244px;
    padding: 12px 16px;
    background: #8FC342;
    color: #fff !important;
    border-radius: 100px;
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.64;
    letter-spacing: 0.48px;
    text-decoration: none;
    box-shadow: 2px 4px 8px -4px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    margin-top: 40px;
}

.xc__home-stories__btn:hover {
    background: #7aaa37;
    color: #fff !important;
    text-decoration: none;
}

/* ── PARTNERS & CLIENTS ── */
.xc__home-partners__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #2a2b2c;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 40px;
}

.xc__partners-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
}

.xc__partners-slider__viewport {
    overflow: hidden;
    flex: 1;
}

.xc__partners-slider__track {
    display: flex;
    transition: transform 0.5s ease;
}

.xc__partners-slider__slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 40px;
    box-sizing: border-box;
}

.xc__partners-grid__row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    justify-items: center;
    align-items: center;
}

.xc__partners-grid__item {
    width: 224px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc__partners-grid__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Arrows */
.xc__partners-slider__arrow {
    width: 48px;
    height: 48px;
    border-radius: 100px;
    border: 2px solid #2a2b2c;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s ease;
    z-index: 2;
}

.xc__partners-slider__arrow:hover {
    background: #f5f5f5;
}

/* Dots */
.xc__partners-slider__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 40px;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.xc__partners-slider__dot {
    width: 24px;
    height: 8px;
    border-radius: 100px;
    background: #2a2b2c;
    opacity: 0.3;
    cursor: pointer;
    transition: all 0.3s ease;
}

.xc__partners-slider__dot.active {
    width: 40px;
    background: #4cbe9e;
    opacity: 1;
}

.xc__home-partners {
    padding-bottom: 120px !important;
}

@media (max-width: 1024px) {
    .xc__partners-slider__viewport {
        padding: 0 20px;
    }

    .xc__partners-grid__row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .xc__partners-grid__row {
        grid-template-columns: repeat(2, 1fr);
    }

    .xc__partners-grid__item {
        width: 140px;
        height: 60px;
    }
}

/* ── TESTIMONIAL / NHẬN XÉT ── */
.xc__home-testimonial {
    position: relative !important;
    overflow: hidden !important;
}

.xc__home-testimonial .large-7>.col-inner {
    position: relative;
}

.xc__home-testimonial .large-7>.col-inner::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 80px;
    height: 104px;
    background: url('/wp-content/themes/flatsome-child/assets/img/quote-icon.svg') no-repeat center / contain;
    z-index: 2;
    pointer-events: none;
}

/* Dots: separate row, pill-shaped */
.xc__home-testimonial .flickity-page-dots {
    position: relative !important;
    bottom: auto !important;
    margin-top: 40px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}

.xc__home-testimonial .flickity-page-dots .dot {
    width: 24px !important;
    height: 8px !important;
    border-radius: 100px !important;
    background: #fff !important;
    opacity: 0.3 !important;
    margin: 0 !important;
}

.xc__home-testimonial .flickity-page-dots .dot.is-selected {
    width: 40px !important;
    background: #4cbe9e !important;
    opacity: 1 !important;
}

/* Flatsome slider dots override */
.xc__home-testimonial .slider-nav-dots {
    position: relative !important;
    bottom: auto !important;
    margin-top: 40px !important;
    text-align: center !important;
}

.xc__home-testimonial .slider-nav-dots>button,
.xc__home-testimonial .slider-nav-dots>span {
    width: 24px !important;
    height: 8px !important;
    border-radius: 100px !important;
    background: #fff !important;
    opacity: 0.3 !important;
    margin: 0 4px !important;
}

.xc__home-testimonial .slider-nav-dots>button.is-active,
.xc__home-testimonial .slider-nav-dots>span.is-active {
    width: 40px !important;
    background: #4cbe9e !important;
    opacity: 1 !important;
}

/* Testimonial text */
.xc__home-testimonial .testimonial-text {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.64 !important;
    letter-spacing: 0.72px !important;
    color: #fff !important;
}

.xc__home-testimonial .testimonial-name {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.xc__home-testimonial .testimonial-company {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    color: #fff !important;
}

/* ── FOOTER ── */
.xc__footer {
    position: relative !important;
    overflow: hidden !important;
}

.xc__footer .section-bg img {
    object-fit: contain;
    object-position: center center;
    opacity: 0.15;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

.xc__footer__logo {
    max-width: 247px;
    height: auto;
    margin-bottom: 24px;
    filter: brightness(0) invert(1);
}

.xc__footer__slogan-title {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.64 !important;
    letter-spacing: 0.54px !important;
    margin-bottom: 8px !important;
}

.xc__footer__slogan-desc {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #fff !important;
    line-height: 1.64 !important;
    letter-spacing: 0.48px !important;
}

.xc__footer__contact p {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #fff !important;
    line-height: 1.64 !important;
    letter-spacing: 0.54px !important;
    margin-bottom: 16px !important;
}

.xc__footer__contact p strong {
    font-weight: 700 !important;
}

.xc__footer__map iframe {
    border-radius: 24px !important;
    width: 100% !important;
    height: 212px !important;
}

/* Copyright bar */
.xc__footer-copyright {
    background: #2a2b2c !important;
}

.xc__footer-copyright__text {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    color: #fff !important;
    text-align: center !important;
    margin: 0 !important;
    letter-spacing: 0.48px !important;
    line-height: 1.64 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.xc-about-hero__subtitle {
    color: #79C25C;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px !important;
    line-height: 1.25;
}

.xc-about-hero__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 40px;
    font-weight: 700;
    color: #11442b;
    line-height: 1.35;
    margin-bottom: 28px !important;
}

/* Hero CTA button — cyan gradient pill, overlapping into bento grid */
.xc-about-hero__cta.button {
    background: linear-gradient(90deg, #28a9e1 0%, #00aeff 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 15px 35px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 4px 15px rgba(40, 169, 225, 0.35) !important;
    transition: all 0.3s ease !important;
    position: relative;
    z-index: 10;
    margin-bottom: -50px !important;
}

.xc-about-hero__cta.button:hover {
    background: linear-gradient(90deg, #1e9ad0 0%, #009aee 100%) !important;
    box-shadow: 0 6px 20px rgba(40, 169, 225, 0.5) !important;
    transform: translateY(-1px);
}

/* ── HERO GRID (5 columns via [row]/[col] + raw div cards) ── */
.xc-about-hero__grid {
    max-width: 1280px !important;
    margin-top: 0px !important;
}

.xc-about-hero__grid>.col {
    padding-bottom: 0 !important;
}

.xc-about-hero__col>.col-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 420px;
}

/* Columns 2, 3, 4 pushed down — below the CTA button */
.xc-about-hero__col--offset>.col-inner {
    margin-top: 60px;
    height: 304px;
}

/* Column 3 — extra short (50% reduction) */
.xc-about-hero__grid > .col:nth-child(3) > .col-inner {
    height: 190px;
}

/* Stat cards */
.xc-about-hero__card {
    border-radius: 20px;
    padding: 24px 16px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

.xc-about-hero__card p,
.xc-about-hero__card h3 {
    color: #fff !important;
    margin-bottom: 4px !important;
}

.xc-about-hero__label {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.xc-about-hero__num {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
}

.xc-about-hero__desc {
    font-size: 13px;
    line-height: 1.4;
}

.xc-about-hero__card--dark {
    background: #003324;
}

.xc-about-hero__card--green {
    background: #00B54B;
}

.xc-about-hero__card--teal {
    background: linear-gradient(150deg, #003324 18%, #00B54B 94%);
}

.xc-about-hero__card--overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 51, 36, 0.55);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Images in grid */
.xc-about-hero__img-tall,
.xc-about-hero__img-small {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.xc-about-hero__img-tall {
    flex: 1;
    min-height: 0;
}

.xc-about-hero__img-small {
    height: 120px;
    flex-shrink: 0;
}

/* Support both direct img and [ux_image] output */
.xc-about-hero__img-tall .img,
.xc-about-hero__img-small .img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Flatsome .img-inner must also fill parent height */
.xc-about-hero__img-tall .img-inner,
.xc-about-hero__img-small .img-inner {
    width: 100%;
    height: 100%;
}

.xc-about-hero__img-tall img,
.xc-about-hero__img-small img,
.xc-about-hero__img-tall .img img,
.xc-about-hero__img-small .img img,
.xc-about-hero__img-tall .img-inner img,
.xc-about-hero__img-small .img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xc-about-hero__img--has-overlay {
    position: relative;
}

/* Badge on tall image */
.xc-about-hero__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 3;
    background: #fff;
}

.xc-about-hero__badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reversed column — image on top, card on bottom */
.xc-about-hero__col--reversed>.col-inner {
    flex-direction: column;
}

/* Responsive adjustments */
@media (max-width: 849px) {
    .xc-about-hero__grid>.col {
        min-height: auto;
    }

    .xc-about-hero__col>.col-inner {
        height: auto;
    }

    .xc-about-hero__num {
        font-size: 32px;
    }

    .xc-about-hero__heading {
        font-size: 28px;
    }

    .xc-about-hero__subtitle {
        font-size: 16px;
    }

    .xc-about-hero__img-small {
        height: 100px;
    }

    /* Fix CTA button negative margin on mobile */
    .xc-about-hero__cta.button {
        margin-bottom: 10px !important;
    }

    /* Cards grid: 2 cols with gap */
    .xc-about-hero__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0 15px;
    }

    .xc-about-hero__grid > .col {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .xc-about-hero__col--offset > .col-inner {
        margin-top: 0;
        height: auto;
    }

    .xc-about-hero__grid > .col:nth-child(3) > .col-inner {
        height: auto;
    }

    .xc-about-hero__card {
        padding: 16px 12px;
        border-radius: 14px;
    }

    .xc-about-hero__img-tall {
        min-height: 160px;
    }

    .xc-about-hero__card--overlay {
        border-radius: 14px;
    }
}

/* ── AI DIGITAL TRANSFORMATION ── */
.xc-about-digital__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #11442b;
    line-height: 1.3;
    margin-bottom: 24px !important;
}

.xc-about-digital__desc {
    font-size: 16px;
    color: #555;
    line-height: 1.75;
    margin-bottom: 16px !important;
}

.xc-about-digital__img img {
    border-radius: 16px;
}

/* ── MISSION / VISION / PURPOSE ── */
.xc-about-mvp__partner-card {
    background: #f5f0e8;
    border: 1px solid #e8dcc8;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.xc-about-mvp__partner-card > .box-image {
    display: none;
}

/* Video: match original — 1:1 square, cover, no controls */
.xc-about-mvp__partner-card .video.video-fit {
    padding-top: 0 !important;
    aspect-ratio: 1 / 1;
    margin-bottom: 0 !important;
    overflow: hidden;
    border-radius: 12px;
}

.xc-about-mvp__partner-card .wp-video,
.xc-about-mvp__partner-card .mejs-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
}

.xc-about-mvp__partner-card .mejs-mediaelement,
.xc-about-mvp__partner-card .mejs-mediaelement video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Hide WP MediaElement bottom controls bar only, keep play button */
.xc-about-mvp__partner-card .mejs-controls {
    display: none !important;
}

.xc-about-mvp__partner-card .box-text-inner > *:last-child {
    margin-bottom: 0 !important;
}

.xc-about-mvp__partner-card .box-text {
    padding: 0 !important;
}

.xc-about-mvp__partner-card .box-text-inner {
    padding: 0 !important;
}

.xc-about-mvp__partner-title {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: #134300;
    margin-bottom: 20px !important;
    text-align: center;
}

.xc-about-mvp__partner-img img {
    border-radius: 12px;
}

.xc-about-mvp__banner {
    border-radius: 20px;
    overflow: hidden;
}

.xc-about-mvp__banner-title {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.xc-about-mvp__card {
    background: #EDF8FF;
    border: none;
    border-radius: 20px;
    padding: 80px 24px 25px;
    margin-bottom: 20px;
    height: 100%;
    box-sizing: border-box;
}

.xc-about-mvp__card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-about-mvp__card-icon svg {
    width: 56px;
    height: 56px;
}

.xc-about-mvp__card-title {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: #134300;
    margin-bottom: 6px !important;
    line-height: 1.25em;
}

.xc-about-mvp__card-desc {
    font-size: 16px;
    color: #444;
    line-height: 1.7;
    min-height: calc(16px * 1.7 * 3);
}

/* ── HISTORY TIMELINE ── */
.xc-about-history__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #11442b;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 10px !important;
}

/* Section wrapper — clip overflow */
.xc-about-history,
section.xc-about-history {
    overflow: hidden !important;
}

/* Scrollable timeline container */
.xc-about-history__timeline {
    display: flex;
    gap: 100px;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    padding: 40px 0 40px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

/* Grabbing state */
.xc-about-history__timeline.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Hide scrollbar completely */
.xc-about-history__timeline {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.xc-about-history__timeline::-webkit-scrollbar {
    display: none;
}

/* Horizontal green line through center */
.xc-about-history__timeline::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 4px;
    background: #79C25C;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

/* Cards */
.xc-about-history__card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #e1e8ed;
    min-width: 280px;
    max-width: 340px;
    width: 300px;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    z-index: 1;
}

.xc-about-history__card:hover {
    transform: scale(1.18);
    box-shadow: 0 10px 32px rgba(4, 165, 217, 0.08);
    z-index: 10;
}

/* Green dot — centered in the gap between cards */
.xc-about-history__card::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #134300;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 5;
}

.xc-about-history__card:hover::after {
    opacity: 1;
}

/* Year */
.xc-about-history__year {
    font-family: 'Roboto', 'UTM Avo', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #134300;
    border-bottom: 1px solid rgba(0, 0, 0, 0.17);
    padding-bottom: 12px;
    margin-bottom: 12px !important;
    line-height: 1.25em;
}

/* Hide the old green line div */
.xc-about-history__line {
    display: none;
}

/* Milestone subtitle */
.xc-about-history__milestone {
    font-size: 16px;
    font-weight: 500;
    color: #134300;
    margin-bottom: 8px !important;
    line-height: 1.5;
}

/* Bullet list */
.xc-about-history__card ul {
    padding-left: 20px;
    margin: 0;
}

.xc-about-history__card li {
    font-size: 14px;
    color: #444;
    line-height: 1.35;
    margin-bottom: 8px;
    margin-left: 0 !important;
}

.xc-about-history__card li:last-child {
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 767px) {
    .xc-about-history__heading {
        font-size: 24px;
    }

    .xc-about-history__timeline {
        gap: 30px;
        padding: 20px 0;
    }

    .xc-about-history__card {
        min-width: 250px;
        width: 260px;
    }

    .xc-about-history__card:hover {
        transform: none;
    }

    .xc-about-history__card::after {
        display: none;
    }

    .xc-about-history__timeline::before {
        display: none;
    }
}

/* ── INVESTORS LOGO CAROUSEL ── */
.xc-about-investors {
    padding: 80px 0;
    overflow: hidden;
}

/* Clip track inside Flatsome col */
.xc-about-investors .col-inner,
.xc-about-investors .row,
.xc-about-investors__track-wrap {
    overflow: hidden;
}

.xc-about-investors__heading {
    font-family: 'Roboto', 'UTM Avo', sans-serif;
    font-size: 36px;
    font-weight: 500;
    color: #134300;
    text-align: center;
    margin-bottom: 30px !important;
}

.xc-about-investors__track {
    display: flex;
    width: max-content;
    animation: xc-investors-scroll 30s linear infinite;
}

.xc-about-investors__track:hover {
    animation-play-state: paused;
}

.xc-about-investors__logo {
    flex-shrink: 0;
    width: 188px;
    margin: 15px 15px;
    padding: 20px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-about-investors__logo img {
    max-height: 95px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

@keyframes xc-investors-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
    .xc-about-investors {
        padding: 60px 15px;
    }

    .xc-about-investors__heading {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .xc-about-investors {
        padding: 50px 15px;
    }

    .xc-about-investors__heading {
        font-size: 24px;
    }

    .xc-about-investors__logo {
        width: 140px;
        padding: 15px;
    }
}

/* ── FOUNDER ── */
.xc-about-founder__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #003324;
    margin-bottom: 32px !important;
}

.xc-about-founder__photo-wrap {
    position: relative;
    display: block;
    width: 50%;
    margin: 0 auto 24px;
}

.xc-about-founder__photo-wrap .xc-about-founder__photo {
    width: 100% !important;
}

.xc-about-founder__photo-wrap > p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

.xc-about-founder__photo img {
    border-radius: 12px;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.xc-about-founder__photo-wrap:hover .xc-about-founder__photo img {
    filter: grayscale(0%);
}

.xc-about-founder__linkedin {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: #0077B5;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
    text-decoration: none;
}

.xc-about-founder__linkedin:hover {
    transform: scale(1.1);
}

.xc-about-founder__linkedin img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.xc-about-founder__linkedin svg {
    width: 16px;
    height: 16px;
}

.xc-about-founder__name {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #003324;
    margin-bottom: 4px !important;
}

.xc-about-founder__role {
    font-size: 15px;
    color: #666;
    margin-bottom: 32px !important;
}

.xc-about-founder__divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #00B5E2, #00D4AA);
    margin: 16px auto 0;
}

/* ── TEAM / BOARD / ADVISORY ── */
.xc-about-team__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #003324;
    margin-bottom: 40px !important;
}

.xc-about-team__member {
    text-align: left;
    margin-bottom: 32px;
    position: relative;
}

.xc-about-team__photo img {
    border-radius: 12px;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    aspect-ratio: 4/5;
    object-fit: cover;
    width: 100%;
}

.xc-about-team__member:hover .xc-about-team__photo img {
    filter: grayscale(0%);
}

.xc-about-team__linkedin-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: #0077B5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
    text-decoration: none;
}

.xc-about-team__linkedin-badge:hover {
    transform: scale(1.1);
}

.xc-about-team__linkedin-badge img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.xc-about-team__name {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #003324;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
}

.xc-about-team__role {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
}

/* ── INVESTORS ── */
.xc-about-investors__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #003324;
    margin-bottom: 40px !important;
}

.xc-about-investors__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    padding: 24px 0;
}

.xc-about-investors__logo {
    min-width: 120px;
    height: 80px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.xc-about-investors__logo img {
    max-width: 140px;
    max-height: 50px;
    object-fit: contain;
}

/* ── AWARDS ── */
.xc-about-awards__heading {
    font-family: 'Volkhov', 'UTM Avo', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: #003324;
    margin-bottom: 40px !important;
}

.xc-about-awards__slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.xc-about-awards__slider::-webkit-scrollbar {
    height: 4px;
}

.xc-about-awards__slider::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 2px;
}

.xc-about-awards__slider::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #00B54B, #00a9e0);
    border-radius: 2px;
}

.xc-about-awards__slide {
    min-width: 220px;
    max-width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    background: #fff;
}

.xc-about-awards__slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Flatsome ux_gallery rendered as Flickity slider */
.xc-about-awards__gallery.row .gallery-col .box-image,
.xc-about-awards__gallery.row .gallery-col .box-image img {
    border-radius: 20px !important;
}

.xc-about-awards__gallery.row .gallery-col .box {
    border-radius: 20px !important;
    overflow: hidden;
}

/* ==========================================================================
   CAREER PAGE CLONE
   ========================================================================== */

/* ── Typography & Global ── */
.xc-color-lime {
    color: #84C441 !important;
}

.xc-btn-lime {
    background-color: #84C441 !important;
    color: #003D2B !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    padding: 10px 30px !important;
    text-transform: none !important;
    font-size: 16px !important;
    transition: all 0.3s ease;
    border: none !important;
}

.xc-btn-lime:hover {
    background-color: #95d552 !important;
    box-shadow: 0 4px 15px rgba(132, 196, 65, 0.4);
    transform: translateY(-2px);
}

/* ── 1. Hero ── */
.xc-career-hero__eyebrow {
    color: #0082CA;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.xc-career-hero__heading {
    font-family: 'Montserrat', 'UTM Avo', sans-serif;
    font-size: 64px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 40px;
}

.xc-career-hero__image-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.xc-career-hero__main-img .img-inner,
.xc-career-hero__sub-img .img-inner {
    border-radius: 20px;
    overflow: hidden;
}

.xc-career-hero__main-img img,
.xc-career-hero__sub-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xc-career-hero__sub-img {
    margin-top: 40px;
}

/* ── 2. Culture ── */
.xc-career-culture__heading {
    font-family: 'Montserrat', 'UTM Avo', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #003D2B;
    margin-bottom: 30px;
}

.xc-career-culture__text {
    font-size: 18px;
    color: #4A4A4A;
    line-height: 1.6;
}

.xc-career-culture__animation {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px dashed #84C441;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* ── 3. MVP ── */
.xc-career-mvp__card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    border-top: 4px solid #84C441;
}

.xc-career-mvp__icon {
    margin-bottom: 20px;
}

.xc-career-mvp__title {
    font-size: 20px;
    font-weight: 700;
    color: #003D2B;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.xc-career-mvp__text {
    font-size: 16px;
    color: #4A4A4A;
    line-height: 1.6;
    margin: 0;
}

.xc-career-mvp__highlight {
    font-family: 'Volkhov', serif;
    font-size: 40px;
    color: #003D2B;
    font-style: italic;
}

/* ── 4. Core Values ── */
.xc-career-values__heading {
    font-size: 48px;
    font-weight: 800;
    color: #003D2B;
    margin-bottom: 20px;
}

.xc-career-values__sub {
    font-size: 18px;
    color: #4A4A4A;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.xc-career-values__card {
    padding: 30px;
    text-align: left;
}

.xc-career-values__icon {
    width: 80px;
    height: 80px;
    background: #F0F7EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px solid #84C441;
}

.xc-career-values__title {
    font-size: 24px;
    font-weight: 700;
    color: #003D2B;
    margin-bottom: 15px;
}

.xc-career-values__desc {
    font-size: 16px;
    color: #4A4A4A;
    line-height: 1.6;
}

/* ── 5. Flourish ── */
.xc-career-flourish__card {
    background: rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    height: 100%;
}

.xc-career-flourish__icon {
    margin-bottom: 20px;
}

.xc-career-flourish__title,
.xc-career-flourish__card .icon-box-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: none;
    margin-bottom: 15px;
    margin-top: 15px;
}

.xc-career-flourish__desc {
    font-size: 16px;
    color: #d0d0d0;
    line-height: 1.6;
    margin: 0;
}

/* ── 6. Rewards ── */
.xc-career-rewards__heading {
    font-size: 48px;
    font-weight: 800;
    color: #003D2B;
    margin-bottom: 50px;
}

.xc-career-rewards__title {
    font-size: 24px;
    font-weight: 700;
    color: #003D2B;
    margin-bottom: 15px;
}

.xc-career-rewards__desc {
    font-size: 16px;
    color: #4A4A4A;
    line-height: 1.6;
    padding-right: 20px;
}

/* ── 7. Teams & Locations ── */
.xc-career-teams__heading {
    font-size: 48px;
    font-weight: 800;
    color: #003D2B;
    margin-bottom: 40px;
}

.xc-career-teams__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.xc-career-tag {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #003D2B;
    cursor: pointer;
    transition: all 0.2s ease;
}

.xc-career-tag:hover {
    background: #F0F7EB;
    border-color: #84C441;
    color: #84C441;
}

.xc-career-location {
    background: #003D2B;
    border-radius: 20px;
    padding: 40px;
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.xc-career-location__map {
    opacity: 0.1;
    margin-bottom: 20px;
}

.xc-career-location__country {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}

.xc-career-location__city {
    font-size: 18px;
    color: #84C441;
    margin: 0;
}

/* ── 8. Jobs Integration ── */
.xc-career-jobs__heading {
    font-size: 48px;
    font-weight: 800;
    color: #003D2B;
    margin-bottom: 20px;
}

.xc-career-jobs__sub {
    font-size: 18px;
    color: #4A4A4A;
    margin-bottom: 40px;
}

.xc-career-jobs__widget {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
}

/* ── 9. CTA ── */
.xc-career-cta__heading {
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
}

.xc-career-cta__visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-radius: 20px;
    overflow: hidden;
}

.xc-career-cta__main-img .img-inner,
.xc-career-cta__sub-img .img-inner {
    border-radius: 10px;
    overflow: hidden;
}

.xc-career-cta__main-img img,
.xc-career-cta__sub-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xc-career-cta__text {
    font-size: 20px;
    color: #d0d0d0;
    margin-bottom: 40px;
    line-height: 1.5;
}

/* Responsiveness adjustments */
@media (max-width: 849px) {
    .xc-career-hero__heading {
        font-size: 42px;
    }
    .xc-career-values__heading, .xc-career-rewards__heading, .xc-career-teams__heading, .xc-career-jobs__heading, .xc-career-cta__heading {
        font-size: 36px;
    }
}

/* ────────────────────────────────────────────────────────────
 * 11. Custom Text Path (Spinning Text)
 * ──────────────────────────────────────────────────────────── */
.xc-career-hero__spin-wrapper {
  position: absolute;
  top: -1px;
  left: -50px;
  width: 250px;
  height: 250px;
  background-image: url('./images/spin-text.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: xc-spin-rotate 20s linear infinite;
  transform-origin: center center;
  z-index: 10;
}
.xc-career-hero__spin-text {
  font-family: "Roboto", sans-serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: 3.1px;
  fill: #134300;
}
@media (max-width: 1024px) {
  .xc-career-hero__spin-wrapper {
    width: 150px;
    left: 0;
  }
  .xc-career-hero__spin-svg {
    word-spacing: 9px;
  }
  .xc-career-hero__spin-text {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .xc-career-hero__spin-wrapper {
    width: 100px;
  }
  .xc-career-hero__spin-svg {
    word-spacing: 6px;
  }
  .xc-career-hero__spin-text {
    font-size: 22px;
  }
}
@keyframes xc-spin-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   CAREER PAGE — Hero Image Collage
   ========================================================================== */
.xc-career-hero__image-collage {
    position: relative;
    padding-bottom: 60px;
    padding-left: 40px;
}

.xc-career-hero__image-collage .ux_image_image,
.xc-career-hero__image-collage img {
    border-radius: 20px !important;
}

/* Main image — larger, upper right */
.xc-career-hero__main-img {
    position: relative;
    z-index: 1;
}

/* Sub image — smaller, overlaps bottom-left of main image */
.xc-career-hero__sub-img {
    position: absolute !important;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 42% !important;
    max-width: 280px;
}

.xc-career-hero__sub-img img {
    border: 4px solid rgba(0, 61, 43, 0.8) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Responsive — stack on mobile */
@media (max-width: 849px) {
    .xc-career-hero__image-collage {
        padding-bottom: 40px;
        padding-left: 20px;
    }

    .xc-career-hero__sub-img {
        width: 45% !important;
        max-width: 200px;
    }
}

/* ── ECOSYSTEM — Mobile ── */
@media (max-width: 849px) {
    .xc__ecosystem {
        position: static;
        aspect-ratio: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
    }

    .xc__ecosystem__center {
        position: static;
        transform: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 16px;
    }

    .xc__ecosystem__card {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        max-width: 100%;
        width: 100%;
        border-radius: 12px;
        padding: 12px 16px;
        gap: 12px;
        box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .xc__ecosystem__card--right {
        text-align: left;
        flex-direction: row-reverse;
    }

    .xc__ecosystem__card span:not(.xc__ecosystem__icon) {
        font-size: 15px;
    }

    .xc__ecosystem__icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* ==========================================================================
   CASE / SOLUTION FAQ SECTION
   Match original Cropin Elementor design
   ========================================================================== */

/* ── Section background ── */
.xc-case-faq {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    background-color: rgba(163, 220, 46, 0.078) !important;
}

/* ── Heading (trắng vì section có bg image tối) ── */
.xc-case-faq .xc-section-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.35;
    color: #003324 !important;
    margin-bottom: 0 !important;
}

/* ── Accordion wrapper ── */
.xc-case-faq__accordion {
    width: 100%;
}

/* ── Accordion item: border-bottom separator (solution-faq style) ── */
.xc-case-faq__accordion .accordion-item {
    border-bottom: 1px solid #090808;
    border-radius: 0 !important;
    overflow: visible;
}

.xc-case-faq__accordion .accordion-item:last-child {
    border-bottom: none;
}

/* ── Accordion title ── */
.xc-case-faq__accordion .accordion-title {
    border-top: none !important;
    padding: 16px 0 !important;
    font-size: 18px;
    font-weight: 600;
    color: #1f2124 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.xc-case-faq__accordion .accordion-title span {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #1f2124 !important;
    order: 1;
}

.xc-case-faq__accordion .accordion-title:hover {
    color: #1f2124 !important;
    opacity: 0.85;
}

/* ── Toggle button on RIGHT ── */
.xc-case-faq__accordion .accordion-title .toggle {
    position: static !important;
    top: auto !important;
    left: auto !important;
    order: 2 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    opacity: 1 !important;
    flex-shrink: 0;
    border-radius: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

.xc-case-faq__accordion .accordion-title .toggle i {
    font-size: 15px;
    color: #1f2124;
    transition: transform 0.4s ease;
}

/* Rotate icon when accordion is open */
.xc-case-faq__accordion .accordion-item.active .toggle i {
    transform: rotate(180deg);
}

/* ── Accordion content ── */
.xc-case-faq__accordion .accordion-inner {
    padding: 0 0 16px 0 !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #555;
}

.xc-case-faq__accordion .accordion-inner p {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 0.5em;
}

.xc-case-faq__accordion .accordion-inner ul {
    padding-left: 20px;
    margin-bottom: 0.5em;
}

.xc-case-faq__accordion .accordion-inner li {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 4px;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
    .xc-case-faq .xc-section-title {
        font-size: 28px;
        text-align: center;
    }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
    .xc-case-faq {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .xc-case-faq .xc-section-title {
        font-size: 24px;
    }

    .xc-case-faq__accordion .accordion-inner p,
    .xc-case-faq__accordion .accordion-inner li {
        font-size: 15px;
    }
}

/* ==========================================================================
   CASE — BRANDS THAT TRUST US (Logo Marquee)
   Same pattern as xc-about-investors
   ========================================================================== */

.xc-case-brands {
    padding: 80px 0 !important;
    overflow: hidden;
}

.xc-case-brands .col-inner,
.xc-case-brands .row {
    overflow: hidden;
}

/* ── Heading ── */
.xc-case-brands .xc-section-title {
    font-size: 36px;
    font-weight: 500;
    color: #134300 !important;
    text-align: center;
    margin-bottom: 30px !important;
}

/* ── Marquee track ── */
.xc-case-brands__track {
    display: flex;
    width: max-content;
    animation: xc-brands-scroll 35s linear infinite;
}

.xc-case-brands__track:hover {
    animation-play-state: paused;
}

/* ── Logo cards ── */
.xc-case-brands__logo {
    flex-shrink: 0;
    width: 188px;
    margin: 15px 15px;
    padding: 20px;
    background: #fff;
    border: 0 solid #efefef;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-case-brands__logo img {
    max-height: 95px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

@keyframes xc-brands-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .xc-case-brands {
        padding: 60px 15px !important;
    }

    .xc-case-brands .xc-section-title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .xc-case-brands {
        padding: 50px 0 !important;
    }

    .xc-case-brands .xc-section-title {
        font-size: 24px;
    }

    .xc-case-brands__logo {
        width: 140px;
        padding: 15px;
    }
}

/* ==========================================================================
   CASE — CASE STUDIES CAROUSEL (Swiper)
   Matches cropin.com "Delivering digital transformation" section
   ========================================================================== */

.xc-case-studies {
    padding: 100px 0 80px !important;
}

/* ── Header row: heading left + button right ── */
.xc-case-studies__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
    margin-bottom: 40px;
}

.xc-case-studies__heading {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-weight: 500;
    color: #134300 !important;
    line-height: 1.3;
    max-width: 60%;
    margin: 0 !important;
}

.xc-case-studies__btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    flex-direction: row-reverse;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff !important;
    background: #79C25C;
    border-radius: 30px;
    padding: 16px 25px;
    text-decoration: none !important;
    transition: background 0.3s;
}

.xc-case-studies__btn:hover {
    background: #134300;
    color: #fff !important;
}

.xc-case-studies__btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ── Carousel wrapper ── */
.xc-case-studies__carousel {
    position: relative;
}

.xc-case-studies__carousel .swiper {
    overflow: hidden;
}

/* ── Slide card ── */
.xc-case-studies__card {
    position: relative;
    min-height: 380px;
    border-radius: 20px;
    border: 1px solid #EBEBEB;
    overflow: hidden;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    gap: 11px;
    cursor: pointer;
    transition: all 0.3s;
}

/* Gradient overlay */
.xc-case-studies__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, transparent 56%, #000 100%);
    opacity: 0.8;
    transition: background 0.3s, opacity 0.3s;
    z-index: 1;
}

/* Hover overlay image */
.xc-case-studies__card::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('/wp-content/uploads/case-studies/case-hover-box.webp') no-repeat 12em center / 100%;
    top: 0;
    right: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
}

.xc-case-studies__card:hover::before {
    background: linear-gradient(180deg, #134300 0%, #134300 100%);
    opacity: 1;
}

.xc-case-studies__card:hover::after {
    opacity: 0.65;
}

/* ── Card content ── */
.xc-case-studies__title {
    position: relative;
    z-index: 3;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 !important;
}

.xc-case-studies__title a {
    color: #fff !important;
    text-decoration: none !important;
}

.xc-case-studies__excerpt {
    position: relative;
    z-index: 3;
    color: rgba(255,255,255,0.9);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    display: none;
    opacity: 0;
    margin: 0 !important;
}

.xc-case-studies__card:hover .xc-case-studies__excerpt {
    display: block;
    animation: xc-fadeInUp 0.4s ease-in forwards;
}

.xc-case-studies__read-more {
    position: relative;
    z-index: 3;
    display: none;
    opacity: 0;
    align-items: center;
    gap: 12px;
    flex-direction: row-reverse;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    padding: 5px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
}

.xc-case-studies__card:hover .xc-case-studies__read-more {
    display: inline-flex;
    animation: xc-fadeInUp 0.4s ease-in 0.2s forwards;
}

.xc-case-studies__read-more:hover {
    color: #fff !important;
}

.xc-case-studies__read-more svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ── fadeInUp keyframes ── */
@keyframes xc-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Swiper nav wrapper ── */
.xc-case-studies__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.xc-case-studies__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #000;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
}

.xc-case-studies__arrow svg {
    width: 24px;
    height: 24px;
    fill: #000;
    transition: fill 0.25s;
}

.xc-case-studies__arrow--prev svg {
    transform: scaleX(-1);
}

.xc-case-studies__arrow:hover {
    background: #134300;
    border-color: #134300;
}

.xc-case-studies__arrow:hover svg {
    fill: #fff;
}

/* ── Swiper pagination — hidden ── */
.xc-case-studies__carousel .swiper-pagination {
    display: none !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .xc-case-studies {
        padding: 60px 0 !important;
    }

    .xc-case-studies__heading {
        font-size: 28px;
    }

    .xc-case-studies__card {
        padding: 16px;
    }
}

@media (max-width: 767px) {
    .xc-case-studies {
        padding: 50px 0 0 !important;
    }

    .xc-case-studies__header {
        justify-content: center;
        text-align: center;
    }

    .xc-case-studies__heading {
        font-size: 24px;
        max-width: 100%;
    }

    .xc-case-studies__btn {
        order: 99999;
        margin-top: 30px;
    }

    .xc-case-studies__card {
        min-height: 320px;
        padding: 14px;
        border-radius: 15px;
    }

    .xc-case-studies__card::before {
        border-radius: 15px;
    }

    .xc-case-studies__arrow--prev {
        left: calc(50% - 52px);
    }

    .xc-case-studies__arrow--next {
        right: calc(50% - 52px);
    }
}

/* ── Standalone "View all case studies" button (UX Builder) ── */
.xc-case__btn-all-case,
.xc-case__btn-all-case a {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    flex-direction: row;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff !important;
    background: #79C25C;
    border-radius: 30px;
    padding: 16px 25px;
    text-decoration: none !important;
    transition: background 0.3s;
    border: none;
    cursor: pointer;
    text-transform: none !important;
}

@media (max-width: 549px) {
    .xc-case-case-study .text-right {
        text-align: center !important;
    }
}

.xc-case__btn-all-case:hover,
.xc-case__btn-all-case a:hover {
    background: #134300;
    color: #fff !important;
}

.xc-case__btn-all-case svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Arrow icon via ::after if no SVG is present */
.xc-case__btn-all-case::after,
.xc-case__btn-all-case a::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m194.5 21 179 179-19 19H26v-38h281.5L171 44.5zm70 240h48L254 319.5a2632 2632 0 0 1-59.5 58.5c-.6 0-6.2-5.2-24-23z'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
}

/* ==========================================================================
   DATA HUB — Cropin Data Hub platform section
   ========================================================================== */

.xc-case-data-hub {
    background-color: #09382A !important;
    padding: 100px 0 !important;
}

/* ── Typography — white on dark bg ── */
.xc-case-data-hub .xc-section-title,
.xc-case-data-hub h3 {
    color: #fff !important;
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 20px !important;
}

.xc-case-data-hub p {
    color: #fff !important;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.5em;
}

/* ── Right image column ── */
.xc-case-data-hub .img.border-radius-12px .img-inner {
    border-radius: 20px;
    overflow: hidden;
}

/* ── Cards row ── */
.xc-case-data-hub .box-data-hub {
    border-radius: 20px;
    padding: 30px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.xc-case-data-hub .box-data-hub .box-image {
    margin-bottom: 0;
}

.xc-case-data-hub .box-data-hub .box-image {
    width: 100%;
    height: 88px;
    display: flex;
    justify-content: flex-end;
}

.xc-case-data-hub .box-data-hub .box-image img {
    max-height: 100%;
    width: auto;
    max-width: 192px;
    object-fit: contain;
    object-position: right center;
}

.xc-case-data-hub .box-data-hub .box-text {
    text-align: left !important;
}

.xc-case-data-hub .box-data-hub h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 8px !important;
}

.xc-case-data-hub .box-data-hub p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0;
    min-height: calc(3 * 1.5em);
}

/* ── Card variants ── */
.xc-case-data-hub .box-data-hub.bg-gradient {
    background: linear-gradient(180deg, #09382A 0%, #134300 100%);
}

.xc-case-data-hub .box-data-hub.bg-gradient h4,
.xc-case-data-hub .box-data-hub.bg-gradient p {
    color: #fff !important;
}

.xc-case-data-hub .box-data-hub.bg-white {
    background: #fff;
}

.xc-case-data-hub .box-data-hub.bg-white h4 {
    color: #09382A !important;
}

.xc-case-data-hub .box-data-hub.bg-white p {
    color: #555 !important;
}

.xc-case-data-hub .box-data-hub.bg-green {
    background: #6AB84B;
}

.xc-case-data-hub .box-data-hub.bg-green h4,
.xc-case-data-hub .box-data-hub.bg-green p {
    color: #fff !important;
}

/* ── Spacing between rows ── */
.xc-case-data-hub #row-781391425 {
    margin-top: 40px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .xc-case-data-hub {
        padding: 60px 0 !important;
    }

    .xc-case-data-hub .xc-section-title {
        font-size: 28px;
    }

    .xc-case-data-hub .box-data-hub {
        padding: 20px;
    }
}

@media (max-width: 549px) {
    .xc-case-data-hub {
        padding: 50px 0 !important;
    }

    .xc-case-data-hub .xc-section-title {
        font-size: 24px;
        text-align: center;
    }

    .xc-case-data-hub .box-data-hub {
        border-radius: 12px;
    }

    .xc-case-data-hub #row-781391425 {
        margin-top: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDY — HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section container */
.xc-case-hero {
    background-color: #FFFFFF !important;
    padding: 80px 0 80px !important;
    overflow: visible !important;
}

/* Background overlay image via section-bg */
.xc-case-hero > .section-bg {
    background-image: url('/wp-content/uploads/apps-landscape-bg.webp') !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 1 !important;
}

/* Inner content — centered column */
.xc-case-hero .col-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Logo */
.xc-case-hero__logo {
    max-width: 554px;
    margin-bottom: 0 !important;
}

.xc-case-hero__logo img {
    height: 45px !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Lead heading */
.xc-case-hero__lead {
    width: 85%;
    max-width: 85%;
    text-align: center;
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 1.2em !important;
    margin-bottom: 20px !important;
    animation: xc-fadeInUp 1.25s ease both;
    animation-delay: 300ms;
}

/* Main illustration */
.xc-case-hero__img {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    margin-bottom: 0 !important;
    animation: xc-zoomIn 1.25s ease both;
    animation-delay: 600ms;
}

/* Sub-lead description (white text over dark BG) */
.xc-case-hero__sub-lead {
    width: 84%;
    max-width: 84%;
    text-align: center;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.5em !important;
    color: #FFFFFF !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    animation: xc-fadeInUp 1.25s ease both;
    animation-delay: 600ms;
}

/* Animations */
@keyframes xc-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes xc-zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
    .xc-case-hero {
        padding: 60px 15px 20px !important;
    }

    .xc-case-hero > .section-bg {
        background-size: 1000px auto !important;
    }

    .xc-case-hero__lead {
        width: 690px;
        max-width: 100%;
        font-size: 30px !important;
    }

    .xc-case-hero__img {
        max-width: 420px;
    }

    .xc-case-hero__sub-lead {
        width: 690px;
        max-width: 100%;
    }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
    .xc-case-hero {
        padding: 50px 15px 1px !important;
    }

    .xc-case-hero > .section-bg {
        background-size: 1200px auto !important;
    }

    .xc-case-hero__logo img {
        height: 30px !important;
    }

    .xc-case-hero__lead {
        width: 100%;
        max-width: 100%;
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .xc-case-hero__img {
        max-width: 320px;
        margin-top: 20px;
    }

    .xc-case-hero__sub-lead {
        width: 100%;
        max-width: 100%;
        font-size: 15px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIGITAL HERO SECTION (Homepage banner)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section container ── */
.xc-digital-hero {
    background-color: #003324 !important;
    min-height: 590px !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: center !important;
}

.xc-digital-hero > .section-bg {
    background-color: #003324 !important;
}

/* ── Row ── */
.xc-digital-hero .row {
    align-items: center;
    max-width: 1280px;
}

/* ── Text column ── */
.xc-digital-hero .large-6:first-child > .col-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
}

/* Label — "Digital Transformation of Agriculture" */
.xc-digital-hero__label {
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    line-height: 1.5em !important;
    color: #79C25C !important;
    letter-spacing: 1px;
    margin-bottom: 5px !important;
    animation: fadeInUp 1.25s ease both;
}

/* Heading — main title */
.xc-digital-hero__heading {
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 1.2em !important;
    color: #FFFFFF !important;
    margin-bottom: 30px !important;
    animation: fadeInUp 1.25s ease both;
    animation-delay: 0.2s;
}

/* Sub-text — description */
.xc-digital-hero__sub-text {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #FFFFFF !important;
    margin-top: -20px;
    margin-bottom: 25px !important;
    animation: fadeInUp 1.25s ease both;
    animation-delay: 0.3s;
}

/* CTA Button */
.xc-digital-hero__btn-connect.button {
    background-color: #79C25C !important;
    color: #000 !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 16px 25px !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    margin-right: 0 !important;
    align-self: flex-start;
    transition: all 0.3s ease !important;
    animation: fadeInUp 1.25s ease both;
    animation-delay: 0.4s;
}

.xc-digital-hero__btn-connect.button:hover,
.xc-digital-hero__btn-connect.button:focus {
    background-color: #003324 !important;
    border: 1px solid #79C25C !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

/* ── Image column ── */
.xc-digital-hero .large-6:last-child > .col-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-digital-hero__img {
    max-width: 762px;
    width: 100%;
}

.xc-digital-hero__img .img-inner {
    overflow: visible !important;
}

.xc-digital-hero__img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ── Overlay / before pseudo (optional decorative) ── */
.xc-digital-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 0.8s;
    pointer-events: none;
}

.xc-digital-hero .section-content {
    z-index: 2;
}

/* ── Responsive: ≤ 1366px ── */
@media (max-width: 1366px) {
    .xc-digital-hero {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .xc-digital-hero__heading {
        max-width: 492px;
    }

    .xc-digital-hero__img {
        max-width: 680px;
    }
}

/* ── Responsive: ≤ 1024px (Tablet) ── */
@media (max-width: 1024px) {
    .xc-digital-hero {
        min-height: 380px !important;
    }

    .xc-digital-hero .large-6:first-child > .col-inner {
        padding: 50px 15px;
    }

    .xc-digital-hero__label {
        font-size: 14px !important;
    }

    .xc-digital-hero__heading {
        font-size: 30px !important;
        max-width: 50%;
    }

    .xc-digital-hero__img {
        max-width: 468px;
    }
}

/* ── Responsive: ≤ 767px (Mobile) ── */
@media (max-width: 767px) {
    .xc-digital-hero {
        min-height: 325px !important;
    }

    .xc-digital-hero .large-6:first-child > .col-inner {
        padding: 30px 15px 20px;
    }

    .xc-digital-hero__label {
        font-size: 15px !important;
    }

    .xc-digital-hero__heading {
        font-size: 24px !important;
        max-width: 100%;
        margin-bottom: 12px !important;
    }

    .xc-digital-hero__sub-text {
        font-size: 15px !important;
    }

    .xc-digital-hero__btn-connect.button {
        font-size: 14px !important;
    }

    .xc-digital-hero__img {
        max-width: 370px;
        margin: 0 auto;
    }

    .xc-digital-hero .large-6:last-child {
        order: -1;
    }
}

/* Keyframes (nếu chưa có) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIGITAL ANALYTICS SECTION (Supply Chain Analytics)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section ── */
.xc-digital-analytics {
    padding: 60px 0 !important;
}

/* ── Row ── */
.xc-digital-analytics .row {
    align-items: stretch;
}

/* ── Text column — grey card ── */
.xc-digital-analytics .large-6:first-child > .col-inner {
    background-color: rgba(217, 217, 217, 0.24);
    border-radius: 12px;
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Heading */
.xc-digital-analytics__heading {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #134300 !important;
    margin-bottom: 40px !important;
    animation: fadeInUp 1.25s ease both;
}

/* Body text */
.xc-digital-analytics__text {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #555 !important;
    margin-bottom: 0 !important;
    animation: fadeInUp 1.25s ease both;
    animation-delay: 0.3s;
}

.xc-digital-analytics__text + .xc-digital-analytics__text {
    margin-top: 16px !important;
}

.xc-digital-analytics__text a {
    color: #4169e1 !important;
    text-decoration: none !important;
}

.xc-digital-analytics__text a:hover {
    text-decoration: underline !important;
}

/* ── Image column ── */
.xc-digital-analytics .large-6:last-child > .col-inner {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.xc-digital-analytics__img {
    border-radius: 12px;
    overflow: hidden;
}

.xc-digital-analytics__img .img-inner {
    border-radius: 12px;
    overflow: hidden;
}

.xc-digital-analytics__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Responsive: ≤ 1024px ── */
@media (max-width: 1024px) {
    .xc-digital-analytics .large-6:first-child > .col-inner {
        padding: 18px;
    }

    .xc-digital-analytics__heading {
        font-size: 28px !important;
        margin-bottom: 16px !important;
    }
}

/* ── Responsive: ≤ 767px ── */
@media (max-width: 767px) {
    .xc-digital-analytics__heading {
        font-size: 24px !important;
    }

    .xc-digital-analytics__text {
        font-size: 15px !important;
    }

    .xc-digital-analytics .large-6:last-child {
        min-height: 58vw;
    }
}

/* ===================================================
   DIGITAL FARMING SOLUTIONS — .xc-digital-solutions
   Matches cropin.com original Elementor design
   =================================================== */

/* ── Section wrapper ── */
.xc-digital-solutions {
    padding: 50px 0 60px;
}

/* ── Lead heading (replaces h2) ── */
.xc-digital-solutions__lead {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.35em;
    color: #134300;
    text-align: center;
    max-width: 77%;
    margin: 0 auto 20px;
}

/* ── Apps logo image ── */
.xc-digital-solutions__img-app {
    margin-top: 10px;
}

.xc-digital-solutions__img-app img {
    width: 100%;
    height: 50px;
    object-fit: contain;
    object-position: center center;
}

/* ── Cards row ── */
.xc-digital-solutions .row + .row {
    margin-top: 30px;
    align-items: flex-end;
}

/* ── Each card box ── */
.xc-digital-solutions__box {
    border: 1px solid #969696;
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    height: 100%;
}

.xc-digital-solutions__box:hover {
    background-color: #F2FFEF;
}

/* ── Card logo images ── */
.xc-digital-solutions__box .box-image {
    width: 100%;
}

.xc-digital-solutions__box .box-image img {
    width: 100%;
    height: 45px;
    object-fit: contain;
    object-position: center center;
}

/* ── Card description text ── */
.xc-digital-solutions__box .box-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    padding-top: 10px;
}

.xc-digital-solutions__box .box-text p {
    margin-bottom: 0.3em;
}

/* ── Pill button inside card ── */
.xc-digital-solutions__box-btn {
    background-color: #134300 !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 12px 25px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
    margin-top: 12px !important;
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 12px !important;
}

/* SVG arrow icon (before text → visually left because of row-reverse) */
.xc-digital-solutions__box-btn::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='m194.5 21 179 179-19 19H26v-38h281.5L171 44.5zm70 240h48L254 319.5a2632 2632 0 0 1-59.5 58.5c-.6 0-6.2-5.2-24-23z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    flex-shrink: 0;
}

.xc-digital-solutions__box-btn:hover {
    background-color: #0a2900 !important;
    box-shadow: none !important;
}

/* ── 2nd box elevated (margin-bottom pushes it up with flex-end) ── */
.xc-digital-solutions__box.box-margin-top {
    margin-bottom: 100px;
}

/* ── Equal-height cards via col-inner ── */
.xc-digital-solutions .col .col-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.xc-digital-solutions .col .col-inner > .box {
    flex: 1;
}

/* ── fadeInUp animation ── */
@keyframes xcFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.xc-digital-solutions__box {
    animation: xcFadeInUp 0.8s ease both;
}

/* Staggered delays for 3 cards */
.xc-digital-solutions .col:nth-child(1) .xc-digital-solutions__box {
    animation-delay: 0.2s;
}

.xc-digital-solutions .col:nth-child(2) .xc-digital-solutions__box {
    animation-delay: 0.5s;
}

.xc-digital-solutions .col:nth-child(3) .xc-digital-solutions__box {
    animation-delay: 0.8s;
}

/* ── Responsive: ≤ 1024px (Tablet) ── */
@media (max-width: 1024px) {
    .xc-digital-solutions__lead {
        font-size: 28px;
        max-width: 610px;
    }

    .xc-digital-solutions__box {
        border-radius: 16px;
        padding: 30px 20px;
    }

    .xc-digital-solutions__box .box-image img {
        height: 30px;
    }

    .xc-digital-solutions__box.box-margin-top {
        margin-bottom: 50px;
    }
}

/* ── Responsive: ≤ 767px (Mobile) ── */
@media (max-width: 767px) {
    .xc-digital-solutions {
        padding: 30px 0 40px;
    }

    .xc-digital-solutions__lead {
        font-size: 24px;
        max-width: 100%;
    }

    .xc-digital-solutions__img-app img {
        height: 35px;
    }

    .xc-digital-solutions__box {
        border-radius: 12px;
    }

    .xc-digital-solutions__box .box-image img {
        max-width: 220px;
    }

    .xc-digital-solutions__box .box-text {
        font-size: 15px;
    }

    .xc-digital-solutions__box-btn {
        font-size: 14px !important;
    }

    .xc-digital-solutions__box.box-margin-top {
        margin-bottom: 0;
    }
}

/* ===================================================
   WHY DIGITAL TRANSFORMATION — .xc-digital-why
   Matches cropin.com original Elementor design
   =================================================== */

/* ── Section wrapper ── */
.xc-digital-why {
    padding: 0 0 80px;
}

/* ── Row alignment ── */
.xc-digital-why .row {
    align-items: center;
}

/* ── Lead heading (works for both p and h2) ── */
.xc-digital-why .xc-digital-why__lead {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #134300 !important;
    max-width: 77%;
    margin-bottom: 20px;
}

/* ── Body text (exclude lead) ── */
.xc-digital-why .col-inner p:not(.xc-digital-why__lead) {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #333;
    margin-bottom: 0;
}

/* ── "Here's why" strong label ── */
.xc-digital-why .col-inner p strong {
    font-weight: 600;
    color: #000;
}

/* ── Bullet list with leaf SVG icons ── */
.xc-digital-why .col-inner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xc-digital-why .col-inner ul li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-left: 0;
    margin-bottom: 0;
    padding: 7.5px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #000;
}

/* Leaf SVG icon via ::before */
.xc-digital-why .col-inner ul li::before {
    content: '';
    display: inline-block;
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin-top: 5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 64'%3E%3Cpath fill='%237ac15c' d='m64.1 0c-1.5-0.1-61.9-2.1-63.5 60.8 1.4-4.8 3.3-9.2 5.9-13.3q4.7-7.6 12-14.4c4.4-4.1 9.4-7.8 14.9-11.1 3.7-2.2 7.4-4.1 11-5.7-0.2-0.6-0.1-1.3 0.1-1.9 0.7-1.7 2.7-2.5 4.4-1.9 1.7 0.7 2.5 2.7 1.8 4.4-0.6 1.7-2.6 2.5-4.3 1.8q-0.6-0.3-1.1-0.7c-3.4 1.8-6.8 3.9-10.4 6.4-5 3.6-9.5 7.5-13.4 11.7-4.2 4.6-7.6 9.3-10.1 14.2q-0.4 0.8-0.7 1.6 2.3-0.4 5-1c3.4-0.8 6.1-1.6 8.6-2.4 2.7-0.9 5.6-2 8.3-3.4 1.9-0.9 3.5-1.9 4.9-2.9-0.4-0.8-0.5-1.8-0.1-2.7 0.7-1.7 2.6-2.5 4.3-1.8 1.7 0.7 2.6 2.6 1.9 4.3-0.7 1.7-2.6 2.5-4.4 1.8q-0.3-0.1-0.6-0.3c-1.5 1.1-3.1 2.3-4.9 3.5-2.8 1.7-5.8 3-8.3 4.1-2.5 1.1-5.3 2.1-8.8 3.2-2.9 0.9-5.4 1.6-7.8 2.1q-1.2 3.3-1.9 6.8c59.5-3.9 57.2-62.5 57.2-63.2z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    flex-shrink: 0;
}

/* ── Right column image ── */
.xc-digital-why .col:last-child .img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ── fadeInUp animation ── */
.xc-digital-why .col-inner {
    animation: xcFadeInUp 0.8s ease both;
}

.xc-digital-why .col:nth-child(1) .col-inner {
    animation-delay: 0.2s;
}

.xc-digital-why .col:nth-child(2) .col-inner {
    animation-delay: 0.4s;
}

/* ── Responsive: ≤ 1366px (Laptop) ── */
@media (max-width: 1366px) {
    .xc-digital-why .xc-digital-why__lead {
        max-width: 100%;
    }

    .xc-digital-why {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ── Responsive: ≤ 1024px (Tablet) ── */
@media (max-width: 1024px) {
    .xc-digital-why .xc-digital-why__lead {
        font-size: 28px !important;
        max-width: 610px;
    }
}

/* ── Responsive: ≤ 767px (Mobile) ── */
@media (max-width: 767px) {
    .xc-digital-why {
        padding: 30px 0 40px;
    }

    .xc-digital-why .xc-digital-why__lead {
        font-size: 24px !important;
    }

    .xc-digital-why .col-inner p:not(.xc-digital-why__lead),
    .xc-digital-why .col-inner ul li {
        font-size: 15px;
    }
}

/* ===================================================
   OUR FOOTPRINT IN NUMBERS — .xc-digital-numbers
   =================================================== */

/* ── Section wrapper ── */
.xc-digital-numbers {
    padding: 60px 0 80px;
    background-color: #14A3DC2E;
    background-image: url('/wp-content/uploads/Carto_Maplines-1.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ── Row alignment ── */
.xc-digital-numbers > .section-content > .row {
    align-items: center;
}

/* ── Lead heading ── */
.xc-digital-numbers .xc-digital-numbers__lead {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #134300 !important;
    margin-bottom: 20px;
}

/* ── Image ── */
.xc-digital-numbers .xc-digital-numbers__img img {
    border-radius: 8px;
}

/* ── Body text (right col) ── */
.xc-digital-numbers > .section-content > .row > .col:last-child > .col-inner > p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #333;
    margin-bottom: 20px;
}

/* ── Hide placeholder box images ── */
.xc-digital-numbers__box-no-img .box-image {
    display: none !important;
}

/* ── Stat boxes: 2×2 grid ── */
.xc-digital-numbers__box-no-img {
    background: #f8f9f5;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.xc-digital-numbers__box-no-img:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(19, 67, 0, 0.1);
}

/* ── Stat number (h4) ── */
.xc-digital-numbers__box-no-img .box-text h4 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #134300 !important;
    line-height: 1.2;
    margin-bottom: 6px;
}

/* ── Stat description (p) ── */
.xc-digital-numbers__box-no-img .box-text p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    color: #555;
    margin: 0;
}

/* ── Box text padding reset ── */
.xc-digital-numbers__box-no-img .box-text {
    padding: 0;
}

/* ── Inner row spacing ── */
.xc-digital-numbers .row .row .col {
    padding-bottom: 15px;
}

/* ── fadeInUp animation ── */
.xc-digital-numbers .col-inner {
    animation: xcFadeInUp 0.8s ease both;
}

.xc-digital-numbers > .section-content > .row > .col:nth-child(1) .col-inner {
    animation-delay: 0.2s;
}

.xc-digital-numbers > .section-content > .row > .col:nth-child(2) .col-inner {
    animation-delay: 0.4s;
}

/* ── Responsive: ≤ 1024px (Tablet) ── */
@media (max-width: 1024px) {
    .xc-digital-numbers .xc-digital-numbers__lead {
        font-size: 28px !important;
    }
}

/* ── Responsive: ≤ 767px (Mobile) ── */
@media (max-width: 767px) {
    .xc-digital-numbers {
        padding: 30px 0 40px;
    }

    .xc-digital-numbers .xc-digital-numbers__lead {
        font-size: 24px !important;
    }

    .xc-digital-numbers__box-no-img .box-text h4 {
        font-size: 22px !important;
    }

    .xc-digital-numbers > .section-content > .row > .col:last-child > .col-inner > p {
        font-size: 15px;
    }
}


/* ================================================================
   8. CASE STUDIES SECTION (.xc-digital-case)
   ================================================================ */

/* ── Section wrapper ── */
.xc-digital-case {
    padding: 60px 0 80px;
    background-color: #fff;
}

/* ── Header row: title + "View all" button aligned ── */
.xc-digital-case > .section-content > .row:first-child {
    align-items: center;
    margin-bottom: 30px;
}

/* ── Section title (h2) ── */
.xc-digital-case .xc-section-title {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em;
    color: #134300 !important;
    margin: 0 !important;
}

/* ── "View all cases" button ── */
.xc-digital-case__btn-view-all {
    background-color: #134300 !important;
    border: 2px solid #134300 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 8px 28px !important;
    margin: 0 !important;
    transition: all 0.3s !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
.xc-digital-case__btn-view-all::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m194.5 21 179 179-19 19H26v-38h281.5L171 44.5zm70 240h48L254 319.5a2632 2632 0 0 1-59.5 58.5c-.6 0-6.2-5.2-24-23z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s;
}
.xc-digital-case__btn-view-all svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    transition: fill 0.3s;
}
.xc-digital-case__btn-view-all:hover {
    background-color: #0a2e00 !important;
    border-color: #0a2e00 !important;
    color: #fff !important;
    box-shadow: none !important;
}
.xc-digital-case__btn-view-all:hover::after {
    transform: translateX(3px);
}
.xc-digital-case__btn-view-all:hover svg {
    fill: #fff;
}

/* ── Responsive: ≤ 1024px (Tablet) ── */
@media (max-width: 1024px) {
    .xc-digital-case {
        padding: 40px 0 60px;
    }
    .xc-digital-case .xc-section-title {
        font-size: 28px !important;
    }
}

/* ── Responsive: ≤ 767px (Mobile) ── */
@media (max-width: 767px) {
    .xc-digital-case {
        padding: 30px 0 40px;
    }
    .xc-digital-case > .section-content > .row:first-child {
        margin-bottom: 20px;
    }
    .xc-digital-case .xc-section-title {
        font-size: 24px !important;
    }
    .xc-digital-case__btn-view-all {
        font-size: 13px !important;
        padding: 6px 20px !important;
    }
}


/* ================================================================
   9. BRANDS SECTION (.xc-digital-brands)
   ================================================================ */

/* ── Section wrapper ── */
.xc-digital-brands {
    padding: 100px 0;
    background-color: #fff;
}

/* ── Section title (h2) ── */
.xc-digital-brands .xc-section-title {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.3em;
    color: #134300 !important;
    margin: 0 0 30px !important;
}

/* ── Logo marquee container ── */
.xc-digital-brands__logo {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.xc-digital-brands__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: xc-marquee 30s linear infinite;
}

.xc-digital-brands__track:hover {
    animation-play-state: paused;
}

.xc-digital-brands__track br,
.xc-digital-brands__logo br {
    display: none !important;
}

.xc-digital-brands__track img {
    max-height: 95px;
    max-width: none !important;
    width: auto !important;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 20px rgb(0 0 0 / 6%);
    margin: 15px 0;
    padding: 10px 15px;
    flex-shrink: 0;
}

@keyframes xc-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Responsive: ≤ 1024px (Tablet) ── */
@media (max-width: 1024px) {
    .xc-digital-brands {
        padding: 60px 15px;
    }
    .xc-digital-brands .xc-section-title {
        font-size: 28px !important;
    }
}

/* ── Responsive: ≤ 767px (Mobile) ── */
@media (max-width: 767px) {
    .xc-digital-brands {
        padding: 50px 15px;
    }
    .xc-digital-brands .xc-section-title {
        font-size: 24px !important;
    }
}

/* ═══════════════════════════════════════════════════ */
/* ── WHY PARTNER WITH US — Scroll Tab Section ───── */
/* ═══════════════════════════════════════════════════ */

/* Section wrapper */
.xc-digital-why-us {
    padding: 80px 0 !important;
    background-color: #14A3DC2E !important;
    position: relative;
    overflow: hidden;
}

.xc-digital-why-us::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/uploads/pattern-1-line.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.015;
    pointer-events: none;
    z-index: 0;
}

.xc-digital-why-us > .section-content {
    position: relative;
    z-index: 1;
}

/* Tabs left, content right — h4 stays on top naturally via wrap */
.xc-digital-tab.tabbed-content {
    gap: 60px !important;
    align-items: flex-start;
}

/* ── Section Heading (h4 above tabs) ── */
.xc-digital-tab > h4 {
    font-size: 36px !important;
    font-weight: 500 !important;
    color: #134300 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3em !important;
    margin-bottom: 10px !important;
}

.xc-digital-tab > h4::after {
    content: "Impact measured where it matters the most. Delivering the best of productivity, profitability, and sustainability across every acre.";
    display: block;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #2a2b2c !important;
    line-height: 1.5em !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 12px;
    max-width: 360px;
}

/* ── Tab Navigation (Left Column) ── */
.xc-digital-tab.tabbed-content ul.nav.nav-vertical {
    width: 35% !important;
    min-width: 300px !important;
    max-width: 380px !important;
    flex-shrink: 0 !important;
    padding-top: 0 !important;
    padding-right: 20px !important;
    height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-flow: column nowrap !important;
    /* Fade-out mask at bottom */
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 69%, rgba(255,255,255,0) 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 69%, rgba(255,255,255,0) 100%) !important;
    /* Custom scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: #134300 transparent !important;
}

.xc-digital-tab.tabbed-content ul.nav.nav-vertical::-webkit-scrollbar {
    width: 10px;
}

.xc-digital-tab.tabbed-content ul.nav.nav-vertical::-webkit-scrollbar-thumb {
    background-color: #134300;
    border-radius: 6px;
}

.xc-digital-tab.tabbed-content ul.nav.nav-vertical::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* Remove Flatsome's default vertical border */
.xc-digital-tab.tabbed-content ul.nav.nav-vertical + .tab-panels {
    border-left: none !important;
}

/* ── Tab Items ── */
.xc-digital-tab.tabbed-content ul.nav li.tab {
    margin: 0 !important;
    border: none !important;
}

.xc-digital-tab.tabbed-content ul.nav li.tab + li.tab {
    border-top: none !important;
}

.xc-digital-tab.tabbed-content ul.nav li.tab > a {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #000 !important;
    padding: 18px !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
    line-height: 1.4em !important;
    text-transform: none !important;
    white-space: normal !important;
}

/* Remove Flatsome's default line indicator */
.xc-digital-tab.tabbed-content ul.nav.nav-line li.tab > a:before {
    display: none !important;
}

/* Inactive tab — transparent with slight opacity */
.xc-digital-tab.tabbed-content ul.nav li.tab:not(.active) > a {
    opacity: 0.72;
    background: transparent !important;
}

.xc-digital-tab.tabbed-content ul.nav li.tab:not(.active) > a:hover {
    opacity: 1;
    font-weight: 500 !important;
}

/* Active tab — dark green background + white text */
.xc-digital-tab.tabbed-content ul.nav li.tab.active > a {
    background: #79c25c !important;
    color: #fff !important;
    font-weight: 400 !important;
    opacity: 1;
}

/* Last tab hidden (spacer for fade mask) */
.xc-digital-tab.tabbed-content ul.nav li.tab:last-child {
    visibility: hidden;
    pointer-events: none;
}

/* ── Tab Content (Right Column) ── */
.xc-digital-tab .tab-panels {
    flex: 1 !important;
    padding: 0 !important;
    margin-top: calc(-105px - 10px) !important;
}

/* Panel content layout */
.xc-digital-tab .tab-panels .panel {
    padding: 0 !important;
}

.xc-digital-tab .tab-panels .panel.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Tab panel image */
.xc-digital-tab .tab-panels .panel img {
    width: 100% !important;
    max-width: 100% !important;
    height: 317px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 20px !important;
}

/* Tab panel heading */
.xc-digital-tab .tab-panels .panel h2 {
    font-size: 26px !important;
    font-weight: 500 !important;
    color: #134300 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1.3em !important;
}

.xc-digital-tab .tab-panels .panel h2 strong {
    font-weight: 500 !important;
}

/* Tab panel description */
.xc-digital-tab .tab-panels .panel .elementor-widget-text-editor {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #2a2b2c !important;
}

/* ── Responsive: Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
    .xc-digital-why-us {
        padding: 60px 15px !important;
    }

    .xc-digital-tab.tabbed-content {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .xc-digital-tab > h4 {
        font-size: 28px !important;
        text-align: center !important;
    }

    /* Switch tabs to horizontal scrolling row */
    .xc-digital-tab.tabbed-content ul.nav.nav-vertical {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        height: auto !important;
        flex-direction: row !important;
        flex-flow: row nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        padding-right: 0 !important;
        gap: 15px !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab {
        flex-shrink: 0 !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab:not(.active) > a {
        border: 1px solid #101027 !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
        opacity: 1 !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab > a span {
        white-space: nowrap !important;
        line-height: 1.2em !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab.active > a {
        border-radius: 8px !important;
    }

    /* Last tab visible again on tablet */
    .xc-digital-tab.tabbed-content ul.nav li.tab:last-child {
        visibility: visible;
        pointer-events: auto;
        display: none !important;
    }

    /* Reset content negative margin */
    .xc-digital-tab .tab-panels {
        margin-top: 0 !important;
    }

    .xc-digital-tab .tab-panels .panel img {
        max-height: 380px !important;
        height: auto !important;
    }

    .xc-digital-tab .tab-panels .panel h2 {
        font-size: 22px !important;
    }
}

/* ── Responsive: Mobile ≤ 767px ── */
@media (max-width: 767px) {
    .xc-digital-why-us {
        padding: 50px 15px !important;
    }

    .xc-digital-tab > h4 {
        font-size: 24px !important;
        text-align: left !important;
    }

    .xc-digital-tab > h4::after {
        font-size: 14px !important;
        max-width: 100% !important;
    }

    .xc-digital-tab.tabbed-content {
        gap: 20px !important;
    }

    /* Horizontal scrolling tabs on mobile */
    .xc-digital-tab.tabbed-content ul.nav.nav-vertical {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        height: auto !important;
        flex-direction: row !important;
        flex-flow: row nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        gap: 10px !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab {
        flex-shrink: 0 !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab > a {
        font-size: 14px !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab > a span {
        white-space: nowrap !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab:not(.active) > a {
        border: 1px solid #101027 !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
        opacity: 1 !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab.active > a {
        border-radius: 20px !important;
    }

    .xc-digital-tab.tabbed-content ul.nav li.tab:last-child {
        visibility: visible !important;
        pointer-events: auto !important;
        display: list-item !important;
    }

    /* Reset content margin */
    .xc-digital-tab .tab-panels {
        margin-top: 0 !important;
    }

    /* Square image on mobile */
    .xc-digital-tab .tab-panels .panel img {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 12px !important;
    }

    .xc-digital-tab .tab-panels .panel h2 {
        font-size: 20px !important;
        line-height: 1.4em !important;
    }

    .xc-digital-tab .tab-panels .panel .elementor-widget-text-editor {
        font-size: 15px !important;
    }
}

/* =========================================================================
   XC-DIGITAL-SERVE — "Industries & businesses we serve" Header
   ========================================================================= */
.xc-digital-serve {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.xc-digital-serve .row {
    align-items: flex-start;
}

.xc-digital-serve .xc-serve__heading {
    font-size: 36px;
    font-weight: 500;
    color: #134300;
    line-height: 1.25em;
    margin-bottom: 0;
}

.xc-digital-serve .xc-serve__desc {
    font-size: 16px;
    font-weight: 400;
    color: #1D2130;
    line-height: 1.6em;
    margin-bottom: 0;
}

/* =========================================================================
   XC IMAGEBOX SLIDER — Swiper Carousel
   ========================================================================= */
.xc-imagebox-slider {
    position: relative;
    width: 100%;
}

/* Nav container — positioned at top-right of the section by default */
.xc-imagebox-slider__nav {
    position: absolute;
    top: -70px;
    right: 0;
    display: flex;
    gap: 8px;
    z-index: 10;
}

/* Arrow buttons — Cropin pill-shape style */
.xc-imagebox-slider__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50px;
    border: 1px solid #000;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    outline: none;
}

.xc-imagebox-slider__arrow svg {
    width: 20px;
    height: 20px;
    fill: #000;
    transition: fill 0.3s ease;
}

.xc-imagebox-slider__arrow:hover {
    background: #12A5DA;
    border-color: #12A5DA;
}

.xc-imagebox-slider__arrow:hover svg {
    fill: #fff;
}

/* Swiper container */
.xc-imagebox-slider__swiper {
    overflow: hidden;
}

/* Slide card styling */
.xc-imagebox-slider .swiper-slide {
    height: auto;
}

.xc-imagebox-slider .swiper-slide > .col {
    padding: 0 !important;
    width: 100% !important;
}

.xc-imagebox-slider .swiper-slide .box {
    background: #FBFBFB;
    border-radius: 20px;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Image box inside slider: fully custom, no Flatsome dependency ── */
.xc-imagebox-slider .swiper-slide .box-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.xc-imagebox-slider .swiper-slide .box-image .image-cover {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-top: 75% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.xc-imagebox-slider .swiper-slide .box-image .image-cover img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Force all images inside slider — override Flatsome lazy-load opacity */
.xc-imagebox-slider img {
    opacity: 1 !important;
    visibility: visible !important;
}

.xc-imagebox-slider .swiper-slide .box-text {
    padding: 15px 10px 10px;
    flex: 1;
}

.xc-imagebox-slider .swiper-slide .box-text h5,
.xc-imagebox-slider .swiper-slide .box-text h3,
.xc-imagebox-slider .swiper-slide .box-text .header-title {
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #134300 !important;
    line-height: 1.35em !important;
    margin-bottom: 8px !important;
}

.xc-imagebox-slider .swiper-slide .box-text p {
    font-size: 14px;
    font-weight: 400;
    color: #1D2130;
    line-height: 1.35em;
    margin-bottom: 0;
}

/* ---- Responsive ---- */

/* Laptop (max 1280) */
@media screen and (max-width: 1280px) {
    .xc-digital-serve {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .xc-digital-serve .xc-serve__heading {
        font-size: 30px;
    }
}

/* Tablet (max 849) */
@media screen and (max-width: 849px) {
    .xc-digital-serve {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .xc-digital-serve .xc-serve__heading {
        font-size: 26px;
    }

    .xc-digital-serve .xc-serve__desc {
        font-size: 15px;
    }

    .xc-imagebox-slider__nav {
        position: static;
        justify-content: center;
        margin-top: 20px;
    }
}

/* Mobile (max 549) */
@media screen and (max-width: 549px) {
    .xc-digital-serve {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .xc-digital-serve .xc-serve__heading {
        font-size: 22px;
    }

    .xc-digital-serve .xc-serve__desc {
        font-size: 14px;
    }

    .xc-imagebox-slider__arrow {
        width: 40px;
        height: 40px;
    }

    .xc-imagebox-slider__arrow svg {
        width: 16px;
        height: 16px;
    }

    .xc-imagebox-slider .swiper-slide .box-image img {
        height: 180px;
    }

    .xc-imagebox-slider .swiper-slide .box-text h5,
    .xc-imagebox-slider .swiper-slide .box-text h3,
    .xc-imagebox-slider .swiper-slide .box-text .header-title {
        font-size: 18px !important;
    }
}

/* =========================================================================
   XC-SERVE-NAV — External arrow buttons shortcode
   ========================================================================= */
.xc-serve-nav {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 35px;
}

/* On tablet/mobile — center the arrows */
@media screen and (max-width: 849px) {
    .xc-serve-nav {
        justify-content: flex-start;
        padding-bottom: 0;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 549px) {
    .xc-serve-nav {
        justify-content: flex-start;
    }
}

/* =========================================================================
   XC-DIGITAL-KEY — "Key benefits for our customers" section
   Adapted from cropin.com key_benefits pattern
   ========================================================================= */
.xc-digital-key {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
    overflow: hidden;
}

.xc-digital-key__heading {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #134300;
    margin-bottom: 12px;
}

.xc-digital-key__desc {
    text-align: center;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #1D2130;
}

/* ── Key Benefits slider: reuses xc-imagebox-slider but with modifier ── */

/* Card layout: flex-row → icon left, h4+p right */
.xc-digital-key .xc-imagebox-slider .swiper-slide .box {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px;
    height: auto;
    min-height: 280px;
    padding: 30px;
    border-radius: 20px;
    border: 2px dashed #CECECE;
    background: #fff;
    overflow: visible;
    position: relative;
    transition: all 0.3s ease;
}

/* Icon container: fixed-size on the left */
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-image {
    display: block !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

/* Icon image: small square with rounded corners */
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-image .image-cover {
    display: block !important;
    position: relative !important;
    width: 68px !important;
    height: 68px !important;
    padding-top: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.xc-digital-key .xc-imagebox-slider .swiper-slide .box-image .image-cover img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* Text block: fills remaining space to the right of icon */
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-text {
    padding: 0 !important;
    flex: 1 1 0% !important;
    min-width: 0;
}

/* h4 title */
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-text h4,
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-text h5,
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-text h3,
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-text .header-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #134300 !important;
    line-height: 1.35em !important;
    margin-bottom: 10px !important;
}

/* p description */
.xc-digital-key .xc-imagebox-slider .swiper-slide .box-text p {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #1D2130 !important;
    line-height: 1.5em !important;
    margin-bottom: 0 !important;
}

/* ── Slide wrapper: extra space for rotation effect ── */
.xc-digital-key .xc-imagebox-slider .swiper-slide {
    overflow: visible !important;
    margin-top: 80px;
    margin-bottom: 40px;
    transform-origin: bottom right;
}

.xc-digital-key .xc-imagebox-slider .swiper-slide > .col {
    overflow: visible !important;
}

/* ── Dark pseudo-element behind card (rotation effect) ── */
.xc-digital-key .xc-imagebox-slider .swiper-slide::before {
    content: '';
    position: absolute;
    top: -48px;
    left: -10px;
    background: #344059;
    width: 90%;
    height: 100%;
    z-index: -2;
    border-radius: 20px;
    transform: rotate(0deg);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* ── SVG pattern overlay on card ── */
.xc-digital-key .xc-imagebox-slider .swiper-slide .box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 343 382'%3E%3Cg opacity='.5' stroke='%23fff' stroke-width='.5'%3E%3Cpath d='m138.9 198.7-30-24.5 6.2-35 30 24.5zm43-48.2-36.5 12.8-30-24.5L152 126zm-36.3 13.3 36.5-12.9-6.2 35-36.5 12.9z'/%3E%3Cpath d='M220.8 137.2 207 214.7l-76 27-61.3-51.2L83.5 113l75.2-28z'/%3E%3Cpath d='m255.4 124.3-19.6 111.2-109.9 38.2-90.2-73.5L55.3 89l110-38.7zM84.6 113.7 56.9 90.6m162.4 46.9 34.8-12.6m-122.2 115-5.6 31.8m-6.9 38.7-6.9 39.3M287.3 113l37-13.5m-295-32L-1 42.2'/%3E%3Cpath d='m289 112.5-26.2 148-143.6 51-117.4-97 26.1-148 143.6-51z'/%3E%3Cpath d='m325.4 98.8-33.2 188-180.1 65.5L-34.8 229-1.7 41l180.3-66.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* ── Hover effect on any card ── */
.xc-digital-key .xc-imagebox-slider .swiper-slide:hover .box {
    border-color: #79c25c;
    transform: rotate(6deg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    background: #79c25c;
    z-index: 2;
}

.xc-digital-key .xc-imagebox-slider .swiper-slide:hover::before {
    transform: rotate(-8deg);
    opacity: 1;
}

.xc-digital-key .xc-imagebox-slider .swiper-slide:hover .box-text h4,
.xc-digital-key .xc-imagebox-slider .swiper-slide:hover .box-text h5,
.xc-digital-key .xc-imagebox-slider .swiper-slide:hover .box-text h3,
.xc-digital-key .xc-imagebox-slider .swiper-slide:hover .box-text .header-title,
.xc-digital-key .xc-imagebox-slider .swiper-slide:hover .box-text p {
    color: #fff !important;
}

/* ── Desktop: swiper-slide-next auto highlighted ── */
@media (min-width: 850px) {
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-next .box {
        border-color: #79c25c;
        transform: rotate(6deg);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
        background: #79c25c;
        z-index: 2;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-next::before {
        transform: rotate(-8deg);
        opacity: 1;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-next .box-text h4,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-next .box-text h5,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-next .box-text h3,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-next .box-text .header-title,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-next .box-text p {
        color: #fff !important;
    }
}

/* ── Custom bottom-centered arrows ── */
.xc-digital-key .xc-serve-nav {
    justify-content: center;
    padding-bottom: 0;
    margin-top: 20px;
    height: auto;
}

/* Nav container: centered below the slider */
.xc-digital-key .xc-imagebox-slider__nav {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.xc-digital-key .xc-imagebox-slider__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #000;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.xc-digital-key .xc-imagebox-slider__arrow svg {
    width: 20px;
    height: 20px;
    fill: #000;
    transition: fill 0.3s ease;
}

.xc-digital-key .xc-imagebox-slider__arrow:hover {
    background: #134300;
    border-color: #134300;
}

.xc-digital-key .xc-imagebox-slider__arrow:hover svg {
    fill: #fff;
}

/* ── Responsive: Laptop ── */
@media screen and (max-width: 1280px) {
    .xc-digital-key {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    .xc-digital-key__heading {
        font-size: 30px;
    }
}

/* ── Responsive: Tablet ── */
@media screen and (max-width: 849px) {
    .xc-digital-key {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }

    .xc-digital-key__heading {
        font-size: 28px;
    }

    .xc-digital-key__desc {
        max-width: 90%;
        font-size: 15px;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide .box {
        min-height: 250px;
    }

    /* On tablet, highlight active slide instead of next */
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active .box {
        border-color: #79c25c;
        transform: rotate(6deg);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
        background: #79c25c;
        z-index: 2;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active::before {
        transform: rotate(-8deg);
        opacity: 1;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active .box-text h4,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active .box-text h5,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active .box-text h3,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active .box-text .header-title,
    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active .box-text p {
        color: #fff !important;
    }
}

/* ── Responsive: Mobile ── */
@media screen and (max-width: 549px) {
    .xc-digital-key {
        padding-top: 50px !important;
        padding-bottom: 30px !important;
    }

    .xc-digital-key__heading {
        font-size: 24px;
    }

    .xc-digital-key__desc {
        max-width: 100%;
        font-size: 15px;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide .box {
        min-height: 200px;
        padding: 20px;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide .box-image .image-cover {
        width: 52px !important;
        height: 52px !important;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide .box-text h5,
    .xc-digital-key .xc-imagebox-slider .swiper-slide .box-text h3,
    .xc-digital-key .xc-imagebox-slider .swiper-slide .box-text .header-title {
        font-size: 18px !important;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide .box-text p {
        font-size: 15px !important;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide {
        margin-top: 50px;
        margin-bottom: 30px;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide::before {
        top: -30px;
        width: 96%;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active .box {
        transform: rotate(3deg);
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide.swiper-slide-active::before {
        transform: rotate(-3deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   ██ DIGITAL PROVIDE — "Digital agriculture solutions we provide"
   ═══════════════════════════════════════════════════════════════ */

.xc-digital-provide {
    padding-top: 100px !important;
    padding-bottom: 20px !important;
}

/* ── Header row: heading left, description right ── */
.xc-digital-provide .xc-digital-provide__lead {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.35em;
    color: #134300;
    margin-bottom: 0;
}

/* Description column align */
.xc-digital-provide > .section-content > .row:first-child {
    align-items: center;
    margin-bottom: 30px;
}

.xc-digital-provide > .section-content > .row:first-child .col {
    padding-bottom: 10px;
}

.xc-digital-provide > .section-content > .row:first-child p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #555;
    margin-bottom: 0;
}

/* ── Cards grid row ── */
.xc-digital-provide > .section-content > .row:nth-child(2) {
    gap: 0;
}

.xc-digital-provide > .section-content > .row:nth-child(2) .col {
    padding-bottom: 20px;
    display: flex;
}

.xc-digital-provide > .section-content > .row:nth-child(2) .col .col-inner {
    display: flex;
    width: 100%;
}

/* ── Card styling ── */
.xc-digital-provide__card {
    background-color: #F6FFF2;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
    height: 100%;
    transition: box-shadow 0.3s ease;
}

.xc-digital-provide__card:hover {
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1);
}

/* Icon image */
.xc-digital-provide__card .icon-box-img {
    width: 50px !important;
    margin-bottom: 12px;
}

.xc-digital-provide__card .icon-box-img img {
    width: 50px;
    height: 50px;
}

/* Card title */
.xc-digital-provide__card h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35em;
    color: #134300;
    margin-bottom: 6px;
}

/* Card description */
.xc-digital-provide__card p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    color: #555;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Responsive: Laptop ── */
@media screen and (max-width: 1366px) {
    .xc-digital-provide {
        padding-top: 100px !important;
        padding-bottom: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ── Responsive: Tablet ── */
@media screen and (max-width: 849px) {
    .xc-digital-provide {
        padding-top: 60px !important;
        padding-bottom: 0 !important;
    }

    .xc-digital-provide .xc-digital-provide__lead {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .xc-digital-provide > .section-content > .row:first-child .col {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* ── Responsive: Mobile ── */
@media screen and (max-width: 549px) {
    .xc-digital-provide {
        padding-top: 40px !important;
        padding-bottom: 10px !important;
    }

    .xc-digital-provide .xc-digital-provide__lead {
        font-size: 22px;
    }

    .xc-digital-provide > .section-content > .row:first-child p {
        font-size: 14px;
    }

    .xc-digital-provide__card {
        padding: 15px;
        border-radius: 12px;
    }

    .xc-digital-provide__card .icon-box-img {
        width: 40px !important;
        margin-bottom: 8px;
    }

    .xc-digital-provide__card .icon-box-img img {
        width: 40px;
        height: 40px;
    }

    .xc-digital-provide__card h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .xc-digital-provide__card p {
        font-size: 13px;
        line-height: 1.35em;
        -webkit-line-clamp: 3;
    }

    /* Keep 2 columns on mobile for digital-provide cards */
    .xc-digital-provide > .section-content > .row:nth-child(2) .col {
        max-width: 50%;
        flex-basis: 50%;
        padding-bottom: 15px;
    }

    /* ── Hero fixes ── */
    .xc-digital-hero {
        margin-top: 60px !important;
        padding-top: 0 !important;
    }

    .xc-digital-hero__label {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .xc-digital-hero__heading {
        font-size: 20px !important;
        line-height: 1.3em !important;
        margin-bottom: 8px !important;
        margin-top: 0 !important;
    }

    .xc-digital-hero__sub-text {
        font-size: 13px !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    .xc-digital-hero__btn-connect.button {
        font-size: 13px !important;
        padding: 10px 20px !important;
    }

    .xc-digital-hero .large-6:first-child > .col-inner {
        padding: 15px 15px 10px !important;
    }

    /* ── Key Benefits slider fixes ── */
    .xc-digital-key .xc-imagebox-slider .swiper-slide .box {
        min-height: 180px;
    }

    .xc-digital-key .xc-imagebox-slider .swiper-slide .box-text p {
        font-size: 13px !important;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }

    /* ── Case Studies fixes ── */
    .xc-digital-case > .section-content > .row:first-child {
        align-items: center;
        flex-wrap: nowrap;
    }

    .xc-digital-case > .section-content > .row:first-child .col {
        padding-bottom: 10px;
        max-width: 50%;
        flex-basis: 50%;
    }

    .xc-digital-case .xc-section-title {
        font-size: 20px !important;
        margin-bottom: 0 !important;
    }

    .xc-digital-case__btn-view-all {
        font-size: 12px !important;
        padding: 6px 14px !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }

    .xc-case-studies__nav {
        gap: 15px !important;
    }

    .xc-case-studies__arrow {
        width: 48px !important;
        height: 48px !important;
    }

    .xc-case-studies__arrow svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* ── Serve section: arrows centered ── */
    .xc-digital-serve > .section-content > .row:first-child {
        align-items: center;
    }

    .xc-digital-serve > .section-content > .row:first-child .col {
        padding-bottom: 10px;
    }

    .xc-digital-serve .xc-serve__heading {
        font-size: 20px !important;
        margin-bottom: 0 !important;
    }

    .xc-digital-serve .xc-serve__desc {
        font-size: 13px !important;
    }

    .xc-digital-serve .xc-serve-nav {
        text-align: center !important;
    }

    .xc-digital-serve .col-inner.text-right {
        text-align: center !important;
    }

    /* ── Footer fixes ── */
    .xc__footer__logo {
        max-width: 160px !important;
    }

    .xc__footer__slogan-title {
        font-size: 13px !important;
    }

    .xc__footer__slogan-desc {
        font-size: 14px !important;
    }

    .xc__footer__contact p {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .xc__footer__map iframe {
        height: 180px !important;
    }

    .xc__footer .section-bg img {
        width: 100%;
    }

    /* ── CTA banner fixes ── */
    .xc__home-cta .xc__home-cta__heading {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .xc__home-cta .xc__home-cta__desc {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   CAREER PAGE
   ========================================================================== */

/* ── 1. HERO SECTION ── */
.xc-career-hero.section {
    background-color: #003324 !important;
    min-height: 590px;
    align-items: center;
    overflow: hidden;
}

.xc-career-hero .row {
    align-items: center;
}

/* Hide spacer col on all screens */
.xc-career-hero .col.large-2 {
    display: none;
}

/* Text column — take ~45% */
.xc-career-hero .col.large-4 {
    flex-basis: 45% !important;
    max-width: 45% !important;
    padding: 60px 15px 60px 0;
}

.xc-career-hero .col.large-4 .col-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Eyebrow text */
.xc-career-hero__eyebrow {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.5em;
    margin-bottom: 10px;
}

/* H1 Heading */
.xc-career-hero__heading {
    color: #ffffff !important;
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 1.2em !important;
    margin-bottom: 20px !important;
}

/* Lime green span */
.xc-career-hero__lime {
    color: #8DC63F !important;
}

/* Image column — take ~55% */
.xc-career-hero .col.large-6 {
    flex-basis: 55% !important;
    max-width: 55% !important;
    padding-bottom: 0;
}

.xc-career-hero .col.large-6 .col-inner {
    position: relative;
}

/* Main image */
.xc-career-hero__img-1 .img-inner {
    border-radius: 20px;
    overflow: hidden;
}

.xc-career-hero__img-1 img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center center;
}

/* Sub image — overlapping */
.xc-career-hero__img-2 {
    position: absolute !important;
    bottom: -23px;
    left: -103px;
    width: auto !important;
    z-index: 2;
}

.xc-career-hero__img-2 img {
    width: 260px;
    border: 6px solid #003324;
    border-radius: 16px;
}

/* Button — lime green pill */
.xc-career-hero__btn.button {
    background-color: #8DC63F !important;
    border-color: #8DC63F !important;
    color: #000000 !important;
    border-radius: 100px !important;
    padding: 12px 25px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    align-self: flex-start;
    margin-top: 15px;
    line-height: 1.6 !important;
}

.xc-career-hero__btn.button:hover {
    background-color: #003324 !important;
    border-color: #8DC63F !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-hero.section {
        min-height: 380px;
    }

    .xc-career-hero .col.large-4 {
        flex-basis: 50% !important;
        max-width: 50% !important;
        padding: 50px 15px;
    }

    .xc-career-hero__eyebrow {
        font-size: 16px;
    }

    .xc-career-hero__heading {
        font-size: 30px !important;
    }

    .xc-career-hero .col.large-6 {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    .xc-career-hero__img-2 {
        left: -20px;
        bottom: 29px;
    }

    .xc-career-hero__img-2 img {
        width: 200px;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-hero.section {
        min-height: auto;
    }

    .xc-career-hero .col.large-2 {
        display: none;
    }

    .xc-career-hero .col.large-4 {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding: 35px 15px 5px;
    }

    .xc-career-hero__eyebrow {
        font-size: 15px;
    }

    .xc-career-hero__heading {
        font-size: 24px !important;
    }

    .xc-career-hero .col.large-6 {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding: 15px 15px 35px;
    }

    /* Hide sub image on mobile */
    .xc-career-hero__img-2 {
        display: none !important;
    }

    .xc-career-hero__btn.button {
        font-size: 14px !important;
    }
}

/* ── 2. PRIDE / CULTURE SECTION ── */
.xc-career-pride.section {
    padding: 80px 0 !important;
}

.xc-career-pride .row {
    align-items: stretch;
}

/* Text column */
.xc-career-pride .col.large-6:first-child {
    padding-right: 30px;
}

.xc-career-pride .col.large-6:first-child .col-inner {
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* H2 heading */
.xc-career-pride__heading {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #134300 !important;
    margin-bottom: 20px !important;
}

/* Description text */
.xc-career-pride__desc {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}

/* Icon box list items */
.xc-career-pride .pride-box-list {
    margin-bottom: 10px;
    align-items: center;
}

.xc-career-pride .pride-box-list .icon-box-img {
    width: 45px !important;
    flex: 0 0 45px !important;
}

.xc-career-pride .pride-box-list .icon-box-img img {
    border-radius: 9px;
}

.xc-career-pride .pride-box-list h3 {
    font-family: 'UTM Avo', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.25em !important;
    color: #000000 !important;
    margin-bottom: 0 !important;
}

/* Image column */
.xc-career-pride .col.large-6:last-child .col-inner {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.xc-career-pride .col.large-6:last-child .img img {
    width: 89%;
    margin-left: auto;
    display: block;
    border-radius: 20px;
}

/* ── Spinning text + icon overlay on image ── */
.xc-career-pride__spin-wrapper {
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 3;
    width: 200px;
    height: 200px;
}

.xc-career-pride__spin-wrapper > svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: xc-rotate-text 20s linear infinite;
}

.xc-career-pride__spin-wrapper > svg text {
    font-family: 'UTM Avo', 'Roboto', sans-serif;
    font-size: 23px;
    font-weight: 400;
    fill: #134300;
    letter-spacing: 3.1px;
    word-spacing: 5px;
}

.xc-career-pride__spin-wrapper > svg path {
    fill: transparent;
}

/* Arrow icon in center of spinning text */
.xc-career-pride__spin-icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 4;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: #134300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-career-pride__spin-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(311deg);
    animation: none;
}

@keyframes xc-rotate-text {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-pride.section {
        padding: 60px 15px !important;
    }

    .xc-career-pride__heading {
        font-size: 28px !important;
    }

    .xc-career-pride .pride-box-list .icon-box-img {
        width: 50px !important;
        flex: 0 0 50px !important;
    }

    .xc-career-pride .pride-box-list h3 {
        font-size: 18px !important;
    }

    .xc-career-pride .col.large-6:last-child .img img {
        width: 100%;
        margin-top: 30px;
    }

    .xc-career-pride__spin-wrapper {
        width: 150px;
        height: 150px;
        left: 50%;
        transform: translateX(-50%);
    }

    .xc-career-pride__spin-wrapper svg text {
        font-size: 20px;
        word-spacing: 9px;
    }

    .xc-career-pride__spin-icon {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 50px;
        height: 50px;
    }

    .xc-career-pride__spin-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-pride.section {
        padding: 50px 15px !important;
    }

    .xc-career-pride .col.large-6:first-child {
        padding-right: 15px;
    }

    .xc-career-pride__heading {
        font-size: 24px !important;
    }

    .xc-career-pride__desc {
        font-size: 15px !important;
    }

    .xc-career-pride .pride-box-list .icon-box-img {
        width: 40px !important;
        flex: 0 0 40px !important;
    }

    .xc-career-pride .col.large-6:last-child .img img {
        width: 100%;
    }

    .xc-career-pride__spin-wrapper {
        width: 100px;
        height: 100px;
        left: 50%;
        transform: translateX(-50%);
    }

    .xc-career-pride__spin-wrapper svg text {
        font-size: 22px;
        word-spacing: 6px;
    }

    .xc-career-pride__spin-icon {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .xc-career-pride__spin-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ── 3. CAREER STAND (VALUES) SECTION ── */
.xc-career-stand.section {
    background-color: rgba(20, 163, 220, 0.18) !important;
    padding: 70px 0 !important;
}

/* Header: centered heading + description */
.xc-career-stand .xc-section-title {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #134300 !important;
    margin-bottom: 10px !important;
}

.xc-career-stand .col.large-12 p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #333 !important;
    max-width: 60%;
    margin: 0 auto;
}

/* Each value card (col-inner as card) */
.xc-career-stand .col.large-4 .col-inner {
    background-color: #fff;
    border: 2px dashed #fff;
    border-radius: 20px;
    padding: 30px 20px;
}

/* Icon box: wrap so icon+title on row 1, description on row 2 */
.xc-career-stand__box {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.xc-career-stand__box .icon-box-img {
    width: 60px !important;
    flex: 0 0 60px !important;
    margin-right: 15px !important;
    margin-bottom: 0 !important;
}

.xc-career-stand__box .icon-box-img img {
    border-radius: 9px;
}

/* Title sits next to icon on row 1 */
.xc-career-stand__box .icon-box-text {
    flex: 1 1 0px !important;
    display: contents !important;
}

.xc-career-stand__box h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.25em !important;
    color: #000 !important;
    margin-bottom: 0 !important;
    flex: 1 1 0px !important;
}

/* Description wraps to full-width row 2 */
.xc-career-stand__box p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #333 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(4 * 1.5em * 16px / 16px) !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-stand.section {
        padding: 60px 15px !important;
    }

    .xc-career-stand .xc-section-title {
        font-size: 28px !important;
    }

    .xc-career-stand .col.large-12 p {
        max-width: 100%;
    }

    .xc-career-stand__box .icon-box-img {
        width: 50px !important;
        flex: 0 0 50px !important;
        margin-right: 13px !important;
    }

    .xc-career-stand__box h3 {
        font-size: 18px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-stand.section {
        padding: 50px 15px !important;
    }

    .xc-career-stand .xc-section-title {
        font-size: 24px !important;
    }

    .xc-career-stand .col.large-12 p {
        font-size: 15px !important;
    }

    .xc-career-stand__box p {
        text-align: center;
        font-size: 15px !important;
    }
}

/* ── 4. CAREER MVW (MISSION / VISION / WHERE) SECTION ── */
.xc-career-mvw.section {
    padding: 80px 0 30px !important;
}

/* Mission & Vision cards */
.xc-career-mvw__mission {
    background-color: #EDF8FF !important;
    border-radius: 20px;
    padding: 80px 24px 25px !important;
    text-align: left !important;
}

.xc-career-mvw__mission .box-image {
    display: inline-block;
    width: auto;
}

.xc-career-mvw__mission .box-image img {
    width: 60px !important;
    height: auto;
}

.xc-career-mvw__mission .box-text {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.xc-career-mvw__mission .box-text h4 {
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 1.25em !important;
    color: #134300 !important;
    margin-bottom: 6px !important;
}

.xc-career-mvw__mission .box-text p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #333 !important;
    margin-bottom: 0 !important;
    min-height: 3em; /* 2 lines × 1.5em line-height = 3em */
}

/* Where people thrive card — horizontal layout */
.xc-career-mvw__where {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 12px;
    overflow: visible;
}

.xc-career-mvw__where .box-image {
    width: 50%;
    flex: 0 0 50%;
    border-radius: 20px;
    overflow: hidden;
}

.xc-career-mvw__where .box-image img {
    border-radius: 20px;
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center center;
}

.xc-career-mvw__where .box-text {
    width: 50%;
    flex: 0 0 50%;
    text-align: left !important;
    padding: 3px 3px 3px 18px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xc-career-mvw__where .box-text h4 {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #134300 !important;
    margin-bottom: 12px !important;
}

.xc-career-mvw__where .box-text p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #333 !important;
    margin-bottom: 0.5em !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-mvw.section {
        padding: 60px 15px 30px !important;
    }

    .xc-career-mvw__mission {
        padding: 25px !important;
    }

    .xc-career-mvw__mission .box-text h4 {
        font-size: 28px !important;
    }

    .xc-career-mvw__where .box-text {
        padding: 18px !important;
    }

    .xc-career-mvw__where .box-text h4 {
        font-size: 28px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-mvw.section {
        padding: 50px 15px 20px !important;
    }

    .xc-career-mvw__mission {
        padding: 18px !important;
        border-radius: 12px;
    }

    .xc-career-mvw__mission .box-image img {
        width: 50px !important;
    }

    .xc-career-mvw__mission .box-text h4 {
        font-size: 20px !important;
    }

    .xc-career-mvw__where {
        flex-direction: column !important;
    }

    .xc-career-mvw__where .box-image {
        width: 100%;
        flex: 0 0 auto;
        min-height: 58vw;
    }

    .xc-career-mvw__where .box-image img {
        height: auto;
    }

    .xc-career-mvw__where .box-text {
        width: 100%;
        flex: 0 0 auto;
        padding: 0 !important;
    }

    .xc-career-mvw__where .box-text h4 {
        font-size: 24px !important;
    }

    .xc-career-mvw__where .box-text p {
        font-size: 15px !important;
    }
}

/* ================================================================
   CAREER – Flourish with purpose
   ================================================================ */
.xc-career-purpose.section {
    padding: 30px 0 !important;
}

/* Background row container */
.xc-career-purpose__row-bg {
    background-color: #22303D !important;
    border-radius: 18px !important;
    padding: 70px 30px !important;
    position: relative;
    overflow: hidden;
}

/* Header wrapper */
.xc-career-purpose__header {
    text-align: center;
    margin-bottom: 40px;
}

.xc-career-purpose__header h2 {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}

.xc-career-purpose__header p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #fff !important;
    max-width: 86%;
    margin: 0 auto !important;
}

/* Cards row */
.xc-career-purpose__row-bg .row {
    margin-top: 0 !important;
}

/* Individual card */
.xc-career-purpose__row-bg-card {
    background-color: rgba(226, 226, 226, 0.09) !important;
    border-radius: 20px !important;
    padding: 20px !important;
}

/* Card icon */
.xc-career-purpose__row-bg-card .icon-box-img {
    width: 100% !important;
    margin-bottom: 15px !important;
}

.xc-career-purpose__row-bg-card .icon-box-img img {
    width: 100% !important;
    height: 100px !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding-top: 0 !important;
}

/* Card title */
.xc-career-purpose__row-bg-card h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.25em !important;
    color: #fff !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Card text */
.xc-career-purpose__row-bg-card p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #fff !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    min-height: 6em; /* 4 lines × 1.5em = 6em */
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-purpose.section {
        padding: 20px 10px !important;
    }

    .xc-career-purpose__row-bg {
        padding: 38px 18px !important;
    }

    .xc-career-purpose__header p {
        max-width: 100%;
    }

    .xc-career-purpose__header h2 {
        font-size: 28px !important;
    }

    .xc-career-purpose__row-bg-card .icon-box-img img {
        width: 30% !important;
    }

    .xc-career-purpose__row-bg-card h3 {
        font-size: 20px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-purpose__row-bg {
        padding: 30px 15px !important;
        border-radius: 12px !important;
    }

    .xc-career-purpose__header h2 {
        font-size: 24px !important;
    }

    .xc-career-purpose__header p {
        font-size: 15px !important;
    }

    .xc-career-purpose__row-bg-card .icon-box-img img {
        height: 80px !important;
    }

    .xc-career-purpose__row-bg-card h3 {
        font-size: 18px !important;
    }

    .xc-career-purpose__row-bg-card p {
        font-size: 15px !important;
    }
}

/* ================================================================
   CAREER – Rewards & Benefits
   ================================================================ */
.xc-career-rnb.section {
    padding: 30px 0 !important;
}

/* Row layout: align items stretch so columns are equal height */
.xc-career-rnb .row {
    align-items: stretch !important;
}

/* Left column - text */
.xc-career-rnb .row > .col:first-child .col-inner {
    border-radius: 12px !important;
    padding: 30px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Header wrapper */
.xc-career-rnb__header h2 {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #22303D !important;
    margin-bottom: 22px !important;
}

.xc-career-rnb__header p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #333 !important;
    margin-bottom: 1em !important;
}

.xc-career-rnb__header p:last-child {
    margin-bottom: 0 !important;
}

/* Right column - cards */
/* Card styling */
.xc-career-rnb__card {
    background-color: #F5F5F5 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 20px !important;
    align-items: center !important;
}

.xc-career-rnb__card:last-child {
    margin-bottom: 0 !important;
}

/* Card icon */
.xc-career-rnb__card .icon-box-img {
    width: 80px !important;
    min-width: 80px !important;
    margin-right: 35px !important;
}

.xc-career-rnb__card .icon-box-img img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    padding-top: 0 !important;
}

/* Card title */
.xc-career-rnb__card h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25em !important;
    color: #22303D !important;
    margin-bottom: 10px !important;
}

/* Card description */
.xc-career-rnb__card .icon-box-text p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #333 !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-rnb .row > .col:first-child .col-inner {
        padding: 18px !important;
    }

    .xc-career-rnb__header h2 {
        font-size: 28px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-rnb .row > .col:first-child .col-inner {
        padding: 0 !important;
    }

    .xc-career-rnb__header h2 {
        font-size: 24px !important;
    }

    .xc-career-rnb__header p {
        font-size: 15px !important;
    }

    .xc-career-rnb__card {
        padding: 15px !important;
        border-radius: 12px !important;
    }

    .xc-career-rnb__card .icon-box-img {
        width: 55px !important;
        min-width: 55px !important;
        margin-right: 15px !important;
    }

    .xc-career-rnb__card .icon-box-img img {
        width: 55px !important;
        height: 55px !important;
    }

    .xc-career-rnb__card h3 {
        font-size: 18px !important;
    }

    .xc-career-rnb__card .icon-box-text p {
        font-size: 15px !important;
        line-height: 1.35em !important;
    }
}

/* ================================================================
   CAREER – Our Teams & Locations
   ================================================================ */
.xc-career-teams.section {
    background-color: #003324 !important;
    padding: 100px 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Section background overlay */
.xc-career-teams .section-bg {
    background-image: url('/wp-content/uploads/Carto_Maplines-1.webp') !important;
    background-position: center center !important;
    background-size: cover !important;
    opacity: 0.5 !important;
}

/* Title */
.xc-career-teams__title {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #FFFFFF !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

/* Tags list */
.xc-career-teams__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto 30px !important;
    max-width: 90%;
}

.xc-career-teams__tags li {
    background-color: #447244 !important;
    color: #FFFFFF !important;
    padding: 15px 15px !important;
    border-radius: 50px !important;
    margin: 10px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35em !important;
    width: 190px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

.xc-career-teams__tags li::before {
    content: '' !important;
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 64'%3E%3Cpath fill='%23D9D9D9' d='m64.1 0c-1.5-0.1-61.9-2.1-63.5 60.8 1.4-4.8 3.3-9.2 5.9-13.3q4.7-7.6 12-14.4c4.4-4.1 9.4-7.8 14.9-11.1 3.7-2.2 7.4-4.1 11-5.7-0.2-0.6-0.1-1.3 0.1-1.9 0.7-1.7 2.7-2.5 4.4-1.9 1.7 0.7 2.5 2.7 1.8 4.4-0.6 1.7-2.6 2.5-4.3 1.8q-0.6-0.3-1.1-0.7c-3.4 1.8-6.8 3.9-10.4 6.4-5 3.6-9.5 7.5-13.4 11.7-4.2 4.6-7.6 9.3-10.1 14.2q-0.4 0.8-0.7 1.6 2.3-0.4 5-1c3.4-0.8 6.1-1.6 8.6-2.4 2.7-0.9 5.6-2 8.3-3.4 1.9-0.9 3.5-1.9 4.9-2.9-0.4-0.8-0.5-1.8-0.1-2.7 0.7-1.7 2.6-2.5 4.3-1.8 1.7 0.7 2.6 2.6 1.9 4.3-0.7 1.7-2.6 2.5-4.4 1.8q-0.3-0.1-0.6-0.3c-1.5 1.1-3.1 2.3-4.9 3.5-2.8 1.7-5.8 3-8.3 4.1-2.5 1.1-5.3 2.1-8.8 3.2-2.9 0.9-5.4 1.6-7.8 2.1q-1.2 3.3-1.9 6.8c59.5-3.9 57.2-62.5 57.2-63.2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Location cards row */
.xc-career-teams .row:last-child {
    gap: 0 !important;
}

/* Card box */
.xc-career-teams__box {
    padding: 25px 20px !important;
    border: 1px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    background-image: url('/wp-content/uploads/boder-bg.webp') !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* Card map image - decorative, positioned behind text */
.xc-career-teams__box .box-image {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: -1 !important;
    width: 100% !important;
    height: auto !important;
    text-align: right !important;
    overflow: hidden !important;
}

.xc-career-teams__box .box-image img {
    width: 40% !important;
    height: auto !important;
    opacity: 0.46 !important;
    padding: 10px !important;
}

/* Card text */
.xc-career-teams__box .box-text {
    text-align: left !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.xc-career-teams__box .box-text h4 {
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.25em !important;
    color: #FFFFFF !important;
    margin-bottom: 10px !important;
}

.xc-career-teams__box .box-text p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    color: #DFDFDF !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-teams.section {
        padding: 60px 15px !important;
    }

    .xc-career-teams__title {
        font-size: 28px !important;
    }

    .xc-career-teams__box {
        border-radius: 16px !important;
        padding: 30px 20px !important;
    }

    .xc-career-teams__box .box-text h4 {
        font-size: 20px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-teams.section {
        padding: 50px 15px !important;
    }

    .xc-career-teams__title {
        font-size: 24px !important;
    }

    .xc-career-teams__tags {
        max-width: 100%;
    }

    .xc-career-teams__tags li {
        width: 100% !important;
        font-size: 15px !important;
        margin: 5px 0 !important;
    }

    .xc-career-teams__box {
        border-radius: 12px !important;
        padding: 15px !important;
    }

    .xc-career-teams__box .box-text h4 {
        font-size: 18px !important;
    }

    .xc-career-teams__box .box-text p {
        font-size: 15px !important;
    }
}

/* ================================================================
   CAREER – Ready to Dive In (Gallery)
   ================================================================ */
.xc-career-ready.section {
    padding: 80px 0 !important;
}

/* Title */
.xc-career-ready__title {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35em !important;
    color: #1A1A2E !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

/* Gallery grid – use CSS columns for masonry effect */
.xc-career-ready__gallery {
    column-count: 4 !important;
    column-gap: 15px !important;
    display: block !important;
    flex-flow: unset !important;
}

.xc-career-ready__gallery > .gallery-col {
    display: inline-block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: unset !important;
    padding: 0 0 15px !important;
    break-inside: avoid !important;
}

/* Image styling */
.xc-career-ready__gallery .box-image {
    border-radius: 16px !important;
    overflow: hidden !important;
}

.xc-career-ready__gallery .box-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 800ms ease !important;
}

/* Hover overlay */
.xc-career-ready__gallery .gallery-box {
    position: relative !important;
}

.xc-career-ready__gallery .gallery-box::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border-radius: 16px !important;
    transition: background-color 800ms ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.xc-career-ready__gallery .gallery-box:hover::after {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.xc-career-ready__gallery .gallery-box:hover .box-image img {
    transform: scale(1.05) !important;
}

/* Hide empty box-text */
.xc-career-ready__gallery .box-text {
    display: none !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-ready.section {
        padding: 60px 15px !important;
    }

    .xc-career-ready__title {
        font-size: 28px !important;
    }

    .xc-career-ready__gallery {
        column-count: 3 !important;
        column-gap: 10px !important;
    }

    .xc-career-ready__gallery > .gallery-col {
        padding-bottom: 10px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-ready.section {
        padding: 50px 15px !important;
    }

    .xc-career-ready__title {
        font-size: 24px !important;
    }

    .xc-career-ready__gallery {
        column-count: 2 !important;
        column-gap: 10px !important;
    }

    .xc-career-ready__gallery > .gallery-col {
        padding-bottom: 10px !important;
    }

    .xc-career-ready__gallery .box-image {
        border-radius: 10px !important;
    }

    .xc-career-ready__gallery .gallery-box::after {
        border-radius: 10px !important;
    }
}

/* ================================================================
   CAREER – Join Today (Job Board + Form)
   ================================================================ */
.xc-career-join.section {
    padding: 100px 0 !important;
}

/* Container row – side by side */
.xc-career-join > .section-content > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* ---- Left column – Keka Job Board ---- */
.xc-career-join__jobs {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.xc-career-join__jobs .col-inner {
    height: 100% !important;
}

/* Keka embed container */
.xc-career-join__jobs .kh-main-container {
    font-family: 'Roboto', sans-serif !important;
}

.xc-career-join__jobs #kh-embed-jobs-filters,
.xc-career-join__jobs #kh-job-widget {
    flex: auto !important;
    max-width: 100% !important;
}

/* Hide Keka footer / branding */
.xc-career-join__jobs .kh-footer {
    display: none !important;
}

/* Job card styling */
.xc-career-join__jobs .kh-job-card {
    border-radius: 10px !important;
    border: 1px solid #e9ecef !important;
    transition: border-color 0.3s !important;
}

.xc-career-join__jobs .kh-job-card:hover {
    border-color: #79c25c !important;
}

.xc-career-join__jobs .kh-job-title {
    font-weight: 600 !important;
}

/* Filter card */
.xc-career-join__jobs .kh-card {
    border-radius: 8px !important;
}

/* ---- Right column – Form ---- */
.xc-career-join__form {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.xc-career-join__form .col-inner {
    height: 100% !important;
}

/* Form wrapper card */
.xc-career-join__form-wrap {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08) !important;
    padding: 37px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Form title */
.xc-career-join__form-wrap h2 {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.3em !important;
    color: #1A1A2E !important;
    text-align: left !important;
    margin-bottom: 20px !important;
}

/* Form labels */
.xc-career-join__form-wrap .frm_primary_label {
    color: #000 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Form inputs */
.xc-career-join__form-wrap input[type="text"],
.xc-career-join__form-wrap input[type="email"],
.xc-career-join__form-wrap input[type="tel"] {
    border: 1px solid #e4e4e4 !important;
    border-radius: 5px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    height: 36px !important;
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.xc-career-join__form-wrap input:focus {
    border-color: #79c25c !important;
    box-shadow: 0 0 5px 0 rgba(121, 194, 92, 0.6) !important;
    outline: none !important;
}

/* File upload dropzone */
.xc-career-join__form-wrap .frm_dropzone {
    max-width: 100% !important;
}

.xc-career-join__form-wrap .frm_dropzone .dz-message {
    border: 1px dashed #98A2B3 !important;
    background: #fff !important;
    padding: 24px !important;
    border-radius: 8px !important;
}

/* Submit button */
.xc-career-join__form-wrap .frm_submit button {
    background: #79c25c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 19px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    line-height: normal !important;
    width: auto !important;
    height: auto !important;
}

.xc-career-join__form-wrap .frm_submit button:hover {
    background: #12a5da !important;
    color: #fff !important;
}

/* Form field spacing */
.xc-career-join__form-wrap .form-field {
    margin-bottom: 20px !important;
}

/* Required asterisk */
.xc-career-join__form-wrap .frm_required {
    color: #F04438 !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-join.section {
        padding: 60px 15px !important;
    }

    .xc-career-join__jobs,
    .xc-career-join__form {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .xc-career-join__form {
        margin-top: 30px !important;
    }

    .xc-career-join__form-wrap {
        padding: 18px !important;
    }

    .xc-career-join__form-wrap h2 {
        font-size: 28px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-join.section {
        padding: 50px 15px !important;
    }

    .xc-career-join__form-wrap h2 {
        font-size: 24px !important;
    }

    .xc-career-join__form-wrap {
        padding: 15px !important;
    }
}

/* ================================================================
   CAREER – Career Form (Image + Form)
   ================================================================ */
.xc-career-career.section {
    padding: 100px 0 !important;
}

/* Image column */
.xc-career-career .img .img-inner {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.xc-career-career .img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Form column */
.xc-career-career .xc-career-form {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08) !important;
    padding: 37px !important;
}

/* Form rows – 2 columns */
.xc-career-form__row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 0 !important;
}

.xc-career-form__field {
    flex: 1 !important;
    margin-bottom: 20px !important;
}

.xc-career-form__field--full {
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* Labels */
.xc-career-form label {
    color: #000 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* Text/Email/Tel inputs */
.xc-career-form input[type="text"],
.xc-career-form input[type="email"],
.xc-career-form input[type="tel"] {
    border: 1px solid #e4e4e4 !important;
    border-radius: 5px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    height: 36px !important;
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
    width: 100% !important;
    line-height: 1.3 !important;
}

.xc-career-form input[type="text"]:focus,
.xc-career-form input[type="email"]:focus,
.xc-career-form input[type="tel"]:focus {
    border-color: #79c25c !important;
    box-shadow: 0 0 5px 0 rgba(121, 194, 92, 0.6) !important;
    outline: none !important;
}

/* File upload */
.xc-career-form input[type="file"] {
    border: 1px dashed #98A2B3 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    width: 100% !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #667085 !important;
}

/* Submit button */
.xc-career-form__submit {
    background: #79c25c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: normal !important;
    min-height: auto !important;
}

.xc-career-form__submit:hover {
    background: #12a5da !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Actions */
.xc-career-form__actions {
    margin-top: 10px !important;
}

/* CF7 spinner */
.xc-career-form .wpcf7-spinner {
    display: none !important;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
    .xc-career-career.section {
        padding: 60px 15px !important;
    }

    .xc-career-career .xc-career-form {
        padding: 18px !important;
    }
}

/* ── Mobile ── */
@media screen and (max-width: 549px) {
    .xc-career-career.section {
        padding: 50px 15px !important;
    }

    .xc-career-form__row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .xc-career-career .xc-career-form {
        padding: 15px !important;
    }
}

/* ================================================================
   HEADER – Dropdown menu alignment fix
   ================================================================ */
.header-nav .sub-menu.nav-dropdown li {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.header-nav .sub-menu.nav-dropdown li a {
    padding: 10px 20px !important;
    white-space: nowrap !important;
}

.header-nav .sub-menu.nav-dropdown {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ================================================================
   LANGUAGE SWITCH – Mobile float left
   ================================================================ */
@media screen and (max-width: 849px) {
    .xc-lang-switch {
        position: fixed !important;
        left: 15px !important;
        bottom: 15px !important;
        z-index: 9999 !important;
        border-radius: 50px !important;
        box-shadow: rgba(0, 0, 0, 0.15) 0 5px 15px !important;
        background: #fff !important;
        padding: 8px 14px !important;
    }

    /* Dropdown opens upward on mobile */
    .xc-lang-switch__dropdown {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        border-radius: 10px !important;
    }
}

@media screen and (max-width: 549px) {
    .xc-lang-switch {
        left: 0 !important;
        bottom: 0 !important;
        border-radius: 0 50px 0 0 !important;
    }
}

/* Hide absolute footer */
.absolute-footer {
    display: none !important;
}

/* Reset entry-content padding */
.entry-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}