.elementor-2705 .elementor-element.elementor-element-bde68f8{--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;overflow:visible;}.elementor-widget-ucaddon_simple_slider .ue_simple_slider_title{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-ucaddon_simple_slider .ue_simple_slider_text{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2705 .elementor-element.elementor-element-bfd9bab .ue_slider,.elementor-2705 .elementor-element.elementor-element-bfd9bab .ue_slide{height:75vh;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .ue_slide_overlay{background-color:#00000000;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .slide__content{max-width:300px;padding:50px 50px 50px 50px;background-color:rgba(0, 0, 0, 0);}.elementor-2705 .elementor-element.elementor-element-bfd9bab .ue_simple_slider_title{color:#ffffff;margin-top:0px;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .ue_simple_slider_text{color:#ffffff;margin-top:10px;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .uc_more_btn{padding:10px 20px 10px 20px;border-radius:50px;background-color:rgba(255, 255, 255, 0);color:#ffffff;margin-top:20px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#ffffff;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .uc_more_btn:hover{background-color:#000000;color:#ffffff;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .slick-next,.elementor-2705 .elementor-element.elementor-element-bfd9bab .slick-prev{border-radius:0px;width:62px;height:62px;line-height:62px;font-size:24px;background-color:#ffffff;color:#000000;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .slick-next:hover,.elementor-2705 .elementor-element.elementor-element-bfd9bab .slick-prev:hover{background-color:#000000;color:#ffffff;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .slick-dots{bottom:0px;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .slick-dots li,.elementor-2705 .elementor-element.elementor-element-bfd9bab .stick-dots .slick-dots li button{height:6px;width:40px;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .stick-dots .slick-dots li button{background-color:#FF02DFC2;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .stick-dots .slick-dots li button:hover{background-color:#B500FFC7;}.elementor-2705 .elementor-element.elementor-element-bfd9bab .stick-dots .slick-dots li.slick-active button{background-color:#FFD905C2;}.elementor-2705 .elementor-element.elementor-element-b072bfa{--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;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .ue_slider,.elementor-2705 .elementor-element.elementor-element-7c84be1 .ue_slide{height:75vh;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .ue_slide_overlay{background-color:#00000000;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .slide__content{max-width:300px;padding:50px 50px 50px 50px;background-color:rgba(0, 0, 0, 0);}.elementor-2705 .elementor-element.elementor-element-7c84be1 .ue_simple_slider_title{color:#ffffff;margin-top:0px;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .ue_simple_slider_text{color:#ffffff;margin-top:10px;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .uc_more_btn{padding:10px 20px 10px 20px;border-radius:50px;background-color:rgba(255, 255, 255, 0);color:#ffffff;margin-top:20px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#ffffff;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .uc_more_btn:hover{background-color:#000000;color:#ffffff;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .slick-next,.elementor-2705 .elementor-element.elementor-element-7c84be1 .slick-prev{border-radius:0px;width:62px;height:62px;line-height:62px;font-size:24px;background-color:#ffffff;color:#000000;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .slick-next:hover,.elementor-2705 .elementor-element.elementor-element-7c84be1 .slick-prev:hover{background-color:#000000;color:#ffffff;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .slick-dots{bottom:0px;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .slick-dots li,.elementor-2705 .elementor-element.elementor-element-7c84be1 .stick-dots .slick-dots li button{height:6px;width:40px;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .stick-dots .slick-dots li button{background-color:#FF02DFC2;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .stick-dots .slick-dots li button:hover{background-color:#B500FFC7;}.elementor-2705 .elementor-element.elementor-element-7c84be1 .stick-dots .slick-dots li.slick-active button{background-color:#FFD905C2;}.elementor-2705 .elementor-element.elementor-element-0dd3c73{--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;overflow:visible;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2705 .elementor-element.elementor-element-c17e633{font-family:"Arial", Sans-serif;font-size:20px;font-weight:400;line-height:44px;}.elementor-2705 .elementor-element.elementor-element-1c5de05{--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;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-ae78338{--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;overflow:visible;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2705 .elementor-element.elementor-element-f9ded24{--e-transform-translateX:-15px;--e-transform-translateY:41px;margin:-102px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:6;}.elementor-2705 .elementor-element.elementor-element-f9ded24.elementor-element{--align-self:flex-start;}.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-2705 .elementor-element.elementor-element-3be172d{--e-transform-translateX:14px;--e-transform-translateY:-16px;z-index:6;}.elementor-2705 .elementor-element.elementor-element-3be172d .elementor-heading-title{font-family:"Arial", Sans-serif;font-size:45px;font-weight:600;letter-spacing:2.4px;color:#FFFFFF;}.elementor-2705 .elementor-element.elementor-element-0124158{--e-transform-translateX:-147px;--e-transform-translateY:-89px;z-index:6;}.elementor-2705 .elementor-element.elementor-element-986d84b{--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;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-5ef833f{--e-transform-translateX:506px;--e-transform-translateY:35px;margin:-175px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-9bfa0e8{--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;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-0242915{--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;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-0d8c567{--e-transform-translateX:-249px;--e-transform-translateY:-202px;margin:19px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:6;}.elementor-2705 .elementor-element.elementor-element-00fdec1{--e-transform-translateY:-263px;z-index:6;}.elementor-2705 .elementor-element.elementor-element-00fdec1 .elementor-heading-title{font-family:"Arial", Sans-serif;font-size:45px;font-weight:600;letter-spacing:2.4px;color:#FFFFFF;}.elementor-2705 .elementor-element.elementor-element-d62bd3b{--e-transform-translateX:19px;--e-transform-translateY:-336px;z-index:6;}.elementor-2705 .elementor-element.elementor-element-3595798{--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;--margin-top:-14px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-86dc82a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-114px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-db77977{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:2px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-db77977.e-con{--e-con-transform-translateY:193px;}.elementor-2705 .elementor-element.elementor-element-6296759{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a2b57d7{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-27b8a78{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-dd1e34f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-1d86017{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-34a757e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-9e493fc{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c4ad761{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-68cef31{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e75409a{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-db7520b{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4b6816a{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-4b6816a.e-con{--e-con-transform-translateY:97px;}.elementor-2705 .elementor-element.elementor-element-039d42b{margin:22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-55daf6d{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-14b8427{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-21be95a{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-47e354d{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f7cc286{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a5572fb{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a301d4e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3e62377{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c00332d{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c1f9042{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e5624a5{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-218263c{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f6452c7{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-11996e9{margin:41px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-bb9afc1{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-193ccbc{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-12569c5{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-2c304bc{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f50497c{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-0254841{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-9c0a24f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-ed04c04{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-dbc365f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-6250a18{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b191b31{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b95267e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-5d08edb{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-72079e2{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-72079e2.e-con{--e-con-transform-translateY:97px;}.elementor-2705 .elementor-element.elementor-element-69265ac{margin:22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-030619a{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b6621ff{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3e19db7{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-1b9fe99{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-52fec16{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-78b32b2{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-0689f46{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-5b6f114{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-97f3f62{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-918ec25{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7f1a9be{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4f53b3f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-714930c{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-67b1ca6{margin:41px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-5ccc7a9{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-13f59a5{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-cf5e932{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3bf33cf{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-474ee99{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-ea46bb2{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4abe63d{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-45d21c2{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4dad9ad{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b3f0a41{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4d52ca7{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-31f6c78{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-47874a4{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-501fff2{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-501fff2.e-con{--e-con-transform-translateY:97px;}.elementor-2705 .elementor-element.elementor-element-4f54663{margin:22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a220417{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-43cea8c{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-ac01bc8{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a0a7a15{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b07002e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c871c05{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-2c47dc3{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-af317b0{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-0ba9e4d{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-800a86c{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-345ec96{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-01cf9d7{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7bafbe8{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-7bafbe8.e-con{--e-con-transform-translateY:193px;}.elementor-2705 .elementor-element.elementor-element-e450d05{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b917227{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4a72246{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3b2d300{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-62b6dfc{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-eec08b4{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-6ba3a01{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-6feacf3{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f27b036{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-ed55a48{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c5c50a2{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-bf63e6e{--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;--margin-top:-14px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-830ad08{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-114px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-53a840a{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-53a840a.e-con{--e-con-transform-translateY:97px;}.elementor-2705 .elementor-element.elementor-element-cbeb10b{margin:22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c1b138b{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e057ebd{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e16a378{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-06dc540{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-6933f31{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-129e7af{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-da1b7f4{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-d4cb1c3{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-41f8389{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4d3d43b{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-fc65b3e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3caf4d1{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-bdc65ca{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-668908b{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-cac6b3e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-5d7b996{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f3c9786{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-e1e2825{margin:41px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-41afd0a{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-de7878f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f2f850d{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e8132f8{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-33fb365{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-19cecf8{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-1eb5b86{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c326b98{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-6fdca76{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3f016a7{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-5ecbce5{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e8cae71{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-57ec37c{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a0c6f98{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-d1fc139{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-17fa1f1{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f696807{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b8dfaa0{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-b8dfaa0.e-con{--e-con-transform-translateY:97px;}.elementor-2705 .elementor-element.elementor-element-7b87e12{margin:22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-132f5da{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-cc0ba94{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a158eaf{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c0ddf55{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-db98f57{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-de77e78{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a332d34{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7cc4aa0{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e4620a7{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b1d7165{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7523c64{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-6e251d5{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-4d79b06{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-832055e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-55d601f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a443fcb{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-dc47498{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-7333a38{margin:41px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-baf1922{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7081bf7{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7827a56{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-906dfb3{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-ce4f484{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a41ee5f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-8772f1d{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-ba53e53{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-743aea9{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3a2cd7e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3ae600e{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-17f6282{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-2cab8c0{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-6155c26{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-5b70d74{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7b81bde{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-e1a9c1c{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-a6e7673{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;overflow:visible;}.elementor-2705 .elementor-element.elementor-element-a6e7673.e-con{--e-con-transform-translateY:97px;}.elementor-2705 .elementor-element.elementor-element-62ce23d{margin:22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-eaa8c85{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-def0b4a{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-b68eff0{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-65eb8c1{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c1df2c2{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-7efb97b{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f6c2c29{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-5874cba{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-f3be24b{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-d7006ef{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-8dd5715{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-cbdcd92{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-925bd6f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-3adb986{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-c3b7167{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-cfcdb0f{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2705 .elementor-element.elementor-element-db77977{--width:25%;}.elementor-2705 .elementor-element.elementor-element-4b6816a{--width:25%;}.elementor-2705 .elementor-element.elementor-element-f6452c7{--width:25%;}.elementor-2705 .elementor-element.elementor-element-72079e2{--width:25%;}.elementor-2705 .elementor-element.elementor-element-714930c{--width:25%;}.elementor-2705 .elementor-element.elementor-element-501fff2{--width:25%;}.elementor-2705 .elementor-element.elementor-element-7bafbe8{--width:25%;}.elementor-2705 .elementor-element.elementor-element-53a840a{--width:25%;}.elementor-2705 .elementor-element.elementor-element-f3c9786{--width:25%;}.elementor-2705 .elementor-element.elementor-element-b8dfaa0{--width:25%;}.elementor-2705 .elementor-element.elementor-element-dc47498{--width:25%;}.elementor-2705 .elementor-element.elementor-element-a6e7673{--width:25%;}}@media(max-width:767px){.elementor-2705 .elementor-element.elementor-element-7c84be1 .ue_slider,.elementor-2705 .elementor-element.elementor-element-7c84be1 .ue_slide{height:127px;}.elementor-2705 .elementor-element.elementor-element-0242915{--min-height:0px;}.elementor-2705 .elementor-element.elementor-element-0d8c567{--e-transform-translateX:-139px;--e-transform-translateY:5px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2705 .elementor-element.elementor-element-00fdec1{--e-transform-translateY:-178px;margin:0138px 00px calc(var(--kit-widget-spacing, 0px) + 0px) 015px;}.elementor-2705 .elementor-element.elementor-element-00fdec1 .elementor-heading-title{font-size:25px;}.elementor-2705 .elementor-element.elementor-element-d62bd3b{--e-transform-translateX:67px;--e-transform-translateY:-239px;}.elementor-2705 .elementor-element.elementor-element-bf63e6e{--margin-top:-140px;--margin-bottom:0px;--margin-left:16px;--margin-right:0px;}.elementor-2705 .elementor-element.elementor-element-53a840a{--width:80px;--margin-top:-50px;--margin-bottom:0px;--margin-left:-24px;--margin-right:0px;}.elementor-2705 .elementor-element.elementor-element-f3c9786{--width:80px;}.elementor-2705 .elementor-element.elementor-element-b8dfaa0{--width:80px;--min-height:116px;--margin-top:-119px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;}.elementor-2705 .elementor-element.elementor-element-dc47498{--width:80px;}.elementor-2705 .elementor-element.elementor-element-a6e7673{--width:80px;--margin-top:-50px;--margin-bottom:0px;--margin-left:-14px;--margin-right:0px;}}/* Start custom CSS for image, class: .elementor-element-1ef7df2 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-1ef7df2' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-1ef7df2 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-1ef7df2:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-1ef7df2 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6296759 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6296759' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6296759 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6296759:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-6296759 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a2b57d7 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a2b57d7' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a2b57d7 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a2b57d7:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-a2b57d7 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-27b8a78 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-27b8a78' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-27b8a78 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-27b8a78:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-27b8a78 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-dd1e34f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-dd1e34f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-dd1e34f { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-dd1e34f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-dd1e34f img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1d86017 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-1d86017' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-1d86017 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-1d86017:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-1d86017 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-34a757e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-34a757e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-34a757e { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-34a757e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-34a757e img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9e493fc *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-9e493fc' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-9e493fc { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-9e493fc:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-9e493fc img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c4ad761 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c4ad761' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c4ad761 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c4ad761:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-c4ad761 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-68cef31 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-68cef31' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-68cef31 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-68cef31:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-68cef31 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e75409a *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e75409a' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e75409a { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e75409a:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-e75409a img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-db7520b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-db7520b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-db7520b { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-db7520b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-db7520b img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-039d42b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-039d42b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-039d42b { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-039d42b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-039d42b img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-55daf6d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-55daf6d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-55daf6d { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-55daf6d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-55daf6d img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-14b8427 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-14b8427' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-14b8427 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-14b8427:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-14b8427 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-21be95a *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-21be95a' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-21be95a { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-21be95a:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-21be95a img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-47e354d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-47e354d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-47e354d { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-47e354d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-47e354d img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f7cc286 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-f7cc286' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-f7cc286 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-f7cc286:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-f7cc286 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a5572fb *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a5572fb' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a5572fb { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a5572fb:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-a5572fb img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a301d4e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a301d4e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a301d4e { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a301d4e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-a301d4e img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3e62377 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3e62377' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3e62377 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3e62377:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-3e62377 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c00332d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c00332d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c00332d { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c00332d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-c00332d img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c1f9042 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c1f9042' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c1f9042 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c1f9042:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-c1f9042 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e5624a5 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e5624a5' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e5624a5 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e5624a5:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-e5624a5 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-218263c *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-218263c' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-218263c { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-218263c:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-218263c img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-11996e9 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-11996e9' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-11996e9 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-11996e9:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-11996e9 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-bb9afc1 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-bb9afc1' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-bb9afc1 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-bb9afc1:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-bb9afc1 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-193ccbc *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-193ccbc' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-193ccbc { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-193ccbc:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-193ccbc img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-12569c5 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-12569c5' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-12569c5 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-12569c5:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-12569c5 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-2c304bc *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-2c304bc' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-2c304bc { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-2c304bc:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-2c304bc img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f50497c *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-f50497c' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-f50497c { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-f50497c:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-f50497c img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-0254841 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-0254841' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-0254841 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-0254841:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-0254841 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9c0a24f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-9c0a24f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-9c0a24f { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-9c0a24f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-9c0a24f img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ed04c04 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-ed04c04' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-ed04c04 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-ed04c04:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-ed04c04 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-dbc365f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-dbc365f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-dbc365f { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-dbc365f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-dbc365f img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6250a18 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6250a18' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6250a18 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6250a18:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-6250a18 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b191b31 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b191b31' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b191b31 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b191b31:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-b191b31 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b95267e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b95267e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b95267e { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b95267e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-b95267e img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5d08edb *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-5d08edb' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-5d08edb { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-5d08edb:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-5d08edb img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-69265ac *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-69265ac' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-69265ac { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-69265ac:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-69265ac img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-030619a *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-030619a' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-030619a { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-030619a:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-030619a img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b6621ff *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b6621ff' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b6621ff { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b6621ff:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-b6621ff img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3e19db7 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3e19db7' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3e19db7 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3e19db7:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-3e19db7 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1b9fe99 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-1b9fe99' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-1b9fe99 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-1b9fe99:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-1b9fe99 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-52fec16 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-52fec16' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-52fec16 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-52fec16:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-52fec16 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78b32b2 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-78b32b2' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-78b32b2 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-78b32b2:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-78b32b2 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-0689f46 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-0689f46' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-0689f46 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-0689f46:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-0689f46 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5b6f114 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-5b6f114' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-5b6f114 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-5b6f114:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-5b6f114 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-97f3f62 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-97f3f62' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-97f3f62 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-97f3f62:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-97f3f62 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-918ec25 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-918ec25' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-918ec25 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-918ec25:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-918ec25 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7f1a9be *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7f1a9be' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7f1a9be { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7f1a9be:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-7f1a9be img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4f53b3f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4f53b3f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4f53b3f { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4f53b3f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-4f53b3f img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-67b1ca6 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-67b1ca6' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-67b1ca6 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-67b1ca6:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-67b1ca6 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5ccc7a9 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-5ccc7a9' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-5ccc7a9 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-5ccc7a9:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-5ccc7a9 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-13f59a5 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-13f59a5' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-13f59a5 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-13f59a5:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-13f59a5 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-cf5e932 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-cf5e932' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-cf5e932 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-cf5e932:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-cf5e932 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3bf33cf *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3bf33cf' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3bf33cf { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3bf33cf:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-3bf33cf img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-474ee99 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-474ee99' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-474ee99 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-474ee99:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-474ee99 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ea46bb2 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-ea46bb2' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-ea46bb2 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-ea46bb2:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-ea46bb2 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4abe63d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4abe63d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4abe63d { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4abe63d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-4abe63d img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-45d21c2 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-45d21c2' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-45d21c2 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-45d21c2:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-45d21c2 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4dad9ad *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4dad9ad' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4dad9ad { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4dad9ad:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-4dad9ad img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b3f0a41 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b3f0a41' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b3f0a41 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b3f0a41:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-b3f0a41 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4d52ca7 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4d52ca7' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4d52ca7 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4d52ca7:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-4d52ca7 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-31f6c78 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-31f6c78' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-31f6c78 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-31f6c78:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-31f6c78 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-47874a4 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-47874a4' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-47874a4 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-47874a4:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-47874a4 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4f54663 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4f54663' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4f54663 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4f54663:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-4f54663 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a220417 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a220417' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a220417 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a220417:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-a220417 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-43cea8c *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-43cea8c' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-43cea8c { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-43cea8c:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-43cea8c img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ac01bc8 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-ac01bc8' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-ac01bc8 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-ac01bc8:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-ac01bc8 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a0a7a15 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a0a7a15' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a0a7a15 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a0a7a15:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-a0a7a15 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b07002e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b07002e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b07002e { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b07002e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-b07002e img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c871c05 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c871c05' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c871c05 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c871c05:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-c871c05 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-2c47dc3 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-2c47dc3' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-2c47dc3 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-2c47dc3:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-2c47dc3 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-af317b0 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-af317b0' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-af317b0 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-af317b0:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-af317b0 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-0ba9e4d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-0ba9e4d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-0ba9e4d { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-0ba9e4d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-0ba9e4d img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-800a86c *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-800a86c' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-800a86c { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-800a86c:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-800a86c img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-345ec96 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-345ec96' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-345ec96 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-345ec96:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-345ec96 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-01cf9d7 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-01cf9d7' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-01cf9d7 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-01cf9d7:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-01cf9d7 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-442f6ce *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-442f6ce' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-442f6ce { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-442f6ce:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-442f6ce img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e450d05 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e450d05' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e450d05 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e450d05:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-e450d05 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b917227 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b917227' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b917227 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b917227:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-b917227 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4a72246 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4a72246' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4a72246 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4a72246:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-4a72246 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3b2d300 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3b2d300' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3b2d300 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3b2d300:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-3b2d300 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-62b6dfc *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-62b6dfc' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-62b6dfc { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-62b6dfc:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-62b6dfc img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-eec08b4 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-eec08b4' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-eec08b4 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-eec08b4:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-eec08b4 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ba3a01 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6ba3a01' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6ba3a01 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6ba3a01:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-6ba3a01 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6feacf3 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6feacf3' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6feacf3 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6feacf3:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-6feacf3 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f27b036 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-f27b036' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-f27b036 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-f27b036:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-f27b036 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ed55a48 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-ed55a48' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-ed55a48 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-ed55a48:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-ed55a48 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c5c50a2 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c5c50a2' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c5c50a2 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c5c50a2:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the rounded container */ .elementor-2705 .elementor-element.elementor-element-c5c50a2 img { display: block; width: 100%; height: auto; border-radius: 20px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-cbeb10b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-cbeb10b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-cbeb10b { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-cbeb10b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-cbeb10b img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c1b138b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c1b138b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c1b138b { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c1b138b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-c1b138b img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e057ebd *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e057ebd' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e057ebd { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e057ebd:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-e057ebd img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e16a378 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e16a378' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e16a378 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e16a378:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-e16a378 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-06dc540 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-06dc540' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-06dc540 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-06dc540:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-06dc540 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6933f31 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6933f31' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6933f31 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6933f31:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-6933f31 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-129e7af *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-129e7af' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-129e7af { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-129e7af:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-129e7af img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-da1b7f4 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-da1b7f4' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-da1b7f4 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-da1b7f4:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-da1b7f4 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-d4cb1c3 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-d4cb1c3' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-d4cb1c3 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-d4cb1c3:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-d4cb1c3 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-41f8389 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-41f8389' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-41f8389 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-41f8389:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-41f8389 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4d3d43b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4d3d43b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4d3d43b { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4d3d43b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-4d3d43b img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-fc65b3e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-fc65b3e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-fc65b3e { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-fc65b3e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-fc65b3e img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3caf4d1 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3caf4d1' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3caf4d1 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3caf4d1:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-3caf4d1 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-bdc65ca *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-bdc65ca' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-bdc65ca { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-bdc65ca:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-bdc65ca img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-668908b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-668908b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-668908b { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-668908b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-668908b img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-cac6b3e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-cac6b3e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-cac6b3e { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-cac6b3e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-cac6b3e img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5d7b996 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-5d7b996' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-5d7b996 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-5d7b996:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-5d7b996 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e1e2825 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e1e2825' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e1e2825 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e1e2825:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-e1e2825 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-41afd0a *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-41afd0a' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-41afd0a { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-41afd0a:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-41afd0a img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-de7878f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-de7878f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-de7878f { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-de7878f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-de7878f img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f2f850d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-f2f850d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-f2f850d { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-f2f850d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-f2f850d img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e8132f8 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e8132f8' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e8132f8 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e8132f8:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-e8132f8 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-33fb365 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-33fb365' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-33fb365 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-33fb365:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-33fb365 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-19cecf8 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-19cecf8' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-19cecf8 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-19cecf8:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-19cecf8 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1eb5b86 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-1eb5b86' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-1eb5b86 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-1eb5b86:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-1eb5b86 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c326b98 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c326b98' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c326b98 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c326b98:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-c326b98 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6fdca76 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6fdca76' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6fdca76 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6fdca76:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-6fdca76 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3f016a7 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3f016a7' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3f016a7 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3f016a7:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-3f016a7 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5ecbce5 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-5ecbce5' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-5ecbce5 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-5ecbce5:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-5ecbce5 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e8cae71 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e8cae71' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e8cae71 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e8cae71:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-e8cae71 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-57ec37c *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-57ec37c' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-57ec37c { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-57ec37c:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-57ec37c img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a0c6f98 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a0c6f98' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a0c6f98 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a0c6f98:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-a0c6f98 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-d1fc139 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-d1fc139' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-d1fc139 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-d1fc139:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-d1fc139 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-17fa1f1 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-17fa1f1' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-17fa1f1 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-17fa1f1:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-17fa1f1 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f696807 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-f696807' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-f696807 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-f696807:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-f696807 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7b87e12 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7b87e12' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7b87e12 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7b87e12:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7b87e12 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-132f5da *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-132f5da' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-132f5da { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-132f5da:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-132f5da img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-cc0ba94 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-cc0ba94' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-cc0ba94 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-cc0ba94:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-cc0ba94 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a158eaf *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a158eaf' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a158eaf { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a158eaf:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-a158eaf img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c0ddf55 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c0ddf55' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c0ddf55 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c0ddf55:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-c0ddf55 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-db98f57 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-db98f57' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-db98f57 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-db98f57:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-db98f57 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-de77e78 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-de77e78' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-de77e78 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-de77e78:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-de77e78 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a332d34 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a332d34' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a332d34 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a332d34:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-a332d34 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7cc4aa0 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7cc4aa0' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7cc4aa0 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7cc4aa0:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7cc4aa0 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e4620a7 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e4620a7' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e4620a7 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e4620a7:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-e4620a7 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b1d7165 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b1d7165' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b1d7165 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b1d7165:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-b1d7165 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7523c64 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7523c64' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7523c64 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7523c64:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7523c64 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6e251d5 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6e251d5' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6e251d5 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6e251d5:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-6e251d5 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4d79b06 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-4d79b06' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-4d79b06 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-4d79b06:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-4d79b06 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-832055e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-832055e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-832055e { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-832055e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-832055e img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-55d601f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-55d601f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-55d601f { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-55d601f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-55d601f img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a443fcb *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a443fcb' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a443fcb { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a443fcb:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-a443fcb img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7333a38 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7333a38' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7333a38 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7333a38:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7333a38 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-baf1922 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-baf1922' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-baf1922 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-baf1922:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-baf1922 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7081bf7 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7081bf7' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7081bf7 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7081bf7:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7081bf7 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7827a56 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7827a56' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7827a56 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7827a56:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7827a56 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-906dfb3 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-906dfb3' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-906dfb3 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-906dfb3:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-906dfb3 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce4f484 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-ce4f484' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-ce4f484 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-ce4f484:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-ce4f484 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a41ee5f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-a41ee5f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-a41ee5f { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-a41ee5f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-a41ee5f img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8772f1d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-8772f1d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-8772f1d { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-8772f1d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-8772f1d img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ba53e53 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-ba53e53' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-ba53e53 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-ba53e53:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-ba53e53 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-743aea9 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-743aea9' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-743aea9 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-743aea9:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-743aea9 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3a2cd7e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3a2cd7e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3a2cd7e { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3a2cd7e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-3a2cd7e img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3ae600e *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3ae600e' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3ae600e { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3ae600e:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-3ae600e img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-17f6282 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-17f6282' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-17f6282 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-17f6282:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-17f6282 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-2cab8c0 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-2cab8c0' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-2cab8c0 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-2cab8c0:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-2cab8c0 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6155c26 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-6155c26' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-6155c26 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-6155c26:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-6155c26 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5b70d74 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-5b70d74' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-5b70d74 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-5b70d74:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-5b70d74 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7b81bde *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7b81bde' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7b81bde { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7b81bde:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7b81bde img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e1a9c1c *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-e1a9c1c' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-e1a9c1c { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-e1a9c1c:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-e1a9c1c img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-62ce23d *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-62ce23d' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-62ce23d { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-62ce23d:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-62ce23d img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-eaa8c85 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-eaa8c85' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-eaa8c85 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-eaa8c85:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-eaa8c85 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-def0b4a *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-def0b4a' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-def0b4a { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-def0b4a:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-def0b4a img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b68eff0 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-b68eff0' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-b68eff0 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-b68eff0:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-b68eff0 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-65eb8c1 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-65eb8c1' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-65eb8c1 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-65eb8c1:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-65eb8c1 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c1df2c2 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c1df2c2' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c1df2c2 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c1df2c2:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-c1df2c2 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-7efb97b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-7efb97b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-7efb97b { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-7efb97b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-7efb97b img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f6c2c29 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-f6c2c29' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-f6c2c29 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-f6c2c29:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-f6c2c29 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-5874cba *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-5874cba' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-5874cba { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-5874cba:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-5874cba img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f3be24b *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-f3be24b' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-f3be24b { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-f3be24b:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-f3be24b img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-d7006ef *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-d7006ef' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-d7006ef { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-d7006ef:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-d7006ef img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8dd5715 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-8dd5715' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-8dd5715 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-8dd5715:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-8dd5715 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-cbdcd92 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-cbdcd92' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-cbdcd92 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-cbdcd92:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-cbdcd92 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-925bd6f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-925bd6f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-925bd6f { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-925bd6f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-925bd6f img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3adb986 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-3adb986' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-3adb986 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-3adb986:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-3adb986 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c3b7167 *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-c3b7167' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-c3b7167 { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-c3b7167:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-c3b7167 img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-cfcdb0f *//* Define the keyframe animation for the sequential glow change */ @keyframes sequential-glow { /* Color steps */ 0% { box-shadow: 0 0 15px 5px #FCDC00; } 8% { box-shadow: 0 0 15px 5px #FBC519; } 28% { box-shadow: 0 0 15px 5px #FA954E; } 50% { box-shadow: 0 0 15px 5px #F96E79; } 70% { box-shadow: 0 0 15px 5px #F95397; } 88% { box-shadow: 0 0 15px 5px #F83CB0; } 92% { box-shadow: 0 0 15px 5px #7237BD; } /* End State (100%): New transparent purple color */ 100% { box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.01); } } /* Normal state of the main image wrapper */ /* Use '.elementor-2705 .elementor-element.elementor-element-cfcdb0f' to target the specific widget where you put the Custom CSS */ .elementor-2705 .elementor-element.elementor-element-cfcdb0f { position: relative; overflow: hidden; /* Changed from 20px to 0px for sharp corners */ border-radius: 10px; box-shadow: 0 0 0px rgba(0, 0, 0, 0); /* Initial state: no glow */ /* SMOOTH EXIT & DELAY: */ transition: box-shadow 0.3s ease; /* Controls the fade out speed */ transition-delay: 0.5s; /* The delay *after* mouse leaves before fade out begins */ } /* Hover state: Start the single-cycle animation */ .elementor-2705 .elementor-element.elementor-element-cfcdb0f:hover { /* Animation starts immediately on hover (delay overridden) */ animation: sequential-glow 0.8s linear forwards; transition-delay: 0s; /* No delay when hovering IN */ } /* Ensure the actual image stays within the sharp container */ .elementor-2705 .elementor-element.elementor-element-cfcdb0f img { display: block; width: 100%; height: auto; /* Changed from 20px to 0px for sharp corners */ border-radius: 0px; }/* End custom CSS */