/*
 * theme-brand.css — JAIBAK Brand Theme Override
 *
 * Palette extracted from JAIBAK-LOGO-New-V2:
 *   Deep forest green  #071810
 *   Brand green        #0A2016
 *   Primary gold       #C49A0A
 *   Gold hover/dark    #8A6D00
 *   Gold highlight     #E8C040
 *   Pale gold tint     #FBF4D4
 *
 * FILE ARCHITECTURE
 * ─────────────────────────────────────────────────────────────
 *  SECTION 1 · COMMON      — CSS variables, transitions,
 *                             structural / layout rules shared
 *                             by both light and dark modes.
 *  SECTION 2 · LIGHT THEME — Default brand colours.
 *                             No [data-theme] selector.
 *  SECTION 3 · DARK THEME  — All [data-theme="dark"] overrides.
 * ─────────────────────────────────────────────────────────────
 *
 * Load order: this file loads AFTER main.css (see functions.php).
 * Specificity: prefix [data-theme="dark"] to beat main.css rules
 * in dark mode; use !important only where PHP inline-style or
 * main.css shorthand otherwise wins.
 *
 * @package webftechjaibak
 */


/* ═══════════════════════════════════════════════════════════════
   SECTION 1 · COMMON
   CSS custom properties, smooth transitions, structural layout
   and utility rules that apply equally to both light & dark modes.
═══════════════════════════════════════════════════════════════ */

/* ── 1.1  CSS Custom Properties (light-mode defaults) ──────── */
:root {
    --theme:        #C49A0A;   /* primary gold — replaces orange #F94D00    */
    --theme-hover:  #8A6D00;   /* dark gold — hover / active states         */
    --theme-light:  #E8C040;   /* lighter gold — gradients / highlights     */
    --theme-pale:   #FBF4D4;   /* very pale gold tint — icon bg, inputs     */
    --green-brand:  #0A2016;   /* forest green — header / footer            */
    --green-deep:   #071810;   /* deep green — darkest surfaces             */
    --header:       #0A2016;   /* override dark-blue header → green         */
    --bg:           #F2F8F4;   /* light green-tinted page background        */
    --bg2:          #071810;   /* dark section background → deep green      */
    --border:       #0A2016;   /* border base                               */
    --text:         #1A2E20;   /* body text — deep green-dark               */
    --bg-light:     #EBF5EE;   /* slightly deeper light green tint          */
}

/* ── 1.2  Smooth theme transition ──────────────────────────── */
/* Applied to all themed elements so toggling feels seamless.   */
body,
html,
.webftechcashlink-header,
#header-sticky,
footer, .footer-area,
[class*="footer-widget"],
section,
.webftechcashlink-service-tile,
.webftechcashlink-process-card,
.webftechcashlink-journey-feature,
.webftechcashlink-contact-help,
.webftechcashlink-contact-help__panel,
.webftechcashlink-value-card,
.accordion-item,
.accordion-button,
.accordion-body,
.about-section,
.about-page-area-new,
input, textarea {
    transition: background-color 0.35s ease, color 0.25s ease,
                border-color 0.30s ease, box-shadow 0.30s ease;
}

/* ── 1.3  Client logo strip — card sizing (both themes) ─────── */
.webftechcashlink-clients-strip__card {
    width: 210px !important;
    height: 130px !important;
    padding: 16px 20px !important;
}
.webftechcashlink-clients-strip__card img {
    max-height: 80px !important;
    max-width: 170px !important;
}
/* Arrow — gold hover (overrides main.css orange) */
.webftechcashlink-clients-strip__arrow:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}

/* ── 1.4  First-section top gap (about, why-us, help pages) ─── */
.about-section.section-padding,
.webftechcashlink-page-hero.section-padding {
    padding-top: 160px !important;
}

/* ── 1.5  About page — vision & mission image (both themes) ─── */
.webftechcashlink-about-vision-image {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.webftechcashlink-about-vision-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    object-fit: cover;
}

/* ── 1.6  Swiper / Slider controls ─────────────────────────── */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: var(--theme);
}
.swiper-pagination-bullet-active {
    background: var(--theme) !important;
}

/* ── 1.5  Cursor ─────────────────────────────────────────────── */
.cursor-outer {
    border-color: var(--theme);
}
.cursor-inner {
    background-color: var(--theme);
}

/* ── 1.6  Preloader ─────────────────────────────────────────── */
.preloader {
    background-color: var(--green-deep);
}
.preloader .spinner,
.preloader .loader {
    border-top-color: var(--theme);
    border-right-color: var(--theme);
}

/* ── 1.7  Theme toggle button — structural (layout only) ─────── */
.webftechcashlink-theme-toggle {
    align-items: center;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 15px;
    height: 40px;
    justify-content: center;
    outline: none;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    width: 40px;
    border: 1px solid transparent;
}
/* Mobile offcanvas toggle placement */
.webftechcashlink-mobile-tools .webftechcashlink-theme-toggle {
    align-self: flex-start;
    margin-top: 8px;
}

/* ── 1.8  Hard-coded orange overrides (main.css inline style purge) */
/* Any surviving raw orange values injected via PHP inline styles    */
[style*="color:#F94D00"],
[style*="color: #F94D00"],
[style*="color:#f94d00"],
[style*="color: #f94d00"] {
    color: var(--theme) !important;
}
[style*="background-color:#F94D00"],
[style*="background-color: #F94D00"],
[style*="background-color:#f94d00"],
[style*="background-color: #f94d00"] {
    background-color: var(--theme) !important;
}
/* Any surviving inline warm-tint backgrounds */
[style*="#fff3ee"],
[style*="#fef0e8"],
[style*="#fff2e3"],
[style*="#fff8f3"],
[style*="EFEDE5"],
[style*="F4F4F2"] {
    background-color: #EBF5EE !important;
}

/* ── 1.9  Responsive — mobile header ───────────────────────── */
@media (max-width: 1199px) {
    .webftechcashlink-header,
    #header-sticky {
        background-color: #ffffff;   /* white in light theme; dark overrides below */
    }
}
@media (max-width: 767px) {
    .webftechcashlink-home-banner {
        background-position: 70% top;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 2 · LIGHT THEME
   Default brand colours. No [data-theme] selector required —
   these rules are active whenever dark mode is NOT applied.
   Organised by page region top → bottom.
═══════════════════════════════════════════════════════════════ */

/* ── 2.1  Body & global background ─────────────────────────── */
body,
html,
#smooth-wrapper,
#smooth-content {
    background-color: #fff;
}

/* ── 2.2  Primary button (.theme-btn) ───────────────────────── */
.theme-btn {
    background-color: #062A14;   /* deep brand green — default */
    color: #fff;
}
.theme-btn::before {
    background-color: #C49A0A;   /* JAIBAK gold — fills in on hover */
}
.theme-btn::after {
    background-color: rgba(10, 32, 22, 0.28);
}
.theme-btn:hover {
    background-color: #C49A0A;   /* gold on hover */
    color: #fff;
}

/* Ghost variant */
.theme-btn--ghost {
    background: transparent;
    border: 1px solid rgba(6, 42, 20, 0.35);
    color: var(--green-brand);
}
.theme-btn--ghost::before {
    background-color: #062A14;
}
.theme-btn--ghost:hover {
    background-color: #C49A0A;
    border-color: #C49A0A;
    color: #fff;
}

/* ── 2.3  Link button ───────────────────────────────────────── */
.link-btn,
.link-btn:visited {
    color: var(--theme);
}
.link-btn:hover {
    color: var(--theme-hover);
}

/* ── 2.4  Header & Navigation — LIGHT THEME ─────────────────── */
.webftechcashlink-header,
#header-sticky {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(6, 42, 20, 0.10);
}

/* Top-level nav links: dark green on white header */
.webftechcashlink-nav-list > li > a,
.header-main .main-menu nav > ul > li > a,
.mean__menu-wrapper .main-menu nav > ul > li > a {
    color: #062A14 !important;
}
.webftechcashlink-nav-list > li > a:hover,
.webftechcashlink-nav-list > li.current-menu-item > a,
.webftechcashlink-nav-list > li.current_page_item > a,
.webftechcashlink-nav-list > li.current-menu-ancestor > a,
.header-main .main-menu nav > ul > li > a:hover,
.header-main .main-menu nav > ul > li.current-menu-item > a,
.header-main .main-menu nav > ul > li.current_page_item > a,
.header-main .main-menu nav > ul > li.current-menu-ancestor > a {
    color: #C49A0A !important;
}

