.elementor-9754 .elementor-element.elementor-element-0067068 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-9754 .elementor-element.elementor-element-0067068:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-0067068 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F5EE;}.elementor-9754 .elementor-element.elementor-element-0067068 > .elementor-container{max-width:1200px;}.elementor-9754 .elementor-element.elementor-element-0067068{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:60px 25px 60px 25px;}.elementor-9754 .elementor-element.elementor-element-0067068 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-84f3941 > .elementor-element-populated{padding:10px 25px 10px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9754 .elementor-element.elementor-element-de8039c .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1.8px;color:#287A78;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );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-9754 .elementor-element.elementor-element-eb44282{font-family:"Sarabun", Sans-serif;font-size:18px;font-weight:400;line-height:1.7em;color:#53616D;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9754 .elementor-element.elementor-element-3b93d0b .elementor-button{background-color:#18354F;font-family:"Sarabun", Sans-serif;font-size:15px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:6px 6px 6px 6px;padding:15px 25px 15px 25px;}.elementor-9754 .elementor-element.elementor-element-3b93d0b .elementor-button:hover, .elementor-9754 .elementor-element.elementor-element-3b93d0b .elementor-button:focus{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-3b93d0b{width:auto;max-width:auto;}.elementor-9754 .elementor-element.elementor-element-3b93d0b .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-9754 .elementor-element.elementor-element-3b93d0b .elementor-button .elementor-button-content-wrapper{gap:5px;}.elementor-9754 .elementor-element.elementor-element-959adb1 .elementor-button{background-color:#61CE7000;font-family:"Sarabun", Sans-serif;font-weight:500;fill:#18354F;color:#18354F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#18354F;border-radius:6px 6px 6px 6px;padding:21px 25px 21px 25px;}.elementor-9754 .elementor-element.elementor-element-959adb1 .elementor-button:hover, .elementor-9754 .elementor-element.elementor-element-959adb1 .elementor-button:focus{background-color:#18354F;color:#FFFFFF;border-color:#18354F;}.elementor-9754 .elementor-element.elementor-element-959adb1{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 12px;}.elementor-9754 .elementor-element.elementor-element-959adb1 .elementor-button:hover svg, .elementor-9754 .elementor-element.elementor-element-959adb1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-c3913f0 > .elementor-element-populated{padding:15px 0px 15px 25px;}.elementor-9754 .elementor-element.elementor-element-f75a1d0 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-9754 .elementor-element.elementor-element-f75a1d0:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-f75a1d0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-f75a1d0 > .elementor-container{max-width:1050px;}.elementor-9754 .elementor-element.elementor-element-f75a1d0{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5EBEC;box-shadow:0px 15px 40px 0px rgba(24.000000000000018, 53.000000000000085, 79.00000000000004, 0.5);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-42px;margin-bottom:55px;padding:27px 35px 27px 35px;z-index:5;}.elementor-9754 .elementor-element.elementor-element-f75a1d0, .elementor-9754 .elementor-element.elementor-element-f75a1d0 > .elementor-background-overlay{border-radius:14px 14px 14px 14px;}.elementor-9754 .elementor-element.elementor-element-f75a1d0 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-9754 .elementor-element.elementor-element-2fc9c31.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-9754 .elementor-element.elementor-element-2fc9c31.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-9754 .elementor-element.elementor-element-2fc9c31 > .elementor-element-populated{border-style:solid;border-width:0px 1px 0px 0px;border-color:#E4E9EA;padding:10px 25px 10px 25px;}.elementor-9754 .elementor-element.elementor-element-2fc9c31 > .elementor-element-populated, .elementor-9754 .elementor-element.elementor-element-2fc9c31 > .elementor-element-populated > .elementor-background-overlay, .elementor-9754 .elementor-element.elementor-element-2fc9c31 > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-widget-counter .elementor-counter-number-wrapper{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-counter .elementor-counter-title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-9754 .elementor-element.elementor-element-eb0d301 .elementor-counter-number-wrapper{color:#18354F;font-family:"Sarabun", Sans-serif;font-size:38px;font-weight:700;line-height:1em;}.elementor-9754 .elementor-element.elementor-element-eb0d301 .elementor-counter-title{color:#687782;font-family:"Sarabun", Sans-serif;font-size:14px;font-weight:500;}.elementor-9754 .elementor-element.elementor-element-121c13a > .elementor-element-populated{border-style:solid;border-width:0px 1px 0px 0px;border-color:#E4E9EA;padding:10px 25px 10px 25px;}.elementor-9754 .elementor-element.elementor-element-2d3ffd1 .elementor-counter-number-wrapper{color:#18354F;font-family:"Sarabun", Sans-serif;font-size:38px;font-weight:700;line-height:1em;}.elementor-9754 .elementor-element.elementor-element-2d3ffd1 .elementor-counter-title{color:#687782;font-family:"Sarabun", Sans-serif;font-size:14px;font-weight:500;}.elementor-9754 .elementor-element.elementor-element-8c520d0 > .elementor-element-populated{padding:10px 25px 10px 25px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-9754 .elementor-element.elementor-element-f346438 .elementor-icon-wrapper{text-align:center;}.elementor-9754 .elementor-element.elementor-element-f346438.elementor-view-stacked .elementor-icon{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-f346438.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-f346438.elementor-view-default .elementor-icon{color:#287A78;border-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-f346438.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-f346438.elementor-view-default .elementor-icon svg{fill:#287A78;}.elementor-9754 .elementor-element.elementor-element-f346438 .elementor-icon{font-size:21px;}.elementor-9754 .elementor-element.elementor-element-f346438 .elementor-icon svg{height:21px;}.elementor-9754 .elementor-element.elementor-element-59d0c0f{text-align:center;}.elementor-9754 .elementor-element.elementor-element-59d0c0f .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:28px;font-weight:700;letter-spacing:1px;color:#287A78;}.elementor-9754 .elementor-element.elementor-element-29ca5e3{text-align:center;}.elementor-9754 .elementor-element.elementor-element-29ca5e3 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:14px;font-weight:500;color:#687782;}.elementor-9754 .elementor-element.elementor-element-d58be63 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-9754 .elementor-element.elementor-element-d58be63:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-d58be63 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F5EE;}.elementor-9754 .elementor-element.elementor-element-d58be63 > .elementor-container{max-width:1200px;}.elementor-9754 .elementor-element.elementor-element-d58be63{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:20px 25px 50px 25px;}.elementor-9754 .elementor-element.elementor-element-d58be63 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-3ba627d .elementor-column-gap-custom .elementor-column > .elementor-element-populated{padding:40px;}.elementor-bc-flex-widget .elementor-9754 .elementor-element.elementor-element-142d445.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-9754 .elementor-element.elementor-element-142d445.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-9754 .elementor-element.elementor-element-3a2628b .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:13px;font-weight:700;color:#287A78;}.elementor-9754 .elementor-element.elementor-element-a2d06a1 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:42px;font-weight:700;letter-spacing:-0.6px;color:#18354F;}.elementor-9754 .elementor-element.elementor-element-0e4f17f{margin:12px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;font-family:"Sarabun", Sans-serif;font-size:17px;font-weight:400;color:#59666E;}.elementor-bc-flex-widget .elementor-9754 .elementor-element.elementor-element-7d1a52e.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-9754 .elementor-element.elementor-element-7d1a52e.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-9754 .elementor-element.elementor-element-7a18b9b{background-color:#FFFFFFB3;padding:18px 22px 18px 22px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E3E8E6;border-radius:10px 10px 10px 10px;box-shadow:0px 8px 25px 0px rgba(24.000000000000018, 53.000000000000085, 79.00000000000004, 0.6);--icon-box-icon-margin:15px;}.elementor-9754 .elementor-element.elementor-element-7a18b9b.elementor-view-stacked .elementor-icon{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-7a18b9b.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-7a18b9b.elementor-view-default .elementor-icon{fill:#287A78;color:#287A78;border-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-7a18b9b .elementor-icon{font-size:25px;}.elementor-9754 .elementor-element.elementor-element-7a18b9b .elementor-icon-box-title, .elementor-9754 .elementor-element.elementor-element-7a18b9b .elementor-icon-box-title a{font-family:"Sarabun", Sans-serif;font-size:12px;font-weight:700;letter-spacing:1.4px;}.elementor-9754 .elementor-element.elementor-element-7a18b9b .elementor-icon-box-title{color:#18354F;}.elementor-9754 .elementor-element.elementor-element-7a18b9b .elementor-icon-box-description{font-family:"Sarabun", Sans-serif;font-size:14px;font-weight:400;color:#6F7B83;}.elementor-9754 .elementor-element.elementor-element-48f3a69 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-9754 .elementor-element.elementor-element-48f3a69 .elementor-column-gap-custom .elementor-column > .elementor-element-populated{padding:24px;}.elementor-9754 .elementor-element.elementor-element-48f3a69 > .elementor-container{min-height:370px;}.elementor-9754 .elementor-element.elementor-element-03f6a76:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-9754 .elementor-element.elementor-element-03f6a76 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-03f6a76 > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E1E8E6;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 27px 28px 27px;}.elementor-9754 .elementor-element.elementor-element-03f6a76 > .elementor-element-populated, .elementor-9754 .elementor-element.elementor-element-03f6a76 > .elementor-element-populated > .elementor-background-overlay, .elementor-9754 .elementor-element.elementor-element-03f6a76 > .elementor-background-slideshow{border-radius:14px 14px 14px 14px;}.elementor-9754 .elementor-element.elementor-element-03f6a76 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-6115323 .elementor-icon-wrapper{text-align:left;}.elementor-9754 .elementor-element.elementor-element-6115323.elementor-view-stacked .elementor-icon{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-6115323.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-6115323.elementor-view-default .elementor-icon{color:#287A78;border-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-6115323.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-6115323.elementor-view-default .elementor-icon svg{fill:#287A78;}.elementor-9754 .elementor-element.elementor-element-6115323 .elementor-icon{font-size:25px;}.elementor-9754 .elementor-element.elementor-element-6115323 .elementor-icon svg{height:25px;}.elementor-9754 .elementor-element.elementor-element-376e5d5 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:20px;font-weight:700;color:#18354F;}.elementor-9754 .elementor-element.elementor-element-5d8434b{font-family:"Sarabun", Sans-serif;font-size:14.5px;font-weight:400;color:#68747C;}.elementor-9754 .elementor-element.elementor-element-426ed2b .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:10px;font-weight:700;letter-spacing:1.4px;color:#287A78;}.elementor-9754 .elementor-element.elementor-element-6affdf5:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-9754 .elementor-element.elementor-element-6affdf5 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-6affdf5 > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E1E8E6;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 27px 28px 27px;}.elementor-9754 .elementor-element.elementor-element-6affdf5 > .elementor-element-populated, .elementor-9754 .elementor-element.elementor-element-6affdf5 > .elementor-element-populated > .elementor-background-overlay, .elementor-9754 .elementor-element.elementor-element-6affdf5 > .elementor-background-slideshow{border-radius:14px 14px 14px 14px;}.elementor-9754 .elementor-element.elementor-element-6affdf5 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-848459d .elementor-icon-wrapper{text-align:left;}.elementor-9754 .elementor-element.elementor-element-848459d.elementor-view-stacked .elementor-icon{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-848459d.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-848459d.elementor-view-default .elementor-icon{color:#287A78;border-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-848459d.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-848459d.elementor-view-default .elementor-icon svg{fill:#287A78;}.elementor-9754 .elementor-element.elementor-element-848459d .elementor-icon{font-size:25px;}.elementor-9754 .elementor-element.elementor-element-848459d .elementor-icon svg{height:25px;}.elementor-9754 .elementor-element.elementor-element-44821aa .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:20px;font-weight:700;color:#18354F;}.elementor-9754 .elementor-element.elementor-element-aca8783{font-family:"Sarabun", Sans-serif;font-size:14.5px;font-weight:400;color:#68747C;}.elementor-9754 .elementor-element.elementor-element-ee80b34 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:10px;font-weight:700;letter-spacing:1.4px;color:#287A78;}.elementor-9754 .elementor-element.elementor-element-18412fa:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-9754 .elementor-element.elementor-element-18412fa > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-18412fa > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E1E8E6;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 27px 28px 27px;}.elementor-9754 .elementor-element.elementor-element-18412fa > .elementor-element-populated, .elementor-9754 .elementor-element.elementor-element-18412fa > .elementor-element-populated > .elementor-background-overlay, .elementor-9754 .elementor-element.elementor-element-18412fa > .elementor-background-slideshow{border-radius:14px 14px 14px 14px;}.elementor-9754 .elementor-element.elementor-element-18412fa > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-4f3968f .elementor-icon-wrapper{text-align:left;}.elementor-9754 .elementor-element.elementor-element-4f3968f.elementor-view-stacked .elementor-icon{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-4f3968f.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-4f3968f.elementor-view-default .elementor-icon{color:#287A78;border-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-4f3968f.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-4f3968f.elementor-view-default .elementor-icon svg{fill:#287A78;}.elementor-9754 .elementor-element.elementor-element-4f3968f .elementor-icon{font-size:25px;}.elementor-9754 .elementor-element.elementor-element-4f3968f .elementor-icon svg{height:25px;}.elementor-9754 .elementor-element.elementor-element-06b1a89 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:20px;font-weight:700;color:#18354F;}.elementor-9754 .elementor-element.elementor-element-3b92c65{font-family:"Sarabun", Sans-serif;font-size:14.5px;font-weight:400;color:#68747C;}.elementor-9754 .elementor-element.elementor-element-6512440 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:10px;font-weight:700;letter-spacing:1.4px;color:#287A78;}.elementor-9754 .elementor-element.elementor-element-7217200:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-9754 .elementor-element.elementor-element-7217200 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-7217200 > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E1E8E6;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 27px 28px 27px;}.elementor-9754 .elementor-element.elementor-element-7217200 > .elementor-element-populated, .elementor-9754 .elementor-element.elementor-element-7217200 > .elementor-element-populated > .elementor-background-overlay, .elementor-9754 .elementor-element.elementor-element-7217200 > .elementor-background-slideshow{border-radius:14px 14px 14px 14px;}.elementor-9754 .elementor-element.elementor-element-7217200 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-2e75f5e .elementor-icon-wrapper{text-align:left;}.elementor-9754 .elementor-element.elementor-element-2e75f5e.elementor-view-stacked .elementor-icon{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-2e75f5e.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-2e75f5e.elementor-view-default .elementor-icon{color:#287A78;border-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-2e75f5e.elementor-view-framed .elementor-icon, .elementor-9754 .elementor-element.elementor-element-2e75f5e.elementor-view-default .elementor-icon svg{fill:#287A78;}.elementor-9754 .elementor-element.elementor-element-2e75f5e .elementor-icon{font-size:25px;}.elementor-9754 .elementor-element.elementor-element-2e75f5e .elementor-icon svg{height:25px;}.elementor-9754 .elementor-element.elementor-element-c202a02 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:20px;font-weight:700;color:#18354F;}.elementor-9754 .elementor-element.elementor-element-a0fe9f4{font-family:"Sarabun", Sans-serif;font-size:14.5px;font-weight:400;color:#68747C;}.elementor-9754 .elementor-element.elementor-element-88d4e68 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:10px;font-weight:700;letter-spacing:1.4px;color:#287A78;}.elementor-9754 .elementor-element.elementor-element-9599b57:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-9599b57 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EDEFE9;}.elementor-9754 .elementor-element.elementor-element-9599b57 > .elementor-container{max-width:1200px;min-height:400px;}.elementor-9754 .elementor-element.elementor-element-9599b57 .elementor-column-gap-custom .elementor-column > .elementor-element-populated{padding:30px;}.elementor-9754 .elementor-element.elementor-element-9599b57{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:20px 25px 0px 25px;}.elementor-9754 .elementor-element.elementor-element-9599b57 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-a6199c3{margin-top:0px;margin-bottom:20px;}.elementor-9754 .elementor-element.elementor-element-9629c73 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#287A78;}.elementor-9754 .elementor-element.elementor-element-ae770f7 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:40px;font-weight:700;letter-spacing:-0.5px;color:#18354F;}.elementor-9754 .elementor-element.elementor-element-8281ca6{font-family:"Sarabun", Sans-serif;font-size:17px;font-weight:400;line-height:1.7em;color:#5E6967;}.elementor-9754 .elementor-element.elementor-element-8281ca6 p{margin-block-end:0px;}.elementor-9754 .elementor-element.elementor-element-9c6b41e:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-9754 .elementor-element.elementor-element-9c6b41e > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#18354F;}.elementor-bc-flex-widget .elementor-9754 .elementor-element.elementor-element-9c6b41e.elementor-column .elementor-widget-wrap{align-items:space-between;}.elementor-9754 .elementor-element.elementor-element-9c6b41e.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:space-between;align-items:space-between;}.elementor-9754 .elementor-element.elementor-element-9c6b41e.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-9754 .elementor-element.elementor-element-9c6b41e > .elementor-element-populated, .elementor-9754 .elementor-element.elementor-element-9c6b41e > .elementor-element-populated > .elementor-background-overlay, .elementor-9754 .elementor-element.elementor-element-9c6b41e > .elementor-background-slideshow{border-radius:14px 14px 14px 14px;}.elementor-9754 .elementor-element.elementor-element-9c6b41e > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:22px 24px 22px 24px;}.elementor-9754 .elementor-element.elementor-element-9c6b41e > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-0d0bd38 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:34px;font-weight:700;color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-56a77ed .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:10px;font-weight:600;letter-spacing:1.4px;color:#FFFFFFAD;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-9754 .elementor-element.elementor-element-81bb813{--divider-border-style:solid;--divider-color:#FFFFFF33;--divider-border-width:2px;}.elementor-9754 .elementor-element.elementor-element-81bb813 .elementor-divider-separator{width:100%;}.elementor-9754 .elementor-element.elementor-element-81bb813 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9754 .elementor-element.elementor-element-bc5ba39 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:34px;font-weight:700;color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-38ecc1c .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:10px;font-weight:600;letter-spacing:1.4px;color:#FFFFFFAD;}.elementor-9754 .elementor-element.elementor-element-418b1c7{--swiper-slides-to-display:3;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.elementor-9754 .elementor-element.elementor-element-418b1c7 .swiper-slide > .elementor-element{height:100%;}.elementor-9754 .elementor-element.elementor-element-3ebe51b:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-3ebe51b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F0E9;}.elementor-9754 .elementor-element.elementor-element-3ebe51b > .elementor-container{max-width:1200px;min-height:0px;}.elementor-9754 .elementor-element.elementor-element-3ebe51b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:80px 25px 40px 25px;}.elementor-9754 .elementor-element.elementor-element-3ebe51b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-bf3346b:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-bf3346b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#17354E;}.elementor-9754 .elementor-element.elementor-element-bf3346b > .elementor-container{min-height:260px;}.elementor-9754 .elementor-element.elementor-element-bf3346b, .elementor-9754 .elementor-element.elementor-element-bf3346b > .elementor-background-overlay{border-radius:24px 24px 24px 24px;}.elementor-9754 .elementor-element.elementor-element-bf3346b{box-shadow:0px 20px 55px 0px rgba(0,0,0,0.5);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:50px 55px 50px 55px;}.elementor-9754 .elementor-element.elementor-element-bf3346b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-c89abc2 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;color:#D7B66B;}.elementor-9754 .elementor-element.elementor-element-da8c8d7 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:42px;font-weight:700;color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-1ed2f8f{font-family:"Sarabun", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFFB8;}.elementor-9754 .elementor-element.elementor-element-2e3c482:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-9754 .elementor-element.elementor-element-2e3c482 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF12;}.elementor-9754 .elementor-element.elementor-element-2e3c482 > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF24;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-9754 .elementor-element.elementor-element-2e3c482 > .elementor-element-populated, .elementor-9754 .elementor-element.elementor-element-2e3c482 > .elementor-element-populated > .elementor-background-overlay, .elementor-9754 .elementor-element.elementor-element-2e3c482 > .elementor-background-slideshow{border-radius:18px 18px 18px 18px;}.elementor-9754 .elementor-element.elementor-element-2e3c482 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-47c76ae .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:56px;font-weight:700;color:#FFFFFF;}.elementor-9754 .elementor-element.elementor-element-b9dcfa1 .elementor-heading-title{font-family:"Sarabun", Sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;color:#D7B66B;}.elementor-9754 .elementor-element.elementor-element-eb8ee1b{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;margin:50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-filter-normal-text-color:#59666D;--e-filter-hover-text-color:#18354F;--e-filter-active-text-color:#FFFFFF;--e-filter-item-border-radius:25px 25px 25px 25px;}.elementor-9754 .elementor-element.elementor-element-eb8ee1b .e-filter-item:not( [aria-pressed=true] ):not( :hover ){background-color:#F5F5F1;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E1E3DF;box-shadow:0px 15px 22px 0px rgba(0,0,0,0.5);}.elementor-9754 .elementor-element.elementor-element-eb8ee1b .e-filter-item:hover:not( [aria-pressed=true] ){background-color:#E9F4F2;}.elementor-9754 .elementor-element.elementor-element-eb8ee1b .e-filter-item[aria-pressed="true"]{background-color:#287A78;border-style:solid;border-width:1px 1px 1px 1px;border-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-eb8ee1b .e-filter-item{font-family:"Sarabun", Sans-serif;font-size:13px;font-weight:600;padding:10px 17px 10px 17px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-9754 .elementor-element.elementor-element-f7179f7{--grid-columns:3;--grid-row-gap:22px;--load-more-button-align:center;--grid-column-gap:22px;}.elementor-9754 .elementor-element.elementor-element-f7179f7 .elementor-button{background-color:#18354F;font-family:"Sarabun", Sans-serif;font-size:13px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:6px 6px 6px 6px;padding:13px 24px 13px 24px;}.elementor-9754 .elementor-element.elementor-element-f7179f7 .elementor-button:hover, .elementor-9754 .elementor-element.elementor-element-f7179f7 .elementor-button:focus{background-color:#287A78;}.elementor-9754 .elementor-element.elementor-element-f7179f7 > .elementor-widget-container{margin:35px 0px 58px 0px;}.elementor-9754 .elementor-element.elementor-element-4d2360e:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-4d2360e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#102C3C;}.elementor-9754 .elementor-element.elementor-element-4d2360e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-9754 .elementor-element.elementor-element-4d2360e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9754 .elementor-element.elementor-element-a048b8b:not(.elementor-motion-effects-element-type-background), .elementor-9754 .elementor-element.elementor-element-a048b8b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEEAE0;}.elementor-9754 .elementor-element.elementor-element-a048b8b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 0px 20px 0px;}.elementor-9754 .elementor-element.elementor-element-a048b8b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-9754 .elementor-element.elementor-element-84f3941{width:52%;}.elementor-9754 .elementor-element.elementor-element-c3913f0{width:48%;}.elementor-9754 .elementor-element.elementor-element-142d445{width:62%;}.elementor-9754 .elementor-element.elementor-element-7d1a52e{width:38%;}.elementor-9754 .elementor-element.elementor-element-1656526{width:100%;}.elementor-9754 .elementor-element.elementor-element-fb6e9a5{width:68%;}.elementor-9754 .elementor-element.elementor-element-9c6b41e{width:32%;}.elementor-9754 .elementor-element.elementor-element-e68ffcd{width:72%;}.elementor-9754 .elementor-element.elementor-element-2e3c482{width:28%;}}@media(max-width:1024px){.elementor-9754 .elementor-element.elementor-element-0067068{padding:50px 25px 50px 25px;}.elementor-9754 .elementor-element.elementor-element-48f3a69 .elementor-column-gap-custom .elementor-column > .elementor-element-populated{padding:20px;}.elementor-9754 .elementor-element.elementor-element-9599b57{padding:80px 25px 80px 25px;}.elementor-9754 .elementor-element.elementor-element-418b1c7{--swiper-slides-to-display:2;}.elementor-9754 .elementor-element.elementor-element-3ebe51b{padding:75px 22px 80px 22px;}.elementor-9754 .elementor-element.elementor-element-bf3346b{padding:40px 55px 40px 55px;}.elementor-9754 .elementor-element.elementor-element-f7179f7{--grid-columns:2;}}@media(max-width:767px){.elementor-9754 .elementor-element.elementor-element-0067068{padding:45px 20px 55px 20px;}.elementor-9754 .elementor-element.elementor-element-84f3941{width:100%;}.elementor-9754 .elementor-element.elementor-element-3b93d0b{width:100%;max-width:100%;}.elementor-9754 .elementor-element.elementor-element-959adb1{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9754 .elementor-element.elementor-element-959adb1 .elementor-button{font-size:15px;padding:15px 118px 15px 23px;}.elementor-9754 .elementor-element.elementor-element-2fc9c31 > .elementor-element-populated{border-width:0px 0px 1px 0px;}.elementor-9754 .elementor-element.elementor-element-121c13a > .elementor-element-populated{border-width:0px 0px 1px 0px;}.elementor-9754 .elementor-element.elementor-element-9599b57{padding:65px 18px 65px 18px;}.elementor-9754 .elementor-element.elementor-element-418b1c7{--swiper-slides-to-display:1;}.elementor-9754 .elementor-element.elementor-element-3ebe51b{padding:60px 16px 65px 16px;}.elementor-9754 .elementor-element.elementor-element-bf3346b{padding:30px 24px 30px 24px;}.elementor-9754 .elementor-element.elementor-element-f7179f7{--grid-columns:1;}}/* Start custom CSS for section, class: .elementor-element-f75a1d0 */.elementor-9754 .elementor-element.elementor-element-f75a1d0 { position: relative; overflow: hidden; } .elementor-9754 .elementor-element.elementor-element-f75a1d0::before { content: ""; position: absolute; top: 0; left: 50%; width: 90px; height: 3px; background: #C89B46; transform: translateX(-50%); border-radius: 0 0 6px 6px; } .elementor-9754 .elementor-element.elementor-element-f75a1d0 { position: relative; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; } .elementor-9754 .elementor-element.elementor-element-f75a1d0:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(24, 53, 79, 0.12); } .elementor-9754 .elementor-element.elementor-element-f75a1d0::after { content: ""; position: absolute; width: 150px; height: 150px; right: -90px; top: -90px; background: rgba(40, 122, 120, 0.06); border-radius: 50%; pointer-events: none; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-3a2628b */.elementor-9754 .elementor-element.elementor-element-3a2628b .elementor-heading-title{ display: flex; align-items: center; gap: 12px; } .elementor-9754 .elementor-element.elementor-element-3a2628b .elementor-heading-title::before{ content: ""; width: 34px; height: 2px; background: #C89B46; border-radius: 10px; }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-6115323 */.elementor-9754 .elementor-element.elementor-element-6115323{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #EAF4F2; border: 1px solid rgba(40,122,120,0.12); border-radius: 12px; } .elementor-9754 .elementor-element.elementor-element-6115323::after{ content:""; position:absolute; top:-31px; left:0; width:48px; height:3px; background:#C89B46; border-radius:0 0 10px 10px; }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-848459d */.elementor-9754 .elementor-element.elementor-element-848459d{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #EAF4F2; border: 1px solid rgba(40,122,120,0.12); border-radius: 12px; } .elementor-9754 .elementor-element.elementor-element-848459d::after{ content:""; position:absolute; top:-31px; left:0; width:48px; height:3px; background:#C89B46; border-radius:0 0 10px 10px; }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-4f3968f */.elementor-9754 .elementor-element.elementor-element-4f3968f{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #EAF4F2; border: 1px solid rgba(40,122,120,0.12); border-radius: 12px; } .elementor-9754 .elementor-element.elementor-element-4f3968f::after{ content:""; position:absolute; top:-31px; left:0; width:48px; height:3px; background:#C89B46; border-radius:0 0 10px 10px; }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-2e75f5e */.elementor-9754 .elementor-element.elementor-element-2e75f5e{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #EAF4F2; border: 1px solid rgba(40,122,120,0.12); border-radius: 12px; } .elementor-9754 .elementor-element.elementor-element-2e75f5e::after{ content:""; position:absolute; top:-31px; left:0; width:48px; height:3px; background:#C89B46; border-radius:0 0 10px 10px; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-48f3a69 *//* ============================ UOC DIGITAL LEARNING PATH ============================ */ .elementor-9754 .elementor-element.elementor-element-48f3a69{ position: relative; overflow: visible; padding-top: 45px; padding-bottom: 45px; } /* Main dotted journey line */ .elementor-9754 .elementor-element.elementor-element-48f3a69::before{ content: ""; position: absolute; left: 9%; right: 9%; top: 50%; height: 2px; background-image: linear-gradient( to right, #A8C9C5 45%, transparent 45% ); background-size: 12px 2px; background-repeat: repeat-x; z-index: 0; } /* Make columns appear above line */ .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step{ position: relative; z-index: 2; background: #FFFFFF; border: 1px solid #E1E8E6; border-radius: 14px; box-shadow: 0 12px 32px rgba(24,53,79,0.07); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* Alternating card positions */ .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-one, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-three{ transform: translateY(-32px); } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-two, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-four{ transform: translateY(32px); } /* Hover */ .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step:hover{ border-color: #287A78; box-shadow: 0 20px 45px rgba(24,53,79,0.12); } /* Preserve stagger + hover */ .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-one:hover, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-three:hover{ transform: translateY(-38px); } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-two:hover, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-four:hover{ transform: translateY(26px); } /* Pathway nodes */ .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step::before{ content: ""; position: absolute; width: 16px; height: 16px; background: #F8F5EE; border: 4px solid #287A78; border-radius: 50%; left: 50%; transform: translateX(-50%); box-shadow: 0 0 0 6px rgba(40,122,120,0.09); } /* Top cards node */ .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-one::before, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-three::before{ bottom: -42px; } /* Bottom cards node */ .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-two::before, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-four::before{ top: -42px; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step::after{ position: absolute; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #287A78; background: #F8F5EE; padding: 3px 7px; border-radius: 20px; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-one::after{ content: "01"; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-two::after{ content: "02"; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-three::after{ content: "03"; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-four::after{ content: "04"; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-one::after, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-three::after{ bottom: -73px; left: 50%; transform: translateX(-50%); } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-two::after, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-four::after{ top: -73px; left: 50%; transform: translateX(-50%); } .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step{ overflow: hidden; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step::marker{ display:none; } @media (max-width: 1024px){ .elementor-9754 .elementor-element.elementor-element-48f3a69::before{ display:none; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-signal{ display:none; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-one, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-two, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-three, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-four{ transform:none; } .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-one:hover, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-two:hover, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-three:hover, .elementor-9754 .elementor-element.elementor-element-48f3a69 .step-four:hover{ transform:translateY(-5px); } .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step::before, .elementor-9754 .elementor-element.elementor-element-48f3a69 .uoc-path-step::after{ display:none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-892979a */.elementor-9754 .elementor-element.elementor-element-892979a .uoc-path-signal{ position: absolute; top: calc(50% - 4px); left: 9%; width: 8px; height: 8px; border-radius: 50%; background: #287A78; box-shadow: 0 0 0 5px rgba(40,122,120,.12), 0 0 18px rgba(40,122,120,.45); z-index: 1; animation: uocSignalTravel 7s ease-in-out infinite; } @keyframes uocSignalTravel{ 0%{ left: 9%; opacity: 0; } 8%{ opacity: 1; } 48%{ opacity: 1; } 92%{ opacity: 1; } 100%{ left: 90%; opacity: 0; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-d58be63 */.elementor-9754 .elementor-element.elementor-element-d58be63{ position: relative; overflow: hidden; isolation: isolate; } .elementor-9754 .elementor-element.elementor-element-d58be63::before{ content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient( circle, rgba(40,122,120,0.10) 1px, transparent 1px ); background-size: 28px 28px; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 18%, black 82%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 18%, black 82%, transparent 100% ); } .elementor-9754 .elementor-element.elementor-element-d58be63::after{ content:""; position:absolute; width:320px; height:320px; right:-150px; top:-150px; border:1px solid rgba(40,122,120,.10); border-radius:50%; box-shadow: 0 0 0 45px rgba(40,122,120,.025), 0 0 0 90px rgba(40,122,120,.02); z-index:-1; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-47c76ae */.elementor-9754 .elementor-element.elementor-element-47c76ae{ position: relative; overflow: hidden; backdrop-filter: blur(10px); } .elementor-9754 .elementor-element.elementor-element-47c76ae::before{ content: ""; position: absolute; width: 70px; height: 70px; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; top: -28px; right: -22px; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-bf3346b */.elementor-9754 .elementor-element.elementor-element-bf3346b{ position: relative; overflow: hidden; } .elementor-9754 .elementor-element.elementor-element-bf3346b::after{ content: "UOC / DIRECTORY / 2026"; position: absolute; right: -28px; bottom: 35px; transform: rotate(-90deg); transform-origin: center; font-size: 9px; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,.18); }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-3ebe51b */.elementor-9754 .elementor-element.elementor-element-3ebe51b{ position: relative; overflow: hidden; background-color: #F2F0E9; background-image: linear-gradient(rgba(24,53,79,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(24,53,79,0.035) 1px, transparent 1px); background-size: 42px 42px; } .elementor-9754 .elementor-element.elementor-element-3ebe51b::before{ content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(40,122,120,0.06); top: -220px; right: -120px; pointer-events: none; } .elementor-9754 .elementor-element.elementor-element-3ebe51b::after{ content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(200,155,70,0.055); bottom: -180px; left: -100px; pointer-events: none; } @keyframes uocGridMove{ 0%{ background-position: 0 0, 0 0; } 100%{ background-position: 42px 42px, 42px 42px; } } .elementor-9754 .elementor-element.elementor-element-3ebe51b{ animation: uocGridMove 25s linear infinite; } @media (prefers-reduced-motion: reduce){ .elementor-9754 .elementor-element.elementor-element-3ebe51b{ animation: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-ae94bb6 *//* ========================================================== UK TRAINER UOC - SECTION 6 PREMIUM ONLINE LEARNING JOURNEY ========================================================== */ /* ---------- SECTION BACKGROUND ---------- */ .uoc-journey-section { position: relative; overflow: hidden; background: radial-gradient( circle at 8% 15%, rgba(46, 125, 121, 0.17), transparent 28% ), radial-gradient( circle at 92% 82%, rgba(211, 179, 106, 0.10), transparent 30% ), #102C3C; } /* subtle architectural grid */ .uoc-journey-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(255,255,255,0.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.025) 1px, transparent 1px ); background-size: 52px 52px; } /* ---------- MAIN WRAPPER ---------- */ .uoc-journey-wrap { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 100px 25px 105px; } /* ========================================================== HEADER ========================================================== */ .uoc-journey-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 50px; margin-bottom: 65px; } /* kicker */ .uoc-journey-kicker { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; color: #D3B36A; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .uoc-journey-kicker span { width: 35px; height: 1px; background: #D3B36A; } /* heading */ .uoc-journey-heading h2 { max-width: 720px; margin: 0; color: #FFFFFF; font-size: 44px; font-weight: 700; line-height: 1.12; letter-spacing: -0.8px; } .uoc-journey-heading h2 span { display: block; margin-top: 3px; color: #BFDAD5; } /* description */ .uoc-journey-heading > p { max-width: 690px; margin: 20px 0 0; color: rgba(255,255,255,0.69); font-size: 16px; line-height: 1.75; } /* ---------- STATUS CARD ---------- */ .uoc-journey-status { display: flex; align-items: center; gap: 14px; min-width: 255px; padding: 17px 20px; border: 1px solid rgba(255,255,255,0.13); border-radius: 14px; background: rgba(255,255,255,0.055); box-shadow: 0 15px 40px rgba(0,0,0,0.10); backdrop-filter: blur(8px); } .uoc-live-dot { position: relative; width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: #65C4B8; box-shadow: 0 0 0 5px rgba(101,196,184,0.12); } .uoc-journey-status strong { display: block; margin-bottom: 3px; color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; } .uoc-journey-status small { display: block; color: rgba(255,255,255,0.55); font-size: 11px; line-height: 1.4; } /* ========================================================== TIMELINE ========================================================== */ .uoc-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; } /* Connecting track */ .uoc-steps::before { content: ""; position: absolute; top: 29px; left: 12.5%; right: 12.5%; height: 2px; z-index: 0; background: linear-gradient( 90deg, #D3B36A, #65BFB5, #D3B36A, #65BFB5, #D3B36A ); background-size: 220% 100%; animation: uocJourneyFlow 8s linear infinite; opacity: 0.65; } @keyframes uocJourneyFlow { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } /* ---------- INDIVIDUAL STEP ---------- */ .uoc-step { position: relative; z-index: 2; min-width: 0; } /* numbered node */ .uoc-node { position: relative; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 0 auto 24px; border: 1px solid rgba(211,179,106,0.75); border-radius: 50%; background: #102C3C; box-shadow: 0 0 0 7px rgba(16,44,60,0.95); } .uoc-node::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(101,191,181,0.25); border-radius: 50%; } .uoc-node span { position: relative; z-index: 2; color: #E1C378; font-size: 13px; font-weight: 700; letter-spacing: 0.8px; } /* ========================================================== STEP CARD ========================================================== */ .uoc-step-card { position: relative; display: flex; flex-direction: column; min-height: 305px; padding: 27px 24px 23px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); border-radius: 17px; background: #F8F5EE; box-shadow: 0 22px 48px rgba(0,0,0,0.16); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* small top accent */ .uoc-step-card::before { content: ""; position: absolute; top: 0; left: 24px; width: 48px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient( 90deg, #287A78, #D3B36A ); } .uoc-step-card:hover { transform: translateY(-8px); border-color: rgba(211,179,106,0.45); box-shadow: 0 30px 60px rgba(0,0,0,0.22); } /* ---------- ICON ---------- */ .uoc-step-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: 12px; background: #E5F1EF; transition: transform 0.35s ease, background-color 0.35s ease; } .uoc-step-icon svg { width: 23px; height: 23px; fill: none; stroke: #287A78; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .uoc-step-card:hover .uoc-step-icon { transform: translateY(-3px) rotate(-2deg); background: #DCEDEA; } /* step label */ .uoc-step-label { margin-bottom: 9px; color: #9A7936; font-size: 10px; font-weight: 700; letter-spacing: 1.25px; } /* title */ .uoc-step-card h3 { margin: 0 0 12px; color: #17354E; font-size: 20px; font-weight: 700; line-height: 1.3; } /* description */ .uoc-step-card > p { margin: 0; color: #5E696F; font-size: 14px; line-height: 1.7; } /* footer */ .uoc-step-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 18px; border-top: 1px solid #E3E1DA; color: #667178; font-size: 11px; font-weight: 600; } .uoc-arrow { color: #287A78; font-size: 18px; transition: transform 0.3s ease; } .uoc-step-card:hover .uoc-arrow { transform: translateX(5px); } /* ========================================================== HELP / GUIDANCE BAR ========================================================== */ .uoc-journey-help { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; margin-top: 42px; padding: 20px 22px; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.055); backdrop-filter: blur(8px); } .uoc-help-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(211,179,106,0.15); color: #E0C278; font-size: 16px; font-weight: 700; } .uoc-help-copy strong { display: block; margin-bottom: 3px; color: #FFFFFF; font-size: 14px; font-weight: 600; } .uoc-help-copy span { display: block; color: rgba(255,255,255,0.57); font-size: 12px; line-height: 1.5; } /* button */ .uoc-help-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 43px; padding: 11px 18px; border: 1px solid rgba(255,255,255,0.18); border-radius: 7px; background: #D3B36A; color: #102C3C !important; text-decoration: none !important; font-size: 12px; font-weight: 700; transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .uoc-help-button span { font-size: 17px; transition: transform 0.3s ease; } .uoc-help-button:hover { transform: translateY(-2px); background: #E0C57E; box-shadow: 0 10px 25px rgba(0,0,0,0.18); } .uoc-help-button:hover span { transform: translateX(4px); } /* ========================================================== SMALL PREMIUM ANIMATIONS ========================================================== */ @keyframes uocStatusPulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(101,196,184,0.12); } 50% { box-shadow: 0 0 0 10px rgba(101,196,184,0.02); } } .uoc-live-dot { animation: uocStatusPulse 2.8s ease-in-out infinite; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { .uoc-journey-wrap { padding: 80px 24px 85px; } .uoc-journey-header { grid-template-columns: 1fr; gap: 28px; margin-bottom: 50px; } .uoc-journey-heading h2 { max-width: 680px; font-size: 38px; } .uoc-journey-status { width: fit-content; min-width: 240px; } .uoc-steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 24px; } /* hide horizontal line on tablet */ .uoc-steps::before { display: none; } .uoc-step-card { min-height: 280px; } .uoc-journey-help { grid-template-columns: auto 1fr; } .uoc-help-button { grid-column: 1 / -1; width: 100%; margin-top: 4px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .uoc-journey-wrap { padding: 65px 17px 70px; } .uoc-journey-header { gap: 24px; margin-bottom: 42px; } .uoc-journey-kicker { font-size: 10px; letter-spacing: 1.6px; } .uoc-journey-heading h2 { font-size: 30px; line-height: 1.16; letter-spacing: -0.4px; } .uoc-journey-heading > p { margin-top: 16px; font-size: 14px; line-height: 1.7; } .uoc-journey-status { width: 100%; min-width: 0; padding: 15px 17px; } /* Vertical timeline */ .uoc-steps { display: grid; grid-template-columns: 1fr; gap: 22px; } .uoc-steps::before { display: block; top: 29px; bottom: 29px; left: 28px; right: auto; width: 1px; height: auto; background: linear-gradient( to bottom, #D3B36A, #65BFB5, #D3B36A, #65BFB5 ); animation: none; opacity: 0.55; } .uoc-step { display: grid; grid-template-columns: 57px minmax(0,1fr); align-items: start; gap: 13px; } .uoc-node { grid-column: 1; width: 56px; height: 56px; margin: 0; box-shadow: 0 0 0 5px rgba(16,44,60,0.96); } .uoc-step-card { grid-column: 2; min-height: 0; padding: 23px 20px 20px; border-radius: 14px; } .uoc-step-card h3 { font-size: 18px; } .uoc-step-card > p { font-size: 13px; } .uoc-step-icon { width: 42px; height: 42px; margin-bottom: 16px; } .uoc-step-icon svg { width: 21px; height: 21px; } .uoc-step-footer { margin-top: 20px; } .uoc-journey-help { grid-template-columns: auto 1fr; gap: 13px; margin-top: 35px; padding: 17px; } .uoc-help-icon { width: 38px; height: 38px; } .uoc-help-copy strong { font-size: 13px; } .uoc-help-copy span { font-size: 11px; } .uoc-help-button { grid-column: 1 / -1; width: 100%; margin-top: 5px; } } /* ========================================================== ACCESSIBILITY - REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .uoc-steps::before, .uoc-live-dot { animation: none !important; } .uoc-step-card, .uoc-step-icon, .uoc-arrow, .uoc-help-button { transition: none !important; } } /* Scroll reveal enhancement */ .uoc-journey-section.uoc-js .uoc-step, .uoc-journey-section.uoc-js .uoc-journey-status, .uoc-journey-section.uoc-js .uoc-journey-help { opacity: 0; transform: translateY(22px); } .uoc-journey-section.uoc-js .uoc-visible { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease var(--uoc-delay, 0ms), transform 0.7s ease var(--uoc-delay, 0ms); } /* Don't animate users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .uoc-journey-section.uoc-js .uoc-step, .uoc-journey-section.uoc-js .uoc-journey-status, .uoc-journey-section.uoc-js .uoc-journey-help { opacity: 1; transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-3a8a7f9 *//* ========================================================= UK TRAINER UOC FINAL PREMIUM CTA ========================================================= */ /* ================================ OUTER SECTION ================================ */ .uoc-final-cta-section { position: relative; overflow: hidden; background: linear-gradient( 180deg, #EEEAE0 0%, #F5F2EA 100% ); } /* main page width */ .uoc-final-wrap { width: 100%; max-width: 1250px; margin: 0 auto; padding: 95px 25px; } /* ================================ MAIN CTA PANEL ================================ */ .uoc-final-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); align-items: center; gap: 60px; min-height: 540px; padding: 70px 68px; overflow: hidden; border-radius: 28px; background: linear-gradient( 135deg, #102C3C 0%, #17394B 54%, #123444 100% ); box-shadow: 0 35px 80px rgba(20,43,55,0.20); } /* ================================ DIGITAL GRID ================================ */ .uoc-final-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.42; background-image: linear-gradient( rgba(255,255,255,0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.035) 1px, transparent 1px ); background-size: 48px 48px; animation: uocFinalGrid 28s linear infinite; } @keyframes uocFinalGrid { from { background-position: 0 0, 0 0; } to { background-position: 48px 48px, 48px 48px; } } /* ================================ BACKGROUND GLOWS ================================ */ .uoc-final-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(3px); } .uoc-final-glow-one { width: 450px; height: 450px; top: -260px; left: -170px; background: radial-gradient( circle, rgba(50,145,138,0.24), transparent 67% ); } .uoc-final-glow-two { width: 470px; height: 470px; bottom: -280px; right: -150px; background: radial-gradient( circle, rgba(211,179,106,0.17), transparent 68% ); } /* ================================ LEFT CONTENT ================================ */ .uoc-final-content { position: relative; z-index: 5; } /* eyebrow */ .uoc-final-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #D7B96F; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .uoc-final-eyebrow-line { width: 36px; height: 1px; background: #D7B96F; } /* ================================ MAIN HEADING ================================ */ .uoc-final-content h2 { max-width: 650px; margin: 0 0 22px; color: #FFFFFF; font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; } .uoc-final-content h2 span { display: block; margin-top: 4px; color: #B8DAD5; } /* description */ .uoc-final-description { max-width: 600px; margin: 0 0 32px; color: rgba(255,255,255,0.70); font-size: 16px; line-height: 1.75; } /* ================================ BUTTONS ================================ */ .uoc-final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; } .uoc-final-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 21px; border-radius: 7px; text-decoration: none !important; font-size: 13px; font-weight: 700; transition: transform .30s ease, background-color .30s ease, border-color .30s ease, box-shadow .30s ease; } /* Primary */ .uoc-final-btn-primary { background: #D5B56C; color: #102C3C !important; border: 1px solid #D5B56C; } .uoc-final-btn-primary:hover { transform: translateY(-3px); background: #E1C67E; border-color: #E1C67E; box-shadow: 0 14px 30px rgba(0,0,0,.18); } /* secondary */ .uoc-final-btn-secondary { color: #FFFFFF !important; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.22); } .uoc-final-btn-secondary:hover { transform: translateY(-3px); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.40); } /* arrow */ .uoc-btn-arrow { font-size: 18px; transition: transform .30s ease; } .uoc-final-btn:hover .uoc-btn-arrow { transform: translateX(5px); } /* ================================ TRUST ROW ================================ */ .uoc-final-trust { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; max-width: 620px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.11); } .uoc-trust-item { display: flex; align-items: center; gap: 10px; } .uoc-check { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: rgba(90,188,177,.12); border: 1px solid rgba(90,188,177,.23); color: #73C9BF; font-size: 12px; font-weight: 700; } .uoc-trust-item strong { display: block; margin-bottom: 1px; color: #FFFFFF; font-size: 12px; font-weight: 600; } .uoc-trust-item small { display: block; color: rgba(255,255,255,.45); font-size: 9px; line-height: 1.4; } /* ========================================================= RIGHT VISUAL AREA ========================================================= */ .uoc-final-visual { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; min-height: 390px; } /* ================================ MAIN DIGITAL PORTAL ================================ */ .uoc-portal { position: relative; width: 100%; max-width: 385px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.075); box-shadow: 0 30px 70px rgba(0,0,0,.27); backdrop-filter: blur(12px); animation: uocPortalFloat 6s ease-in-out infinite; } @keyframes uocPortalFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* portal top */ .uoc-portal-top { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(5,26,36,.22); } .uoc-browser-dots { display: flex; gap: 5px; } .uoc-browser-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.34); } .uoc-portal-top small { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; } /* portal body */ .uoc-portal-body { padding: 28px 28px 24px; text-align: center; } /* live badge */ .uoc-live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; margin-bottom: 26px; border-radius: 30px; background: rgba(78,176,166,.10); border: 1px solid rgba(78,176,166,.20); color: #9EDBD4; font-size: 8px; font-weight: 700; letter-spacing: 1px; } .uoc-live-badge span { width: 6px; height: 6px; border-radius: 50%; background: #6DD0C5; box-shadow: 0 0 0 4px rgba(109,208,197,.10); animation: uocLivePulse 2.4s ease-in-out infinite; } @keyframes uocLivePulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(109,208,197,.10); } 50% { box-shadow: 0 0 0 9px rgba(109,208,197,.015); } } /* ================================ CENTRAL UOC ORBIT ================================ */ .uoc-portal-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; margin: 0 auto 24px; } /* rings */ .uoc-portal-ring { position: absolute; border-radius: 50%; } .ring-one { inset: 4px; border: 1px solid rgba(111,202,192,.24); animation: uocRingRotate 18s linear infinite; } .ring-one::after { content: ""; position: absolute; width: 8px; height: 8px; top: 20px; left: 20px; border-radius: 50%; background: #71C8BE; box-shadow: 0 0 16px rgba(113,200,190,.75); } .ring-two { inset: 22px; border: 1px dashed rgba(215,185,111,.30); animation: uocRingRotateReverse 15s linear infinite; } .ring-two::after { content: ""; position: absolute; width: 6px; height: 6px; right: 7px; bottom: 31px; border-radius: 50%; background: #D7B96F; } @keyframes uocRingRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes uocRingRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0); } } /* center */ .uoc-portal-center { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 106px; height: 106px; border-radius: 50%; background: linear-gradient( 145deg, rgba(255,255,255,.13), rgba(255,255,255,.045) ); border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 0 25px rgba(255,255,255,.04); } .uoc-portal-center strong { color: #FFFFFF; font-size: 29px; font-weight: 700; letter-spacing: 1px; } .uoc-portal-center small { color: #D7B96F; font-size: 7px; font-weight: 700; letter-spacing: 1px; } /* ================================ PORTAL STATS ================================ */ .uoc-portal-stats { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 17px 5px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); } .uoc-portal-stats strong { display: block; margin-bottom: 3px; color: #FFFFFF; font-size: 22px; line-height: 1; } .uoc-portal-stats span { color: rgba(255,255,255,.43); font-size: 7px; font-weight: 700; letter-spacing: 1px; } .uoc-stat-divider { width: 1px; height: 30px; background: rgba(255,255,255,.11); } /* portal bottom */ .uoc-portal-footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; color: rgba(255,255,255,.55); font-size: 8px; font-weight: 700; letter-spacing: 1.2px; } .uoc-ready-dot { width: 6px; height: 6px; border-radius: 50%; background: #D7B96F; } /* ========================================================= FLOATING INFORMATION CARDS ========================================================= */ .uoc-float-card { position: absolute; z-index: 10; display: flex; align-items: center; gap: 10px; min-width: 138px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: rgba(10,37,49,.88); box-shadow: 0 15px 35px rgba(0,0,0,.24); backdrop-filter: blur(12px); } .uoc-float-card small { display: block; margin-bottom: 1px; color: rgba(255,255,255,.42); font-size: 7px; font-weight: 700; letter-spacing: .8px; } .uoc-float-card strong { display: block; color: #FFFFFF; font-size: 10px; font-weight: 600; } /* floating positions */ .uoc-float-card-one { top: 28px; left: -24px; animation: uocFloatOne 5.2s ease-in-out infinite; } .uoc-float-card-two { top: 95px; right: -29px; animation: uocFloatTwo 5.8s ease-in-out infinite; } .uoc-float-card-three { bottom: 31px; left: -33px; animation: uocFloatThree 6.1s ease-in-out infinite; } /* icons */ .uoc-float-icon { color: #70CCC1; font-size: 12px; } .uoc-float-number { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 8px; background: rgba(215,185,111,.13); color: #D7B96F; font-size: 13px; font-weight: 700; } .uoc-globe-icon { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(111,204,193,.11); color: #78D0C6; font-size: 17px; } /* movement */ @keyframes uocFloatOne { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes uocFloatTwo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes uocFloatThree { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .uoc-final-wrap { padding: 75px 22px; } .uoc-final-panel { grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: 38px; min-height: 500px; padding: 55px 45px; border-radius: 24px; } .uoc-final-content h2 { font-size: 40px; } .uoc-final-description { font-size: 15px; } .uoc-final-trust { grid-template-columns: 1fr; gap: 11px; max-width: 300px; } .uoc-portal { max-width: 325px; } .uoc-portal-mark { width: 155px; height: 155px; } .uoc-portal-center { width: 94px; height: 94px; } .uoc-float-card { min-width: 125px; } .uoc-float-card-one { left: -15px; } .uoc-float-card-two { right: -18px; } .uoc-float-card-three { left: -15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .uoc-final-wrap { padding: 60px 15px; } .uoc-final-panel { display: flex; flex-direction: column; gap: 46px; min-height: 0; padding: 42px 23px 45px; border-radius: 20px; } .uoc-final-content { width: 100%; } .uoc-final-eyebrow { font-size: 9px; letter-spacing: 1.5px; } .uoc-final-eyebrow-line { width: 27px; } .uoc-final-content h2 { margin-bottom: 17px; font-size: 32px; line-height: 1.15; letter-spacing: -.5px; } .uoc-final-description { margin-bottom: 25px; font-size: 14px; line-height: 1.7; } /* buttons */ .uoc-final-actions { flex-direction: column; margin-bottom: 30px; } .uoc-final-btn { width: 100%; min-height: 49px; } /* trust */ .uoc-final-trust { grid-template-columns: 1fr; gap: 12px; max-width: 100%; padding-top: 22px; } /* visual */ .uoc-final-visual { width: 100%; min-height: 370px; } .uoc-portal { max-width: 285px; } .uoc-portal-body { padding: 24px 21px 21px; } .uoc-portal-mark { width: 145px; height: 145px; } .uoc-portal-center { width: 88px; height: 88px; } .uoc-portal-center strong { font-size: 25px; } /* floating cards smaller */ .uoc-float-card { min-width: 113px; padding: 9px 10px; } .uoc-float-card strong { font-size: 9px; } .uoc-float-card small { font-size: 6px; } .uoc-float-card-one { top: 25px; left: -2px; } .uoc-float-card-two { top: 105px; right: -2px; } .uoc-float-card-three { bottom: 22px; left: 2px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .uoc-final-panel { padding: 38px 18px 40px; } .uoc-final-content h2 { font-size: 29px; } .uoc-final-visual { min-height: 345px; } .uoc-portal { max-width: 255px; } .uoc-float-card { transform: scale(.92); } } /* ========================================================= ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .uoc-final-grid, .uoc-portal, .uoc-live-badge span, .ring-one, .ring-two, .uoc-float-card { animation: none !important; } .uoc-final-btn, .uoc-btn-arrow { transition: none !important; } }/* End custom CSS */ /* Start custom CSS *//* ========================================================= UK TRAINER UOC — HERO ========================================================= */ /* ---------- MAIN HERO ---------- */ .uoc-hero { position: relative; overflow: hidden; background: #F8F5EE; isolation: isolate; } /* Large subtle circle */ .uoc-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -230px; top: -250px; border: 1px solid rgba(40, 122, 120, 0.13); border-radius: 50%; z-index: 0; } /* Soft dotted pattern */ .uoc-hero::after { content: ""; position: absolute; width: 180px; height: 180px; left: 47%; bottom: -65px; background-image: radial-gradient( circle, rgba(40, 122, 120, 0.20) 1.2px, transparent 1.2px ); background-size: 18px 18px; opacity: 0.75; z-index: 0; pointer-events: none; } /* Keep actual content above decorations */ .uoc-hero > .elementor-container, .uoc-hero > .e-con-inner { position: relative; z-index: 2; } /* ========================================================= EYEBROW ========================================================= */ .uoc-eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 11px; } .uoc-eyebrow .elementor-heading-title::before { content: ""; display: inline-block; width: 34px; height: 2px; background: #287A78; } /* ========================================================= HERO TITLE ========================================================= */ .uoc-hero-title { margin: 0; max-width: 650px; color: #18354F; font-family: inherit; font-size: 54px; font-weight: 700; line-height: 1.08; letter-spacing: -1.4px; } .uoc-hero-title span { color: #287A78; } /* ========================================================= DESCRIPTION ========================================================= */ .uoc-hero-desc { max-width: 530px; } .uoc-hero-desc p { margin-bottom: 0; } /* ========================================================= BUTTONS ========================================================= */ .uoc-btn-primary .elementor-button, .uoc-btn-secondary .elementor-button { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .uoc-btn-primary .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(24, 53, 79, 0.16); } .uoc-btn-primary .elementor-button-icon { transition: transform 0.3s ease; } .uoc-btn-primary .elementor-button:hover .elementor-button-icon { transform: translateX(4px); } .uoc-btn-secondary .elementor-button:hover { transform: translateY(-2px); } /* ========================================================= TRUST ROW ========================================================= */ .uoc-trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; color: #53616D; font-size: 13px; font-weight: 500; } .uoc-trust-item { display: flex; align-items: center; gap: 7px; } .uoc-trust-icon { display: inline-flex; justify-content: center; align-items: center; color: #287A78; font-size: 13px; font-weight: 700; } /* ========================================================= RIGHT-SIDE CLASSROOM ========================================================= */ .uoc-classroom { position: relative; width: 100%; max-width: 560px; margin-left: auto; padding: 28px 24px 35px 24px; } /* Decorative background disc */ .uoc-classroom::before { content: ""; position: absolute; width: 390px; height: 390px; right: -18px; top: 20px; border-radius: 50%; background: linear-gradient( 145deg, rgba(40,122,120,0.10), rgba(200,155,70,0.06) ); z-index: -1; } /* ========================================================= BROWSER WINDOW ========================================================= */ .uoc-window { position: relative; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(24, 53, 79, 0.10); border-radius: 22px; box-shadow: 0 25px 60px rgba(24, 53, 79, 0.16); z-index: 2; } /* Browser top bar */ .uoc-window-bar { height: 48px; display: flex; align-items: center; padding: 0 17px; border-bottom: 1px solid #E9EEEF; background: rgba(255,255,255,0.98); } /* Browser dots */ .uoc-window-dots { display: flex; gap: 5px; flex: 0 0 auto; } .uoc-window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #C8D0D2; } .uoc-window-dots span:nth-child(2) { opacity: 0.70; } .uoc-window-dots span:nth-child(3) { opacity: 0.45; } /* Browser title */ .uoc-window-name { flex: 1; padding-left: 13px; color: #63717A; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; } .uoc-window-name span { color: #C89B46; } /* LIVE */ .uoc-window-live { display: flex; align-items: center; gap: 5px; color: #287A78; font-size: 9px; font-weight: 700; letter-spacing: 0.8px; } .uoc-window-live span { width: 6px; height: 6px; border-radius: 50%; background: #287A78; box-shadow: 0 0 0 4px rgba(40,122,120,0.10); } /* ========================================================= CLASSROOM IMAGE ========================================================= */ .uoc-window-media { position: relative; height: 385px; overflow: hidden; } .uoc-window-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.8,.2,1); } .uoc-window:hover .uoc-window-media img { transform: scale(1.025); } /* Small LIVE overlay on image */ .uoc-media-label { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; color: #FFFFFF; background: rgba(24,53,79,0.88); backdrop-filter: blur(8px); border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; } .uoc-media-label span { width: 6px; height: 6px; border-radius: 50%; background: #61D5B8; } /* ========================================================= WINDOW FOOTER ========================================================= */ .uoc-window-footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 17px; color: #68757C; background: #FFFFFF; font-size: 10px; font-weight: 500; } .uoc-window-footer > div { display: flex; align-items: center; gap: 6px; } .uoc-footer-dot { width: 6px; height: 6px; border-radius: 50%; background: #287A78; } /* ========================================================= FLOATING CARDS ========================================================= */ .uoc-floating-card { position: absolute; z-index: 5; background: rgba(255,255,255,0.97); border: 1px solid #E3E8E8; border-radius: 10px; box-shadow: 0 10px 30px rgba(24,53,79,0.10); backdrop-filter: blur(10px); } /* LIVE card */ .uoc-card-live { top: 2px; left: -12px; min-width: 158px; padding: 12px 15px; animation: uocFloatA 5.5s ease-in-out infinite; } .uoc-card-status { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: #287A78; font-size: 9px; font-weight: 700; letter-spacing: 1px; } .uoc-card-status span { width: 6px; height: 6px; border-radius: 50%; background: #287A78; } .uoc-card-live strong { color: #18354F; font-size: 12px; font-weight: 600; } /* PROGRAMME card */ .uoc-card-programmes { right: -31px; top: 125px; min-width: 120px; padding: 14px 17px; animation: uocFloatB 6.5s ease-in-out infinite; } .uoc-card-programmes strong { display: block; margin-bottom: 1px; color: #18354F; font-size: 27px; font-weight: 700; line-height: 1; } .uoc-card-programmes span { color: #66747C; font-size: 10px; font-weight: 500; } /* ANYWHERE card */ .uoc-card-anywhere { left: -15px; bottom: 5px; display: flex; align-items: center; gap: 11px; min-width: 210px; padding: 12px 14px; animation: uocFloatC 7s ease-in-out infinite; } .uoc-globe { width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; flex: 0 0 auto; border-radius: 50%; color: #287A78; background: #EAF4F2; font-size: 20px; } .uoc-card-anywhere strong { display: block; margin-bottom: 1px; color: #18354F; font-size: 11px; font-weight: 600; } .uoc-card-anywhere span { display: block; color: #76838A; font-size: 9px; } /* ========================================================= FLOATING ANIMATION ========================================================= */ @keyframes uocFloatA { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } @keyframes uocFloatB { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(7px); } } @keyframes uocFloatC { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .uoc-hero-title { font-size: 44px; } .uoc-window-media { height: 340px; } .uoc-card-programmes { right: -5px; } .uoc-classroom { padding-left: 15px; padding-right: 15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .uoc-hero::after { display: none; } .uoc-hero-title { font-size: 38px; line-height: 1.10; letter-spacing: -0.8px; } .uoc-trust-row { gap: 12px 18px; } .uoc-classroom { max-width: 100%; margin-top: 30px; padding: 22px 5px 55px; } .uoc-window { border-radius: 16px; } .uoc-window-media { height: 310px; } .uoc-window-name { font-size: 8px; } .uoc-window-footer { justify-content: flex-start; } .uoc-window-footer > div:last-child { display: none; } .uoc-card-live { top: 0; left: -2px; } .uoc-card-programmes { top: 105px; right: -4px; } .uoc-card-anywhere { left: 12px; bottom: 2px; } } /* Respect visitors who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .uoc-floating-card { animation: none !important; } .uoc-window-media img { transition: none !important; } }/* End custom CSS */