.elementor-7326 .elementor-element.elementor-element-3b60d1a{--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-7326 .elementor-element.elementor-element-3a4f35c{--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:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7326 .elementor-element.elementor-element-654ed94{width:var( --container-widget-width, 76% );max-width:76%;--container-widget-width:76%;--container-widget-flex-grow:0;}.elementor-7326 .elementor-element.elementor-element-654ed94.elementor-element{--align-self:center;}.elementor-7326 .elementor-element.elementor-element-654ed94 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-7326 .elementor-element.elementor-element-1548989{width:initial;max-width:initial;}.elementor-7326 .elementor-element.elementor-element-1548989.elementor-element{--align-self:center;}.elementor-7326 .elementor-element.elementor-element-1548989 .elementor-wrapper{--video-aspect-ratio:1;}.elementor-7326 .elementor-element.elementor-element-6a00ea9{--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;--justify-content:center;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-7326 .elementor-element.elementor-element-9b17fb8{--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;--justify-content:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-7326 .elementor-element.elementor-element-fce1261{text-align:start;}.elementor-7326 .elementor-element.elementor-element-fce1261 .elementor-heading-title{font-size:18px;}.elementor-7326 .elementor-element.elementor-element-7cec58e .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-7326 .elementor-element.elementor-element-7cec58e .elementor-button:hover, .elementor-7326 .elementor-element.elementor-element-7cec58e .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-7326 .elementor-element.elementor-element-7cec58e .elementor-button:hover svg, .elementor-7326 .elementor-element.elementor-element-7cec58e .elementor-button:focus svg{fill:#000000;}.elementor-7326 .elementor-element.elementor-element-4ce0061{--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-7326 .elementor-element.elementor-element-6865b96{--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;--justify-content:center;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-7326 .elementor-element.elementor-element-1b1755c{--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-7326 .elementor-element.elementor-element-7b42ba1 .elementor-heading-title{font-size:22px;}.elementor-7326 .elementor-element.elementor-element-d93f87a .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-7326 .elementor-element.elementor-element-d93f87a .elementor-button:hover, .elementor-7326 .elementor-element.elementor-element-d93f87a .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-7326 .elementor-element.elementor-element-d93f87a .elementor-button:hover svg, .elementor-7326 .elementor-element.elementor-element-d93f87a .elementor-button:focus svg{fill:#000000;}.elementor-7326 .elementor-element.elementor-element-466cf1f{--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-7326 .elementor-element.elementor-element-7da9c02{--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;--justify-content:center;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-7326 .elementor-element.elementor-element-c200852{--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-7326 .elementor-element.elementor-element-902e985 .elementor-heading-title{font-size:22px;}.elementor-7326 .elementor-element.elementor-element-d817810 .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-7326 .elementor-element.elementor-element-d817810 .elementor-button:hover, .elementor-7326 .elementor-element.elementor-element-d817810 .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-7326 .elementor-element.elementor-element-d817810 .elementor-button:hover svg, .elementor-7326 .elementor-element.elementor-element-d817810 .elementor-button:focus svg{fill:#000000;}.elementor-7326 .elementor-element.elementor-element-6672033{--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-7326 .elementor-element.elementor-element-e866b85{--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;--justify-content:center;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-7326 .elementor-element.elementor-element-d8b882e{--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-7326 .elementor-element.elementor-element-a6b3bd0 .elementor-heading-title{font-size:22px;}.elementor-7326 .elementor-element.elementor-element-45bddb1 .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-7326 .elementor-element.elementor-element-45bddb1 .elementor-button:hover, .elementor-7326 .elementor-element.elementor-element-45bddb1 .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-7326 .elementor-element.elementor-element-45bddb1 .elementor-button:hover svg, .elementor-7326 .elementor-element.elementor-element-45bddb1 .elementor-button:focus svg{fill:#000000;}.elementor-7326 .elementor-element.elementor-element-e271a55{--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-7326 .elementor-element.elementor-element-567f146{--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;--justify-content:center;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-7326 .elementor-element.elementor-element-7ca42b2{--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-7326 .elementor-element.elementor-element-ca2b6bc .elementor-heading-title{font-size:22px;}.elementor-7326 .elementor-element.elementor-element-4dcb109 .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-7326 .elementor-element.elementor-element-4dcb109 .elementor-button:hover, .elementor-7326 .elementor-element.elementor-element-4dcb109 .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-7326 .elementor-element.elementor-element-4dcb109 .elementor-button:hover svg, .elementor-7326 .elementor-element.elementor-element-4dcb109 .elementor-button:focus svg{fill:#000000;}.elementor-7326 .elementor-element.elementor-element-c4518a1{--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-7326 .elementor-element.elementor-element-3739fd9{--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;--justify-content:center;--gap:0px 40px;--row-gap:0px;--column-gap:40px;}.elementor-7326 .elementor-element.elementor-element-48bc4c9{--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-7326 .elementor-element.elementor-element-277aba6 .elementor-heading-title{font-size:22px;}.elementor-7326 .elementor-element.elementor-element-25e85a2{--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;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7326 .elementor-element.elementor-element-4c85e4e{font-weight:700;line-height:1em;}.elementor-7326 .elementor-element.elementor-element-52a777a{line-height:1em;}.elementor-7326 .elementor-element.elementor-element-ab2420e .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-7326 .elementor-element.elementor-element-ab2420e .elementor-button:hover, .elementor-7326 .elementor-element.elementor-element-ab2420e .elementor-button:focus{background-color:var( --e-global-color-astglobalcolor5 );color:#000000;}.elementor-7326 .elementor-element.elementor-element-ab2420e .elementor-button:hover svg, .elementor-7326 .elementor-element.elementor-element-ab2420e .elementor-button:focus svg{fill:#000000;}.elementor-7326 .elementor-element.elementor-element-3b46cc9{--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-7326 .elementor-element.elementor-element-f85a2b5{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--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;}body.elementor-page-7326:not(.elementor-motion-effects-element-type-background), body.elementor-page-7326 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:1024px){.elementor-7326 .elementor-element.elementor-element-3b60d1a{--min-height:85vh;--justify-content:flex-start;--padding-top:120px;--padding-bottom:100px;--padding-left:32px;--padding-right:32px;}.elementor-7326 .elementor-element.elementor-element-3a4f35c{--justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-6a00ea9{--justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-6865b96{--justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-7da9c02{--justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-e866b85{--justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-567f146{--justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-3739fd9{--justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-f85a2b5{--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%;}}@media(max-width:767px){.elementor-7326 .elementor-element.elementor-element-3b60d1a{--min-height:96vh;--justify-content:flex-start;--padding-top:80px;--padding-bottom:60px;--padding-left:24px;--padding-right:24px;}.elementor-7326 .elementor-element.elementor-element-3a4f35c{--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:center;}.elementor-7326 .elementor-element.elementor-element-654ed94{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-7326 .elementor-element.elementor-element-1548989{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-7326 .elementor-element.elementor-element-6a00ea9{--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;}.elementor-7326 .elementor-element.elementor-element-9b17fb8{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-fce1261 .elementor-heading-title{font-size:18px;}.elementor-7326 .elementor-element.elementor-element-0f074ed{font-size:14px;line-height:1.4em;}.elementor-7326 .elementor-element.elementor-element-7cec58e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-7326 .elementor-element.elementor-element-7cec58e .elementor-button{padding:8px 10px 8px 10px;}.elementor-7326 .elementor-element.elementor-element-4ce0061.e-con{--order:-99999 /* order start hack */;}.elementor-7326 .elementor-element.elementor-element-6865b96{--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;}.elementor-7326 .elementor-element.elementor-element-1b1755c{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-7b42ba1 .elementor-heading-title{font-size:18px;}.elementor-7326 .elementor-element.elementor-element-36823ca{font-size:14px;line-height:1.4em;}.elementor-7326 .elementor-element.elementor-element-d93f87a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-7326 .elementor-element.elementor-element-d93f87a .elementor-button{padding:8px 10px 8px 10px;}.elementor-7326 .elementor-element.elementor-element-466cf1f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-466cf1f.e-con{--order:-99999 /* order start hack */;}.elementor-7326 .elementor-element.elementor-element-7da9c02{--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;}.elementor-7326 .elementor-element.elementor-element-c200852{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-902e985 .elementor-heading-title{font-size:18px;}.elementor-7326 .elementor-element.elementor-element-c2ace72{font-size:14px;line-height:1.4em;}.elementor-7326 .elementor-element.elementor-element-d817810{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-7326 .elementor-element.elementor-element-d817810 .elementor-button{padding:8px 10px 8px 10px;}.elementor-7326 .elementor-element.elementor-element-6672033.e-con{--order:-99999 /* order start hack */;}.elementor-7326 .elementor-element.elementor-element-e866b85{--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-7326 .elementor-element.elementor-element-d8b882e{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-a6b3bd0 .elementor-heading-title{font-size:18px;}.elementor-7326 .elementor-element.elementor-element-ed461b2{font-size:14px;line-height:1.4em;}.elementor-7326 .elementor-element.elementor-element-45bddb1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-7326 .elementor-element.elementor-element-45bddb1 .elementor-button{padding:8px 10px 8px 10px;}.elementor-7326 .elementor-element.elementor-element-e271a55.e-con{--order:-99999 /* order start hack */;}.elementor-7326 .elementor-element.elementor-element-567f146{--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-7326 .elementor-element.elementor-element-7ca42b2{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-ca2b6bc .elementor-heading-title{font-size:18px;}.elementor-7326 .elementor-element.elementor-element-2661352{font-size:14px;line-height:1.4em;}.elementor-7326 .elementor-element.elementor-element-4dcb109{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-7326 .elementor-element.elementor-element-4dcb109 .elementor-button{padding:8px 10px 8px 10px;}.elementor-7326 .elementor-element.elementor-element-c4518a1.e-con{--order:-99999 /* order start hack */;}.elementor-7326 .elementor-element.elementor-element-3739fd9{--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-7326 .elementor-element.elementor-element-48bc4c9{--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-277aba6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-7326 .elementor-element.elementor-element-277aba6 .elementor-heading-title{font-size:18px;}.elementor-7326 .elementor-element.elementor-element-f9ccce5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;line-height:1.4em;}.elementor-7326 .elementor-element.elementor-element-25e85a2{--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:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7326 .elementor-element.elementor-element-4c85e4e{font-size:14px;line-height:1.2em;}.elementor-7326 .elementor-element.elementor-element-cdafcd4{--e-rating-justify-content:flex-start;}.elementor-7326 .elementor-element.elementor-element-52a777a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 20px;line-height:1.2em;}.elementor-7326 .elementor-element.elementor-element-ab2420e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:20;}.elementor-7326 .elementor-element.elementor-element-ab2420e .elementor-button{padding:8px 10px 8px 10px;}.elementor-7326 .elementor-element.elementor-element-3b46cc9.e-con{--order:-99999 /* order start hack */;}.elementor-7326 .elementor-element.elementor-element-f85a2b5{--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%;}}@media(min-width:768px){.elementor-7326 .elementor-element.elementor-element-3b60d1a{--content-width:100%;}.elementor-7326 .elementor-element.elementor-element-9b17fb8{--width:33.3333%;}.elementor-7326 .elementor-element.elementor-element-4ce0061{--width:66.6666%;}.elementor-7326 .elementor-element.elementor-element-1b1755c{--width:33.3333%;}.elementor-7326 .elementor-element.elementor-element-466cf1f{--width:66.6666%;}.elementor-7326 .elementor-element.elementor-element-c200852{--width:33.3333%;}.elementor-7326 .elementor-element.elementor-element-6672033{--width:66.6666%;}.elementor-7326 .elementor-element.elementor-element-d8b882e{--width:33.3333%;}.elementor-7326 .elementor-element.elementor-element-e271a55{--width:66.6666%;}.elementor-7326 .elementor-element.elementor-element-7ca42b2{--width:33.3333%;}.elementor-7326 .elementor-element.elementor-element-c4518a1{--width:66.6666%;}.elementor-7326 .elementor-element.elementor-element-48bc4c9{--width:33.3333%;}.elementor-7326 .elementor-element.elementor-element-3b46cc9{--width:66.6666%;}}@media(min-width:2400px){.elementor-7326 .elementor-element.elementor-element-f85a2b5{width:100%;max-width:100%;}}/* Start custom CSS for button, class: .elementor-element-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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-7cec58e *//* ---------------------------
  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-d93f87a *//* ---------------------------
  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-d817810 *//* ---------------------------
  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-45bddb1 *//* ---------------------------
  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-4dcb109 *//* ---------------------------
  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-ab2420e *//* ---------------------------
  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 nested-carousel, class: .elementor-element-f85a2b5 *//* ---------------------------
  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 */