/* Submenu dropdown */
.webftechcashlink-nav-list .sub-menu {
    background: #ffffff !important;
    border: 1px solid rgba(10, 32, 22, 0.10) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14) !important;
}
.webftechcashlink-nav-list .sub-menu li a,
.webftechcashlink-nav-list .sub-menu li > a {
    color: #062A14 !important;
    font-weight: 500;
}
.webftechcashlink-nav-list .sub-menu li:hover > a,
.webftechcashlink-nav-list .sub-menu li a:hover {
    color: #C49A0A !important;
}
.webftechcashlink-nav-list .sub-menu li:hover {
    background: #f4f9f6 !important;
}
/* Arrow tip — match white background */
.webftechcashlink-nav-list .sub-menu::before {
    border-bottom-color: #ffffff !important;
}

/* Dropdown arrow — dark green on white header */
.header-main .main-menu ul li .has-homemenu > a::after,
.header-main .main-menu ul li > a .menu-icon {
    color: rgba(6, 42, 20, 0.55);
}

/* Header CTA register button — #062A14 default, #C49A0A hover */
.webftechcashlink-desktop-tools > .theme-btn {
    background-color: #062A14;
}
.webftechcashlink-desktop-tools > .theme-btn:hover {
    background-color: #C49A0A;
}

/* Sticky header shadow — subtle on white */
#header-sticky.sticky-box-shadow {
    border-bottom-color: rgba(6, 42, 20, 0.12);
    box-shadow: 0 4px 18px rgba(6, 42, 20, 0.10);
}

/* Language switch — dark text on white header */
.webftechcashlink-lang-switch {
    background: rgba(6, 42, 20, 0.06) !important;
    border-color: rgba(6, 42, 20, 0.18) !important;
}
.webftechcashlink-lang-switch a {
    color: rgba(6, 42, 20, 0.75) !important;
}
.webftechcashlink-lang-switch a.active {
    background: #062A14 !important;
    color: #fff !important;
}

/* Theme toggle — dark variant on white header */
.webftechcashlink-theme-toggle {
    background: rgba(6, 42, 20, 0.08) !important;
    border-color: rgba(6, 42, 20, 0.18) !important;
    color: #062A14 !important;
}
.webftechcashlink-theme-toggle:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}

/* Mobile hamburger icon — dark on white header */
.mean-toggle,
.header__hamburger .hamburger-wrap span,
.header__hamburger button span,
.webftechcashlink-header .header__hamburger span {
    background-color: #062A14 !important;
}

/* Breadcrumb wrapper (about page hero bg) */
.breadcrumb-wrapper {
    background-color: var(--green-brand);
}

/* ── 2.5  Language switch — handled inside 2.4 header block ─── */

/* ── 2.6  Offcanvas / Mobile menu ───────────────────────────── */
.offcanvas__info {
    background-color: var(--green-brand);
}
.offcanvas__info .offcanvas__content .offcanvas__close button {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.offcanvas__info .offcanvas__content .offcanvas__close button:hover {
    background: var(--theme);
}
.mobile-menu nav ul li a {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.mobile-menu nav ul li a:hover,
.mobile-menu nav ul li.current_page_item > a {
    color: var(--theme-light);
}

/* ── 2.7  Home Banner Slider — shining golden gradient ─────────
   Architecture:
   • PHP inline style  →  background-image: url(photo) only
   • CSS background    →  white base in light mode
   • CSS ::before      →  golden gradient tint on top of photo
   Gradient palette: #3C2300 → #6B4800 → #C49A0A → #E8C040 → #F5DA6E
────────────────────────────────────────────────────────────── */

/* Hero wrapper: white base in light theme */
.webftechcashlink-home-hero {
    background: #fff;
}

/* Slide: white base — ::before adds the golden gradient */
.webftechcashlink-home-banner {
    background-color:    #fff;
    background-size:     cover;
    background-position: center top;
    background-repeat:   no-repeat;
    border-radius:       24px;
}

/* ::before — shining golden gradient tint over the photo */
.webftechcashlink-home-banner::before {
    background:
        radial-gradient(ellipse at 15% 0%,  rgba(255, 255, 255, 0.10), transparent 28%),
        radial-gradient(ellipse at 80% 95%, rgba(245, 218, 110, 0.14), transparent 36%),
        linear-gradient(
            90deg,
            rgba(60,  35,  0, 0.92) 0%,
            rgba(107, 72,  0, 0.85) 20%,
            rgba(196, 154, 10, 0.75) 44%,
            rgba(232, 192, 64, 0.55) 64%,
            rgba(245, 218, 110, 0.28) 82%,
            rgba(245, 218, 110, 0.04) 100%
        );
}

/* RTL (Arabic): gradient runs right → left */
body.rtl .webftechcashlink-home-banner::before {
    background:
        radial-gradient(ellipse at 85% 0%,  rgba(255, 255, 255, 0.10), transparent 28%),
        radial-gradient(ellipse at 20% 95%, rgba(245, 218, 110, 0.14), transparent 36%),
        linear-gradient(
            270deg,
            rgba(60,  35,  0, 0.92) 0%,
            rgba(107, 72,  0, 0.85) 20%,
            rgba(196, 154, 10, 0.75) 44%,
            rgba(232, 192, 64, 0.55) 64%,
            rgba(245, 218, 110, 0.28) 82%,
            rgba(245, 218, 110, 0.04) 100%
        );
}

/* __overlay: subtle depth layer on top of ::before */
.webftechcashlink-home-banner__overlay {
    background:
        radial-gradient(ellipse at 88% 6%, rgba(245, 218, 110, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(245, 218, 110, 0.10) 0%, rgba(245, 218, 110, 0.00) 22%);
}

/* Banner text: always white on dark-amber / golden gradient */
.webftechcashlink-home-banner__content,
.webftechcashlink-home-banner .banner-content {
    --header: #fff;
    color: #fff;
}
.swiper-slide .webftechcashlink-home-banner__content h1,
.swiper-slide .webftechcashlink-home-banner__content h2,
.webftechcashlink-home-banner .webftechcashlink-home-banner__content h1,
.webftechcashlink-home-banner .webftechcashlink-home-banner__content h2,
.webftechcashlink-home-banner .banner-content h1,
.webftechcashlink-home-banner .banner-content h2,
.webftechcashlink-home-banner__content h1,
.webftechcashlink-home-banner__content h2 {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.70);
}
.swiper-slide .webftechcashlink-home-banner__content p,
.swiper-slide .webftechcashlink-home-banner__content .banner-subtitle,
.webftechcashlink-home-banner .webftechcashlink-home-banner__content p,
.webftechcashlink-home-banner__content p,
.webftechcashlink-home-banner__content .banner-subtitle {
    color: #fff !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* Slider dots */
.webftechcashlink-home-banner__dots .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.38);
}
.webftechcashlink-home-banner__dots .swiper-pagination-bullet-active {
    background: #F5DA6E !important;
}

/* Store badges inside banner */
.webftechcashlink-home-banner .webftechcashlink-store-badge {
    background: #062A14 !important;
    border-color: rgba(196, 154, 10, 0.35) !important;
    color: #fff !important;
}
.webftechcashlink-home-banner .webftechcashlink-store-badge:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}

/* Inner page banners (breadcrumb / page hero) */
.inner-banner::before {
    background: linear-gradient(
        90deg,
        rgba(40, 22, 0, 0.85) 0%,
        rgba(107, 72, 0, 0.60) 50%,
        rgba(196, 154, 10, 0.22) 100%
    );
}

/* ── 2.8  Section titles & decorators ───────────────────────── */
.section-title .sub-title,
.section-title span,
.sub-title {
    color: var(--theme);
}

/* Horizontal rule / accent line below section headings */
.section-title h2::after,
.section-title h3::after {
    background-color: var(--theme);
}

/* ── 2.9  Store badges — default: deep brand green, hover: gold */
.webftechcashlink-store-badge {
    background: #062A14 !important;
    border-color: rgba(196, 154, 10, 0.35) !important;
    color: #fff !important;
}
.webftechcashlink-store-badge:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}

/* ── 2.10  Service tiles & process cards ────────────────────── */
.webftechcashlink-service-tile .icon {
    background: #15392A;
    color: #E8C040;
}
.webftechcashlink-service-tile--link:hover {
    border-color: rgba(196, 154, 10, 0.22);
    box-shadow: 0 24px 50px rgba(10, 32, 22, 0.12);
}

/* ── 2.11  Journey / Feature cards ─────────────────────────── */
.webftechcashlink-journey-card__icon,
.webftechcashlink-feature-icon {
    background: #15392A;
    color: #E8C040;
}

/* ── 2.12  Check list icons ─────────────────────────────────── */
/* main.css: background:#fff3ee; color:#f94d00 — override both  */
.webftechcashlink-check-list__icon {
    background: #15392A !important;
    color: #E8C040 !important;
}
.webftechcashlink-check-list li i.fa-check {
    color: #E8C040;
}

