.elementor-6424 .elementor-element.elementor-element-169b7a5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6424 .elementor-element.elementor-element-169b7a5:not(.elementor-motion-effects-element-type-background), .elementor-6424 .elementor-element.elementor-element-169b7a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ECF8F8;}.elementor-6424 .elementor-element.elementor-element-bb1ab92 > .elementor-widget-container{margin:0px 30px 0px 30px;border-radius:0px 0px 0px 0px;}/* Start custom CSS for container, class: .elementor-element-169b7a5 *//* ==========================================================================
   ISOLATED WORKFLOW AREA - FULL WIDTH ARCHITECTURE WITH FIXED HOVER IMAGES
   ========================================================================== */

/* Full Screen Structural Canvas Layout */
#inapp-workflow-area {
    width: 100% !important;
    max-width: 100% !important; 
    margin: 0 !important;
    padding: 40px 60px !important; 
    box-sizing: border-box !important;
    background-color: #ffffff !important;
}

/* Global Layout Reset inside the workflow boundaries */
#inapp-workflow-area *, 
#inapp-workflow-area *::before, 
#inapp-workflow-area *::after {
    box-sizing: border-box;
}

/* Service Title Header Area Layout - Completely Borderless */
#inapp-workflow-area .service-title-area {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 20px !important;
    border-top: none !important;      
    border-bottom: none !important;  
    margin-bottom: 10px !important;
}

/* Row Layout Container - Fluid Edge-to-Edge (Desktop View) */
#inapp-workflow-area .service-single-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertically centers the left columns and right columns */
    justify-content: space-between !important;
    width: 100% !important;
    padding: 40px 24px !important; 
    margin: 0 -24px !important;    
    border-top: none !important;      
    border-bottom: 1px solid #e2e8f0 !important; 
    gap: 4% !important; 
    position: relative !important;
    border-radius: 12px !important; 
    background-color: transparent !important;
    background-image: none !important; 
    transition: background-color 0.3s ease !important;
}

/* Subtle Smooth Gray Hover State Activation (Desktop Only) */
#inapp-workflow-area .service-single-item:hover,
#inapp-workflow-area .service-single-item.hover-active {
    background-color: #f8fafc !important; /* Soft slate gray premium background */
    background-image: none !important;
}

/* ==========================================================================
   FIXED SIZE IMAGE & TEXT TITLE ALIGNMENT SYSTEM
   ========================================================================== */

/* Left Column: Outer alignment container */
#inapp-workflow-area .item-left {
    flex: 0 0 45% !important; /* Gives the image + title area a spacious 45% container block */
    max-width: 45% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Aligns image and text perfectly on the same horizontal line */
    justify-content: flex-start !important;
    gap: 24px !important; /* Space between the fixed image block and the item-wrap content */
    position: relative !important;
    z-index: 2 !important;
    margin-left: 0 !important;   
    padding-left: 0 !important;
}

/* 1. Feature Image Wrapper - Fixed Size & Clean Corners */
#inapp-workflow-area .item-left .image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 240px !important; /* Strict fixed width for the business photo */
    width: 240px !important;
    height: 140px !important; /* Strict fixed height */
    border-radius: 12px !important; /* Rounded corners */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force the raw image file to scale beautifully within its fixed window box */
#inapp-workflow-area .item-left .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Prevents stretching or squeezing the visual graphics */
    display: block !important;
}

/* 2. Title and Icon Layout Box Wrapper */
#inapp-workflow-area .item-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important; /* Clean margin between the red circle icon and text string */
    flex: 1 !important; /* Allows the title block to naturally use the remaining horizontal space */
    justify-content: flex-start !important;
}

/* FORCE-LOCK: Preserves the small icon block structure under all conditions */
#inapp-workflow-area .item-wrap .icon,
#inapp-workflow-area .service-single-item:hover .item-wrap .icon,
#inapp-workflow-area .service-single-item.hover-active .item-wrap .icon {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 36px !important;
    height: 35px !important;
    max-width: 36px !important;
    max-height: 35px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* FORCE-LOCK: Ensures your actual icon graphics (hm6-icon01.png) render brightly */
#inapp-workflow-area .item-wrap .icon img,
#inapp-workflow-area .service-single-item:hover .item-wrap .icon img,
#inapp-workflow-area .service-single-item.hover-active .item-wrap .icon img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 36px !important;
    height: 35px !important;
    max-width: 36px !important;
    max-height: 35px !important;
}

