.elementor-2896 .elementor-element.elementor-element-cccd23b{--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:center;--gap:2rem 2rem;--row-gap:2rem;--column-gap:2rem;--padding-top:4rem;--padding-bottom:4rem;--padding-left:0rem;--padding-right:0rem;}.elementor-2896 .elementor-element.elementor-element-cccd23b:not(.elementor-motion-effects-element-type-background), .elementor-2896 .elementor-element.elementor-element-cccd23b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#3B3733;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2896 .elementor-element.elementor-element-e31edc9{background-color:#DBD3CB;padding:6px 24px 6px 24px;border-radius:24px 24px 24px 24px;}.elementor-2896 .elementor-element.elementor-element-e31edc9.elementor-element{--align-self:center;}.elementor-2896 .elementor-element.elementor-element-e31edc9 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:0.8rem;font-weight:600;}.elementor-2896 .elementor-element.elementor-element-b20f1f4{width:var( --container-widget-width, 40% );max-width:40%;--container-widget-width:40%;--container-widget-flex-grow:0;text-align:center;}.elementor-2896 .elementor-element.elementor-element-b20f1f4.elementor-element{--align-self:center;}.elementor-2896 .elementor-element.elementor-element-b20f1f4 .elementor-heading-title{font-family:"Instrument Serif", Sans-serif;font-size:6.25rem;font-weight:400;text-transform:capitalize;line-height:4.5lh;color:#FAFCFF;}.elementor-2896 .elementor-element.elementor-element-96d8e9e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-dd61cf5{--display:flex;--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-2896 .elementor-element.elementor-element-6142517{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-2896 .elementor-element.elementor-element-ecc24d3 .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-ecc24d3 .elementor-icon{font-size:30px;}.elementor-2896 .elementor-element.elementor-element-ecc24d3 .elementor-icon svg{height:30px;}.elementor-2896 .elementor-element.elementor-element-255392c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--border-radius:99px 99px 99px 99px;--padding-top:10px;--padding-bottom:10px;--padding-left:14px;--padding-right:10px;}.elementor-2896 .elementor-element.elementor-element-c3d4af9 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1rem;font-weight:600;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-9eb22bf{z-index:2;}.elementor-2896 .elementor-element.elementor-element-9eb22bf .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-9eb22bf .elementor-icon{font-size:40px;}.elementor-2896 .elementor-element.elementor-element-9eb22bf .elementor-icon svg{height:40px;}.elementor-2896 .elementor-element.elementor-element-e2b43a7{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-2896 .elementor-element.elementor-element-e2b43a7 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1.5rem;font-weight:400;line-height:1.6lh;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-9d42f0b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-2896 .elementor-element.elementor-element-a4431db .elementor-icon-box-wrapper{text-align:start;}.elementor-2896 .elementor-element.elementor-element-a4431db .elementor-icon-box-title{margin-block-end:0px;color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-a4431db .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-a4431db .elementor-icon-box-title a{font-family:"Manrope", Sans-serif;font-size:1.25rem;font-weight:600;}.elementor-2896 .elementor-element.elementor-element-a4431db:has(:hover) .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-a4431db:has(:focus) .elementor-icon-box-title{color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-a4431db .elementor-icon-box-description{font-family:"Manrope", Sans-serif;font-size:0.7rem;font-weight:400;line-height:1.2lh;color:#E7E1DC;}.elementor-2896 .elementor-element.elementor-element-46e7e28 .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-46e7e28 .elementor-icon{font-size:50px;}.elementor-2896 .elementor-element.elementor-element-46e7e28 .elementor-icon svg{height:50px;}.elementor-2896 .elementor-element.elementor-element-46e7e28 .elementor-icon-wrapper svg{width:auto;}.elementor-2896 .elementor-element.elementor-element-8170b63{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-b354531{--display:flex;--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-2896 .elementor-element.elementor-element-63b9d3e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-819bb9d .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-819bb9d .elementor-icon{font-size:30px;}.elementor-2896 .elementor-element.elementor-element-819bb9d .elementor-icon svg{height:30px;}.elementor-2896 .elementor-element.elementor-element-011f1a3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--border-radius:99px 99px 99px 99px;--padding-top:10px;--padding-bottom:10px;--padding-left:14px;--padding-right:10px;}.elementor-2896 .elementor-element.elementor-element-4c1c4a6 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1rem;font-weight:600;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-0b4d7d7{z-index:2;}.elementor-2896 .elementor-element.elementor-element-0b4d7d7 .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-0b4d7d7 .elementor-icon{font-size:40px;}.elementor-2896 .elementor-element.elementor-element-0b4d7d7 .elementor-icon svg{height:40px;}.elementor-2896 .elementor-element.elementor-element-d2bc3c2{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-2896 .elementor-element.elementor-element-d2bc3c2 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1.5rem;font-weight:400;line-height:1.6lh;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-401f051{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-539d1b3 .elementor-icon-box-wrapper{text-align:start;}.elementor-2896 .elementor-element.elementor-element-539d1b3 .elementor-icon-box-title{margin-block-end:0px;color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-539d1b3 .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-539d1b3 .elementor-icon-box-title a{font-family:"Manrope", Sans-serif;font-size:1.25rem;font-weight:600;}.elementor-2896 .elementor-element.elementor-element-539d1b3:has(:hover) .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-539d1b3:has(:focus) .elementor-icon-box-title{color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-539d1b3 .elementor-icon-box-description{font-family:"Manrope", Sans-serif;font-size:0.7rem;font-weight:400;line-height:1.2lh;color:#E7E1DC;}.elementor-2896 .elementor-element.elementor-element-31dbca4 .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-31dbca4 .elementor-icon{font-size:50px;}.elementor-2896 .elementor-element.elementor-element-31dbca4 .elementor-icon svg{height:50px;}.elementor-2896 .elementor-element.elementor-element-31dbca4 .elementor-icon-wrapper svg{width:auto;}.elementor-2896 .elementor-element.elementor-element-9dc9c58{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-4d8f19b{--display:flex;--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-2896 .elementor-element.elementor-element-1a3e6ee{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-443f929 .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-443f929 .elementor-icon{font-size:30px;}.elementor-2896 .elementor-element.elementor-element-443f929 .elementor-icon svg{height:30px;}.elementor-2896 .elementor-element.elementor-element-e894f38{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--border-radius:99px 99px 99px 99px;--padding-top:10px;--padding-bottom:10px;--padding-left:14px;--padding-right:10px;}.elementor-2896 .elementor-element.elementor-element-3431e35 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1rem;font-weight:600;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-e7cb15b{z-index:2;}.elementor-2896 .elementor-element.elementor-element-e7cb15b .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-e7cb15b .elementor-icon{font-size:40px;}.elementor-2896 .elementor-element.elementor-element-e7cb15b .elementor-icon svg{height:40px;}.elementor-2896 .elementor-element.elementor-element-f59b5b8{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-2896 .elementor-element.elementor-element-f59b5b8 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1.5rem;font-weight:400;line-height:1.6lh;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-696d173{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-b9b7229 .elementor-icon-box-wrapper{text-align:start;}.elementor-2896 .elementor-element.elementor-element-b9b7229 .elementor-icon-box-title{margin-block-end:0px;color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-b9b7229 .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-b9b7229 .elementor-icon-box-title a{font-family:"Manrope", Sans-serif;font-size:1.25rem;font-weight:600;}.elementor-2896 .elementor-element.elementor-element-b9b7229:has(:hover) .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-b9b7229:has(:focus) .elementor-icon-box-title{color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-b9b7229 .elementor-icon-box-description{font-family:"Manrope", Sans-serif;font-size:0.7rem;font-weight:400;line-height:1.2lh;color:#E7E1DC;}.elementor-2896 .elementor-element.elementor-element-745ac78 .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-745ac78 .elementor-icon{font-size:50px;}.elementor-2896 .elementor-element.elementor-element-745ac78 .elementor-icon svg{height:50px;}.elementor-2896 .elementor-element.elementor-element-745ac78 .elementor-icon-wrapper svg{width:auto;}.elementor-2896 .elementor-element.elementor-element-33481fa{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-f786d3e{--display:flex;--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-2896 .elementor-element.elementor-element-876a177{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-9e4c3fe .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-9e4c3fe .elementor-icon{font-size:30px;}.elementor-2896 .elementor-element.elementor-element-9e4c3fe .elementor-icon svg{height:30px;}.elementor-2896 .elementor-element.elementor-element-b0629cd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--border-radius:99px 99px 99px 99px;--padding-top:10px;--padding-bottom:10px;--padding-left:14px;--padding-right:10px;}.elementor-2896 .elementor-element.elementor-element-fb40b1b .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1rem;font-weight:600;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-c80558f{z-index:2;}.elementor-2896 .elementor-element.elementor-element-c80558f .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-c80558f .elementor-icon{font-size:40px;}.elementor-2896 .elementor-element.elementor-element-c80558f .elementor-icon svg{height:40px;}.elementor-2896 .elementor-element.elementor-element-bbe1802{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-2896 .elementor-element.elementor-element-bbe1802 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:1.5rem;font-weight:400;line-height:1.6lh;color:#DBD3CB;}.elementor-2896 .elementor-element.elementor-element-118d29d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-caf708d .elementor-icon-box-wrapper{text-align:start;}.elementor-2896 .elementor-element.elementor-element-caf708d .elementor-icon-box-title{margin-block-end:0px;color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-caf708d .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-caf708d .elementor-icon-box-title a{font-family:"Manrope", Sans-serif;font-size:1.25rem;font-weight:600;}.elementor-2896 .elementor-element.elementor-element-caf708d:has(:hover) .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-caf708d:has(:focus) .elementor-icon-box-title{color:#F3F0EE;}.elementor-2896 .elementor-element.elementor-element-caf708d .elementor-icon-box-description{font-family:"Manrope", Sans-serif;font-size:0.7rem;font-weight:400;line-height:1.2lh;color:#E7E1DC;}.elementor-2896 .elementor-element.elementor-element-94f7544 .elementor-icon-wrapper{text-align:center;}.elementor-2896 .elementor-element.elementor-element-94f7544 .elementor-icon{font-size:50px;}.elementor-2896 .elementor-element.elementor-element-94f7544 .elementor-icon svg{height:50px;}.elementor-2896 .elementor-element.elementor-element-94f7544 .elementor-icon-wrapper svg{width:auto;}.elementor-2896 .elementor-element.elementor-element-55daeaf{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;margin:2rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;padding:0px 0px 0px 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:50%;--e-n-carousel-arrow-prev-translate-x:-50%;--e-n-carousel-arrow-prev-left-position:16rem;--e-n-carousel-arrow-prev-top-align:100%;--e-n-carousel-arrow-prev-translate-y:-100%;--e-n-carousel-arrow-prev-top-position:-4rem;--e-n-carousel-arrow-next-right-align:50%;--e-n-carousel-arrow-next-translate-x:50%;--e-n-carousel-arrow-next-right-position:-18rem;--e-n-carousel-arrow-next-top-align:100%;--e-n-carousel-arrow-next-translate-y:-100%;--e-n-carousel-arrow-next-top-position:-4rem;--e-n-carousel-arrow-size:32px;}@media(max-width:1024px){.elementor-2896 .elementor-element.elementor-element-cccd23b{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2896 .elementor-element.elementor-element-b20f1f4{--container-widget-width:60%;--container-widget-flex-grow:0;width:var( --container-widget-width, 60% );max-width:60%;}.elementor-2896 .elementor-element.elementor-element-b20f1f4 .elementor-heading-title{font-size:5rem;line-height:3.5lh;}.elementor-2896 .elementor-element.elementor-element-dd61cf5{--padding-top:50px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-2896 .elementor-element.elementor-element-e2b43a7 .elementor-heading-title{font-size:1.25rem;line-height:1.4lh;}.elementor-widget-icon-box .elementor-icon-box-description{line-height:var( --e-global-typography-text-line-height );}.elementor-2896 .elementor-element.elementor-element-a4431db .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-a4431db .elementor-icon-box-title a{font-size:1rem;}.elementor-2896 .elementor-element.elementor-element-b354531{--padding-top:50px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-2896 .elementor-element.elementor-element-d2bc3c2 .elementor-heading-title{font-size:1.25rem;line-height:1.4lh;}.elementor-2896 .elementor-element.elementor-element-539d1b3 .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-539d1b3 .elementor-icon-box-title a{font-size:1rem;}.elementor-2896 .elementor-element.elementor-element-4d8f19b{--padding-top:50px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-2896 .elementor-element.elementor-element-f59b5b8 .elementor-heading-title{font-size:1.25rem;line-height:1.4lh;}.elementor-2896 .elementor-element.elementor-element-b9b7229 .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-b9b7229 .elementor-icon-box-title a{font-size:1rem;}.elementor-2896 .elementor-element.elementor-element-f786d3e{--padding-top:50px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-2896 .elementor-element.elementor-element-bbe1802 .elementor-heading-title{font-size:1.25rem;line-height:1.4lh;}.elementor-2896 .elementor-element.elementor-element-caf708d .elementor-icon-box-title, .elementor-2896 .elementor-element.elementor-element-caf708d .elementor-icon-box-title a{font-size:1rem;}.elementor-2896 .elementor-element.elementor-element-55daeaf{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-arrow-prev-left-position:10rem;--e-n-carousel-arrow-prev-top-position:-3rem;--e-n-carousel-arrow-next-right-position:-12rem;--e-n-carousel-arrow-next-top-position:-3rem;}}@media(max-width:767px){.elementor-2896 .elementor-element.elementor-element-cccd23b{--padding-top:3rem;--padding-bottom:3rem;--padding-left:0rem;--padding-right:0rem;}.elementor-2896 .elementor-element.elementor-element-e31edc9{padding:4px 20px 4px 20px;}.elementor-2896 .elementor-element.elementor-element-e31edc9.elementor-element{--align-self:center;}.elementor-2896 .elementor-element.elementor-element-b20f1f4{--container-widget-width:68%;--container-widget-flex-grow:0;width:var( --container-widget-width, 68% );max-width:68%;}.elementor-2896 .elementor-element.elementor-element-b20f1f4 .elementor-heading-title{font-size:2.5rem;line-height:2lh;}.elementor-2896 .elementor-element.elementor-element-96d8e9e{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-dd61cf5{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-2896 .elementor-element.elementor-element-255392c{--width:70%;--padding-top:4px;--padding-bottom:4px;--padding-left:4px;--padding-right:4px;}.elementor-2896 .elementor-element.elementor-element-c3d4af9 .elementor-heading-title{font-size:0.8rem;}.elementor-2896 .elementor-element.elementor-element-9eb22bf .elementor-icon{font-size:35px;}.elementor-2896 .elementor-element.elementor-element-9eb22bf .elementor-icon svg{height:35px;}.elementor-2896 .elementor-element.elementor-element-e2b43a7{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-2896 .elementor-element.elementor-element-e2b43a7 .elementor-heading-title{font-size:1.125rem;line-height:1.25lh;}.elementor-widget-icon-box .elementor-icon-box-description{line-height:var( --e-global-typography-text-line-height );}.elementor-2896 .elementor-element.elementor-element-8170b63{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-b354531{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-2896 .elementor-element.elementor-element-011f1a3{--width:70%;--padding-top:4px;--padding-bottom:4px;--padding-left:4px;--padding-right:4px;}.elementor-2896 .elementor-element.elementor-element-4c1c4a6 .elementor-heading-title{font-size:0.8rem;}.elementor-2896 .elementor-element.elementor-element-0b4d7d7 .elementor-icon{font-size:35px;}.elementor-2896 .elementor-element.elementor-element-0b4d7d7 .elementor-icon svg{height:35px;}.elementor-2896 .elementor-element.elementor-element-d2bc3c2{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-2896 .elementor-element.elementor-element-d2bc3c2 .elementor-heading-title{font-size:1.125rem;line-height:1.25lh;}.elementor-2896 .elementor-element.elementor-element-9dc9c58{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-4d8f19b{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-2896 .elementor-element.elementor-element-e894f38{--width:65%;--padding-top:4px;--padding-bottom:4px;--padding-left:4px;--padding-right:4px;}.elementor-2896 .elementor-element.elementor-element-3431e35 .elementor-heading-title{font-size:0.8rem;}.elementor-2896 .elementor-element.elementor-element-e7cb15b .elementor-icon{font-size:35px;}.elementor-2896 .elementor-element.elementor-element-e7cb15b .elementor-icon svg{height:35px;}.elementor-2896 .elementor-element.elementor-element-f59b5b8{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-2896 .elementor-element.elementor-element-f59b5b8 .elementor-heading-title{font-size:1.125rem;line-height:1.25lh;}.elementor-2896 .elementor-element.elementor-element-33481fa{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2896 .elementor-element.elementor-element-f786d3e{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-2896 .elementor-element.elementor-element-b0629cd{--width:65%;--padding-top:4px;--padding-bottom:4px;--padding-left:4px;--padding-right:4px;}.elementor-2896 .elementor-element.elementor-element-fb40b1b .elementor-heading-title{font-size:0.8rem;}.elementor-2896 .elementor-element.elementor-element-c80558f .elementor-icon{font-size:35px;}.elementor-2896 .elementor-element.elementor-element-c80558f .elementor-icon svg{height:35px;}.elementor-2896 .elementor-element.elementor-element-bbe1802{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-2896 .elementor-element.elementor-element-bbe1802 .elementor-heading-title{font-size:1.125rem;line-height:1.25lh;}.elementor-2896 .elementor-element.elementor-element-55daeaf{--e-n-carousel-swiper-slides-to-display:1;margin:1rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;--e-n-carousel-arrow-prev-left-position:-1rem;--e-n-carousel-arrow-prev-top-align:100%;--e-n-carousel-arrow-prev-translate-y:-100%;--e-n-carousel-arrow-prev-top-position:0rem;--e-n-carousel-arrow-next-right-position:-1rem;--e-n-carousel-arrow-next-top-position:0rem;}}@media(min-width:768px){.elementor-2896 .elementor-element.elementor-element-255392c{--width:18%;}.elementor-2896 .elementor-element.elementor-element-011f1a3{--width:18%;}.elementor-2896 .elementor-element.elementor-element-e894f38{--width:18%;}.elementor-2896 .elementor-element.elementor-element-b0629cd{--width:18%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2896 .elementor-element.elementor-element-255392c{--width:33%;}.elementor-2896 .elementor-element.elementor-element-011f1a3{--width:33%;}.elementor-2896 .elementor-element.elementor-element-e894f38{--width:33%;}.elementor-2896 .elementor-element.elementor-element-b0629cd{--width:33%;}}/* Start custom CSS for container, class: .elementor-element-255392c *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-255392c { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-255392c .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-255392c .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-255392c:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-255392c:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-dd61cf5 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-011f1a3 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-011f1a3 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b354531 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-b354531 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-b354531 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-b354531::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-b354531::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e894f38 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-e894f38 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4d8f19b *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b0629cd *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-b0629cd { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f786d3e *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-f786d3e { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-f786d3e { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-f786d3e::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-f786d3e::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-255392c *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-255392c { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-255392c .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-255392c .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-255392c:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-255392c:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-dd61cf5 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-011f1a3 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-011f1a3 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b354531 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-b354531 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-b354531 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-b354531::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-b354531::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e894f38 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-e894f38 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4d8f19b *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b0629cd *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-b0629cd { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f786d3e *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-f786d3e { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-f786d3e { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-f786d3e::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-f786d3e::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-255392c *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-255392c { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-255392c .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-255392c .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-255392c:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-255392c:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-dd61cf5 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-011f1a3 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-011f1a3 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b354531 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-b354531 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-b354531 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-b354531::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-b354531::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e894f38 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-e894f38 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4d8f19b *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b0629cd *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-b0629cd { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f786d3e *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-f786d3e { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-f786d3e { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-f786d3e::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-f786d3e::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-255392c *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-255392c { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-255392c .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-255392c .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-255392c:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-255392c:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-dd61cf5 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-011f1a3 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-011f1a3 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b354531 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-b354531 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-b354531 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-b354531::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-b354531::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e894f38 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-e894f38 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4d8f19b *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b0629cd *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-b0629cd { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f786d3e *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-f786d3e { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-f786d3e { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-f786d3e::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-f786d3e::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-255392c *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-255392c { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-255392c .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-255392c .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-255392c:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-255392c:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-dd61cf5 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-dd61cf5 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-dd61cf5::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-011f1a3 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-011f1a3 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-011f1a3 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 12px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-011f1a3:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b354531 *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-b354531 { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-b354531 { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-b354531::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-b354531::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e894f38 *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-e894f38 { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-e894f38 .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-e894f38:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4d8f19b *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-4d8f19b { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-4d8f19b::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b0629cd *//* Container Settings */ .elementor-2896 .elementor-element.elementor-element-b0629cd { display: inline-flex; align-items: center; padding: 8px 12px; overflow: hidden; /* Important for the slide effect */ transition: all 0.4s ease; cursor: pointer; text-decoration: none; } /* Text Styling & Initial State */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-text { max-width: 0; opacity: 0; white-space: nowrap; transition: all 0.4s ease; margin-right: 0px; color: #ffffff; /* Adjust color */ font-size: 14px; } /* Icon Styling */ .elementor-2896 .elementor-element.elementor-element-b0629cd .review-icon i { font-size: 18px; color: #ffffff; display: block; } /* HOVER STATE */ /* Slide text out to the left */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover .review-text { max-width: 150px; /* Adjust based on text length */ opacity: 1; margin-right: 0px; /* Space between text and icon */ } /* Optional: Change background color on hover */ .elementor-2896 .elementor-element.elementor-element-b0629cd:hover { background-color: #332e2c; /* Slightly lighter brown */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f786d3e *//* 1. Ensure the container can hold the absolute border */ .elementor-2896 .elementor-element.elementor-element-f786d3e { position: relative; border-radius: 40px; /* Match this to your design */ } /* --- Mobile View Override --- */ @media (max-width: 767px) { /* We target the element and the pseudo-element specifically */ .elementor-2896 .elementor-element.elementor-element-f786d3e { border-radius: 20px !important; } .elementor-2896 .elementor-element.elementor-element-f786d3e::before { border-radius: 20px !important; } } /* 2. Create the gradient border layer */ .elementor-2896 .elementor-element.elementor-element-f786d3e::before { content: ""; position: absolute; inset: 0; /* Aligns perfectly to the edges */ pointer-events: none; /* Allows clicks to pass through to content */ /* THE RADIUS: Must match the container */ border-radius: 40px; /* THE BORDER: Set thickness here */ border: 1.5px solid transparent; /* THE GRADIENT: Adjust colors and angles here */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.4) 100% ) border-box; /* THE MASK: This is the magic that keeps the border only */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }/* End custom CSS */