/* ── 2.13  About highlight / counter band ───────────────────── */
.webftechcashlink-about-highlight {
    position: relative;
    isolation: isolate;
    background-size: cover !important;
    background-position: center !important;
}
.webftechcashlink-about-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(7,  24, 16, 0.97) 0%,
        rgba(10, 32, 22, 0.90) 38%,
        rgba(12, 42, 28, 0.55) 66%,
        rgba(16, 56, 32, 0.18) 100%
    );
    border-radius: inherit;
    z-index: -1;
}

/* Subtitle / description text sits directly on the dark gradient,
   so force it white in BOTH light & dark theme.  Without this rule
   the WYSIWYG counter_description renders in default dark grey and
   becomes unreadable.  Scoped tightly to descendants of the band
   so it never bleeds into surrounding sections.                    */
.webftechcashlink-about-highlight,
.webftechcashlink-about-highlight p,
.webftechcashlink-about-highlight p a,
.webftechcashlink-about-highlight ul li,
.webftechcashlink-about-highlight ol li {
    color: #fff;
}

/* Counter section background */
.counter-bg-section-5 {
    background-color: var(--green-deep);
}
.counter-bg-section-5::before {
    background: linear-gradient(81.08deg, var(--green-deep) 36.19%, rgba(7, 24, 16, 0.5) 58.58%);
}

/* Counter numbers & labels */
.counter-bg-wrapper-5 .counter-content h2,
.counter-bg-wrapper-5 .counter-content h3 {
    color: #fff;
}
.counter-bg-wrapper-5 .counter-content h2 span,
.counter-bg-wrapper-5 .counter-content h2 sup {
    color: var(--theme-light);
}

/* ── 2.14  Support strip (services page CTA) ────────────────── */
.webftechcashlink-support-strip {
    background: var(--green-brand);
    border-radius: 20px;
    padding: 40px 48px;
}
.webftechcashlink-support-strip h2 {
    color: #fff;
}
.webftechcashlink-support-strip .theme-btn--ghost {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.webftechcashlink-support-strip .theme-btn--ghost:hover {
    color: #fff;
}

/* ── 2.15  Why choice cards ─────────────────────────────────── */
.webftechcashlink-why-choice-card__number {
    color: rgba(10, 32, 22, 0.18);
}
.webftechcashlink-why-choice-card__icon {
    background: #15392A;
    color: #E8C040;
}
.webftechcashlink-why-choice-card {
    border-top-color: var(--theme);
}

/* ── 2.16  Value cards (help page) ─────────────────────────── */
.webftechcashlink-value-card__icon {
    background: #15392A;
    color: #E8C040;
}

/* ── 2.17  Contact help section ─────────────────────────────── */
.webftechcashlink-contact-help {
    background: #fff;
}
.webftechcashlink-contact-help__icon {
    background: #15392A;
    color: #E8C040;
}
.webftechcashlink-contact-help__card a {
    color: var(--theme);
}
.webftechcashlink-contact-help__card a:hover {
    color: var(--theme-hover);
}

/* Contact form panel — gold shadow */
.webftechcashlink-contact-help__panel {
    box-shadow: 0 14px 30px rgba(196, 154, 10, 0.14);
}

/* Input focus state */
.webftechcashlink-contact-help__form input:focus,
.webftechcashlink-contact-help__form textarea:focus {
    border-color: var(--theme);
    box-shadow: 0 0 0 3px rgba(196, 154, 10, 0.16);
}

/* Submit button */
.webftechcashlink-contact-help__form button {
    background: var(--theme);
}
.webftechcashlink-contact-help__form button:hover {
    background: var(--theme-hover);
}

/* Contact map border */
.webftechcashlink-contact-map__embed iframe {
    border-top: 4px solid var(--theme);
}

/* ── 2.18  FAQ accordion ─────────────────────────────────────── */
.accordion-button:not(.collapsed) {
    background-color: var(--theme-pale);
    color: var(--green-brand);
    box-shadow: inset 0 -1px 0 rgba(196, 154, 10, 0.2);
}
.accordion-button:not(.collapsed)::after {
    filter: none;
}
.accordion-button:focus {
    border-color: rgba(196, 154, 10, 0.4);
    box-shadow: 0 0 0 0.25rem rgba(196, 154, 10, 0.2);
}

/* ── 2.19  Footer ────────────────────────────────────────────────
   NOTE: main.css sets background: orange-gradient shorthand on
   .webftechcashlink-footer-surface, so we use background shorthand
   + !important here to clear the gradient entirely.
───────────────────────────────────────────────────────────── */

/* Outer shell: kill page-bg bleed-through */
footer,
footer.footer-section,
.webftechcashlink-footer-shell {
    background: #012c18 !important;
    padding-bottom: 0 !important;
}

/* Inner surface: override orange gradient (main.css) */
.footer-area,
.footer-wrapper,
.webftechcashlink-footer-surface {
    background: #012c18 !important;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Footer headings */
.webftechcashlink-footer-surface .footer-widget-items .widget-head h3,
.webftechcashlink-footer-surface .footer-widget-items .contact-content h4,
[class*="footer-widget-wrapper"] .footer-widget-title,
[class*="footer-widget-wrapper"] h4,
[class*="footer-widget-wrapper"] h3 {
    color: #fff !important;
}

/* Footer links */
.webftechcashlink-footer-surface .footer-widget-items .list-area li a,
.webftechcashlink-footer-surface .footer-widget-items .contact-content h4 a,
.webftechcashlink-footer-surface .footer-bottom-wrapper p,
.webftechcashlink-footer-surface .footer-list li a,
[class*="footer-widget-wrapper"] a,
.footer-area a {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Hover: override main.css #ffe7c2 (warm cream) → gold */
.webftechcashlink-footer-surface .footer-widget-items .list-area li a:hover,
.webftechcashlink-footer-surface .footer-list li a:hover,
[class*="footer-widget-wrapper"] a:hover,
.footer-area a:hover {
    color: var(--theme-light) !important;
}

/* App-store / social badges in footer — scoped so they don't
   bleed out and override store-badge rules on other sections
   Default: #FFFFFF white  |  Hover: #C49A0A gold  (both themes) */
.footer-area .webftechcashlink-store-badge,
.webftechcashlink-footer-store-btn {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #062A14 !important;
}
.footer-area .webftechcashlink-store-badge small,
.footer-area .webftechcashlink-store-badge strong,
.webftechcashlink-footer-store-btn small,
.webftechcashlink-footer-store-btn strong {
    color: #062A14 !important;
}
.footer-area .webftechcashlink-store-badge i,
.webftechcashlink-footer-store-btn i {
    color: #062A14 !important;
}
.footer-area .webftechcashlink-store-badge:hover,
.webftechcashlink-footer-store-btn:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}
.footer-area .webftechcashlink-store-badge:hover small,
.footer-area .webftechcashlink-store-badge:hover strong,
.footer-area .webftechcashlink-store-badge:hover i,
.webftechcashlink-footer-store-btn:hover small,
.webftechcashlink-footer-store-btn:hover strong,
.webftechcashlink-footer-store-btn:hover i {
    color: #fff !important;
}

/* Social icon circles in footer */
.webftechcashlink-footer-social a {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #062A14 !important;
}
.webftechcashlink-footer-social a:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}

/* Legacy social-icon wrappers used elsewhere in the theme */
.footer-social a {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}
.footer-social a:hover {
    background: var(--theme);
    color: #fff;
}

/* Footer bottom bar */
.footer-bottom-wrapper,
.webftechcashlink-footer-bottom,
.footer-bottom,
.copyright-area {
    background: #012c18 !important;
    border-top: 1px solid rgba(232, 192, 64, 0.15) !important;
    color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a,
.copyright-area a,
.webftechcashlink-footer-bottom a {
    color: rgba(255, 255, 255, 0.7);
}
.footer-bottom a:hover,
.copyright-area a:hover,
.webftechcashlink-footer-bottom a:hover {
    color: var(--theme-light);
}

/* ── 2.20  Back-to-top button ───────────────────────────────── */
#back-top,
.back-to-top {
    background-color: var(--theme);
    color: #fff;
}
#back-top:hover,
.back-to-top:hover {
    background-color: var(--theme-hover);
}

/* ── 2.21  Section & panel backgrounds ──────────────────────── */

/* Journey Feature card ("Connecting Hearts" featured block)
   main.css: warm cream radial+linear gradient with orange tints */
.webftechcashlink-journey-feature {
    background:
        radial-gradient(circle at top left, rgba(10, 32, 22, 0.07), transparent 28%),
        linear-gradient(180deg, rgba(237, 248, 241, 0.98) 0%, rgba(224, 242, 229, 0.98) 100%) !important;
    border-color: rgba(10, 32, 22, 0.10) !important;
}
.webftechcashlink-journey-feature::before {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.55), transparent 28%),
        repeating-radial-gradient(circle at 100% 0, rgba(10, 80, 40, 0.10) 0 2px, transparent 2px 18px) !important;
}

