/**
 * Custom Swiper Slider Styles
 * For full-width banner layout
 */

/* Text color classes for TinyMCE counter description */
.text-green {
    color: #009041 !important;
}

.text-black {
    color: #000000 !important;
}

/* Import CSS variables from parent stylesheet */
:root {
    /* Font Families */
    --font-family-primary: 'Poppins', 'Century Gothic', 'Apple Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-secondary: 'Lora', Georgia, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

    /* Brand Colors */
    --color-primary: #00933F;
    --color-black: #000000;
    --color-white: #ffffff;

    /* Font Sizes */
    --font-size-lg: 16px;
    --font-size-2xl: 20px;

    /* Spacing */
    --spacing-0: 0px;
    --spacing-2: 10px;
    --spacing-3: 15px;
    --spacing-4: 20px;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
}


/* Slider with Counter Layout - Full viewport width */
.pfc-slider-with-counter {
    position: relative;
    min-height: 600px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
}

/* Remove any spacing from parent WP Bakery row */
.vc_row:has(.pfc-slider-with-counter) {
    margin-top: 0;
    padding-top: 0;
}

/* Counter Container - Absolutely positioned over slider */
.pfc-counter-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 843px;
    pointer-events: none;
    cursor: default;
}

/* Background SVG */
.pfc-counter-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.pfc-counter-background svg {
    width: auto;
    height: 100%;
    display: block;
    filter: drop-shadow(8px 0 20px rgba(0,0,0,.25));    
}

/* Floated shape to push content away from the curve */
.pfc-counter-shape-float {
    float: right;
    width: 100%;
    height: 100%;
    /* clip-path: path('M0,0 L844,0 L844,600 L784.577566,600 C380.261177,600 486.55235,82.5586099 0,82.5586099 L0,0 Z'); */
    shape-outside: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="844" height="600"><path d="M0,0 L844,0 L844,600 L784.577566,600 C380.261177,600 486.55235,82.5586099 0,82.5586099 L0,0 Z" fill="black"/></svg>');
    shape-margin: 15px;
    /* background: rgba(255, 0, 0, 0.3); */
    position: relative;
    z-index: 2;
}

/* Counter Content - Flows around the shape */
.pfc-counter-content {
    padding: 80px 20px 50px 50px;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    transition: opacity 0.6s ease-out;
    opacity: 0;
}

.pfc-content-spacer-old {
    /* Ensure spacer doesn't affect layout other than height */
    width: 100%;
    clear: none;
}

/* Make sure nested WP Bakery elements display properly */
.pfc-counter-content .wpb_wrapper {
    margin-bottom: var(--spacing-2);
}

/* Counter component spacing */
.pfc-counter-content .grve-counter {
    margin-bottom: 5px;
}


/* Counter numbers should be green (Primary 1) with responsive size and letter spacing */
.pfc-counter-container .grve-counter-item,
.pfc-counter-content .grve-counter-item {
    color: var(--color-primary);
    font-size: clamp(48px, 6vw, 68px);
    font-weight: var(--font-weight-semibold);
    letter-spacing: clamp(2px, 0.3vw, 3px);
    line-height: inherit;
    font-variant-numeric: tabular-nums;
}

/* Hide counter title by default */
.pfc-counter-container .grve-counter-title,
.pfc-counter-content .grve-counter-title {
    display: none;
}

/* Show counter title when inside Counter Content block */
.pfc-counter-content-block .grve-counter-title {
    font-size: clamp(32px, 4vw, 40px);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    line-height: var(--line-height-tight);
    margin: 0;
    padding: 0;
}

/* Rest of H1 sentence - normal weight, responsive size */
.pfc-counter-content-block .pfc-title-rest {
    font-weight: var(--font-weight-normal);
    text-transform: none;
    font-size: clamp(20px, 2.5vw, 25px);
    line-height: var(--line-height-normal);
    display: block;
}

/* Counter Content Component Styles */
.pfc-counter-content-block {
    margin-bottom: var(--spacing-3);
}

.pfc-counter-heading {
    margin-bottom: clamp(20px, 3vw, 30px);
}

.pfc-counter-paragraph {
    margin-bottom: clamp(10px, 2vw, 15px);
    font-family: var(--font-family-primary);
    font-size: clamp(16px, 2vw, 20px);
    line-height: var(--line-height-relaxed);
}

