.elementor-6628 .elementor-element.elementor-element-26a53ff{--display:flex;--min-height:65vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--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-6628 .elementor-element.elementor-element-26a53ff:not(.elementor-motion-effects-element-type-background), .elementor-6628 .elementor-element.elementor-element-26a53ff > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-88e47b9 );}.elementor-6628 .elementor-element.elementor-element-5c7db5d{--display:flex;--min-height:65vh;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:50px;--padding-right:50px;}.elementor-6628 .elementor-element.elementor-element-5c7db5d:not(.elementor-motion-effects-element-type-background), .elementor-6628 .elementor-element.elementor-element-5c7db5d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://criticalops.inapp.com/wp-content/uploads/2025/05/hm5-hero-left_shape.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6628 .elementor-element.elementor-element-5c7db5d.e-con{--align-self:center;}.elementor-6628 .elementor-element.elementor-element-efcc2db{width:var( --container-widget-width, 75% );max-width:75%;--container-widget-width:75%;--container-widget-flex-grow:0;}.elementor-6628 .elementor-element.elementor-element-efcc2db .elementor-heading-title{font-size:40px;line-height:55px;}.elementor-6628 .elementor-element.elementor-element-5c3cceb{color:var( --e-global-color-7931dde );}.elementor-6628 .elementor-element.elementor-element-08488c3{--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-6628 .elementor-element.elementor-element-08488c3:not(.elementor-motion-effects-element-type-background), .elementor-6628 .elementor-element.elementor-element-08488c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://criticalops.inapp.com/wp-content/uploads/2026/06/hm6-img012.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6628 .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-6628 .elementor-element.elementor-element-169b7a5:not(.elementor-motion-effects-element-type-background), .elementor-6628 .elementor-element.elementor-element-169b7a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ECF8F8;}.elementor-6628 .elementor-element.elementor-element-bb1ab92 > .elementor-widget-container{margin:0px 30px 0px 30px;border-radius:0px 0px 0px 0px;}.elementor-6628 .elementor-element.elementor-element-a35f1c4{--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-6628 .elementor-element.elementor-element-0d50c66{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-6628 .elementor-element.elementor-element-26a53ff{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6628 .elementor-element.elementor-element-08488c3:not(.elementor-motion-effects-element-type-background), .elementor-6628 .elementor-element.elementor-element-08488c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://criticalops.inapp.com/wp-content/uploads/2025/03/hm6-img01.png");background-position:28px 28px;}.elementor-6628 .elementor-element.elementor-element-08488c3{--min-height:621px;}}@media(max-width:767px){.elementor-6628 .elementor-element.elementor-element-5c7db5d{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6628 .elementor-element.elementor-element-efcc2db .elementor-heading-title{font-size:30px;line-height:40px;}.elementor-6628 .elementor-element.elementor-element-08488c3{--min-height:408px;}.elementor-6628 .elementor-element.elementor-element-08488c3:not(.elementor-motion-effects-element-type-background), .elementor-6628 .elementor-element.elementor-element-08488c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-6628 .elementor-element.elementor-element-bb1ab92 > .elementor-widget-container{margin:0px 0px 0px 0px;}}@media(max-width:1024px) and (min-width:768px){.elementor-6628 .elementor-element.elementor-element-5c7db5d{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-26a53ff */#inapp-ehsq-hero p span{ color: black; }/* End custom CSS */ /* 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 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 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 - Tight custom 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 { display: flex !important; 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; /* Custom premium 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 clicks */ 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-ONLY SELECTIVE METRIC CLEANUP (PHONES ONLY) ========================================================================== */ @media (max-width: 767px) { /* Completely strip small dashboard icons out of cards on smartphones only */ #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; } /* Pull the header text flush left since the graphic layout box is gone */ #inapp-workflow-area .item-wrap { gap: 0 !important; } }/* End custom CSS */