/* Why Choice Panel */
.webftechcashlink-why-choice-panel {
    background:
        radial-gradient(circle at top left, rgba(10, 32, 22, 0.10), transparent 32%),
        linear-gradient(180deg, #EBF5EE 0%, #fff 100%) !important;
    border-color: rgba(10, 32, 22, 0.10) !important;
}
.webftechcashlink-why-choice-panel::after {
    background: repeating-radial-gradient(circle at center, rgba(10, 32, 22, 0.10) 0 2px, transparent 2px 16px) !important;
}
.webftechcashlink-why-choice-panel__eyebrow {
    background: #EBF5EE !important;
    color: var(--theme) !important;
}

/* Download band & Showcase */
.webftechcashlink-download-band,
.webftechcashlink-showcase {
    background:
        radial-gradient(circle at top left, rgba(10, 32, 22, 0.08), transparent 28%),
        linear-gradient(180deg, #EBF5EE 0%, #EFF7F2 100%) !important;
    border-color: rgba(10, 32, 22, 0.08) !important;
}

/* FAQ / generic light sections */
.faq-section,
.faq-area {
    background-color: #fff;
}

/* ── 2.22  Contact page — contact box accent ─────────────────── */
.contact-us-wrapper .contact-box {
    border-top-color: var(--theme);
}

/* Footer style-3 button hover */
.footer-widget-wrapper.style-wrapper-3 .footer-widget-items .contact-item .theme-btn:hover {
    background: var(--theme-hover);
}

/* ── 2.23  International / Global Motion section ────────────────
   Shining golden gradient — dark amber left fading to bright gold.
   Gradient: #3C2300 → #6B4800 → #C49A0A → #E8C040 → #F5DA6E
───────────────────────────────────────────────────────────── */
.webftechcashlink-global-motion {
    background:
        radial-gradient(ellipse at 12% 8%,  rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(ellipse at 88% 88%, rgba(60,  35,  0,  0.22), transparent 32%),
        linear-gradient(
            135deg,
            #3C2300  0%,
            #6B4800  20%,
            #C49A0A  48%,
            #E8C040  68%,
            #F5DA6E  84%,
            #C49A0A 100%
        ) !important;
    border-color: rgba(60, 35, 0, 0.18) !important;
}

/* Shimmer highlights on ::before */
.webftechcashlink-global-motion::before {
    background:
        radial-gradient(ellipse at 78% 22%, rgba(255, 255, 255, 0.18), transparent 18%),
        radial-gradient(ellipse at 12% 78%, rgba(245, 218, 110, 0.16), transparent 24%) !important;
}

/* Text colours */
.webftechcashlink-global-motion__content h2 {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(40, 22, 0, 0.50);
}
.webftechcashlink-global-motion__content p {
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 1px 6px rgba(40, 22, 0, 0.40);
}
.webftechcashlink-global-motion__eyebrow {
    color: #F5DA6E !important;
}

/* Feature badges — white card so they pop on golden bg */
.webftechcashlink-global-motion__badge {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 28px rgba(40, 22, 0, 0.22) !important;
    color: #1A0E00 !important;
}
.webftechcashlink-global-motion__badge-icon {
    background: #15392A !important;
    color: #E8C040 !important;
}
.webftechcashlink-global-motion__badge-label {
    color: #1A0E00 !important;
}

/* Store badges on this section */
.webftechcashlink-global-motion .webftechcashlink-store-badge {
    background: #062A14 !important;
    border-color: rgba(196, 154, 10, 0.35) !important;
    color: #fff !important;
}
.webftechcashlink-global-motion .webftechcashlink-store-badge:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}

/* ── 2.24  About page — sticky cards section ────────────────── */
.about-page-area-new .main-content .card-item .icon,
.about-page-area-new .card-item .icon {
    background: #15392A !important;
    color: #E8C040 !important;
}
.about-page-area-new .main-content .card-item .icon i {
    color: #E8C040 !important;
}
.about-page-area-new .card-item .title {
    color: var(--green-brand);
}

/* ── 2.25  Dark cards (international / global section on home) ── */
/* main.css: background: rgba(249,77,0,0.14); color: #ffb086      */
.webftechcashlink-dark-card__icon {
    background: #15392A !important;
    color: #E8C040 !important;
}

/* ── 2.25b  Download band highlight card icons ───────────────── */
.webftechcashlink-download-band__card-icon {
    background: #15392A !important;
    color: #E8C040 !important;
}

/* ── 2.26  Service detail hero — golden gradient ────────────── */
.webftechcashlink-service-detail-hero {
    background:
        radial-gradient(ellipse at 10% 10%,  rgba(255, 255, 255, 0.12), transparent 28%),
        radial-gradient(ellipse at 88% 90%, rgba(60, 35, 0, 0.22), transparent 32%),
        linear-gradient(
            135deg,
            #3C2300  0%,
            #6B4800  20%,
            #C49A0A  48%,
            #E8C040  68%,
            #F5DA6E  84%,
            #C49A0A 100%
        ) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
/* Override --header locally so headings resolve white */
.webftechcashlink-service-detail-hero__content {
    --header: #fff;
}
.webftechcashlink-service-detail-hero__content h1 {
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.webftechcashlink-service-detail-hero__content p {
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.40);
}
.webftechcashlink-service-detail-hero__content .webftechcashlink-check-list li,
.webftechcashlink-service-detail-hero__content .webftechcashlink-check-list__text {
    color: #fff !important;
}
.webftechcashlink-service-detail-hero__content .webftechcashlink-check-list__icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* ── 2.26b  Service detail — APP EXPLANATION image viewport ──────
   This is the card that holds the phone screenshot in the lower
   section of every service page (single-services.php → the image
   slider block, NOT the page hero).  Uses the same light-green-
   stripes design as the home page's "Connecting Hearts" feature
   card so the app explanation feels visually consistent across
   the site.  Same look in both light and dark themes (see DM-17b
   below for the dark variant — it re-asserts the light palette).

   HEIGHT — both viewport and image are pinned to fixed heights so
   every service page looks identical regardless of:
     - how many slides the service has
     - whether the active slide has an image or is empty
     - which slide index is currently active

   LAYERING — the decorative ::before sits at z-index:-1 INSIDE the
   viewport's own stacking context (created by `isolation: isolate`).
   This keeps the green-stripes pattern behind every slide while
   leaving the slides' own positioning rules (absolute / relative)
   untouched — the slider continues to overlap inactive slides under
   the active one the way main.css intended.                       */
.webftechcashlink-service-image-slider__viewport {
    background:
        radial-gradient(circle at top left, rgba(10, 32, 22, 0.07), transparent 28%),
        linear-gradient(180deg, rgba(237, 248, 241, 0.98) 0%, rgba(224, 242, 229, 0.98) 100%) !important;
    border: 1px solid rgba(10, 32, 22, 0.10);
    position: relative;
    isolation: isolate;             /* new stacking context for ::before */
    min-height: 460px !important;
    height: 460px;                  /* fixed height — same on every page */
}
.webftechcashlink-service-image-slider__viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.55), transparent 28%),
        repeating-radial-gradient(circle at 100% 0, rgba(10, 80, 40, 0.10) 0 2px, transparent 2px 18px);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;                    /* behind every slide */
}
/* Tighten slide padding so the phone fits cleanly in the 460px box;
   image gets a fixed max-height for visual consistency across all
   pages and across all slides within a page.                       */
.webftechcashlink-service-image-slider__slide {
    padding: 24px !important;       /* was 44px in main.css */
}
.webftechcashlink-service-image-slider__slide img {
    max-height: 380px !important;   /* was 450px in main.css */
}