.pfc-counter-paragraph p {
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-relaxed);
    font-family: var(--font-family-primary);
    font-size: clamp(16px, 2vw, 20px);
}

.pfc-counter-buttons .grve-btn {
    pointer-events: auto;
}

.pfc-counter-buttons.grve-align-left .grve-btn {
    margin-right: 15px;
}

/* Slider Container */
.pfc-swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 600px;
}

.pfc-swiper-container .swiper {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.pfc-swiper-container .swiper-wrapper {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.pfc-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.swiper-slide {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 600px;
}

/* Slide image - positioned to cover the slide */
.pfc-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    z-index: -1;
}

/* Noise texture overlay - breaks up gradient banding and adds film grain effect */
.swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    filter: url(#noise-texture-swiper-slider);
    opacity: 0.2;
    mix-blend-mode: hard-light;
    pointer-events: none;
    z-index: 1;
}

/* Gradient overlay - Material Design eased gradient for natural blending */
/* Gradient attached to content wrapper for accurate sizing relative to text */
/* WCAG-compliant: 40-60% opacity ensures 4.5:1 contrast ratio */
/* v2.7.7: Simplified to white/black gradients with soft-light for automatic color matching */
/* v2.7.9: Full height of container, extended left/right for shadow coverage */
/* v2.7.10: Extended top/right to reach slide edge, grows from center without moving content */
/* v2.7.11: Symmetrical extensions on all sides for perfectly centered gradient */
/* v2.7.12: Extended left further to shift gradient right and keep centered on wider content */
.pfc-slide-content::before {
    content: '';
    position: absolute;
    top: calc(-2 * clamp(30px, 5vw, 60px));
    right: calc(-1 * clamp(40px, 7vw, 80px));
    bottom: calc(-2 * clamp(30px, 5vw, 60px));
    left: calc(-2 * clamp(40px, 7vw, 80px));
    /* 13-stop extended gradient - spreads further to prevent banding */
    /* v2.7.2: Extended ellipse size from 100%×90% to 140%×110% */
    /* v2.7.4: Concentrated gradient with faster falloff for content focus */
    /* v2.7.5: Extended to 130% width for left-side content coverage */
    /* v2.7.8: Centered on content area */
    /* v2.7.9: Adjusted for full-height container */
    /* v2.7.13: Using farthest-side at right top to match JavaScript gradient */
    /* v2.7.14: Extended bottom to match top for taller gradient */
    background: radial-gradient(ellipse farthest-side at right top, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 100%);
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: hard-light;
}

/* Color-based gradients applied dynamically via JavaScript (swiper-init.js) */
/* v2.7.7: Simplified - JavaScript generates white/black gradients, soft-light handles color adaptation */

/* White gradient overlay for slides with black text (CMS selected) - fallback only, allows JavaScript color-matching to override */
/* v2.7.6: Reduced opacity to compensate for pure white vs color-matched tints */
/* v2.7.8: Centered on content area */
/* v2.7.9: Adjusted for full-height container */
.pfc-slide-content:has(.pfc-slide-title[style*="color: rgb(0, 0, 0)"])::before,
.pfc-slide-content:has(.pfc-slide-title[style*="color: #000000"])::before,
.pfc-slide-content:has(.pfc-slide-title[style*="color: #000"])::before,
.pfc-slide-content:has(.pfc-slide-title[style*="color: black"])::before {
    background: radial-gradient(
        ellipse farthest-side at right top,
        rgba(255, 255, 255, 0.70) 0%,
        rgba(255, 255, 255, 0.67) 10%,
        rgba(255, 255, 255, 0.62) 20%,
        rgba(255, 255, 255, 0.58) 30%,
        rgba(255, 255, 255, 0.52) 40%,
        rgba(255, 255, 255, 0.47) 50%,
        rgba(255, 255, 255, 0.41) 60%,
        rgba(255, 255, 255, 0.34) 68%,
        rgba(255, 255, 255, 0.28) 75%,
        rgba(255, 255, 255, 0.22) 81%,
        rgba(255, 255, 255, 0.16) 87%,
        rgba(255, 255, 255, 0.10) 92%,
        rgba(255, 255, 255, 0.05) 96%,
        rgba(255, 255, 255, 0.02) 98%,
        transparent 100%
    );
    mix-blend-mode: lighten;
}

/* Content wrapper - positioned top-right with responsive sizing */
/* Extended padding to accommodate gradient overflow and shadow support without shifting content */
/* Flexbox with align-items: flex-end ensures content stays right-aligned */
/* v2.7.11: Symmetrical padding on all sides for perfectly centered gradient, no margins */
/* v2.7.12: Width expanded so content area inside padding reaches 50vw */
.pfc-slide-content {
    position: relative;
    /* z-index: 2; */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* width: calc(50vw + 2 * clamp(40px, 7vw, 80px)); */
    width: fit-content;
    max-width: calc(50vw + 2 * clamp(40px, 7vw, 80px));
    min-width: calc(40vw + 2 * clamp(40px, 7vw, 80px));
    text-align: right;
    padding: clamp(30px, 5vw, 60px) clamp(40px, 7vw, 80px);
    margin: 0 0 0 auto;
}

/* Title styling - Lora font with responsive sizing and subtle wide shadows */
.pfc-slide-title {
    font-size: clamp(28px, 4.5vw, var(--font-size-7xl));
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-secondary);
    margin-bottom: clamp(15px, 2vw, 20px);
    line-height: 1.1;
    position: relative;
    text-wrap: balance;
    text-wrap: pretty;
    /* Fallback text shadows - simple black (JavaScript will override with detected color) */
    text-shadow:
        0 0 8px rgba(0, 0, 0, 1),
        0 0 30px rgba(0, 0, 0, 0.85),
        0 0 70px rgba(0, 0, 0, 0.6),
        0 0 110px rgba(0, 0, 0, 0.4);
}

