.elementor-5982 .elementor-element.elementor-element-9a1ab97{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:140px;--padding-bottom:100px;--padding-left:40px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-fd113e3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-21fb10c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-cd79482 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-8a986ae .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-8a986ae .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-8a986ae .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-8a986ae .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-8a986ae .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-5b62f1d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-cf05212{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-c740f31{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-03a79a1 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-6d2551e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-e558e5b .elementor-button{background-color:#14858200;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 2px 0px;border-color:var( --e-global-color-text );padding:0px 0px 8px 0px;}.elementor-5982 .elementor-element.elementor-element-e558e5b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5982 .elementor-element.elementor-element-e558e5b .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-e558e5b .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-5982 .elementor-element.elementor-element-e558e5b .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-e558e5b .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-5982 .elementor-element.elementor-element-f4efa6a .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-f4efa6a .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-f4efa6a .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-f4efa6a .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-f4efa6a .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-b4c5c71{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-b3e01d0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-077aad8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-9ffb7e5 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-2d33a24 .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-2d33a24 .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-2d33a24 .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-2d33a24 .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-2d33a24 .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-3905673{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-ed565d0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-66f743b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-927d203 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-f9c6b87{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-843e27a .elementor-button{background-color:#14858200;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 2px 0px;border-color:var( --e-global-color-text );padding:0px 0px 8px 0px;}.elementor-5982 .elementor-element.elementor-element-843e27a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5982 .elementor-element.elementor-element-843e27a .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-843e27a .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-5982 .elementor-element.elementor-element-843e27a .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-843e27a .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-5982 .elementor-element.elementor-element-ac31afa .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-ac31afa .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-ac31afa .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-ac31afa .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-ac31afa .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-48d93bd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-5ad77ee{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-5be8c73{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-b953837 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-a56d731{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-dc2c38d .elementor-button{background-color:#14858200;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 2px 0px;border-color:var( --e-global-color-text );padding:0px 0px 8px 0px;}.elementor-5982 .elementor-element.elementor-element-dc2c38d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5982 .elementor-element.elementor-element-dc2c38d .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-dc2c38d .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-5982 .elementor-element.elementor-element-dc2c38d .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-dc2c38d .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-5982 .elementor-element.elementor-element-89aa0be .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-89aa0be .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-89aa0be .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-89aa0be .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-89aa0be .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-405765f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-c22df35{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-0680d7c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-05a9878 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-1e5641c .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-1e5641c .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-1e5641c .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-1e5641c .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-1e5641c .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-b21145a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-fe6c2a3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-abf6579{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-c91bdb3 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-a2172da .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-a2172da .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-a2172da .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-a2172da .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-a2172da .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-6dc5c57{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-e333ff8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-1c36e56{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-76c0871 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-4fa6f9c .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-4fa6f9c .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-4fa6f9c .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-4fa6f9c .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-4fa6f9c .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-d87161b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-34a083a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-a5625f4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-d786dc8 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-9d5c69e .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-9d5c69e .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-9d5c69e .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-9d5c69e .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-9d5c69e .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-79d5023{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-3cba811{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-5982 .elementor-element.elementor-element-9abdb74{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-5982 .elementor-element.elementor-element-3d3d7b3 .elementor-heading-title{font-size:22px;}.elementor-5982 .elementor-element.elementor-element-415aadf .elementor-button{background-color:var( --e-global-color-primary );fill:var( --e-global-color-astglobalcolor5 );color:var( --e-global-color-astglobalcolor5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-5982 .elementor-element.elementor-element-415aadf .elementor-button:hover, .elementor-5982 .elementor-element.elementor-element-415aadf .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-5982 .elementor-element.elementor-element-415aadf .elementor-button:hover svg, .elementor-5982 .elementor-element.elementor-element-415aadf .elementor-button:focus svg{fill:#000000;}.elementor-5982 .elementor-element.elementor-element-435a0be{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-bd0947b{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;width:var( --container-widget-width, 94% );max-width:94%;--container-widget-width:94%;--container-widget-flex-grow:0;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-dots-horizontal-position:50%;--e-n-carousel-dots-horizontal-transform:-50%;--e-n-carousel-dots-horizontal-offset:0px;--e-n-carousel-dots-vertical-position:100%;--e-n-carousel-dots-vertical-transform:-100%;--e-n-carousel-dots-vertical-offset:0px;}body.elementor-page-5982:not(.elementor-motion-effects-element-type-background), body.elementor-page-5982 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(min-width:768px){.elementor-5982 .elementor-element.elementor-element-9a1ab97{--content-width:100%;}.elementor-5982 .elementor-element.elementor-element-21fb10c{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-5b62f1d{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-c740f31{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-b4c5c71{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-077aad8{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-3905673{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-66f743b{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-48d93bd{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-5be8c73{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-405765f{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-0680d7c{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-b21145a{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-abf6579{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-6dc5c57{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-1c36e56{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-d87161b{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-a5625f4{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-79d5023{--width:66.6666%;}.elementor-5982 .elementor-element.elementor-element-9abdb74{--width:33.3333%;}.elementor-5982 .elementor-element.elementor-element-435a0be{--width:66.6666%;}}@media(max-width:1024px){.elementor-5982 .elementor-element.elementor-element-9a1ab97{--min-height:85vh;--padding-top:100px;--padding-bottom:100px;--padding-left:32px;--padding-right:32px;}.elementor-5982 .elementor-element.elementor-element-21fb10c{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-9e8362e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;}.elementor-5982 .elementor-element.elementor-element-c740f31{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-077aad8{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-66f743b{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-5be8c73{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-0680d7c{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-abf6579{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-1c36e56{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-a5625f4{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-9abdb74{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-bd0947b{--e-n-carousel-swiper-slides-to-display:1;}}@media(max-width:767px){.elementor-5982 .elementor-element.elementor-element-9a1ab97{--min-height:96vh;--justify-content:flex-start;--padding-top:80px;--padding-bottom:60px;--padding-left:24px;--padding-right:24px;}.elementor-5982 .elementor-element.elementor-element-fd113e3{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-21fb10c{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-cd79482 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-9e8362e{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-8a986ae{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-8a986ae .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-5b62f1d{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-5b62f1d.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-cf05212{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-c740f31{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-03a79a1 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-6e5c875{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-6d2551e{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;}.elementor-5982 .elementor-element.elementor-element-e558e5b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-e558e5b .elementor-button{border-width:0px 0px 1px 0px;padding:0px 0px 8px 0px;}.elementor-5982 .elementor-element.elementor-element-f4efa6a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-f4efa6a.elementor-element{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-f4efa6a .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-b4c5c71.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-b3e01d0{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-077aad8{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-9ffb7e5 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-8c7a4e2{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-2d33a24{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-2d33a24 .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-3905673.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-ed565d0{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-66f743b{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-927d203 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-589d875{line-height:1.5em;}.elementor-5982 .elementor-element.elementor-element-f9c6b87{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;}.elementor-5982 .elementor-element.elementor-element-843e27a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-843e27a .elementor-button{border-width:0px 0px 1px 0px;padding:0px 0px 8px 0px;}.elementor-5982 .elementor-element.elementor-element-ac31afa{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-ac31afa.elementor-element{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-ac31afa .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-48d93bd.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-5ad77ee{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-5be8c73{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-b953837 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-5c2f1f7{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-a56d731{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-dc2c38d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-dc2c38d .elementor-button{border-width:0px 0px 1px 0px;padding:0px 0px 8px 0px;}.elementor-5982 .elementor-element.elementor-element-89aa0be{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-89aa0be.elementor-element{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-89aa0be .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-405765f.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-c22df35{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-0680d7c{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-05a9878 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-ae803f5{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-1e5641c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-1e5641c .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-b21145a.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-fe6c2a3{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-abf6579{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-c91bdb3 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-2a71069{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-a2172da{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-a2172da .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-6dc5c57.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-e333ff8{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-1c36e56{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-76c0871 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-b71cc5b{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-4fa6f9c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-4fa6f9c .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-d87161b.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-34a083a{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-a5625f4{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-d786dc8 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-32abc68{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-9d5c69e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-9d5c69e .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-79d5023.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-3cba811{--content-width:100%;--min-height:64vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5982 .elementor-element.elementor-element-9abdb74{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5982 .elementor-element.elementor-element-3d3d7b3 .elementor-heading-title{font-size:18px;}.elementor-5982 .elementor-element.elementor-element-3bc31b3{line-height:1.4em;}.elementor-5982 .elementor-element.elementor-element-415aadf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-5982 .elementor-element.elementor-element-415aadf .elementor-button{padding:8px 10px 8px 10px;}.elementor-5982 .elementor-element.elementor-element-435a0be.e-con{--order:-99999 /* order start hack */;}.elementor-5982 .elementor-element.elementor-element-bd0947b{--e-n-carousel-swiper-slides-to-display:1;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}}/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8a986ae *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e558e5b *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f4efa6a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2d33a24 *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-843e27a *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac31afa *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dc2c38d *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89aa0be *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e5641c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a2172da *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-4fa6f9c *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9d5c69e *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-415aadf *//* ---------------------------
  Carousel Dots → Lines (bars)
  Works with: Swiper (Elementor default) and Slick carousels
  Edit the variables in :root to customise
   --------------------------- */

:root{
  --carousel-bar-width: 36px;     /* length of each line */
  --carousel-bar-height: 6px;     /* thickness of each line */
  --carousel-bar-gap: 10px;       /* space between bars */
  --carousel-bar-radius: 4px;     /* rounded corners */
  --carousel-bar-color: rgba(0,0,0,0.25); /* inactive color */
  --carousel-bar-active: #000;    /* active color */
  --carousel-bar-transition: 180ms ease;
}

/* ---------- SWIPER (Elementor default) ---------- */
/* ensure pagination uses flex so bars align nicely */
.elementor-swiper .swiper-pagination,
.swiper-pagination {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* style each bullet as a horizontal bar */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  width: var(--carousel-bar-width) !important;
  height: var(--carousel-bar-height) !important;
  border-radius: var(--carousel-bar-radius) !important;
  background: var(--carousel-bar-color) !important;
  opacity: 1 !important; /* keep visible */
  transform-origin: center;
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none !important;
  margin: 0 !important;
}

/* active bullet */
.elementor-swiper .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
  background: var(--carousel-bar-active) !important;
  transform: scaleX(1.05);
}

/* make clickable area clean (optional) */
.elementor-swiper .swiper-pagination-bullet,
.swiper-pagination-bullet {
  cursor: pointer;
  outline: none;
  border: 0;
}

/* ---------- SLICK (some widgets/plugins use Slick) ---------- */
.slick-dots {
  display: flex !important;
  gap: var(--carousel-bar-gap) !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* slick buttons are inside li > button, so style the button */
.slick-dots li button {
  width: var(--carousel-bar-width);
  height: var(--carousel-bar-height);
  padding: 0;
  border: 0;
  background: var(--carousel-bar-color);
  border-radius: var(--carousel-bar-radius);
  transition: background var(--carousel-bar-transition), transform var(--carousel-bar-transition);
  box-shadow: none;
  cursor: pointer;
}

/* active slick dot */
.slick-dots li.slick-active button {
  background: var(--carousel-bar-active);
  transform: scaleX(1.05);
}

/* ---------- Accessibility: keep native focus outlines for keyboard users ---------- */
.slick-dots li button:focus,
.swiper-pagination-bullet:focus {
  outline: 2px solid #0a84ff; /* visible keyboard focus */
  outline-offset: 3px;
}

/* ---------- Responsive tweak: make bars shorter on small screens ---------- */
@media (max-width: 480px){
  :root{ --carousel-bar-width: 26px; --carousel-bar-hei/* End custom CSS */