/* Floating icon on hero visual */
.webftechcashlink-service-detail-hero__icon {
    background: #ffffff !important;
    color: #C49A0A !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

/* Service image slider arrows */
.webftechcashlink-service-image-slider__arrow {
    background: var(--theme);
    color: #fff;
}
.webftechcashlink-service-image-slider__arrow:hover {
    background: var(--theme-hover);
}
.webftechcashlink-service-image-slider__dots button.is-active {
    background: var(--theme);
}

/* ── 2.27  Alert boxes ──────────────────────────────────────── */
.webftechcashlink-alert.success {
    background: #eaf8ef;
    color: #17663a;
}
.webftechcashlink-alert.error {
    background: #fff3f3;
    color: #8a1f1f;
}

/* ── 2.28  Universal icon box override — light mode ─────────────
   #15392A background + #E8C040 gold icon — applied to every icon
   component across all pages. Covers main.css orange-tint fallbacks.
───────────────────────────────────────────────────────────── */
.webftechcashlink-service-tile .icon,
.webftechcashlink-process-card .icon,
.webftechcashlink-journey-card .icon,
.webftechcashlink-journey-card__icon,
.webftechcashlink-feature-icon,
.webftechcashlink-contact-help__icon,
.webftechcashlink-why-choice-card__icon,
.webftechcashlink-value-card__icon,
.webftechcashlink-check-list__icon,
.webftechcashlink-service-detail-hero__icon,
.webftechcashlink-download-band__card-icon,
.webftechcashlink-dark-card__icon,
.webftechcashlink-global-motion__badge-icon,
.about-page-area-new .main-content .card-item .icon,
.about-page-area-new .card-item .icon,
.card-item .icon,
.icon-item .icon,
.contact-info-box .icon {
    background: #15392A !important;
    color: #E8C040 !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 3 · DARK THEME   [data-theme="dark"]
   Mirrors the JAIBAK app dark mode palette:
     Page bg      #071810   (deep forest green)
     Card bg      #0D2A1A   (slightly lighter)
     Section bg   #0A2016   (mid green)
     Header       #040E08   (deepest green)
     Gold accent  #E8C040   (brighter on dark — better contrast)
═══════════════════════════════════════════════════════════════ */

/* ── DM-1  CSS custom properties override ───────────────────── */
[data-theme="dark"] {
    --theme:       #E8C040;
    --theme-hover: #C49A0A;
    --theme-light: #F5D86A;
    --theme-pale:  rgba(232, 192, 64, 0.14);
    --green-brand: #040E08;
    --green-deep:  #030C06;
    --header:      #040E08;
    --bg:          #071810;
    --bg2:         #030C06;
    --bg-light:    #0A2016;
    --border:      rgba(232, 192, 64, 0.15);
    --text:        #E0EDE4;
}

/* ── DM-2  Body & page background ───────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] #smooth-wrapper,
[data-theme="dark"] #smooth-content {
    background-color: #071810;
    color: #fff;
}

/* ── DM-3  Header ───────────────────────────────────────────── */
[data-theme="dark"] .webftechcashlink-header,
[data-theme="dark"] #header-sticky {
    background-color: #040E08;
    border-bottom-color: rgba(232, 192, 64, 0.14);
}
[data-theme="dark"] #header-sticky.sticky-box-shadow {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

/* ── DM-3b  Top-level nav links (dark) ─────────────────────── */
[data-theme="dark"] .webftechcashlink-nav-list > li > a,
[data-theme="dark"] .header-main .main-menu nav > ul > li > a,
[data-theme="dark"] .mean__menu-wrapper .main-menu nav > ul > li > a,
[data-theme="dark"] .header-main .main-menu ul li > a {
    color: #FFFFFF !important;
}
/* Hover — beats main.css .header-main .main-menu ul li:hover > a (specificity 0,3,3) */
html[data-theme="dark"] .header-main .main-menu ul li:hover > a,
html[data-theme="dark"] .header-main .main-menu ul li.current-menu-item > a,
html[data-theme="dark"] .webftechcashlink-nav-list > li > a:hover,
html[data-theme="dark"] .webftechcashlink-nav-list > li.current-menu-item > a,
html[data-theme="dark"] .webftechcashlink-nav-list > li.current_page_item > a,
html[data-theme="dark"] .webftechcashlink-nav-list > li.current-menu-ancestor > a {
    color: #C49A0A !important;
}
[data-theme="dark"] .header-main .main-menu ul li > a .menu-icon,
[data-theme="dark"] .header-main .main-menu ul li .has-homemenu > a::after {
    color: rgba(255, 255, 255, 0.7);
}

/* ── DM-4  Submenu dropdown ─────────────────────────────────── */
[data-theme="dark"] .webftechcashlink-nav-list .sub-menu {
    background: #0D2A1A !important;
    border-color: rgba(232, 192, 64, 0.18) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.50) !important;
}
[data-theme="dark"] .webftechcashlink-nav-list .sub-menu li a,
[data-theme="dark"] .webftechcashlink-nav-list .sub-menu li > a {
    color: #FFFFFF !important;
    font-weight: 500;
}
[data-theme="dark"] .webftechcashlink-nav-list .sub-menu li:hover > a,
[data-theme="dark"] .webftechcashlink-nav-list .sub-menu li a:hover {
    color: #C49A0A !important;
}
[data-theme="dark"] .webftechcashlink-nav-list .sub-menu li:hover {
    background: rgba(232, 192, 64, 0.08) !important;
}
/* Arrow tip — match dark background */
[data-theme="dark"] .webftechcashlink-nav-list .sub-menu::before {
    border-bottom-color: #0D2A1A !important;
}

/* ── DM-5  Offcanvas / Mobile menu ──────────────────────────── */
[data-theme="dark"] .offcanvas__info {
    background-color: #040E08;
}

/* ── DM-6  Language switch ──────────────────────────────────── */
[data-theme="dark"] .webftechcashlink-lang-switch {
    background: rgba(232, 192, 64, 0.10);
    border-color: rgba(232, 192, 64, 0.22);
}
[data-theme="dark"] .webftechcashlink-lang-switch a,
[data-theme="dark"] .webftechcashlink-lang-switch span {
    color: #FFFFFF !important;
}
[data-theme="dark"] .webftechcashlink-lang-switch a:hover {
    color: #C49A0A !important;
}
[data-theme="dark"] .webftechcashlink-lang-switch a.active {
    background: #C49A0A !important;
    color: #fff !important;
}

/* ── DM-7  Section backgrounds ──────────────────────────────── */
[data-theme="dark"] section,
[data-theme="dark"] .section-padding {
    background-color: transparent;
}
[data-theme="dark"] .about-section,
[data-theme="dark"] .about-page-area-new,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .faq-area,
[data-theme="dark"] .webftechcashlink-contact-help {
    background-color: #071810;
}