/* Text Header Layout Formatting */
#inapp-workflow-area .item-left .text {
    margin: 0 !important;
    font-size: 1.4rem !important; 
    line-height: 1.3 !important;
}

#inapp-workflow-area .item-left .text a {
    text-decoration: none !important;
    color: #0b1c3f !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   RIGHT COLUMN & TYPOGRAPHY FLOWS
   ========================================================================== */

/* Right Column: Descriptions Text blocks */
#inapp-workflow-area .item-right {
    flex: 0 0 50% !important; /* Balanced sizing across from the expanded left graphic side */
    max-width: 50% !important;
    position: relative !important;
    z-index: 2 !important;
}

#inapp-workflow-area .item-right-inner {
    width: 100% !important;
}

#inapp-workflow-area .item-right p {
    margin: 0 0 14px 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
    color: #4a5568 !important;
    text-align: left !important;
}

#inapp-workflow-area .item-right p:last-child {
    margin-bottom: 0 !important;
}

/* Strip theme absolute card pseudo-element slide-up masks completely */
#inapp-workflow-area .service-single-item::before,
#inapp-workflow-area .service-single-item::after,
#inapp-workflow-area .service-single-item:hover::before,
#inapp-workflow-area .service-single-item:hover::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   REMOVING UNWANTED FAR-RIGHT ICONS DEFINITIVELY
   ========================================================================== */
#inapp-workflow-area .service-single-item .item-right a.icon,
#inapp-workflow-area .service-single-item .item-right-inner a.icon,
#inapp-workflow-area .service-single-item:hover .item-right a.icon,
#inapp-workflow-area .service-single-item:hover .item-right-inner a.icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   UNIFIED RESPONSIVE BREAKPOINT SYSTEM (TABLET & MOBILE UPGRADE)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Main container canvas spacing optimization - Custom edge-to-edge mobile requested layout */
    #inapp-workflow-area {
        padding: 30px 0px !important; 
    }

    /* Pull header title elements together tightly */
    #inapp-workflow-area .service-title-area {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }

    /* Convert Row Container Items into Premium Isolated Cards with Tight Spacing */
    #inapp-workflow-area .service-single-item {
        flex-direction: column !important; /* Stack image, title, and descriptive components */
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px !important; /* Snug box padding framework */
        margin: 0 0 16px 0 !important; /* Reduced vertical spacing between cards */
        width: 100% !important;
        max-width: 100% !important;
        border: 1px solid #D0D5E1 !important; /* Theme requested border framing color */
        border-radius: 16px !important; /* Modern card aesthetic rounding */
        background-color: #ffffff !important; /* Solid matte white background surface */
        
        /* Disable touch triggers and hover flashes */
        pointer-events: none !important; 
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                    0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    }

    /* Neutralize and kill all hover background adjustments on mobile/tablet */
    #inapp-workflow-area .service-single-item:hover,
    #inapp-workflow-area .service-single-item.hover-active {
        background-color: #ffffff !important;
        background-image: none !important;
        cursor: default !important;
    }

    /* Remove interactive cursor pointer states and disable title link selections */
    #inapp-workflow-area .item-left .text a,
    #inapp-workflow-area .service-single-item a {
        pointer-events: none !important;
        cursor: default !important;
        text-decoration: none !important;
    }

    /* Protect outer boundaries by removing the bottom margin of the trailing element */
    #inapp-workflow-area .service-single-item:last-child {
        margin-bottom: 0 !important;
    }

    /* Transform inner structural columns to stretch edge-to-edge inside the cards */
    #inapp-workflow-area .item-left,
    #inapp-workflow-area .item-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Convert header row container layouts into clear vertical stacks */
    #inapp-workflow-area .item-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    /* Transform the featured layout item image block into a full card banner width */
    #inapp-workflow-area .item-left .image {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 180px !important; /* Balanced structural aspect box window height */
        border-radius: 10px !important; /* Slightly tighter rounding value for nested elements */
    }
}

/* ==========================================================================
   MOBILE ECOSYSTEM CLEANUP - HIDE SMALL ICONS ON PHONES ONLY
   ========================================================================== */
@media (max-width: 767px) {
    /* Completely strips the circle icon block out of the cards on mobile viewports */
    #inapp-workflow-area .item-wrap .icon,
    #inapp-workflow-area .item-wrap .icon img {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Pulls the title header text clean to the left boundary since icon is gone */
    #inapp-workflow-area .item-wrap {
        gap: 0 !important;
    }
}/* End custom CSS */