.cr-angled-hero-wrapper {
    width: 100vw;
    position: relative;
    z-index: 10; /* Ensure it stays above previous content if overlap occurs */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: visible; /* Allow vertical overlap */
    box-sizing: border-box;
    padding: 100px 0; /* Increased padding */
}

.cr-angled-hero-wrapper * {
    box-sizing: border-box;
}

.cr-angled-hero-inner {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translateX(var(--cr-hero-balance, 0px)); /* Manual balance correction */
}

/* Side Columns (Images) */
.cr-angled-hero-side {
    flex: 1 1 0; /* Force equal distribution starting from 0 */
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    min-height: 600px; /* Increased min-height for safety */
}

.cr-angled-hero-side.left {
    justify-content: flex-end; /* Align image towards center */
    padding-right: var(--cr-hero-gap, 40px);
}

.cr-angled-hero-side.right {
    justify-content: flex-start; /* Align image towards center */
    padding-left: var(--cr-hero-gap, 40px);
}

/* Card Stack Styling */
.cr-angled-hero-wrapper .cr-angled-hero-card,
.cr-angled-hero-wrapper .cr-angled-hero-card-spacer {
    width: var(--cr-hero-img-width, 400px);
    height: var(--cr-hero-img-height, 500px);
    transform-origin: center;
    border-radius: var(--cr-hero-img-radius, 30px);
}

.cr-angled-hero-wrapper .cr-angled-hero-card {
    position: absolute;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    z-index: calc(10 - var(--card-index));
    will-change: transform;
    /* Fix for border-radius clipping in some browsers */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.cr-angled-hero-wrapper .cr-angled-hero-card-spacer {
    position: relative;
    opacity: 0;
    pointer-events: none;
    flex-shrink: 0; /* Important! Don't let it shrink */
    transform: rotate(10deg); /* Slight rotation to reserve more vertical space */
}

.cr-angled-hero-wrapper .cr-angled-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    display: block;
}

/* Force Elementor Overflow */
.elementor-widget-cr_angled_hero,
.elementor-widget-cr_angled_hero .elementor-widget-container,
.elementor-section:has(.cr-angled-hero-wrapper),
.elementor-column:has(.cr-angled-hero-wrapper) {
    overflow: visible !important;
}

/* Left Side Stack */
.cr-angled-hero-wrapper .cr-angled-hero-side.left .cr-angled-hero-card {
    /* Align to the right of the left column (towards center) */
    right: var(--cr-hero-gap, 40px);
    /* Initial stack offset */
    transform: rotate(calc(var(--cr-hero-rot-left, -5deg) + (var(--card-index) * 3deg)))
               translate(calc(var(--card-index) * -10px), calc(var(--card-index) * 5px));
}

/* Right Side Stack */
.cr-angled-hero-wrapper .cr-angled-hero-side.right .cr-angled-hero-card {
    /* Align to the left of the right column (towards center) */
    left: var(--cr-hero-gap, 40px);
    /* Initial stack offset */
    transform: rotate(calc(var(--cr-hero-rot-right, 5deg) + (var(--card-index) * -3deg)))
               translate(calc(var(--card-index) * 10px), calc(var(--card-index) * 5px));
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .cr-angled-hero-wrapper {
        /* padding is now controlled by widget settings */
        overflow-x: hidden; /* Prevent horizontal scroll on mobile */
        overflow-y: visible;
    }

    /* DEFAULT: Stack Layout (Top - Center - Bottom) */
    .cr-angled-hero-inner {
        flex-direction: column;
        gap: 30px; /* Reduced space for mobile to fit viewport */
    }
    
    /* Side Layout - Vertical Stack Wrapper */
    .cr-angled-hero-side {
        width: 100%;
        height: auto;
        min-height: auto;
        display: flex;
        justify-content: center; /* Center the stack */
        align-items: center;
        padding: 0;
        overflow: visible;
    }

    .cr-angled-hero-side.left {
        order: 1; /* Top Stack */
    }
    
    .cr-angled-hero-center {
        order: 2; /* Text in middle */
        width: 100%;
        padding: 0 20px;
        text-align: center;
        z-index: 20; /* Above images */
    }

    .cr-angled-hero-side.right {
        order: 3; /* Bottom Stack */
    }
    
    /* Restore Card Stack Layout for Mobile (Default Stack) */
    .cr-angled-hero-wrapper .cr-angled-hero-card {
        position: absolute; /* Stack 'em up */
        width: 220px; /* Smaller width for mobile */
        height: 280px; /* Smaller height for mobile */
        left: auto !important;
        right: auto !important;
        margin: 0;
    }

    .cr-angled-hero-wrapper .cr-angled-hero-card-spacer {
        display: block;
        width: 220px;
        height: 280px;
        transform: rotate(5deg);
    }
    
    /* Mobile Stack Offsets - Centered */
    .cr-angled-hero-wrapper .cr-angled-hero-side.left .cr-angled-hero-card {
        right: auto;
        transform: rotate(calc(-5deg + (var(--card-index) * 3deg)))
                   translate(calc(var(--card-index) * -5px), calc(var(--card-index) * 5px));
    }

    .cr-angled-hero-wrapper .cr-angled-hero-side.right .cr-angled-hero-card {
        left: auto;
        transform: rotate(calc(5deg + (var(--card-index) * -3deg)))
                   translate(calc(var(--card-index) * 5px), calc(var(--card-index) * 5px));
    }
    
    /* --- SIDE-BY-SIDE MOBILE LAYOUT --- */
    .cr-angled-hero-wrapper.mobile-layout-side_by_side .cr-angled-hero-inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
    }
    
    .cr-angled-hero-wrapper.mobile-layout-side_by_side .cr-angled-hero-side.left {
        order: 1;
        width: 50%;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .cr-angled-hero-wrapper.mobile-layout-side_by_side .cr-angled-hero-side.right {
        order: 2;
        width: 50%;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .cr-angled-hero-wrapper.mobile-layout-side_by_side .cr-angled-hero-center {
        order: 3;
        width: 100%;
        margin-top: 20px;
    }
    
    /* Smaller cards for side-by-side */
    .cr-angled-hero-wrapper.mobile-layout-side_by_side .cr-angled-hero-card,
    .cr-angled-hero-wrapper.mobile-layout-side_by_side .cr-angled-hero-card-spacer {
        width: 150px; /* Adjusted for better fit on small screens */
        height: 210px;
        max-width: 95%;
    }
}

/* Center Content */
.cr-angled-hero-center {
    flex: 0 0 auto;
    width: var(--cr-hero-center-width, 500px);
    max-width: 90vw;
    z-index: 10;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cr-angled-hero-title {
    margin: 0 0 20px;
    line-height: 1.2;
}

.cr-angled-hero-desc {
    margin: 0 0 30px;
}

.cr-angled-hero-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: none !important; /* Force remove shadow */
}

.cr-angled-hero-btn:hover {
    background: #333;
    box-shadow: none !important; /* Force remove shadow on hover */
    transform: none !important; /* Force remove any scale/transform */
}