/* Master Combined CSS - Auto-generated */
/* Includes: Global CSS + All Element CSS */

/* === GLOBAL: custom-fonts.css === */
/* 
 * Custom Fonts CSS 
 */




/* -------------- Font Faces -------------- 698DF3 4675F9 */
@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans-100.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans-100Italic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans-300.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans-300Italic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans_500.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans_500_Italic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans_700.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans-700Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans_900.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomText';
    src: url('../fonts/MuseoSans-900Italic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CustomHeadline';
    src: url('../fonts/Clufy-DemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CustomHeadline';
    src: url('../fonts/Clufy-DemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* -------------- Headline Font Override -------------- */
/* Apply CustomHeadline font to all headlines with <em> tags */
h1 em,
h2 em,
h3 em
{
    font-family: 'CustomHeadline', sans-serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
}



/* === GLOBAL: custom.css === */
/* 
 * Custom CSS for BettinaJohanna Theme logo-x-outline-fill-ededed.svg
 */

@import 'custom-root.css';
@import 'custom-yooverride.css';
@import 'custom-fonts.css';
@import 'custom-spacings.css';
@import 'custom-defaults.css';
@import 'custom-buttons.css'; 
@import 'menu-overwrites.css';
/* @import 'custom-slider.css'; */
@import 'custom-media.css';






body {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;

}

/* -------------- Browser Scrollbar Styling -------------- */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #00000000;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #4675F9;
    border-radius: 6px;
    border: 2px solid #00000000;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a5ddb;
}

::-webkit-scrollbar-corner {
    background: #00000000;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #4675F9 #00000000;
}




/* -------------- Fullscreen Backgrounds -------------- */
.cw5-bg-xxx-gradient {
    background-image: var(--bg-xxx-gradient);
    background-size: 1920px 1080px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.cw5-bg-x-gradient {
    background-image: var(--bg-x-gradient);
    background-size: 1920px 1080px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}


/* -------------- UIkit Card Default Glow -------------- */
.uk-card.uk-card-default {
    transition: box-shadow 0.2s ease-in;
}

.uk-card.uk-card-default:hover {
    box-shadow: 
        0 -2px 4px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(70, 117, 249, 0.6);
    transition: box-shadow 0.2s ease-in;
}

.uk-card.uk-card-default:not(:hover) {
    transition: box-shadow 1.2s ease-out;
}

/* -------------- Gradient Extra Large -------------- */
.cw5-gradient-extra-large {
    font-size: 190px;
    background: linear-gradient(
        to bottom,
        rgba(211, 211, 211, 1) 10%,
        rgba(211, 211, 211, 1) 30%,
        rgba(211, 211, 211, 0) 80%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* -------------- Single Work Background -------------- */
body.single-work::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/CW5-Theme-Images/cw5-logo-x-chevron-right-gradient.svg');
    background-size: auto 90vh;
    background-position: top right;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
}













/* ========== ELEMENT STYLES ========== */

/* === ELEMENT: cw5-blog-posts-slider === */
/* CW5 Blog Posts Slider Container Styles */

/* Slider padding wrapper - prevents items from being cut off */
.cw5-slider-padding {
    padding: 15px;
}

/* Fix for items being cut off on the right */
.cw5-blog-posts-slider .uk-slider-container {
    overflow: visible;
}

.cw5-blog-posts-slider .uk-slider-items {
    margin-right: 0;
}


/* === ELEMENT: cw5-blog-posts-slider_item === */
/* CW5 Blog Posts Slider Item Styles */

/* Equal height layout */
.cw5-bpsl-item-content {
    display: flex;
    flex-direction: column;
    padding: 26px;
}

.cw5-bpsl-labels {
    flex: 0 0 auto;
}

.cw5-bpsl-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Image hover effect */
.cw5-bpsl-image-wrapper {
    overflow: hidden;
    border-radius: 5px;
}

.cw5-bpsl-image-wrapper picture,
.cw5-bpsl-image-wrapper img {
    transition: transform 0.3s ease;
}

.cw5-bpsl-item-content:hover .cw5-bpsl-image-wrapper picture,
.cw5-bpsl-item-content:hover .cw5-bpsl-image-wrapper img {
    transform: scale(1.05);
}


/* Headline hover effect */
.cw5-bpsl-content h4 {
    transition: all 0.3s ease;
}

.cw5-bpsl-item-content:hover .cw5-bpsl-content h4 {
    color: #f97046;
    text-decoration: underline;
}


/* === ELEMENT: cw5-casestudy-mask-single === */
/* CW5 CaseMask Single - Element Specific CSS */

.cw5-casemasksingle {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.cw5-casemasksingle svg {
    width: 100%;
    height: auto;
}

/* Image slide-in animation from right */
.cw5-casemasksingle .cw5-casemasksingle-image {
    opacity: 0;
    transform: translateX(100%);
    transition: all 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw5-casemasksingle .cw5-casemasksingle-image.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Path (logo) fade-in animation only - slightly delayed */
.cw5-casemasksingle .logo-path {
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
}

.cw5-casemasksingle .logo-path.visible {
    opacity: 1;
}

/* YOOtheme Builder Mode: Always show elements */
body.tm-builder .cw5-casemasksingle .cw5-casemasksingle-image,
body.tm-builder .cw5-casemasksingle .logo-path {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Fallback: Show after 100ms if JavaScript hasn't initialized */
@keyframes cw5-casemasksingle-fallback {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cw5-casemasksingle:not(.cw5-casemasksingle-initialized) .cw5-casemasksingle-image,
.cw5-casemasksingle:not(.cw5-casemasksingle-initialized) .logo-path {
    animation: cw5-casemasksingle-fallback 0.3s ease-out 0.1s forwards;
}

/* Link styling */
.cw5-casemasksingle-link {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.cw5-casemasksingle-link:hover {
    opacity: 0.9;
}


/* === ELEMENT: cw5-casestudy-mask-slider === */
/* CW5 CaseMask Slider - Parent Element CSS */

/* No custom CSS needed - all layout handled by UIkit classes */


/* === ELEMENT: cw5-casestudy-mask-slider_item === */
/* CW5 CaseMask Slider Item */

.cw5-casemaskslider-svg {
    width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    overflow: hidden;
    /* Anti-glitch tricks */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.cw5-casemaskslider-link {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
    /* Container anti-glitch */
    position: relative;
    overflow: hidden;
}

.cw5-casemaskslider-link:hover {
    opacity: 0.9;
}

/* Image slide-in animation from right */
.cw5-casemaskslider-img {
    opacity: 0;
    transform: translateX(100%);
    transition: all 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Anti-glitch tricks for image */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    shape-rendering: crispEdges;
    transform-origin: center;
}

.cw5-casemaskslider-img.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Path (logo) fade-in animation only - slightly delayed */
.cw5-casemaskslider-path {
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
}

.cw5-casemaskslider-path.visible {
    opacity: 1;
}

/* YOOtheme Builder Mode: Always show elements */
body.tm-builder .cw5-casemaskslider-img,
body.tm-builder .cw5-casemaskslider-path {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Fallback: Show after 100ms if JavaScript hasn't initialized */
@keyframes cw5-casemaskslider-fallback {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cw5-casemaskslider-item:not(.cw5-casemaskslider-initialized) .cw5-casemaskslider-img,
.cw5-casemaskslider-item:not(.cw5-casemaskslider-initialized) .cw5-casemaskslider-path {
    animation: cw5-casemaskslider-fallback 0.3s ease-out 0.1s forwards;
}

/* Button hover effect */
.cw5-casemaskslider-item {
    transition: all 0.3s ease;
}

.cw5-casemaskslider-item-button {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.cw5-casemaskslider-item:hover .cw5-casemaskslider-item-button {
    opacity: 1;
    transform: translateY(0);
}

/* Additional anti-glitch fix for SVG subpixel rendering */
.cw5-casemaskslider-svg {
    /* Force hardware acceleration and prevent subpixel issues */
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix for the mask group to prevent bleeding */
.cw5-casemaskslider-svg g[mask] {
    transform: translateZ(0);
}

/* Mobile responsive SVG offset */
@media (max-width: 639px) {
    .cw5-casemaskslider-svg {
        margin-left: var(--svg-offset-mobile, -10px) !important;
        width: var(--svg-width-mobile, calc(100% + 10px)) !important;
    }
}



/* === ELEMENT: cw5-client-logo-bar === */
/* CW5 Client Logo Bar - Infinite Scroll Animation */

.cw5-client-logo-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: calc(var(--logo-height, 66px) + 20px);
    padding: 10px 0;
}

.cw5-client-logo-bar-track {
    display: flex;
    width: fit-content;
    animation: cw5-client-logo-bar-slide var(--animation-duration, 30s) linear infinite;
    height: var(--logo-height, 66px);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.cw5-client-logo-bar-item {
    display: flex;
    align-items: center;
    height: var(--logo-height, 66px);
    padding: 0 var(--logo-spacing, 20px);
    flex-shrink: 0;
}

.cw5-client-logo-bar-item-content {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG/Image height only - width auto for proportional scaling */
.cw5-client-logo-bar img,
.cw5-client-logo-bar-item img,
.cw5-client-logo-bar-item-content img,
.cw5-client-logo-bar-image {
    height: var(--logo-height, 66px) !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Hide logos initially to prevent pink flash */
    opacity: 0 !important;
}

/* SVG styling */
.cw5-client-logo-bar svg,
.cw5-client-logo-bar-item svg,
.cw5-client-logo-bar-item-content svg {
    height: var(--logo-height, 66px) !important;
    width: auto !important;
    max-width: none !important;
    transition: fill 0.3s ease !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cw5-client-logo-bar-item-content {
    height: 100%;
    width: 100%;
}


/* Hover effect on the entire slider - complete stop */
.cw5-client-logo-bar:hover .cw5-client-logo-bar-track {
    animation-play-state: paused;
}

/* Logo coloring handled by JavaScript */

/* Show logos when ready */
.cw5-client-logo-bar.ready img,
.cw5-client-logo-bar.ready .cw5-client-logo-bar-item img,
.cw5-client-logo-bar.ready .cw5-client-logo-bar-item-content img,
.cw5-client-logo-bar.ready .cw5-client-logo-bar-image {
    opacity: 1 !important;
}

/* Keyframe animation for infinite scroll - GPU accelerated */
@keyframes cw5-client-logo-bar-slide {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-33.3333%, 0, 0);
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cw5-client-logo-bar-track {
        animation: none;
    }
}

/* Responsive adjustments - Mobile (under 960px) */
@media (max-width: 959px) {
    .cw5-client-logo-bar {
        height: calc(var(--logo-height-medium, 50px) + 20px);
    }
    
    .cw5-client-logo-bar-track {
        animation-duration: var(--animation-duration-medium, 30s);
        height: var(--logo-height-medium, 50px);
    }
    
    .cw5-client-logo-bar-item {
        height: var(--logo-height-medium, 50px);
        padding: 0 var(--logo-spacing-medium, 15px);
    }
    
    .cw5-client-logo-bar img,
    .cw5-client-logo-bar-item img,
    .cw5-client-logo-bar-item-content img,
    .cw5-client-logo-bar-image {
        height: var(--logo-height-medium, 50px) !important;
    }
    
    .cw5-client-logo-bar svg,
    .cw5-client-logo-bar-item svg,
    .cw5-client-logo-bar-item-content svg {
        height: var(--logo-height-medium, 50px) !important;
    }
}


/* === ELEMENT: cw5-client-logo-bar_item === */
/* CW5 Logo Item - All styles handled by parent element and inline */

/* Placeholder styling when no image is selected */
.cw5-client-logo-bar-item-content .uk-text-muted {
    font-size: 12px;
    opacity: 0.6;
}

/* === ELEMENT: cw5-color-palette === */
.cw5-color-palette-container {
    gap: 10px;
}

.cw5-color-swatch {
    width: 90px;
    height: auto;
    border: 2px solid #656565;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.cw5-color-swatch:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #ededed;
}

.cw5-color-swatch-preview {
    height: 60px;
    width: 100%;
}

.cw5-color-swatch-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 6px;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cw5-color-swatch-name {
    font-weight: 600;
    color: #111111;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw5-color-swatch-hex {
    font-family: 'Courier New', monospace;
    color: #666;
    font-size: 12px;
    font-weight: 600;
}

.cw5-color-swatch.copied {
    border-color: #32d296;
    box-shadow: 0 0 0 2px rgba(50, 210, 150, 0.3);
}

.cw5-color-swatch.copied .cw5-color-swatch-content {
    background: rgba(255, 255, 255, 0.95);
}

.cw5-color-swatch.copied .cw5-color-swatch-hex {
    color: #32d296;
    font-weight: 600;
}

/* === ELEMENT: cw5-four-steps === */
/* CW5 Four Steps Container Styles */
.cw5-foursteps {
    width: 100%;
    /* Add padding to prevent glow from being cut off */
    padding: 20px;
    margin: -20px; /* Negative margin to compensate for padding */
    overflow: visible; /* Allow glow visibility */
    display: flex;
    flex-direction: column;
}

/* Dynamic content padding using CSS Custom Properties */
.cw5-foursteps .cw5-foursteps-content {
    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left) !important;
}

@media (max-width: 959px) {
    .cw5-foursteps .cw5-foursteps-content {
        padding: var(--padding-top-tablet) var(--padding-right-tablet) var(--padding-bottom-tablet) var(--padding-left-tablet) !important;
    }
}

@media (max-width: 639px) {
    .cw5-foursteps .cw5-foursteps-content {
        padding: var(--padding-top-mobile) var(--padding-right-mobile) var(--padding-bottom-mobile) var(--padding-left-mobile) !important;
    }
}

/* Ensure proper spacing between four steps items */
.cw5-foursteps .cw5-foursteps-item {
    margin-bottom: 16px;
    position: relative; /* For absolute positioning of mobile step text */
}

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

/* Animation styles */
.cw5-animate-item,
.cw5-animate-text,
.cw5-animate-arrow {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cw5-animate-item.cw5-animate-visible,
.cw5-animate-text.cw5-animate-visible,
.cw5-animate-arrow.cw5-animate-visible {
    opacity: 1 !important;
    transform: translateY(0);
}

.cw5-foursteps-item .cw5-foursteps-content {
    border: 1px solid rgba(var(--color-border), 1);
    border-radius: 10px;
    background-color: rgb(var(--color-background));
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.4s ease;
    will-change: transform, opacity, box-shadow;
    position: relative;
    overflow: hidden;
}

.cw5-foursteps-icon {
    display: block;
}

.cw5-foursteps-title {
    color: rgba(var(--color-white), 1) !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: none;
}

.cw5-foursteps-copy {
    color: rgba(var(--color-white), 1) !important;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    text-transform: none;
}

.cw5-foursteps-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(var(--color-border), 1);
    padding-top: 0px;
    position: relative;
}

.cw5-foursteps-arrow-vertical {
    flex-direction: column;
}

.cw5-foursteps-arrow-horizontal {
    flex-direction: row;
}

.cw5-arrow-svg {
    width: 24px;
    height: auto;
    max-height: 100px;
}

/* Step text positioning */
.cw5-foursteps-step-text {
    color: var(--color-light-grey);
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

/* Mobile: Text above item, aligned right with primary color */
.cw5-foursteps-step-text-mobile {
    margin-bottom: 10px;
    text-align: right;
    font-size: 14px;
    color: #4675F9 !important;
    position: absolute;
    top: -30px;
    right: 0;
    width: 100%;
    z-index: 1;
    padding-right: 15px;
}

/* Desktop texts - ALL positioned exactly the same way */
.cw5-foursteps-desktop .cw5-foursteps-grid-item {
    position: relative;
}

.cw5-foursteps-desktop .cw5-foursteps-step-text-desktop {
    position: absolute;
    left: calc(100% + 1px);
    top: 0;
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    transform-origin: center center;
    color: #4675F9 !important; /* Blue color like mobile */
}

/* Mobile/Tablet Layout (< 960px) - Using UIkit visibility classes */
.cw5-foursteps-mobile {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all content */
}

/* Mobile content width and centering */
.cw5-foursteps-mobile .cw5-foursteps-content {
    max-width: 300px; /* Limit to 300px on mobile */
    width: 100%;
    margin: 0 auto; /* Center the content */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Mobile vertical arrow spacing - minimal margins */
.cw5-foursteps-mobile .cw5-foursteps-arrow-vertical {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Mobile arrows - half the height */
.cw5-foursteps-mobile .cw5-arrow-svg {
    height: 30px; /* Fixed height instead of max-height */
    width: 24px;
}

/* Responsive arrow adjustments for mobile/tablet */
@media (min-width: 960px) {
    .cw5-foursteps-mobile .cw5-arrow-svg {
        max-height: 120px;
    }
}

/* Desktop Layout (≥ 960px) - Using UIkit visibility classes */
.cw5-foursteps-desktop {
    display: block;
}

.cw5-foursteps-desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: 30px 20px;
    align-items: center;
    justify-items: center;
    min-height: 500px;
}

/* Tablet layout (960px - 1200px): Narrower middle column */
@media (min-width: 960px) and (max-width: 1199px) {
    .cw5-foursteps-desktop-grid {
        grid-template-columns: 1fr 0.5fr 1fr;
        padding: 0 50px;
    }
    
    /* Shorter horizontal arrows for tablet to avoid collision with rotated text */
    .cw5-foursteps-arrow-horizontal .cw5-arrow-svg {
        max-width: 80px;
    }
}

.cw5-foursteps-grid-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure step items have proper styling */
.cw5-foursteps-desktop .cw5-foursteps-grid-item .cw5-foursteps-content {
    border: 1px solid rgba(var(--color-border), 1);
    border-radius: 10px;
    background-color: rgb(var(--color-background));
    width: 100%;
    min-height: 200px;
    transition: box-shadow 0.4s ease;
}

.cw5-foursteps-empty {
    /* Empty grid cells */
}

/* Horizontal arrows for desktop - maximize width */
.cw5-foursteps-arrow-horizontal .cw5-arrow-svg {
    width: 100%;
    max-width: 200px;
    height: 24px;
    max-height: none;
}

/* Vertical arrow for desktop - maximize height */
.cw5-foursteps-desktop .cw5-foursteps-arrow-vertical .cw5-arrow-svg {
    width: 24px;
    height: 100%;
    max-height: 160px;
    min-height: 120px;
}

/* Glow effect handled by cw-glow-primary-on-hover utility class on cw-four-steps-content */

/* Dynamic padding styles are handled inline in template.php for unique class targeting */


/* === ELEMENT: cw5-icon-gallery === */
/* CW5 Icon Gallery */

.cw5-icon-gallery-item:hover {
    border-color: #ff6b35 !important;
}

.cw5-icon-gallery-item-copied {
    border-color: #32d296 !important;
    background: #e8f8f2 !important;
}


/* === ELEMENT: cw5-location === */
/* CW5 Location Styles */

/* Button padding customization using CSS variables like cw-button-advanced */
.cw5-location-wrapper {
    /* CSS variables for button padding will be set inline in template */
}

.cw5-location-wrapper a.uk-button {
    /* Button padding will be applied via CSS variables */
}

/* Icon alignment fixes */
.cw5-location-wrapper a.uk-button [uk-icon] {
    vertical-align: 0.125em;
    line-height: 1;
}

.cw5-location-wrapper a.uk-button .uk-flex.uk-flex-middle {
    align-items: center;
    line-height: inherit;
}

/* Base arrow styling for responsive tooltips */
.hallo-responsive::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Desktop: Position right of marker with left arrow */
@media (min-width: 768px) {
    .hallo-responsive {
        transform: translate(10px, -50%);
    }
    
    .hallo-responsive::before {
        top: 50%;
        left: -8px;
        transform: translateY(-50%);
        border-width: 8px 8px 8px 0;
        border-color: transparent rgb(var(--color-secondary)) transparent transparent;
    }
}

/* Mobile: Position above marker with bottom arrow */
@media (max-width: 767px) {
    .hallo-responsive {
        transform: translate(-50%, -100%) translateY(-10px);
    }
    
    .hallo-responsive::before {
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 8px 8px 0 8px;
        border-color: rgb(var(--color-secondary)) transparent transparent transparent;
    }
}

/* Dynamic responsive styles are handled inline in template.php for unique class targeting */

/* Overlay hover effects - fade out only color overlay on container hover */
.cw5-location-container:hover .cw5-overlay-color {
  opacity: 0;
  transition: opacity 8s ease-in-out;
}

/* Base responsive height settings */
.cw5-location-container {
  min-height: 400px;
}

/* Responsive height settings using CSS custom properties */
/* X-Large screens (1600px+) */
@media (min-width: 1600px) {
  .cw5-location-container {
    height: var(--height-xlarge) !important;
    min-height: 400px;
  }
}

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  .cw5-location-container {
    height: var(--height-tablet) !important;
    min-height: 400px;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .cw5-location-container {
    height: var(--height-mobile) !important;
    min-height: 350px;
  }
}

/* Content wrapper responsive positioning using CSS custom properties */
/* X-Large screens (1600px+) */
@media (min-width: 1600px) {
  [class*="cw5-content-wrapper-"] {
    left: var(--padding-left-xlarge) !important;
  }
}

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  [class*="cw5-content-wrapper-"] {
    left: var(--padding-left-tablet) !important;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  [class*="cw5-content-wrapper-"] {
    left: var(--padding-left-mobile) !important;
    right: 20px !important;
    max-width: none !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}


/* === ELEMENT: cw5-megamenu-slider === */
/* CW5 Megamenu Slider - Parent Element Styles */

.cw5-megamenu-slider-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.cw5-megamenu-slider {
    position: relative;
    height: 100vh;
}

/* Ensure full height for all slider components */
.cw5-megamenu-slider .uk-slider-container,
.cw5-megamenu-slider .uk-slider-items {
    height: 100vh;
    margin: 0;
}

.cw5-megamenu-slider .uk-slider-items > * {
    height: 100vh;
    padding: 0;
    margin: 0;
}

/* 100% viewport height for all items */
.cw5-megamenu-slider-item {
    height: 100vh;
}

/* Ensure no gaps between items */
.cw5-megamenu-slider .uk-grid-collapse {
    margin: 0;
}

.cw5-megamenu-slider .uk-grid-collapse > * {
    padding: 0;
    margin: 0;
}


/* === ELEMENT: cw5-megamenu-slider_item === */
/* CW5 Megamenu Slider Item - Child Element Styles */

.cw5-megamenu-slider-item {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    margin: 0;
    padding: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.cw5-megamenu-slider-item:hover {
    text-decoration: none;
    color: inherit;
}

.cw5-megamenu-image-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    transform: translateZ(0);
    overflow: hidden;
}

.cw5-megamenu-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

.cw5-megamenu-hover-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to top, rgba(var(--color-background), 0.8) 0%, rgba(var(--color-background), 0.4) 50%, transparent 100%);
    transition: height 0.3s ease;
    z-index: 1;
}

.cw5-megamenu-slider-item:hover .cw5-megamenu-hover-gradient {
    height: 40%;
}

.cw5-megamenu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    transition: background-color 0.3s ease;
    text-align: left;
}

.cw5-megamenu-slider-item:hover .cw5-megamenu-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.cw5-megamenu-slider-item:hover .cw5-megamenu-image {
    transform: scale(1.05);
}

.cw5-megamenu-content {
    position: absolute;
    bottom: 60px; /* Start 60px from bottom */
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none; /* Allow clicks to pass through empty areas */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px; /* Minimum height for content area */
}

.cw5-megamenu-title {
    font-family: 'CustomHeadline', serif;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 16px 0; /* Bottom margin for spacing to subtitle */
    padding: 0 24px; /* Horizontal padding */
    font-size: var(--title-font-size-mobile);
    background: linear-gradient(to bottom, var(--gradient-color-start) var(--gradient-position-start), var(--gradient-color-middle) var(--gradient-position-middle), var(--gradient-color-end) var(--gradient-position-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    transition: all 0.3s ease;
    
    /* Prepare for hover transition to solid color */
    color: transparent;
    
    /* Allow title to grow naturally */
    flex-shrink: 0;
    pointer-events: auto; /* Re-enable clicks on title */
}

/* Responsive font sizes for title */
@media (min-width: 640px) {
    .cw5-megamenu-title {
        font-size: var(--title-font-size-tablet);
    }
}

@media (min-width: 960px) {
    .cw5-megamenu-title {
        font-size: var(--title-font-size-desktop);
    }
}

@media (min-width: 1200px) {
    .cw5-megamenu-title {
        font-size: var(--title-font-size-xlarge);
    }
}

.cw5-megamenu-subtitle {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
    margin: 0;
    padding: 0 24px; /* Horizontal padding */
    line-height: 1.4;
    
    /* Allow subtitle to grow naturally */
    flex-shrink: 0;
    pointer-events: auto; /* Re-enable clicks on subtitle */
}

/* Hover effects - transition from gradient to solid color */
.cw5-megamenu-slider-item:hover .cw5-megamenu-title {
    /* Remove gradient and show solid hover color */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--hover-color);
    background-clip: unset;
    color: var(--hover-color);
}

.cw5-megamenu-slider-item:hover .cw5-megamenu-subtitle {
    color: var(--hover-color);
}

/* Link styling - entire item is now a link */

/* Responsive subtitle sizing */
@media (max-width: 639px) {
    .cw5-megamenu-subtitle {
        font-size: 0.9rem;
    }
}

@media (min-width: 640px) {
    .cw5-megamenu-subtitle {
        font-size: 1rem;
    }
}

@media (min-width: 960px) {
    .cw5-megamenu-subtitle {
        font-size: 1.1rem;
    }
}

@media (min-width: 1200px) {
    .cw5-megamenu-subtitle {
        font-size: 1.2rem;
    }
}

/* Responsive padding adjustments only */
@media (max-width: 639px) {
    .cw5-megamenu-title {
        padding: 0 16px;
    }
    .cw5-megamenu-subtitle {
        padding: 0 16px;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .cw5-megamenu-title {
        padding: 0 20px;
    }
    .cw5-megamenu-subtitle {
        padding: 0 20px;
    }
}

@media (min-width: 960px) {
    .cw5-megamenu-title {
        padding: 0 24px;
    }
    .cw5-megamenu-subtitle {
        padding: 0 24px;
    }
}

@media (min-width: 1200px) {
    .cw5-megamenu-title {
        padding: 0 32px;
    }
    .cw5-megamenu-subtitle {
        padding: 0 32px;
    }
}

/* === ELEMENT: cw5-pro-contra === */
/* CW Pro Contra Styles */

/* Desktop + Tablet Layout */
.cw5-pro-contra-desktop .cw5-pro-contra-row {
    margin-bottom: 0;
}

/* Mobile Layout */
.cw5-pro-contra-mobile {
    position: relative;
}

.cw5-pro-contra-mobile-item {
    padding: 1rem 0;
}

/* Responsive visibility */
@media (min-width: 640px) {
    .cw5-pro-contra-desktop {
        display: block !important;
    }
    .cw5-pro-contra-mobile {
        display: none !important;
    }
}

@media (max-width: 639px) {
    .cw5-pro-contra-desktop {
        display: none !important;
    }
    .cw5-pro-contra-mobile {
        display: block !important;
    }
}

/* Centered X background - inline style overrides this, or uses fallback */
.cw5-bg-x-centered {
    background-image: url('/wp-content/themes/CW25WebsiteV1/builder/cw5-pro-contra/images/cw5-logo-x-outline-gradient-linear.svg');
    background-size: 209px 222px;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

/* Fixed height for mobile when data-mobile-height="fixed" */
@media (max-width: 639px) {
    .cw5-pro-contra-container[data-mobile-height="fixed"] .cw5-pro-contra-mobile .uk-slider-container {
        height: 300px;
        overflow: hidden;
    }
}

/* Large screens (Desktop): Larger X background */
@media (min-width: 1200px) {
    .cw5-bg-x-centered {
        background-size: 314px 333px; /* 1.5x größer */
    }
}

/* Container padding neutralization - only from tablet up */
@media (min-width: 640px) {
    .cw5-container-neutralize {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .cw5-container-neutralize {
        margin-left: -30px;
        margin-right: -30px;
        width: calc(100% + 60px);
    }
}

/* Arrow positioning styles */
.cw5-arrows-below-center {
    justify-content: center;
}

.cw5-arrows-below-left {
    justify-content: flex-start;
}

.cw5-arrows-below-right {
    justify-content: flex-end;
}

/* === ELEMENT: cw5-pro-contra_item === */
/* CW Pro Contra Item Styles */

/* Base item layout */
.cw5-pro-contra-item {
    display: flex;
    gap: 2rem; /* Default gap */
    align-items: stretch;
    position: relative;
    overflow: visible;
}

/* Pro/Contra spacing variations */
.uk-grid-small .cw5-pro-contra-item {
    gap: 0.5rem;
}

.uk-grid-default .cw5-pro-contra-item,
.cw5-pro-contra-container:not([class*="uk-grid-"]) .cw5-pro-contra-item {
    gap: 2rem;
}

.uk-grid-medium .cw5-pro-contra-item {
    gap: 3rem;
}

.uk-grid-large .cw5-pro-contra-item {
    gap: 4rem;
}

/* Desktop + Tablet spacing between rows */
@media (min-width: 640px) {
    .cw5-pro-contra-item {
        margin-bottom: 0;
    }
}

.cw5-pro-contra-item .cw5-contra-section,
.cw5-pro-contra-item .cw5-pro-section {
    flex: 1;
    padding: 1.5rem;
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Desktop + Tablet layout - 36% width for each section with 28% gap */
@media (min-width: 640px) {
    .cw5-pro-contra-item .cw5-contra-section,
    .cw5-pro-contra-item .cw5-pro-section {
        flex: none;
        width: 36%;
        display: flex;
        align-items: center;
    }
    
    .cw5-pro-contra-item .cw5-contra-section {
        margin-right: auto;
    }
    
    .cw5-pro-contra-item .cw5-pro-section {
        margin-left: auto;
    }
}

.cw5-pro-contra-item .cw5-contra-content-wrapper,
.cw5-pro-contra-item .cw5-pro-content-wrapper {
    display: flex;
}

.cw5-pro-contra-item .cw5-contra-content-wrapper {
    flex-direction: row;
}

.cw5-pro-contra-item .cw5-contra-icon {
    order: 2;
}

.cw5-pro-contra-item .cw5-contra-text {
    order: 1;
    flex: 1;
}

.cw5-pro-contra-item .cw5-pro-text {
    order: 2;
    flex: 1;
}

.cw5-pro-contra-item .cw5-contra-icon,
.cw5-pro-contra-item .cw5-pro-icon {
    margin: 0 1rem;
}

.cw5-pro-contra-item .cw5-contra-text,
.cw5-pro-contra-item .cw5-pro-text {
    flex: 1;
}

.cw5-pro-contra-item .cw5-pro-content,
.cw5-pro-contra-item .cw5-contra-content {
    color: rgb(var(--color-white)) !important;
}

.cw5-pro-contra-item .cw5-pro-content p,
.cw5-pro-contra-item .cw5-contra-content p {
    margin-bottom: 0;
}

/* Desktop + Tablet icon positioning - icons on section edges */
@media (min-width: 640px) {
    .cw5-pro-contra-item .cw5-contra-section {
        position: relative;
    }
    
    .cw5-pro-contra-item .cw5-pro-section {
        position: relative;
    }
    
    .cw5-pro-contra-item .cw5-contra-icon {
        position: absolute;
        right: -33px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        margin: 0;
    }
    
    .cw5-pro-contra-item .cw5-pro-icon {
        position: absolute;
        left: -33px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        margin: 0;
    }
    
    /* Add padding between text and icons */
    .cw5-pro-contra-item .cw5-contra-text {
        padding-right: 2rem;
    }
    
    .cw5-pro-contra-item .cw5-pro-text {
        padding-left: 2rem;
    }
}

/* Hover Effects - Desktop + Tablet Only */
@media (min-width: 640px) {
    .cw5-pro-contra-item:hover .cw5-contra-section {
        transform: translateX(-20px);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .cw5-pro-contra-item:hover .cw5-pro-section {
        transform: translateX(20px);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* Längere Ausblendung beim Verlassen */
    .cw5-pro-contra-item .cw5-contra-section:not(:hover),
    .cw5-pro-contra-item .cw5-pro-section:not(:hover) {
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* Scroll-Trigger Effects - Same as hover but triggered by scroll */
    .cw5-pro-contra-item.cw5-scroll-active .cw5-contra-section {
        transform: translateX(-20px);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .cw5-pro-contra-item.cw5-scroll-active .cw5-pro-section {
        transform: translateX(20px);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* Responsive padding using CSS custom properties */
.cw5-pro-contra-item {
    padding: 12px var(--desktop-padding, 15px);
}

/* Tablet breakpoint */
@media (max-width: 959px) and (min-width: 640px) {
    .cw5-pro-contra-item {
        padding: 12px var(--tablet-padding, 10px);
    }
}

/* Mobile breakpoint */
@media (max-width: 639px) {
    .cw5-pro-contra-item {
        flex-direction: column;
        gap: 1rem;
        padding: 12px var(--mobile-padding, 15px);
    }
    
    .cw5-pro-contra-item .cw5-contra-section,
    .cw5-pro-contra-item .cw5-pro-section {
        flex: none;
    }
    
    .cw5-pro-contra-item .cw5-contra-content-wrapper,
    .cw5-pro-contra-item .cw5-pro-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cw5-pro-contra-item .cw5-contra-icon,
    .cw5-pro-contra-item .cw5-pro-icon {
        margin: -10px 0 1rem -10px;
        order: unset;
        position: static;
    }
    
    .cw5-pro-contra-item .cw5-contra-text,
    .cw5-pro-contra-item .cw5-pro-text {
        order: unset;
    }
}

/* === ELEMENT: cw5-single-step === */
/* CW5 Single Step Container Styles */
.cw5-singlestep {
    width: 100%;
    /* Add padding to prevent glow from being cut off */
    padding: 20px;
    margin: -20px; /* Negative margin to compensate for padding */
    overflow: visible; /* Allow glow visibility */
    display: flex;
    flex-direction: column;
}

/* Dynamic content padding using CSS Custom Properties */
.cw5-singlestep .cw5-singlestep-content {
    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left) !important;
}

/* Single Step Container - 100% width, same layout for desktop and mobile */
.cw5-singlestep-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cw5-singlestep-item {
    position: relative;
    width: 100%; /* 100% breiter Container */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cw5-singlestep-content {
    border: 1px solid rgba(var(--color-border), 1);
    border-radius: 10px;
    background-color: rgb(var(--color-background));
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.4s ease;
    will-change: transform, opacity, box-shadow;
    position: relative;
    overflow: hidden;
    width: calc(100% - 30px); /* 30px weniger für den Text */
    box-sizing: border-box;
}

/* Icon styling */
.cw5-singlestep-icon {
    display: block;
    text-align: left; /* Links ausrichten */
}

.cw5-singlestep-icon img {
    display: block;
    margin: 0; /* Kein auto margin */
}

/* Title styling */
.cw5-singlestep-title {
    color: rgba(var(--color-white), 1) !important;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: none;
    text-align: left; /* Links ausrichten */
}

/* Copy text styling */
.cw5-singlestep-copy {
    color: rgba(var(--color-white), 1) !important;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-transform: none;
    text-align: left; /* Links ausrichten */
}

/* Quick summary styling - positioned beside the card in the 30px area, rotated 90 degrees */
.cw5-singlestep-additional {
    position: absolute;
    left: calc(100% - 20px); /* Etwas weiter weg von der Card */
    top: 0;
    width: 30px; /* Genau 30px breit */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    transform-origin: center center;
    color: #4675F9 !important; /* Blue color like cw5-four-steps */
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

/* No media queries - same layout for all screen sizes */

/* Glow effect handled by cw-glow-primary-on-hover utility class on cw-singlestep-content */

/* Dynamic padding styles are handled inline in template.php for unique class targeting */


/* === ELEMENT: cw5-team-slider-rounded === */
/**
 * CW5 Team Slider Rounded - Parent Element Styles
 */

/* Item offset - adds padding to slider and moves odd items up */
.cw5-team-slider-rounded {
    padding-top: var(--item-offset, 30px);
}

/* Add padding to slider container to prevent clipping of offset items */
.cw5-team-slider-rounded .uk-slider-container {
    padding-top: var(--item-offset, 30px);
}

/* Move odd-numbered items up by the offset amount */
.cw5-team-slider-rounded .uk-slider-items > div:nth-child(odd) {
    transform: translateY(calc(-1 * var(--item-offset, 30px)));
}

/* Dynamic Heights using CSS custom properties */
.cw5-team-slider-rounded .uk-slider-items > div > .uk-panel { 
    height: var(--height-s, 400px); 
}

@media (min-width: 640px) {
    .cw5-team-slider-rounded .uk-slider-items > div > .uk-panel { 
        height: var(--height-m, 400px); 
    }
}

@media (min-width: 960px) {
    .cw5-team-slider-rounded .uk-slider-items > div > .uk-panel { 
        height: var(--height-l, 400px); 
    }
}

@media (min-width: 1200px) {
    .cw5-team-slider-rounded .uk-slider-items > div > .uk-panel { 
        height: var(--height-xl, 400px); 
    }
}

/* Grid spacing using CSS custom properties */
.cw5-team-slider-rounded .uk-slider-items > div {
    padding-left: 0;
    padding-right: 0;
}

.cw5-team-slider-rounded[style*="--gutter: small"] .uk-slider-items > div {
    padding-left: 5px;
    padding-right: 5px;
}

.cw5-team-slider-rounded[style*="--gutter: default"] .uk-slider-items > div {
    padding-left: 15px;
    padding-right: 15px;
}

.cw5-team-slider-rounded[style*="--gutter: medium"] .uk-slider-items > div {
    padding-left: 20px;
    padding-right: 20px;
}

.cw5-team-slider-rounded[style*="--gutter: large"] .uk-slider-items > div {
    padding-left: 30px;
    padding-right: 30px;
}

.cw5-team-slider-rounded[style*="--gutter: collapse"] .uk-slider-items > div {
    padding-left: 0;
    padding-right: 0;
}

/* Container padding to compensate for item padding */
.cw5-team-slider-rounded[style*="--gutter: small"] {
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
}

.cw5-team-slider-rounded[style*="--gutter: default"] {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}

.cw5-team-slider-rounded[style*="--gutter: medium"] {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.cw5-team-slider-rounded[style*="--gutter: large"] {
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 30px;
    padding-right: 30px;
}


/* === ELEMENT: cw5-team-slider-rounded_item === */
/**
 * CW5 Team Slider Rounded Item - Child Element Styles
 */

/* Team card - fills parent height */
.cw5-team-slider-rounded-card {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Overlay - covers entire card with gradient, hidden by default */
.cw5-team-slider-rounded-card .uk-text-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, var(--item-color, #113DBA) 0%, transparent 100%);
    border-radius: 200px;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5px 15px 30px 15px;
}

/* H5 styling */
.cw5-team-slider-rounded-card .uk-text-wrapper h5 {
    font-weight: 900;
}

/* P styling - smaller */
.cw5-team-slider-rounded-card .uk-text-wrapper p {
    font-size: 0.8em;
}

/* Show overlay on hover, tap, or if it's the active item */
.cw5-team-slider-rounded-card:hover .uk-text-wrapper,
.cw5-team-slider-rounded-card:active .uk-text-wrapper,
.uk-transition-active .cw5-team-slider-rounded-card .uk-text-wrapper {
    opacity: 1;
}

/* === ELEMENT: cw5-template-multi-element === */
/* CW5 Template Multi Element - Uses only UIkit classes */

/* === ELEMENT: cw5-template-multi-element_item === */
/* CW5 Template Multi Element Item - Uses only UIkit classes */

/* === ELEMENT: cw5-template-single-element === */
/* CW5 Template Single Element - Uses only UIkit classes */

/* === ELEMENT: cw5-testimonial-overlay-slider === */
/* CW5 Testimonial Overlay Slider Element Styles */

.cw5-tos-slide-container {
    min-height: 500px;
}

/* X-Large screens (1200px+) */
@media (min-width: 1200px) {
    .cw5-tos-slide-container {
        min-height: var(--item-height-xlarge, 600px);
    }
}

/* Large screens (960px-1200px) */
@media (min-width: 960px) and (max-width: 1199px) {
    .cw5-tos-slide-container {
        min-height: var(--item-height-large, 550px);
    }
}

/* Slider item scaling - inactive items smaller */
.cw5-testimonial-overlay-slider .uk-slider-items > li {
    transition: transform 0.3s ease;
    transform: scale(0.85);
    opacity: 0.6;
}

/* Active item - full size and fully visible */
.cw5-testimonial-overlay-slider .uk-slider-items > li.uk-active {
    transform: scale(1);
    opacity: 1;
    z-index: 1;
}

/* Mobile adjustments - under 640px */
@media (max-width: 639px) {
    .cw5-tos-slide-container {
        min-height: calc(100vh - 150px);
    }
    
    /* Less scaling on mobile for better visibility */
    .cw5-testimonial-overlay-slider .uk-slider-items > li {
        transform: scale(0.9);
    }
}

/* === ELEMENT: cw5-testimonial-overlay-slider_item === */
/* CW5 Testimonial Overlay Slider Item Element Styles */

.uk-cover-container {
    border-radius: 15px;
    overflow: hidden;
}

.cw5-tos-logo-image {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(1) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    color: var(--logo-color, #edededff);
}

.cw5-tos-item-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    inset: 10px;
    width: auto;
    max-width: 400px;
    margin-left: auto;
    justify-content: space-between;
    border-radius: 5px;
}

.uk-active .cw5-tos-item-overlay {
    opacity: 1;
}

.cw5-tos-logo-wrapper {
    flex-shrink: 0;
    margin-bottom: 20px;
}

.cw5-tos-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cw5-tos-content-wrapper .uk-button {
    align-self: flex-start;
}

/* Mobile adjustments - under 650px */
@media (max-width: 649px) {
    .uk-cover-container img {
        object-position: top center;
    }
    
    .cw5-tos-item-overlay {
        top: auto;
        bottom: 10px;
        height: auto;
        max-height: none;
    }
}

/* === ELEMENT: cw5-two-images-slide-up === */
/* CW5 Two Images Slide Up Element Styles */

.cw5-twoimagesslideup {
    position: relative;
    /* No overflow hidden here - allows shadow to extend beyond */
}

.cw5-twoimagesslideup .cw5-twoimagesslideup-images-container {
    overflow: hidden; /* Only clip the images, not the shadow */
}

.cw5-twoimagesslideup-images-container {
    display: flex;
    align-items: flex-end;
    gap: 0;
    width: 100%;
}

.cw5-twoimagesslideup-image-wrapper {
    flex: 0 0 auto;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cw5-twoimagesslideup-image-wrapper.animate-in {
    transform: translateY(0);
    opacity: 1;
}

.cw5-twoimagesslideup-image-wrapper:nth-child(1) {
    transition-delay: 0s;
}

.cw5-twoimagesslideup-image-wrapper:nth-child(2) {
    transition-delay: 0.2s;
}

.cw5-twoimagesslideup-image-wrapper img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Ensure images stay side by side on all breakpoints */
@media (max-width: 959px) {
    .cw5-twoimagesslideup-images-container {
        display: flex;
        align-items: flex-end;
    }
}