/* No fallback shadows for black text - JavaScript handles all shadow logic */
.pfc-slide-title[style*="color: rgb(0, 0, 0)"],
.pfc-slide-title[style*="color: #000000"],
.pfc-slide-title[style*="color: #000"],
.pfc-slide-title[style*="color: black"] {
    text-shadow: none;
}

/* Description styling - Poppins font with responsive sizing and lighter, longer shadows */
/* Max-width uses viewport units to prevent wrapping when parent is 50vw */
/* Narrower than title for better visual balance */
.pfc-slide-description {
    font-size: clamp(14px, 1.8vw, 20px);
    line-height: 1.6;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    margin-bottom: clamp(20px, 3vw, 30px);
    max-width: 40vw;
    text-wrap: balance;
    text-wrap: pretty; /* Fallback: Prevents orphans (single words on last line) */
    orphans: 2; /* Minimum 2 lines at end of block */
    widows: 2; /* Minimum 2 lines at start of block */
    hyphens: auto; /* Allow hyphenation for better balance on long words */
    hyphenate-limit-chars: 8 4 3; /* Only hyphenate words 8+ chars, min 4 before/3 after */
    position: relative;
}

.pfc-slide-description p {
    margin-bottom: var(--spacing-3);
    font-weight: var(--font-weight-normal);
    /* Fallback text shadows - simple black (5 layers, stronger without blend mode) */
    text-shadow:
        0 0 3px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 0.95),
        0 0 50px rgba(0, 0, 0, 0.8),
        0 0 90px rgba(0, 0, 0, 0.6);
}

/* No fallback shadows for black text - JavaScript handles all shadow logic */
.pfc-slide-description[style*="color: rgb(0, 0, 0)"] p,
.pfc-slide-description[style*="color: #000000"] p,
.pfc-slide-description[style*="color: #000"] p,
.pfc-slide-description[style*="color: black"] p {
    text-shadow: none;
}

.pfc-slide-description p:last-child {
    margin-bottom: var(--spacing-0);
}

/* Preserve WYSIWYG font weight controls */
.pfc-slide-description strong,
.pfc-slide-description b {
    font-weight: var(--font-weight-bold);
}

.pfc-slide-description em,
.pfc-slide-description i {
    font-style: italic;
}

/* Button container */
/* Max-width applied here to constrain buttons, not gradient wrapper */
.pfc-slide-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: var(--spacing-3);
    max-width: clamp(400px, 50vw, 50%);
}

/* Slide Button Base Styles - override theme defaults where needed */
.pfc-slide-button {
    border-radius: 50px !important;
    text-decoration: none;
}

