.elementor-2033 .elementor-element.elementor-element-2d37937b{--display:flex;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--margin-top:70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-2033 .elementor-element.elementor-element-402399ce{background-color:#FFFFFFD9;padding:2px 16px 2px 16px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0171FB40;border-radius:32px 32px 32px 32px;}.elementor-2033 .elementor-element.elementor-element-402399ce.elementor-element{--align-self:center;}.elementor-2033 .elementor-element.elementor-element-402399ce .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;line-height:24px;letter-spacing:0.2px;}.elementor-2033 .elementor-element.elementor-element-471e2e5a{text-align:center;}.elementor-2033 .elementor-element.elementor-element-471e2e5a .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2033 .elementor-element.elementor-element-58012e1d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-611deb84{--display:flex;--gap:30px 0px;--row-gap:30px;--column-gap:0px;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2033 .elementor-element.elementor-element-611deb84.e-con{--align-self:center;}.elementor-2033 .elementor-element.elementor-element-501ce8a9{--display:flex;--gap:10px 0px;--row-gap:10px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:25px 25px 25px 25px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-2033 .elementor-element.elementor-element-7e851f3c{background-color:#FFFFFFD9;padding:2px 16px 2px 16px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0171FB40;border-radius:32px 32px 32px 32px;}.elementor-2033 .elementor-element.elementor-element-7e851f3c.elementor-element{--align-self:flex-start;}.elementor-2033 .elementor-element.elementor-element-7e851f3c .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;line-height:24px;letter-spacing:0.2px;}.elementor-2033 .elementor-element.elementor-element-2d4bbc2a{text-align:start;}.elementor-2033 .elementor-element.elementor-element-2d4bbc2a .elementor-heading-title{font-family:var( --e-global-typography-36d9fe5-font-family ), Sans-serif;font-size:var( --e-global-typography-36d9fe5-font-size );font-weight:var( --e-global-typography-36d9fe5-font-weight );line-height:var( --e-global-typography-36d9fe5-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-5ad02641{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:justify;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-b53b31{--display:flex;--gap:10px 0px;--row-gap:10px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:25px 25px 25px 25px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-2033 .elementor-element.elementor-element-4f508b79{background-color:#FFFFFFD9;padding:2px 16px 2px 16px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0171FB40;border-radius:32px 32px 32px 32px;}.elementor-2033 .elementor-element.elementor-element-4f508b79.elementor-element{--align-self:flex-start;}.elementor-2033 .elementor-element.elementor-element-4f508b79 .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;line-height:24px;letter-spacing:0.2px;}.elementor-2033 .elementor-element.elementor-element-d8420df{text-align:start;}.elementor-2033 .elementor-element.elementor-element-d8420df .elementor-heading-title{font-family:var( --e-global-typography-36d9fe5-font-family ), Sans-serif;font-size:var( --e-global-typography-36d9fe5-font-size );font-weight:var( --e-global-typography-36d9fe5-font-weight );line-height:var( --e-global-typography-36d9fe5-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-5f62af83{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:justify;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-49448c5d{--display:flex;--gap:10px 0px;--row-gap:10px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:25px 25px 25px 25px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-2033 .elementor-element.elementor-element-14e7435d{background-color:#FFFFFFD9;padding:2px 16px 2px 16px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0171FB40;border-radius:32px 32px 32px 32px;}.elementor-2033 .elementor-element.elementor-element-14e7435d.elementor-element{--align-self:flex-start;}.elementor-2033 .elementor-element.elementor-element-14e7435d .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;line-height:24px;letter-spacing:0.2px;}.elementor-2033 .elementor-element.elementor-element-1c8d1026{text-align:start;}.elementor-2033 .elementor-element.elementor-element-1c8d1026 .elementor-heading-title{font-family:var( --e-global-typography-36d9fe5-font-family ), Sans-serif;font-size:var( --e-global-typography-36d9fe5-font-size );font-weight:var( --e-global-typography-36d9fe5-font-weight );line-height:var( --e-global-typography-36d9fe5-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-6932ce8a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:justify;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-c3e4d8e{--display:flex;--gap:10px 0px;--row-gap:10px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:25px 25px 25px 25px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-2033 .elementor-element.elementor-element-52b11210{background-color:#FFFFFFD9;padding:2px 16px 2px 16px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0171FB40;border-radius:32px 32px 32px 32px;}.elementor-2033 .elementor-element.elementor-element-52b11210.elementor-element{--align-self:flex-start;}.elementor-2033 .elementor-element.elementor-element-52b11210 .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;line-height:24px;letter-spacing:0.2px;}.elementor-2033 .elementor-element.elementor-element-21f85ee{text-align:start;}.elementor-2033 .elementor-element.elementor-element-21f85ee .elementor-heading-title{font-family:var( --e-global-typography-36d9fe5-font-family ), Sans-serif;font-size:var( --e-global-typography-36d9fe5-font-size );font-weight:var( --e-global-typography-36d9fe5-font-weight );line-height:var( --e-global-typography-36d9fe5-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-6c103544{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:justify;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-685b52d1{--display:flex;--gap:10px 0px;--row-gap:10px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:25px 25px 25px 25px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-2033 .elementor-element.elementor-element-32cf1ec5{background-color:#FFFFFFD9;padding:2px 16px 2px 16px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0171FB40;border-radius:32px 32px 32px 32px;}.elementor-2033 .elementor-element.elementor-element-32cf1ec5.elementor-element{--align-self:flex-start;}.elementor-2033 .elementor-element.elementor-element-32cf1ec5 .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;line-height:24px;letter-spacing:0.2px;}.elementor-2033 .elementor-element.elementor-element-7215481b{text-align:start;}.elementor-2033 .elementor-element.elementor-element-7215481b .elementor-heading-title{font-family:var( --e-global-typography-36d9fe5-font-family ), Sans-serif;font-size:var( --e-global-typography-36d9fe5-font-size );font-weight:var( --e-global-typography-36d9fe5-font-weight );line-height:var( --e-global-typography-36d9fe5-line-height );color:var( --e-global-color-text );}.elementor-2033 .elementor-element.elementor-element-18d06d99{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:justify;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}@media(min-width:768px){.elementor-2033 .elementor-element.elementor-element-611deb84{--width:100%;}}@media(max-width:1125px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-2033 .elementor-element.elementor-element-471e2e5a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-58012e1d{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-2d4bbc2a .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-5ad02641{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-d8420df .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-5f62af83{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-1c8d1026 .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-6932ce8a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-21f85ee .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-6c103544{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-7215481b .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-18d06d99{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-2033 .elementor-element.elementor-element-2d37937b{--padding-top:0px;--padding-bottom:0px;--padding-left:12px;--padding-right:12px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-2033 .elementor-element.elementor-element-471e2e5a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-58012e1d{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-501ce8a9{--padding-top:22px;--padding-bottom:22px;--padding-left:12px;--padding-right:12px;}.elementor-2033 .elementor-element.elementor-element-2d4bbc2a .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-5ad02641{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-b53b31{--padding-top:22px;--padding-bottom:22px;--padding-left:12px;--padding-right:12px;}.elementor-2033 .elementor-element.elementor-element-d8420df .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-5f62af83{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-49448c5d{--padding-top:22px;--padding-bottom:22px;--padding-left:12px;--padding-right:12px;}.elementor-2033 .elementor-element.elementor-element-1c8d1026 .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-6932ce8a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-c3e4d8e{--padding-top:22px;--padding-bottom:22px;--padding-left:12px;--padding-right:12px;}.elementor-2033 .elementor-element.elementor-element-21f85ee .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-6c103544{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-2033 .elementor-element.elementor-element-685b52d1{--padding-top:22px;--padding-bottom:22px;--padding-left:12px;--padding-right:12px;}.elementor-2033 .elementor-element.elementor-element-7215481b .elementor-heading-title{font-size:var( --e-global-typography-36d9fe5-font-size );line-height:var( --e-global-typography-36d9fe5-line-height );}.elementor-2033 .elementor-element.elementor-element-18d06d99{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS for container, class: .elementor-element-501ce8a9 */.elementor-2033 .elementor-element.elementor-element-501ce8a9 { position: relative; /*overflow: hidden;*/ background: radial-gradient( circle at 10% 0%, rgba(37, 99, 235, 0.09), transparent 38% ), radial-gradient( circle at 100% 100%, rgba(6, 182, 212, 0.08), transparent 35% ), linear-gradient( 145deg, #ffffff 0%, #f3f7ff 48%, #eaf3ff 100% ) !important; border: 1px solid #d7e5ff !important; border-radius: 18px; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.055), 0 2px 8px rgba(15, 23, 42, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } /* Premium hover */ .elementor-2033 .elementor-element.elementor-element-501ce8a9:hover { border-color: #93baff !important; box-shadow: 0 14px 36px rgba(37, 99, 235, 0.11), 0 4px 12px rgba(6, 182, 212, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b53b31 */.elementor-2033 .elementor-element.elementor-element-b53b31 { position: relative; /*overflow: hidden;*/ background: radial-gradient( circle at 10% 0%, rgba(37, 99, 235, 0.09), transparent 38% ), radial-gradient( circle at 100% 100%, rgba(6, 182, 212, 0.08), transparent 35% ), linear-gradient( 145deg, #ffffff 0%, #f3f7ff 48%, #eaf3ff 100% ) !important; border: 1px solid #d7e5ff !important; border-radius: 18px; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.055), 0 2px 8px rgba(15, 23, 42, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } /* Premium hover */ .elementor-2033 .elementor-element.elementor-element-b53b31:hover { border-color: #93baff !important; box-shadow: 0 14px 36px rgba(37, 99, 235, 0.11), 0 4px 12px rgba(6, 182, 212, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-49448c5d */.elementor-2033 .elementor-element.elementor-element-49448c5d { position: relative; /*overflow: hidden;*/ background: radial-gradient( circle at 10% 0%, rgba(37, 99, 235, 0.09), transparent 38% ), radial-gradient( circle at 100% 100%, rgba(6, 182, 212, 0.08), transparent 35% ), linear-gradient( 145deg, #ffffff 0%, #f3f7ff 48%, #eaf3ff 100% ) !important; border: 1px solid #d7e5ff !important; border-radius: 18px; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.055), 0 2px 8px rgba(15, 23, 42, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } /* Premium hover */ .elementor-2033 .elementor-element.elementor-element-49448c5d:hover { border-color: #93baff !important; box-shadow: 0 14px 36px rgba(37, 99, 235, 0.11), 0 4px 12px rgba(6, 182, 212, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c3e4d8e */.elementor-2033 .elementor-element.elementor-element-c3e4d8e { position: relative; /*overflow: hidden;*/ background: radial-gradient( circle at 10% 0%, rgba(37, 99, 235, 0.09), transparent 38% ), radial-gradient( circle at 100% 100%, rgba(6, 182, 212, 0.08), transparent 35% ), linear-gradient( 145deg, #ffffff 0%, #f3f7ff 48%, #eaf3ff 100% ) !important; border: 1px solid #d7e5ff !important; border-radius: 18px; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.055), 0 2px 8px rgba(15, 23, 42, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } /* Premium hover */ .elementor-2033 .elementor-element.elementor-element-c3e4d8e:hover { border-color: #93baff !important; box-shadow: 0 14px 36px rgba(37, 99, 235, 0.11), 0 4px 12px rgba(6, 182, 212, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-685b52d1 */.elementor-2033 .elementor-element.elementor-element-685b52d1 { position: relative; /*overflow: hidden;*/ background: radial-gradient( circle at 10% 0%, rgba(37, 99, 235, 0.09), transparent 38% ), radial-gradient( circle at 100% 100%, rgba(6, 182, 212, 0.08), transparent 35% ), linear-gradient( 145deg, #ffffff 0%, #f3f7ff 48%, #eaf3ff 100% ) !important; border: 1px solid #d7e5ff !important; border-radius: 18px; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.055), 0 2px 8px rgba(15, 23, 42, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } /* Premium hover */ .elementor-2033 .elementor-element.elementor-element-685b52d1:hover { border-color: #93baff !important; box-shadow: 0 14px 36px rgba(37, 99, 235, 0.11), 0 4px 12px rgba(6, 182, 212, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-611deb84 *//* ========================================== WORKING PROCESS - PREMIUM BLUE TIMELINE Alternating Cards + 3D Stage Markers ========================================== */ .working-process { --timeline-progress: 0%; position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 28px !important; padding: 25px 0 !important; overflow: visible !important; isolation: isolate; } /* ========================================== TIMELINE - DEFAULT DULL GREY ========================================== */ .working-process::before { content: ""; position: absolute; top: 25px; bottom: 25px; left: 50%; width: 3px; background: #e5e5e5; border-radius: 20px; transform: translateX(-50%); box-shadow: none; z-index: 0; } /* ========================================== TIMELINE - BLUE SCROLL PROGRESS ========================================== */ .working-process::after { content: ""; position: absolute; top: 25px; left: 50%; width: 3px; height: var(--timeline-progress, 0%); background: linear-gradient( 180deg, #1e3a8a 0%, #2563eb 50%, #06b6d4 100% ); border-radius: 20px; transform: translateX(-50%); box-shadow: 0 0 7px rgba(37,99,235,.3), 0 0 14px rgba(6,182,212,.2); transition: height .12s linear; z-index: 1; } /* ========================================== CARDS - BASE ========================================== */ .working-process > .working-process-card { position: relative !important; width: 46% !important; max-width: 48% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; z-index: 2; } /* LEFT CARDS */ .working-process > .working-process-card:nth-child(odd) { align-self: flex-start !important; } /* RIGHT CARDS */ .working-process > .working-process-card:nth-child(even) { align-self: flex-end !important; } /* ========================================== 3D NUMBER MARKERS - DULL DEFAULT ========================================== */ .working-process-card::before { content: attr(data-stage); position: absolute !important; top: 35px !important; right: calc(-4.1667% - 53px) !important; left: auto !important; width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #8999b5 !important; font-size: 16px !important; font-weight: 800 !important; font-family: var(--e-global-typography-883f6c5-font-family), Sans-serif; text-shadow: none !important; border: 2px solid #dce5f2 !important; background: linear-gradient( 145deg, #f0f4fa 0%, #dce5f2 100% ) !important; box-shadow: 0 5px 14px rgba(30,58,138,.08), inset 0 2px 3px rgba(255,255,255,.9), inset 0 -3px 6px rgba(100,116,139,.08) !important; z-index: 5 !important; outline: 3px solid rgba(148,163,184,.08); transition: all .4s cubic-bezier(.2,.8,.2,1) !important; } /* RIGHT CARD MARKER POSITION */ .working-process-card:nth-child(even)::before { left: calc(-4.1667% - 53px) !important; right: auto !important; } /* ========================================== ACTIVE MARKER - BRIGHT BLUE FILL ========================================== */ .working-process-card.is-active::before { color: #ffffff !important; background: linear-gradient( 145deg, #44c7f6 0%, #2563eb 55%, #0037f0 100% ) !important; border: 2px solid rgba(255,255,255,.75) !important; text-shadow: 0 1px 3px rgba(0,0,0,.2) !important; transform: scale(1.12) translateY(-2px) !important; outline: 5px solid rgba(37,99,235,.14) !important; box-shadow: 0 12px 26px rgba(37,99,235,.35), 0 0 18px rgba(37,99,235,.2), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -4px 7px rgba(0,0,0,.12) !important; } /* ========================================== BLUE CONNECTOR LINES ========================================== */ .working-process-card::after { content: ""; position: absolute; top: 58px; width: 25px; height: 2px; background: linear-gradient( 90deg, #2563eb, #06b6d4 ); opacity: .55; pointer-events: none; box-shadow: 0 0 8px rgba(37,99,235,.2); transition: opacity .3s ease, box-shadow .3s ease; } /* LEFT CONNECTOR */ .working-process-card:nth-child(odd)::after { right: -25px; } /* RIGHT CONNECTOR */ .working-process-card:nth-child(even)::after { left: -25px; transform: rotate(180deg); } /* ACTIVE CONNECTOR */ .working-process-card.is-active::after { opacity: 1; box-shadow: 0 0 8px rgba(37,99,235,.45), 0 0 14px rgba(6,182,212,.2); } /* ========================================== MOBILE RESPONSIVE ========================================== */ @media (max-width: 767px) { .working-process { gap: 22px !important; padding: 15px 0 15px 48px !important; } /* MOVE TIMELINE TO LEFT */ .working-process::before, .working-process::after { left: 14px !important; transform: none !important; } /* FULL WIDTH CARDS */ .working-process > .working-process-card { width: 100% !important; max-width: 100% !important; align-self: stretch !important; } /* MOBILE MARKERS */ .working-process-card::before, .working-process-card:nth-child(even)::before { left: -48px !important; right: auto !important; top: 30px !important; width: 36px !important; height: 36px !important; font-size: 12px !important; } /* HIDE CONNECTORS */ .working-process-card::after, .working-process-card:nth-child(even)::after { display: none !important; } } /* ========================================== ACTIVE MARKER - JUGMUG GLOW EFFECT ========================================== */ .working-process-card.is-active::before { animation: markerGlow 1.8s ease-in-out infinite; } @keyframes markerGlow { 0%, 100% { filter: brightness(1); box-shadow: 0 12px 26px rgba(37,99,235,.35), 0 0 12px rgba(37,99,235,.2), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -4px 7px rgba(0,0,0,.12); } 50% { filter: brightness(1.2); box-shadow: 0 14px 30px rgba(37,99,235,.45), 0 0 22px rgba(37,99,235,.4), 0 0 34px rgba(6,182,212,.2), inset 0 2px 4px rgba(255,255,255,.65), inset 0 -4px 7px rgba(0,0,0,.1); } } @media (prefers-reduced-motion: reduce) { .working-process-card.is-active::before { animation: none !important; } } /* ========================================== WORKING PROCESS - ACTIVE MARKER RIPPLE ========================================== */ /* Active marker */ .working-process-card.is-active::before { animation: markerPopGlow 1.8s ease-in-out infinite !important; will-change: transform, filter; } /* Ripple animation using layered shadows */ @keyframes markerPopGlow { 0% { transform: scale(1.12) translateY(-2px); filter: brightness(1); box-shadow: 0 12px 26px rgba(37,99,235,.35), 0 0 0 0 rgba(37,99,235,.35), 0 0 0 0 rgba(6,182,212,.20), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -4px 7px rgba(0,0,0,.12); } 50% { transform: scale(1.16) translateY(-2px); filter: brightness(1.15); box-shadow: 0 14px 30px rgba(37,99,235,.4), 0 0 0 7px rgba(37,99,235,.12), 0 0 0 14px rgba(6,182,212,.07), inset 0 2px 4px rgba(255,255,255,.6), inset 0 -4px 7px rgba(0,0,0,.1); } 100% { transform: scale(1.12) translateY(-2px); filter: brightness(1); box-shadow: 0 12px 26px rgba(37,99,235,.35), 0 0 0 16px rgba(37,99,235,0), 0 0 0 23px rgba(6,182,212,0), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -4px 7px rgba(0,0,0,.12); } } /* Active connector glow */ .working-process-card.is-active::after { animation: connectorShimmer 1.5s ease-in-out infinite !important; } @keyframes connectorShimmer { 0%, 100% { opacity: .65; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.6); } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .working-process-card.is-active::before, .working-process-card.is-active::after { animation: none !important; } }/* End custom CSS */