/* ── DM-8  Headings & body text ─────────────────────────────────
   Force white — beats main.css h1{color:var(--header)} at all
   specificity levels. Sections needing dark text override below.
───────────────────────────────────────────────────────────── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #fff !important;
}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] .webftechcashlink-check-list li {
    color: #fff !important;
}
[data-theme="dark"] .webftechcashlink-check-list__text {
    color: #fff;
}

/* ── DM-9  Service tiles & process cards ────────────────────── */
[data-theme="dark"] .webftechcashlink-service-tile,
[data-theme="dark"] .webftechcashlink-process-card {
    background: #0D2A1A;
    border: 1.5px solid rgba(232, 192, 64, 0.38) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(232, 192, 64, 0.07) inset !important;
    border-radius: 16px !important;
}
[data-theme="dark"] .webftechcashlink-service-tile h3,
[data-theme="dark"] .webftechcashlink-process-card h3 {
    color: #fff;
}
[data-theme="dark"] .webftechcashlink-service-tile p,
[data-theme="dark"] .webftechcashlink-process-card p {
    color: #fff;
}
[data-theme="dark"] .webftechcashlink-service-tile--link:hover {
    border-color: rgba(232, 192, 64, 0.28);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

/* ── DM-10  Journey feature panel — shining golden gradient ─── */
[data-theme="dark"] .webftechcashlink-journey-feature {
    background:
        radial-gradient(ellipse at 10% 10%,  rgba(255, 255, 255, 0.12), transparent 28%),
        radial-gradient(ellipse at 88% 90%, rgba(60, 35, 0, 0.22), transparent 32%),
        linear-gradient(
            135deg,
            #3C2300  0%,
            #6B4800  20%,
            #C49A0A  48%,
            #E8C040  68%,
            #F5DA6E  84%,
            #C49A0A 100%
        ) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-theme="dark"] .webftechcashlink-journey-feature::before {
    background: none !important;
}
/* Override --header locally so var(--header) → #fff inside */
[data-theme="dark"] .webftechcashlink-journey-feature__content {
    --header: #fff;
    color: #fff;
}
[data-theme="dark"] .webftechcashlink-journey-feature__content h3 {
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .webftechcashlink-journey-feature__content p {
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.40);
}
[data-theme="dark"] .webftechcashlink-journey-feature__visual img {
    filter: drop-shadow(0 24px 48px rgba(40, 22, 0, 0.35)) !important;
}

/* ── DM-11  Why choice panel & cards ────────────────────────── */
[data-theme="dark"] .webftechcashlink-why-choice-panel {
    background:
        radial-gradient(circle at top left, rgba(232, 192, 64, 0.07), transparent 32%),
        linear-gradient(180deg, #0D2A1A 0%, #0A2016 100%) !important;
    border-color: rgba(232, 192, 64, 0.12) !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-panel::after {
    background: repeating-radial-gradient(
        circle at center, rgba(232, 192, 64, 0.07) 0 2px, transparent 2px 16px) !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-panel__eyebrow {
    background: rgba(232, 192, 64, 0.14) !important;
    color: #E8C040 !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-card {
    background: #0D2A1A !important;
    border: 1.5px solid rgba(232, 192, 64, 0.38) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(232, 192, 64, 0.07) inset !important;
    border-radius: 16px !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-card:hover {
    border-color: rgba(232, 192, 64, 0.36) !important;
    box-shadow: 0 22px 44px rgba(232, 192, 64, 0.12) !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-card h3 {
    color: #fff !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-card p {
    color: #fff !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-card__number {
    color: rgba(232, 192, 64, 0.18) !important;
}
[data-theme="dark"] .webftechcashlink-why-choice-card__icon {
    background: #ffffff !important;
    color: #C49A0A !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
}

/* ── DM-12  Download band & Showcase — golden gradient ──────── */
[data-theme="dark"] .webftechcashlink-download-band,
[data-theme="dark"] .webftechcashlink-showcase {
    background:
        radial-gradient(ellipse at 10% 10%,  rgba(255, 255, 255, 0.12), transparent 28%),
        radial-gradient(ellipse at 85% 90%, rgba(60, 35, 0, 0.22), transparent 32%),
        linear-gradient(
            135deg,
            #3C2300  0%,
            #6B4800  20%,
            #C49A0A  48%,
            #E8C040  68%,
            #F5DA6E  84%,
            #C49A0A 100%
        ) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-theme="dark"] .webftechcashlink-download-band h2,
[data-theme="dark"] .webftechcashlink-download-band h3 {
    color: #FFFFFF !important;
}
[data-theme="dark"] .webftechcashlink-download-band p {
    color: rgba(255, 255, 255, 0.90) !important;
}
[data-theme="dark"] .webftechcashlink-download-band .webftechcashlink-store-badge {
    background: #F6F3EB !important;
    color: #1A0E00 !important;
    border-color: #F6F3EB !important;
}
[data-theme="dark"] .webftechcashlink-download-band .webftechcashlink-store-badge:hover {
    background: #E8C040 !important;
    border-color: #E8C040 !important;
}
[data-theme="dark"] .webftechcashlink-download-band .webftechcashlink-store-badge small,
[data-theme="dark"] .webftechcashlink-download-band .webftechcashlink-store-badge strong {
    color: #1A0E00 !important;
}
[data-theme="dark"] .webftechcashlink-download-band__card {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1A0E00 !important;
    box-shadow: 0 8px 24px rgba(40, 22, 0, 0.20) !important;
}
[data-theme="dark"] .webftechcashlink-download-band__card-icon {
    background: rgba(245, 218, 110, 0.28) !important;
    color: #6B4800 !important;
}
[data-theme="dark"] .webftechcashlink-download-band__card-label {
    color: #1A0E00 !important;
}

/* ── DM-13  Support strip ────────────────────────────────────── */
[data-theme="dark"] .webftechcashlink-support-strip {
    background: #0D2A1A;
    border: 1px solid rgba(232, 192, 64, 0.14);
}

/* ── DM-14  Contact section ─────────────────────────────────── */
[data-theme="dark"] .webftechcashlink-contact-help__intro h1 { color: #fff !important; }
[data-theme="dark"] .webftechcashlink-contact-help__intro p  { color: #fff !important; }
[data-theme="dark"] .webftechcashlink-contact-help__card h2  { color: #fff !important; }
[data-theme="dark"] .webftechcashlink-contact-help__card p   { color: #fff !important; }

/* Contact form panel */
[data-theme="dark"] .webftechcashlink-contact-help__panel {
    background: #0D2A1A;
    border: 1.5px solid rgba(232, 192, 64, 0.35) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.50),
                0 0 0 1px rgba(232, 192, 64, 0.08) inset !important;
}

/* Labels */
[data-theme="dark"] .webftechcashlink-contact-help__form label {
    color: #F5DA6E !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
}

/* Input & Textarea fields */
[data-theme="dark"] .webftechcashlink-contact-help__form input,
[data-theme="dark"] .webftechcashlink-contact-help__form textarea,
[data-theme="dark"] .webftechcashlink-contact-help__form select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(232, 192, 64, 0.45) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 12px 16px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

/* Placeholder text */
[data-theme="dark"] .webftechcashlink-contact-help__form input::placeholder,
[data-theme="dark"] .webftechcashlink-contact-help__form textarea::placeholder {
    color: rgba(224, 237, 228, 0.50) !important;
}

/* Focus state — bright gold glow */
[data-theme="dark"] .webftechcashlink-contact-help__form input:focus,
[data-theme="dark"] .webftechcashlink-contact-help__form textarea:focus,
[data-theme="dark"] .webftechcashlink-contact-help__form select:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: #E8C040 !important;
    box-shadow: 0 0 0 3.5px rgba(232, 192, 64, 0.28),
                0 4px 16px rgba(232, 192, 64, 0.12) !important;
    outline: none !important;
}

/* Submit button */
[data-theme="dark"] .webftechcashlink-contact-help__form button[type="submit"],
[data-theme="dark"] .webftechcashlink-contact-help__form .theme-btn {
    background: #E8C040 !important;
    color: #1A0E00 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    border-color: #E8C040 !important;
}
[data-theme="dark"] .webftechcashlink-contact-help__form button[type="submit"]:hover,
[data-theme="dark"] .webftechcashlink-contact-help__form .theme-btn:hover {
    background: #F5DA6E !important;
    border-color: #F5DA6E !important;
}

/* ── DM-15  FAQ Accordion ────────────────────────────────────── */
[data-theme="dark"] .accordion-item {
    background: #0D2A1A;
    border-color: rgba(232, 192, 64, 0.12);
}
[data-theme="dark"] .accordion-button {
    background: #0D2A1A;
    color: #fff;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: #0A2016;
    color: #E8C040;
    box-shadow: inset 0 -1px 0 rgba(232, 192, 64, 0.15);
}
[data-theme="dark"] .accordion-body {
    background: #0A2016;
    color: #fff !important;
}

/* ── DM-16  About page ───────────────────────────────────────── */

/* About-highlight counter band — golden gradient overlay, image stays visible */
[data-theme="dark"] .webftechcashlink-about-highlight {
    position: relative;
    isolation: isolate;
}
[data-theme="dark"] .webftechcashlink-about-highlight::before {
    background:
        radial-gradient(ellipse at 10% 10%,  rgba(255, 255, 255, 0.08), transparent 26%),
        radial-gradient(ellipse at 85% 90%, rgba(60, 35, 0, 0.20), transparent 30%),
        linear-gradient(
            135deg,
            rgba(60,  35,  0, 0.90)  0%,
            rgba(107, 72,  0, 0.85) 22%,
            rgba(196,154, 10, 0.78) 45%,
            rgba(232,192, 64, 0.68) 65%,
            rgba(245,218,110, 0.55) 82%,
            rgba(196,154, 10, 0.40) 100%
        ) !important;
}

/* Counter numbers stay dark on golden bg, labels/text stay white */
[data-theme="dark"] .webftechcashlink-about-highlight .counter-content h2,
[data-theme="dark"] .webftechcashlink-about-highlight .count {
    color: #1A0E00 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .webftechcashlink-about-highlight .counter-content h3 {
    color: #1A0E00 !important;
}
[data-theme="dark"] .webftechcashlink-about-highlight .section-title h2 {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .webftechcashlink-about-highlight p {
    color: rgba(255, 255, 255, 0.90) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.40);
}

/* Remove white card box — let page background show through */
[data-theme="dark"] .about-wrapper .about-content .about-item .content-box {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .about-content .content-box p,
[data-theme="dark"] .about-content .content-box {
    color: #fff !important;
}
[data-theme="dark"] .about-section,
[data-theme="dark"] .about-wrapper {
    color: #fff;
}
[data-theme="dark"] .about-section h2,
[data-theme="dark"] .about-wrapper h2,
[data-theme="dark"] .about-wrapper h3 {
    color: #fff !important;
}

/* About sticky cards */
[data-theme="dark"] .about-page-area-new {
    background: transparent;
}
[data-theme="dark"] .about-page-area-new .card-item {
    background: #0D2A1A !important;
    border: 1.5px solid rgba(232, 192, 64, 0.38) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(232, 192, 64, 0.07) inset !important;
    border-radius: 16px !important;
}
[data-theme="dark"] .about-page-area-new .card-item .title { color: #fff !important; }
[data-theme="dark"] .about-page-area-new .card-item .text  { color: #fff !important; }

/* ── DM-17  Service detail hero — same golden gradient in dark mode */
[data-theme="dark"] .webftechcashlink-service-detail-hero {
    background:
        radial-gradient(ellipse at 10% 10%,  rgba(255, 255, 255, 0.10), transparent 28%),
        radial-gradient(ellipse at 88% 90%, rgba(40, 22, 0, 0.30), transparent 32%),
        linear-gradient(
            135deg,
            #3C2300  0%,
            #6B4800  20%,
            #C49A0A  48%,
            #E8C040  68%,
            #F5DA6E  84%,
            #C49A0A 100%
        ) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-theme="dark"] .webftechcashlink-service-detail-hero__content {
    --header: #fff;
}
[data-theme="dark"] .webftechcashlink-service-detail-hero__content h1 {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65) !important;
}
[data-theme="dark"] .webftechcashlink-service-detail-hero__content p {
    color: #fff !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.50) !important;
}
[data-theme="dark"] .webftechcashlink-service-detail-hero__content .webftechcashlink-check-list li,
[data-theme="dark"] .webftechcashlink-service-detail-hero__content .webftechcashlink-check-list__text {
    color: #fff !important;
}
[data-theme="dark"] .webftechcashlink-service-detail-hero__icon {
    background: #ffffff !important;
    color: #C49A0A !important;
}

/* ── DM-17b  Service detail — APP EXPLANATION image viewport ────
   Keep the light-green-stripes look in dark mode too — same
   palette as 2.26b above (the dark page bg surrounds it).        */
[data-theme="dark"] .webftechcashlink-service-image-slider__viewport {
    background:
        radial-gradient(circle at top left, rgba(10, 32, 22, 0.07), transparent 28%),
        linear-gradient(180deg, rgba(237, 248, 241, 0.98) 0%, rgba(224, 242, 229, 0.98) 100%) !important;
    border: 1px solid rgba(10, 32, 22, 0.10);
}
[data-theme="dark"] .webftechcashlink-service-image-slider__viewport::before {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.55), transparent 28%),
        repeating-radial-gradient(circle at 100% 0, rgba(10, 80, 40, 0.10) 0 2px, transparent 2px 18px) !important;
}

/* ── DM-18  Value cards (help page + home) ───────────────────── */
[data-theme="dark"] .webftechcashlink-value-card {
    background: #0D2A1A !important;
    border: 1.5px solid rgba(232, 192, 64, 0.38) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(232, 192, 64, 0.07) inset !important;
    border-radius: 16px !important;
}
[data-theme="dark"] .webftechcashlink-value-card h3 { color: #fff !important; }
[data-theme="dark"] .webftechcashlink-value-card p  { color: #fff !important; }

/* ── DM-19  Dark cards (international / global section) ─────── */
[data-theme="dark"] .webftechcashlink-dark-card {
    background: #0D2A1A;
    border: 1px solid rgba(232, 192, 64, 0.10);
}

/* ── DM-20  Global Motion section — deeper golden tones ─────── */
[data-theme="dark"] .webftechcashlink-global-motion {
    background:
        radial-gradient(ellipse at 12% 8%,  rgba(255, 255, 255, 0.08), transparent 26%),
        radial-gradient(ellipse at 88% 88%, rgba(30,  18,  0,  0.30), transparent 30%),
        linear-gradient(
            135deg,
            #1A0A00  0%,
            #3C2300  18%,
            #7A5A00  45%,
            #B8900A  66%,
            #D4A820  82%,
            #8A6D00 100%
        ) !important;
}
[data-theme="dark"] .webftechcashlink-global-motion__badge {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important;
    color: #1A0E00 !important;
}
[data-theme="dark"] .webftechcashlink-global-motion__badge-icon {
    background: #ffffff !important;
    color: #C49A0A !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="dark"] .webftechcashlink-global-motion__badge-label {
    color: #1A0E00 !important;
}

/* ── DM-21  Footer ───────────────────────────────────────────── */
[data-theme="dark"] footer,
[data-theme="dark"] footer.footer-section,
[data-theme="dark"] .webftechcashlink-footer-shell {
    background: #012c18 !important;
}
[data-theme="dark"] .footer-area,
[data-theme="dark"] .footer-wrapper,
[data-theme="dark"] .webftechcashlink-footer-surface,
[data-theme="dark"] [class*="footer-widget-wrapper"] {
    background: #012c18 !important;
}
[data-theme="dark"] .footer-bottom-wrapper,
[data-theme="dark"] .webftechcashlink-footer-bottom,
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .copyright-area {
    background: #012c18 !important;
    border-top-color: rgba(232, 192, 64, 0.12) !important;
}

/* Footer text — all nav links, contact info, copyright
   Also resets opacity:0.8 that main.css applies to list links  */
[data-theme="dark"] .footer-widget-wrapper .footer-widget-items .list-area li a,
[data-theme="dark"] .footer-widget-items .list-area li a,
[data-theme="dark"] .footer-widget-items .list-area li {
    color: #fff !important;
    opacity: 1 !important;
}
[data-theme="dark"] .footer-widget-items .contact-content h4,
[data-theme="dark"] .footer-widget-items .contact-content h4 a,
[data-theme="dark"] .webftechcashlink-footer-address,
[data-theme="dark"] .webftechcashlink-footer-address p {
    color: #fff !important;
    opacity: 1 !important;
}
[data-theme="dark"] .webftechcashlink-footer-bottom p,
[data-theme="dark"] .webftechcashlink-footer-bottom span,
[data-theme="dark"] .footer-bottom-wrapper p,
[data-theme="dark"] .footer-bottom-wrapper span,
[data-theme="dark"] .footer-list li,
[data-theme="dark"] .footer-list li a {
    color: #fff !important;
    opacity: 1 !important;
}

/* Footer nav links hover — gold */
[data-theme="dark"] .footer-widget-wrapper .footer-widget-items .list-area li a:hover,
[data-theme="dark"] .footer-widget-items .list-area li a:hover,
[data-theme="dark"] .footer-list li a:hover {
    color: #E8C040 !important;
}

/* Footer widget headings (Explore / Key Services / Get In Touch) */
[data-theme="dark"] .footer-widget-wrapper .footer-widget-items .widget-head h3,
[data-theme="dark"] .footer-widget-items .widget-head h3 {
    color: #fff !important;
}

/* ── DM-22  Buttons ──────────────────────────────────────────── */
[data-theme="dark"] .theme-btn {
    background-color: #F6F3EB !important;
    color: #1A0E00 !important;
    border-color: #F6F3EB !important;
}
[data-theme="dark"] .theme-btn::before {
    background-color: #E8C040 !important;
}
[data-theme="dark"] .theme-btn:hover {
    background-color: #E8C040 !important;
    color: #1A0E00 !important;
    border-color: #E8C040 !important;
}

/* Store badges (site-wide dark mode) — cream default, gold hover */
[data-theme="dark"] .webftechcashlink-store-badge,
[data-theme="dark"] .webftechcashlink-footer-store-btn {
    background: #F6F3EB !important;
    border-color: #F6F3EB !important;
    color: #1A0E00 !important;
}
[data-theme="dark"] .webftechcashlink-store-badge i,
[data-theme="dark"] .webftechcashlink-footer-store-btn i {
    color: #1A0E00 !important;
}
[data-theme="dark"] .webftechcashlink-store-badge small,
[data-theme="dark"] .webftechcashlink-store-badge strong,
[data-theme="dark"] .webftechcashlink-footer-store-btn small,
[data-theme="dark"] .webftechcashlink-footer-store-btn strong {
    color: #1A0E00 !important;
}
[data-theme="dark"] .webftechcashlink-store-badge:hover,
[data-theme="dark"] .webftechcashlink-footer-store-btn:hover {
    background: #E8C040 !important;
    border-color: #E8C040 !important;
    color: #1A0E00 !important;
}

/* Footer store badges (dark mode) — white default, #C49A0A hover
   Overrides the site-wide cream rule above, scoped to footer only */
[data-theme="dark"] .footer-area .webftechcashlink-store-badge,
[data-theme="dark"] .webftechcashlink-footer-store-btn {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #062A14 !important;
}
[data-theme="dark"] .footer-area .webftechcashlink-store-badge i,
[data-theme="dark"] .webftechcashlink-footer-store-btn i {
    color: #062A14 !important;
}
[data-theme="dark"] .footer-area .webftechcashlink-store-badge small,
[data-theme="dark"] .footer-area .webftechcashlink-store-badge strong,
[data-theme="dark"] .webftechcashlink-footer-store-btn small,
[data-theme="dark"] .webftechcashlink-footer-store-btn strong {
    color: #062A14 !important;
}
[data-theme="dark"] .footer-area .webftechcashlink-store-badge:hover,
[data-theme="dark"] .webftechcashlink-footer-store-btn:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}
[data-theme="dark"] .footer-area .webftechcashlink-store-badge:hover i,
[data-theme="dark"] .footer-area .webftechcashlink-store-badge:hover small,
[data-theme="dark"] .footer-area .webftechcashlink-store-badge:hover strong {
    color: #fff !important;
}

/* Social icon circles in footer — white default, #C49A0A hover (both themes) */
[data-theme="dark"] .webftechcashlink-footer-social a {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #062A14 !important;
}
[data-theme="dark"] .webftechcashlink-footer-social a:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #fff !important;
}

/* ── DM-23  Home banner ──────────────────────────────────────── */
[data-theme="dark"] .webftechcashlink-home-hero {
    background: #071810;
}
[data-theme="dark"] .webftechcashlink-home-banner {
    background-color: #071810;
}
/* Night mode: same golden gradient, richer/deeper tones */
[data-theme="dark"] .webftechcashlink-home-banner::before {
    background:
        radial-gradient(ellipse at 15% 0%,  rgba(255, 255, 255, 0.07), transparent 26%),
        radial-gradient(ellipse at 80% 95%, rgba(184, 144, 10, 0.16), transparent 36%),
        linear-gradient(
            90deg,
            rgba(26,  10,  0, 0.95) 0%,
            rgba(60,  35,  0, 0.90) 18%,
            rgba(122, 90,  0, 0.80) 42%,
            rgba(184, 144, 10, 0.62) 62%,
            rgba(212, 168, 20, 0.32) 80%,
            rgba(232, 192, 64, 0.05) 100%
        );
}
body.rtl [data-theme="dark"] .webftechcashlink-home-banner::before {
    background:
        radial-gradient(ellipse at 85% 0%,  rgba(255, 255, 255, 0.07), transparent 26%),
        radial-gradient(ellipse at 20% 95%, rgba(184, 144, 10, 0.16), transparent 36%),
        linear-gradient(
            270deg,
            rgba(26,  10,  0, 0.95) 0%,
            rgba(60,  35,  0, 0.90) 18%,
            rgba(122, 90,  0, 0.80) 42%,
            rgba(184, 144, 10, 0.62) 62%,
            rgba(212, 168, 20, 0.32) 80%,
            rgba(232, 192, 64, 0.05) 100%
        );
}
[data-theme="dark"] .webftechcashlink-home-banner__content h1,
[data-theme="dark"] .webftechcashlink-home-banner__content h2,
[data-theme="dark"] .swiper-slide .webftechcashlink-home-banner__content h1 {
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.70) !important;
}
[data-theme="dark"] .webftechcashlink-home-banner__content p,
[data-theme="dark"] .webftechcashlink-home-banner__content .banner-subtitle,
[data-theme="dark"] .swiper-slide .webftechcashlink-home-banner__content p {
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .webftechcashlink-home-banner__dots .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.25);
}
[data-theme="dark"] .webftechcashlink-home-banner__dots .swiper-pagination-bullet-active {
    background: #E8C040 !important;
}

/* ── DM-24  Back-to-top button ───────────────────────────────── */
[data-theme="dark"] #back-top,
[data-theme="dark"] .back-to-top {
    background-color: #E8C040;
    color: #071810;
}

/* ── DM-25  Theme toggle button ─────────────────────────────── */
[data-theme="dark"] .webftechcashlink-theme-toggle {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .webftechcashlink-theme-toggle:hover {
    background: #C49A0A !important;
    border-color: #C49A0A !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .webftechcashlink-theme-toggle i {
    color: #FFFFFF !important;
}

/* ── DM-26  Universal icon box — white bg + gold icon ───────────
   Covers all icon components site-wide so every icon pops
   clearly against dark green card / page backgrounds.
───────────────────────────────────────────────────────────── */
[data-theme="dark"] .webftechcashlink-service-tile .icon,
[data-theme="dark"] .webftechcashlink-process-card .icon,
[data-theme="dark"] .webftechcashlink-journey-card .icon,
[data-theme="dark"] .webftechcashlink-journey-card__icon,
[data-theme="dark"] .webftechcashlink-feature-icon,
[data-theme="dark"] .webftechcashlink-contact-help__icon,
[data-theme="dark"] .webftechcashlink-why-choice-card__icon,
[data-theme="dark"] .webftechcashlink-value-card__icon,
[data-theme="dark"] .webftechcashlink-check-list__icon,
[data-theme="dark"] .webftechcashlink-service-detail-hero__icon,
[data-theme="dark"] .about-page-area-new .main-content .card-item .icon,
[data-theme="dark"] .about-page-area-new .card-item .icon,
[data-theme="dark"] .card-item .icon,
[data-theme="dark"] .contact-wrapper-inner .contact-left-items .icon-item .icon,
[data-theme="dark"] .contact-info-box .icon,
[data-theme="dark"] .icon-item .icon,
[data-theme="dark"] .webftechcashlink-download-band__card-icon,
[data-theme="dark"] .webftechcashlink-global-motion__badge-icon {
    background: #ffffff !important;
    color: #C49A0A !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4 · RESPONSIVE — MOBILE OVERRIDES
   ───────────────────────────────────────────────────────────────
   Final stop in the cascade.  Adjusts the custom Jaibak blocks
   above to fit smaller viewports without touching desktop layouts.

   Why this section exists:
     main.css already has extensive mobile coverage at 575/767/991
     px breakpoints (~300 media queries on webftechcashlink-*).
     BUT some of my added rules in Sections 1-3 use fixed pixel
     values + !important — those win against main.css mobile rules.
     This section re-asserts mobile-friendly values at each tier.

   Each block is grouped by selector.  RTL-specific mobile fixes
   live in theme-brand-rtl.css's RESPONSIVE section.
═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   ≤991px  — TABLET / LARGE PHONE LANDSCAPE
   Bootstrap col-lg-* columns have already stacked at this width,
   so two-column rows become single columns.  Tighten section
   padding and shrink fixed-size custom elements.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* 1.4 — Top-gap padding on inner page heroes was 160px.       */
    .about-section.section-padding,
    .webftechcashlink-page-hero.section-padding {
        padding-top: 110px !important;
    }

    /* 2.26b — Service-detail image viewport shrinks at tablet.    */
    .webftechcashlink-service-image-slider__viewport {
        min-height: 400px !important;
        height: 400px;
    }
    .webftechcashlink-service-image-slider__slide {
        padding: 22px !important;
    }
    .webftechcashlink-service-image-slider__slide img {
        max-height: 320px !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   ≤767px  — PHONE LANDSCAPE
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* 1.4 — Inner-page top gap, further tightened.                */
    .about-section.section-padding,
    .webftechcashlink-page-hero.section-padding {
        padding-top: 80px !important;
    }

    /* 1.3 — Client logo strip cards: 210x130 was too wide.        */
    .webftechcashlink-clients-strip__card {
        width: 180px !important;
        height: 110px !important;
        padding: 12px 16px !important;
    }
    .webftechcashlink-clients-strip__card img {
        max-height: 64px !important;
        max-width: 140px !important;
    }

    /* 2.26b — Service-detail image viewport at phone landscape.   */
    .webftechcashlink-service-image-slider__viewport {
        min-height: 360px !important;
        height: 360px;
    }
    .webftechcashlink-service-image-slider__slide {
        padding: 18px !important;
    }
    .webftechcashlink-service-image-slider__slide img {
        max-height: 280px !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   ≤575px  — PHONE PORTRAIT
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    /* 1.4 — Smallest top gap.                                     */
    .about-section.section-padding,
    .webftechcashlink-page-hero.section-padding {
        padding-top: 64px !important;
    }

    /* 1.3 — Client logo strip cards, smallest.                    */
    .webftechcashlink-clients-strip__card {
        width: 150px !important;
        height: 92px !important;
        padding: 10px 14px !important;
    }
    .webftechcashlink-clients-strip__card img {
        max-height: 54px !important;
        max-width: 120px !important;
    }

    /* 2.26b — Service-detail image viewport at phone portrait.    */
    .webftechcashlink-service-image-slider__viewport {
        min-height: 320px !important;
        height: 320px;
    }
    .webftechcashlink-service-image-slider__slide {
        padding: 14px !important;
    }
    .webftechcashlink-service-image-slider__slide img {
        max-height: 240px !important;
    }

    /* 2.19 — Footer: stack contact + social + bottom row cleanly. */
    .webftechcashlink-footer-bottom,
    .footer-bottom-wrapper {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .webftechcashlink-footer-stores {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .webftechcashlink-footer-stores .webftechcashlink-store-badge {
        justify-content: center;
    }
}