/* Button 1 - Green Gradient (filled) */
.pfc-slide-button-green {
    background: var(--gradient-primary);
    color: var(--color-white);
    border: none;
}

.pfc-slide-button-green:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-2px);
    color: var(--color-white);
}

/* Button 1 - White (filled) */
.pfc-slide-button-white {
    background: var(--color-white);
    color: var(--color-black);
    border: none;
}

.pfc-slide-button-white:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    color: var(--color-black);
}

/* Button 2 - White Outline */
.pfc-slide-button-outline-white {
    background: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

.pfc-slide-button-outline-white:hover {
    background: var(--color-white);
    color: var(--color-black);
    transform: translateY(-2px);
}

/* Button 2 - Green Outline */
.pfc-slide-button-outline-green {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.pfc-slide-button-outline-green:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Navigation arrows styling - split left and right */
.swiper-button-next,
.swiper-button-prev {
    color: #ffffff;
    background: transparent;
    width: 60px;
    height: 60px;
    border-radius: 0;
    top: 50%;
    transform: translateY(-50%);
    overflow: visible;
}

/* Hide navigation arrows on touchscreen devices */
@media (hover: none) and (pointer: coarse) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}

.swiper-button-prev {
    left: calc((843px / 2) + 40px);
    right: auto;
}

.swiper-button-next {
    right: 0;
    left: auto;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 44px;
    font-weight: var(--font-weight-bold);
    /* Cross-browser smooth stroke effect using multiple layered shadows */
    text-shadow:
        /* Layered stroke effect for smooth edges */
        0 0 1px #0A5D3D,
        0 0 2px #0A5D3D,
        -1px -1px 0 #0A5D3D,
        1px -1px 0 #0A5D3D,
        -1px 1px 0 #0A5D3D,
        1px 1px 0 #0A5D3D,
        0 -1px 0 #0A5D3D,
        0 1px 0 #0A5D3D,
        -1px 0 0 #0A5D3D,
        1px 0 0 #0A5D3D,
        -2px -2px 0 #0A5D3D,
        2px -2px 0 #0A5D3D,
        -2px 2px 0 #0A5D3D,
        2px 2px 0 #0A5D3D,
        0 -2px 0 #0A5D3D,
        0 2px 0 #0A5D3D,
        -2px 0 0 #0A5D3D,
        2px 0 0 #0A5D3D,
        /* Drop shadow for depth */
        0 0 20px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Pagination styling - Simple dots only, aligned right */
.swiper-pagination {
    text-align: right;
    padding-right: 65px;
    bottom: 40px !important;
}

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 1;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 38px rgba(0, 0, 0, 0.65));
}

