html,
    body{
    width:100%;
    overflow-x:hidden;
    }

/* FORCE REMOVE ALL GAPS IN MOBILE FRAME */
.design-preview-container,
.design-preview-container * {
    margin: 0 !important;
    padding: 0 !important;
}

/* FIX WORDPRESS IMAGE BEHAVIOR */
.design-preview-container img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
}

/* REMOVE TOP NOTCH / PSEUDO SPACE */
.design-preview-container::before {
    display: none !important;
}

/* FORCE FULL HEIGHT CONTENT */
#hands-content,
.design-content {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* STOP ELEMENTOR / THEME WRAPPERS */
.elementor img {
    height: 100% !important;
}

/* PREVENT SCROLL GAP */
.design-preview-container {
    overflow: hidden !important;
}
/* Target only mobile screens */
@media (max-width: 767px) {
    
    /* 1. Ensure the container has no padding and takes full width of the frame */
    .design-preview-container {
        padding: 0 !important;
        height: 450px !important; /* Adjust this height if needed to fit your frame */
        display: block !important;
    }

    /* 2. Target the specific wrapper for the image content */
    #hands-content {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* 3. Force the image to cover the entire frame area without gaps */
    #hands-content img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* This removes the white space */
        object-position: top !important; /* Keeps the top design visible */
        display: block !important;
    }

    /* 4. Ensure the wireframe/brain view also behaves correctly */
    #brain-content {
        width: 100% !important;
        height: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
}
/* Additional CSS to make screenshots fill the card with minimal spacing */

.case-screenshot-card {
    padding: 20px !important;
    min-height: 350px !important;
}

.case-screenshot-card.before {
    background-color: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
}

.case-screenshot-card.after {
    background-color: #e8f5e9 !important;
    border: 2px solid #c8e6c9 !important;
}

.case-screenshot-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

.case-badge {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 20 !important;
}