.swiper-pagination-bullet-active {
    background: #009041;
    opacity: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

/* Tablet responsive */
@media (max-width: 1024px) {
    .pfc-slider-with-counter {
        flex-direction: column;
        min-height: auto;
    }

    /* Stack counter and slider vertically */
    .pfc-counter-container {
        position: relative;
        width: 100%;
        min-height: auto;
        padding: 0;
        margin-bottom: var(--spacing-0);
    }

    .pfc-counter-content {
        padding: 20px 30px;
        opacity: 1;
    }

    .pfc-counter-heading {
        margin-bottom: var(--spacing-4);
    }

    .pfc-counter-paragraph {
        font-size: var(--font-size-lg);
    }
}

/* Mobile/Tablet responsive - disable SVG and shape-outside */
@media (max-width: 1024px) {
    /* Hide SVG background on mobile/tablet */
    .pfc-counter-background {
        display: none;
    }

    /* Disable shape-outside float */
    .pfc-counter-shape-float {
        display: none;
    }

    /* Make H1 spans inline instead of block */
    .pfc-counter-content-block .grve-counter-title,
    .pfc-counter-content-block .pfc-title-rest {
        display: inline !important;
    }

    /* Add spacing after counter number on mobile */
    .pfc-counter-content-block .grve-counter-item {
        margin-right: 0.1em;
        font-variant-numeric: tabular-nums;
        display: inline-block;
        text-align: left;
        transition: width 0.3s ease-out;
    }

    /* Fixed width during animation to prevent jumping */
    .pfc-counter-content-block .grve-counter-item.animating {
        min-width: 3.3ch;
    }

    /* Remove large font size from H1 to reduce line height */
    .pfc-counter-content-block .pfc-counter-heading {
        font-size: 0;
        line-height: 0;
    }

    /* Hide line breaks in counter on mobile/tablet */
    .pfc-counter-content-block br {
        display: none;
    }

    /* Hide line breaks in slide titles on mobile/tablet for natural text flow */
    .pfc-slide-title br {
        display: none;
    }

    /* Slider adjustments - 2:1 aspect ratio (width:height) */
    .pfc-slider-with-counter {
        min-height: auto;
        height: auto;
    }

    .pfc-slider {
        width: 100%;
        min-height: auto;
        height: auto;
    }

    .swiper-container {
        width: 100%;
        min-height: auto !important;
        height: auto !important;
        aspect-ratio: 2 / 1;
    }

    .swiper-container .swiper,
    .swiper-container .swiper-wrapper {
        min-height: auto !important;
        height: 100%;
    }

    .swiper-slide {
        justify-content: center;
        min-height: auto;
        height: 100%;
    }

    /* Adjust image position on mobile - 75% instead of all the way right */
    .pfc-slide-image {
        object-position: 75% center;
    }

    /* Dark gradient for white text on mobile - matches JavaScript-generated gradient */
    .swiper-slide::before {
        background: radial-gradient(
            ellipse 150% 80% at center top,
            rgba(0, 0, 0, 0.80) 0%,
            rgba(0, 0, 0, 0.72) 10%,
            rgba(0, 0, 0, 0.64) 20%,
            rgba(0, 0, 0, 0.56) 30%,
            rgba(0, 0, 0, 0.48) 40%,
            rgba(0, 0, 0, 0.40) 50%,
            rgba(0, 0, 0, 0.33) 60%,
            rgba(0, 0, 0, 0.26) 70%,
            rgba(0, 0, 0, 0.22) 75%,
            rgba(0, 0, 0, 0.18) 80%,
            rgba(0, 0, 0, 0.14) 85%,
            rgba(0, 0, 0, 0.10) 90%,
            rgba(0, 0, 0, 0.06) 95%,
            transparent 100%
        ) !important;
        mix-blend-mode: hard-light;
    }

    /* Light gradient for black text on mobile - matches JavaScript-generated gradient */
    .swiper-slide:has(.pfc-slide-title[style*="color: rgb(0, 0, 0)"])::before,
    .swiper-slide:has(.pfc-slide-title[style*="color: #000000"])::before,
    .swiper-slide:has(.pfc-slide-title[style*="color: #000"])::before,
    .swiper-slide:has(.pfc-slide-title[style*="color: black"])::before {
        background: radial-gradient(
            ellipse 150% 80% at center top,
            rgba(255, 255, 255, 0.70) 0%,
            rgba(255, 255, 255, 0.67) 10%,
            rgba(255, 255, 255, 0.62) 20%,
            rgba(255, 255, 255, 0.58) 30%,
            rgba(255, 255, 255, 0.52) 40%,
            rgba(255, 255, 255, 0.47) 50%,
            rgba(255, 255, 255, 0.41) 60%,
            rgba(255, 255, 255, 0.34) 68%,
            rgba(255, 255, 255, 0.28) 75%,
            rgba(255, 255, 255, 0.22) 81%,
            rgba(255, 255, 255, 0.16) 87%,
            rgba(255, 255, 255, 0.10) 92%,
            rgba(255, 255, 255, 0.05) 96%,
            rgba(255, 255, 255, 0.02) 98%,
            transparent 100%
        ) !important;
        mix-blend-mode: lighten;
    }

    .pfc-slide-content {
        position: relative;
        top: auto;
        z-index: 2;
        right: auto;
        left: auto;
        max-width: 100%;
        align-items: center;
        text-align: center;
        padding: 40px 20px 60px 20px;
        margin: 0 auto;
    }

    /* Center gradient on mobile - override desktop right-aligned gradient */
    .pfc-slide-content::before {
        top: 0;
        left: calc(-2 * clamp(40px, 7vw, 80px));
        right: calc(-2 * clamp(40px, 7vw, 80px));
        background: radial-gradient(
            ellipse 150% 80% at center top,
            rgba(0, 0, 0, 0.80) 0%,
            rgba(0, 0, 0, 0.72) 10%,
            rgba(0, 0, 0, 0.64) 20%,
            rgba(0, 0, 0, 0.56) 30%,
            rgba(0, 0, 0, 0.48) 40%,
            rgba(0, 0, 0, 0.40) 50%,
            rgba(0, 0, 0, 0.33) 60%,
            rgba(0, 0, 0, 0.26) 70%,
            rgba(0, 0, 0, 0.22) 75%,
            rgba(0, 0, 0, 0.18) 80%,
            rgba(0, 0, 0, 0.14) 85%,
            rgba(0, 0, 0, 0.10) 90%,
            rgba(0, 0, 0, 0.06) 95%,
            transparent 100%
        );
    }

    /* Center gradient for black text on mobile */
    .pfc-slide-content:has(.pfc-slide-title[style*="color: rgb(0, 0, 0)"])::before,
    .pfc-slide-content:has(.pfc-slide-title[style*="color: #000000"])::before,
    .pfc-slide-content:has(.pfc-slide-title[style*="color: #000"])::before,
    .pfc-slide-content:has(.pfc-slide-title[style*="color: black"])::before {
        background: radial-gradient(
            ellipse 150% 80% at center top,
            rgba(255, 255, 255, 0.70) 0%,
            rgba(255, 255, 255, 0.67) 10%,
            rgba(255, 255, 255, 0.62) 20%,
            rgba(255, 255, 255, 0.58) 30%,
            rgba(255, 255, 255, 0.52) 40%,
            rgba(255, 255, 255, 0.47) 50%,
            rgba(255, 255, 255, 0.41) 60%,
            rgba(255, 255, 255, 0.34) 68%,
            rgba(255, 255, 255, 0.28) 75%,
            rgba(255, 255, 255, 0.22) 81%,
            rgba(255, 255, 255, 0.16) 87%,
            rgba(255, 255, 255, 0.10) 92%,
            rgba(255, 255, 255, 0.05) 96%,
            rgba(255, 255, 255, 0.02) 98%,
            transparent 100%
        );
    }

    /* Responsive font sizes on mobile */
    .pfc-slide-title {
        font-size: clamp(28px, 5vw, 40px);
        line-height: 1.2;
    }

    .pfc-slide-description {
        font-size: var(--font-size-lg);
        max-width: 80vw;
    }

    .pfc-slide-buttons {
        justify-content: center;
    }

    /* Ensure swiper container is the positioning context for arrows */
    .swiper-container,
    .pfc-swiper-container {
        position: relative;
    }

    /* Navigation arrows - positioned relative to swiper container which respects aspect-ratio */
    .swiper-container .swiper-button-prev,
    .swiper-container .swiper-button-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .swiper-container .swiper-button-prev {
        left: 0;
    }

    .swiper-container .swiper-button-next {
        right: 0;
    }

    /* Pagination - lowered on mobile */
    .swiper-pagination {
        bottom: 20px !important;
        text-align: center;
        padding-right: 0;
    }
}

/* Gradual aspect ratio progression from 2:1 to 5:4 */
@media (max-width: 900px) {
    .swiper-container {
        aspect-ratio: 19 / 13; /* 1.4615 */
    }
}

@media (max-width: 768px) {
    .swiper-container {
        aspect-ratio: 17 / 13; /* 1.3077 */
    }
}

@media (max-width: 640px) {
    .swiper-container {
        aspect-ratio: 21 / 17; /* 1.2353 */
    }
}

@media (max-width: 480px) {
    /* 1:1 aspect ratio (square) for smallest screens */
    .swiper-container {
        aspect-ratio: 1 / 1;
    }

    .pfc-slide-title {
        font-size: 24px;
    }

    .pfc-slide-description {
        font-size: 14px;
        margin-bottom: var(--spacing-4);
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 45px;
        height: 45px;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20px;
    }
}

/* WPBakery Backend Editor - Fix container element title display */
/* Match standard element styling instead of absolute positioning */
.wpb_pfc_slider_with_counter .wpb_element_wrapper {
    position: relative;
}

.wpb_pfc_slider_with_counter .wpb_element_title {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.wpb_pfc_slider_with_counter .wpb_element_title .vc_general.vc_element-icon {
    float: left;
    margin-right: 10px;
}

.wpb_pfc_slider_with_counter .wpb_element_wrapper > .vc_container_for_children {
    margin: 10px 10px 0 0;
}