.elementor-20 .elementor-element.elementor-element-fe1a0c1{--display:flex;--min-height:402px;--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;--border-radius:0px 0px 0px 0px;}.elementor-20 .elementor-element.elementor-element-fe1a0c1:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-fe1a0c1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://drive.webleo.xyz/theemkvibe/header.png");background-size:cover;}.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-20 .elementor-element.elementor-element-9a9f157 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:77px;font-weight:700;color:#FFFFFF;}.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-20 .elementor-element.elementor-element-a99d1e4{width:100%;max-width:100%;transition:background 0.1s;text-align:left;font-family:"Roboto", Sans-serif;font-size:63px;font-weight:400;text-shadow:0px 0px 0px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-a99d1e4.elementor-element{--align-self:flex-start;}.elementor-20 .elementor-element.elementor-element-3227cc3{--display:grid;--e-con-grid-template-columns:repeat(6, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;--justify-items:start;--align-items:start;--overflow:hidden;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-3227cc3.e-con{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:1;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-20 .elementor-element.elementor-element-a1fc27a .elementor-button{background-color:#F66249;font-family:"Rock Salt", Sans-serif;font-size:32px;font-weight:bold;text-transform:capitalize;font-style:oblique;border-radius:23px 23px 23px 23px;}.elementor-20 .elementor-element.elementor-element-a1fc27a{width:var( --container-widget-width, 44% );max-width:44%;--container-widget-width:44%;--container-widget-flex-grow:0;}.elementor-20 .elementor-element.elementor-element-e34a8fb .elementor-button{background-color:#0004017D;font-family:"Rock Salt", Sans-serif;font-size:27px;font-weight:500;border-radius:22px 22px 22px 22px;}.elementor-20 .elementor-element.elementor-element-e9fd454 .elementor-heading-title{color:#6EC1E400;}.elementor-20 .elementor-element.elementor-element-6a32994 .elementor-heading-title{color:#6EC1E400;}.elementor-20 .elementor-element.elementor-element-16b1544 .elementor-heading-title{color:#6EC1E400;}.elementor-20 .elementor-element.elementor-element-06ca51f .elementor-heading-title{color:#6EC1E400;}.elementor-20 .elementor-element.elementor-element-e55e565{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-e55e565:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-e55e565 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F66249;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-20 .elementor-element.elementor-element-d9caec3 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-20 .elementor-element.elementor-element-d9caec3{--icon-box-icon-margin:15px;}.elementor-20 .elementor-element.elementor-element-d9caec3.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-d9caec3.elementor-view-framed .elementor-icon, .elementor-20 .elementor-element.elementor-element-d9caec3.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-d9caec3 .elementor-icon{font-size:83px;}.elementor-20 .elementor-element.elementor-element-d9caec3 .elementor-icon-box-title{color:#FBFEFF;}.elementor-20 .elementor-element.elementor-element-d9caec3 .elementor-icon-box-description{color:#FFF8F8;}.elementor-20 .elementor-element.elementor-element-b1ee8da .elementor-icon-box-wrapper{align-items:center;}.elementor-20 .elementor-element.elementor-element-b1ee8da{--icon-box-icon-margin:15px;}.elementor-20 .elementor-element.elementor-element-b1ee8da.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-b1ee8da.elementor-view-framed .elementor-icon, .elementor-20 .elementor-element.elementor-element-b1ee8da.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-b1ee8da .elementor-icon{font-size:84px;}.elementor-20 .elementor-element.elementor-element-b1ee8da .elementor-icon-box-title{color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-b1ee8da .elementor-icon-box-description{color:#FFFEFE;}.elementor-20 .elementor-element.elementor-element-c65f4a0 .elementor-icon-box-wrapper{align-items:center;}.elementor-20 .elementor-element.elementor-element-c65f4a0{--icon-box-icon-margin:15px;}.elementor-20 .elementor-element.elementor-element-c65f4a0.elementor-view-stacked .elementor-icon{background-color:#FCFEFF;}.elementor-20 .elementor-element.elementor-element-c65f4a0.elementor-view-framed .elementor-icon, .elementor-20 .elementor-element.elementor-element-c65f4a0.elementor-view-default .elementor-icon{fill:#FCFEFF;color:#FCFEFF;border-color:#FCFEFF;}.elementor-20 .elementor-element.elementor-element-c65f4a0 .elementor-icon{font-size:83px;}.elementor-20 .elementor-element.elementor-element-c65f4a0 .elementor-icon-box-title{color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-c65f4a0 .elementor-icon-box-description{color:#FFFCFC;}.elementor-20 .elementor-element.elementor-element-b0e652b{--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;}.elementor-20 .elementor-element.elementor-element-b0e652b:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-b0e652b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#54595F;}.elementor-20 .elementor-element.elementor-element-9094c20{width:100%;max-width:100%;text-align:center;}.elementor-20 .elementor-element.elementor-element-9094c20 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-0d5ab2d{--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;}.elementor-20 .elementor-element.elementor-element-03eb676{--display:flex;--min-height:238px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--background-transition:0.3s;--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-03eb676:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-03eb676 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://theemkvibe.com/wp-content/uploads/2025/08/fashion-products.png");background-position:center center;background-size:cover;}.elementor-20 .elementor-element.elementor-element-03eb676:hover{background-image:url("https://theemkvibe.com/wp-content/uploads/2025/08/fashion-products.png");--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-03eb676::before, .elementor-20 .elementor-element.elementor-element-03eb676 > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-03eb676 > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-03eb676 > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-03eb676 > .e-con-inner > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-03eb676 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-03eb676:hover::before, .elementor-20 .elementor-element.elementor-element-03eb676:hover > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-03eb676:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-03eb676 > .elementor-background-slideshow:hover::before, .elementor-20 .elementor-element.elementor-element-03eb676 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-03eb676, .elementor-20 .elementor-element.elementor-element-03eb676::before{--overlay-transition:2.9s;}.elementor-20 .elementor-element.elementor-element-3202def{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-519372c .elementor-heading-title{color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-8e4c81d{--display:flex;--min-height:238px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--background-transition:0.3s;--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-8e4c81d:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-8e4c81d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://theemkvibe.com/wp-content/uploads/2025/08/skincare-products.png");background-position:center center;background-size:cover;}.elementor-20 .elementor-element.elementor-element-8e4c81d::before, .elementor-20 .elementor-element.elementor-element-8e4c81d > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-8e4c81d > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-8e4c81d > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-8e4c81d > .e-con-inner > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-8e4c81d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-8e4c81d:hover::before, .elementor-20 .elementor-element.elementor-element-8e4c81d:hover > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-8e4c81d:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-8e4c81d > .elementor-background-slideshow:hover::before, .elementor-20 .elementor-element.elementor-element-8e4c81d > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-8e4c81d:hover{--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-8e4c81d, .elementor-20 .elementor-element.elementor-element-8e4c81d::before{--overlay-transition:2.9s;}.elementor-20 .elementor-element.elementor-element-ce85f24{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-168668a .elementor-heading-title{color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-2beda3f{--display:flex;--min-height:238px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--background-transition:0.3s;--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-2beda3f:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-2beda3f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://theemkvibe.com/wp-content/uploads/2025/08/men-fashion-products.png");background-position:center center;background-size:cover;}.elementor-20 .elementor-element.elementor-element-2beda3f::before, .elementor-20 .elementor-element.elementor-element-2beda3f > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-2beda3f > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-2beda3f > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-2beda3f > .e-con-inner > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-2beda3f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-2beda3f:hover::before, .elementor-20 .elementor-element.elementor-element-2beda3f:hover > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-2beda3f:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-2beda3f > .elementor-background-slideshow:hover::before, .elementor-20 .elementor-element.elementor-element-2beda3f > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-2beda3f:hover{--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-2beda3f, .elementor-20 .elementor-element.elementor-element-2beda3f::before{--overlay-transition:2.9s;}.elementor-20 .elementor-element.elementor-element-ec42540{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-b4f97ae .elementor-heading-title{color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-fda09b7{--display:flex;--min-height:238px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--background-transition:0.3s;--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-fda09b7:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-fda09b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://theemkvibe.com/wp-content/uploads/2025/08/women-fashion-products.png");background-position:center center;background-size:cover;}.elementor-20 .elementor-element.elementor-element-fda09b7::before, .elementor-20 .elementor-element.elementor-element-fda09b7 > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-fda09b7 > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-fda09b7 > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-fda09b7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-20 .elementor-element.elementor-element-fda09b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-fda09b7:hover::before, .elementor-20 .elementor-element.elementor-element-fda09b7:hover > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-fda09b7:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-20 .elementor-element.elementor-element-fda09b7 > .elementor-background-slideshow:hover::before, .elementor-20 .elementor-element.elementor-element-fda09b7 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-20 .elementor-element.elementor-element-fda09b7:hover{--overlay-opacity:0.5;}.elementor-20 .elementor-element.elementor-element-fda09b7, .elementor-20 .elementor-element.elementor-element-fda09b7::before{--overlay-transition:2.9s;}.elementor-20 .elementor-element.elementor-element-0383ce1{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-fa741c0 .elementor-heading-title{color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-9455758{--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;}.elementor-20 .elementor-element.elementor-element-9455758:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-9455758 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-20 .elementor-element.elementor-element-60124e9{width:100%;max-width:100%;text-align:center;}.elementor-20 .elementor-element.elementor-element-60124e9 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-8877787{--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;}.elementor-20 .elementor-element.elementor-element-2eef5bd{width:100%;max-width:100%;}.elementor-20 .elementor-element.elementor-element-408e262{--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;}.elementor-20 .elementor-element.elementor-element-8b66c64{--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;}.elementor-20 .elementor-element.elementor-element-8b66c64:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-8b66c64 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-20 .elementor-element.elementor-element-56a3a46{width:100%;max-width:100%;text-align:center;}.elementor-20 .elementor-element.elementor-element-56a3a46 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-f4e8200{--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;}.elementor-20 .elementor-element.elementor-element-ca9abc4{width:100%;max-width:100%;}.elementor-20 .elementor-element.elementor-element-4914692{--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;}.elementor-20 .elementor-element.elementor-element-2c128e6{--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;}.elementor-20 .elementor-element.elementor-element-2c128e6:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-2c128e6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-20 .elementor-element.elementor-element-a99b81a{width:100%;max-width:100%;text-align:center;}.elementor-20 .elementor-element.elementor-element-a99b81a .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-09710fb{--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;}.elementor-20 .elementor-element.elementor-element-0858aa2{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-20 .elementor-element.elementor-element-fc40acf{--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;}.elementor-20 .elementor-element.elementor-element-671c0f8{--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;}.elementor-20 .elementor-element.elementor-element-671c0f8:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-671c0f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-20 .elementor-element.elementor-element-d7c503d{width:100%;max-width:100%;text-align:center;}.elementor-20 .elementor-element.elementor-element-d7c503d .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-241f045{--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;}.elementor-20 .elementor-element.elementor-element-85560f2{width:100%;max-width:100%;}.elementor-20 .elementor-element.elementor-element-85560f2.elementor-element{--align-self:center;}.elementor-20 .elementor-element.elementor-element-bb6118b{--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;}.elementor-20 .elementor-element.elementor-element-79baee5{--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;}.elementor-20 .elementor-element.elementor-element-79baee5:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-79baee5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-20 .elementor-element.elementor-element-f442a0c{width:100%;max-width:100%;text-align:center;}.elementor-20 .elementor-element.elementor-element-f442a0c .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:#FFFFFF;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-20 .elementor-element.elementor-element-03eb676{--width:25%;}.elementor-20 .elementor-element.elementor-element-8e4c81d{--width:25%;}.elementor-20 .elementor-element.elementor-element-2beda3f{--width:25%;}.elementor-20 .elementor-element.elementor-element-fda09b7{--width:25%;}}@media(max-width:1024px){.elementor-20 .elementor-element.elementor-element-3227cc3{--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-e55e565{--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-3202def{--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-ce85f24{--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-ec42540{--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-0383ce1{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-20 .elementor-element.elementor-element-9a9f157 .elementor-heading-title{font-size:47px;}.elementor-20 .elementor-element.elementor-element-3227cc3{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-a1fc27a{width:100%;max-width:100%;}.elementor-20 .elementor-element.elementor-element-e34a8fb{width:100%;max-width:100%;}.elementor-20 .elementor-element.elementor-element-e55e565{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-d9caec3{width:100%;max-width:100%;}.elementor-20 .elementor-element.elementor-element-9094c20 .elementor-heading-title{font-size:28px;}.elementor-20 .elementor-element.elementor-element-03eb676{--min-height:0px;}.elementor-20 .elementor-element.elementor-element-3202def{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-ce85f24{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-ec42540{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-0383ce1{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20 .elementor-element.elementor-element-60124e9 .elementor-heading-title{font-size:28px;}.elementor-20 .elementor-element.elementor-element-56a3a46 .elementor-heading-title{font-size:36px;}.elementor-20 .elementor-element.elementor-element-a99b81a .elementor-heading-title{font-size:30px;}.elementor-20 .elementor-element.elementor-element-d7c503d .elementor-heading-title{font-size:26px;}.elementor-20 .elementor-element.elementor-element-f442a0c .elementor-heading-title{font-size:29px;}}/* Start custom CSS for button, class: .elementor-element-e34a8fb *//* * CSS Scroll-Linked Animations * * This code block contains various scroll-linked animations. * Apply the corresponding class (e.g., .fade-in, .scroll-up) to an element * to trigger the animation as it enters or exits the viewport. */ /* ---------------------------------- * 1. Rotation Animation * ---------------------------------- */ .rotate-image { animation: rotateOnScroll linear; animation-timeline: view(); animation-range: entry 0% cover 100%; animation-fill-mode: both; will-change: transform; transform-origin: center; } @keyframes rotateOnScroll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ---------------------------------- * 2. Fade and Zoom Animations * ---------------------------------- */ /* Fade In a single element */ .fade-in { animation: fadeIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: opacity; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fade Out a single element */ .fade-out { animation: fadeOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: opacity; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* For single-line headings with a zoom effect */ .fade-text-single { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 100% cover 40%; animation-fill-mode: both; } /* For multi-line content (image + text) */ .fade-text-multi { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 50% cover 40%; animation-fill-mode: both; will-change: opacity, transform; } @keyframes fadeZoomIn { from { opacity: 0; transform: translateY(80px) scale(0.1); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------------------------------- * 3. Directional Scroll Animations * ---------------------------------- */ /* Fade in from the bottom */ .scroll-up { animation: scrollUp linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the top */ .scroll-down { animation: scrollDown linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the left */ .fade-left { animation: fadeLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Fade in from the right */ .fade-right { animation: fadeRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ---------------------------------- * 4. Zoom Animations * ---------------------------------- */ /* Zoom into view */ .zoom-in { animation: zoomIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Zoom out of view */ .zoom-out { animation: zoomOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } } /* ---------------------------------- * 5. Bounce Animations * ---------------------------------- */ /* Bounce in from the bottom */ .bounce-in { animation: bounceIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceIn { 0% { transform: translateY(100px); } 60% { transform: translateY(-20px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } /* Bounce out to the bottom */ .bounce-out { animation: bounceOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes bounceOut { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(20px); opacity: 1; } 40% { transform: translateY(-10px); opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } } /* Bounce in from the left */ .bounce-left { animation: bounceLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceLeft { 0% { transform: translateX(-100px); } 60% { transform: translateX(20px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } /* Bounce in from the right */ .bounce-right { animation: bounceRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceRight { 0% { transform: translateX(100px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* ---------------------------------- * 6. Blur Animation * ---------------------------------- */ /* Seamless smooth blur effect on scroll */ .blur-text { animation: blurOnScroll both ease-in-out; animation-timeline: view(); animation-range: entry 150% cover 80%; animation-fill-mode: both; will-change: filter; } @keyframes blurOnScroll { 0% { filter: blur(20px); opacity: 1; } 20% { filter: blur(5px); } 40% { filter: blur(1px); opacity: 1; } 50% { filter: blur(0px); opacity: 1; } 60% { filter: blur(1px); } 80% { filter: blur(5px); } 100% { filter: blur(20px); opacity: 1; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fe1a0c1 *//* * CSS Scroll-Linked Animations * * This code block contains various scroll-linked animations. * Apply the corresponding class (e.g., .fade-in, .scroll-up) to an element * to trigger the animation as it enters or exits the viewport. */ /* ---------------------------------- * 1. Rotation Animation * ---------------------------------- */ .rotate-image { animation: rotateOnScroll linear; animation-timeline: view(); animation-range: entry 0% cover 100%; animation-fill-mode: both; will-change: transform; transform-origin: center; } @keyframes rotateOnScroll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ---------------------------------- * 2. Fade and Zoom Animations * ---------------------------------- */ /* Fade In a single element */ .fade-in { animation: fadeIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: opacity; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fade Out a single element */ .fade-out { animation: fadeOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: opacity; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* For single-line headings with a zoom effect */ .fade-text-single { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 100% cover 40%; animation-fill-mode: both; } /* For multi-line content (image + text) */ .fade-text-multi { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 50% cover 40%; animation-fill-mode: both; will-change: opacity, transform; } @keyframes fadeZoomIn { from { opacity: 0; transform: translateY(80px) scale(0.1); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------------------------------- * 3. Directional Scroll Animations * ---------------------------------- */ /* Fade in from the bottom */ .scroll-up { animation: scrollUp linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the top */ .scroll-down { animation: scrollDown linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the left */ .fade-left { animation: fadeLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Fade in from the right */ .fade-right { animation: fadeRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ---------------------------------- * 4. Zoom Animations * ---------------------------------- */ /* Zoom into view */ .zoom-in { animation: zoomIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Zoom out of view */ .zoom-out { animation: zoomOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } } /* ---------------------------------- * 5. Bounce Animations * ---------------------------------- */ /* Bounce in from the bottom */ .bounce-in { animation: bounceIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceIn { 0% { transform: translateY(100px); } 60% { transform: translateY(-20px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } /* Bounce out to the bottom */ .bounce-out { animation: bounceOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes bounceOut { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(20px); opacity: 1; } 40% { transform: translateY(-10px); opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } } /* Bounce in from the left */ .bounce-left { animation: bounceLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceLeft { 0% { transform: translateX(-100px); } 60% { transform: translateX(20px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } /* Bounce in from the right */ .bounce-right { animation: bounceRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceRight { 0% { transform: translateX(100px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* ---------------------------------- * 6. Blur Animation * ---------------------------------- */ /* Seamless smooth blur effect on scroll */ .blur-text { animation: blurOnScroll both ease-in-out; animation-timeline: view(); animation-range: entry 150% cover 80%; animation-fill-mode: both; will-change: filter; } @keyframes blurOnScroll { 0% { filter: blur(20px); opacity: 1; } 20% { filter: blur(5px); } 40% { filter: blur(1px); opacity: 1; } 50% { filter: blur(0px); opacity: 1; } 60% { filter: blur(1px); } 80% { filter: blur(5px); } 100% { filter: blur(20px); opacity: 1; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d9caec3 *//* * CSS Scroll-Linked Animations * * This code block contains various scroll-linked animations. * Apply the corresponding class (e.g., .fade-in, .scroll-up) to an element * to trigger the animation as it enters or exits the viewport. */ /* ---------------------------------- * 1. Rotation Animation * ---------------------------------- */ .rotate-image { animation: rotateOnScroll linear; animation-timeline: view(); animation-range: entry 0% cover 100%; animation-fill-mode: both; will-change: transform; transform-origin: center; } @keyframes rotateOnScroll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ---------------------------------- * 2. Fade and Zoom Animations * ---------------------------------- */ /* Fade In a single element */ .fade-in { animation: fadeIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: opacity; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fade Out a single element */ .fade-out { animation: fadeOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: opacity; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* For single-line headings with a zoom effect */ .fade-text-single { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 100% cover 40%; animation-fill-mode: both; } /* For multi-line content (image + text) */ .fade-text-multi { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 50% cover 40%; animation-fill-mode: both; will-change: opacity, transform; } @keyframes fadeZoomIn { from { opacity: 0; transform: translateY(80px) scale(0.1); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------------------------------- * 3. Directional Scroll Animations * ---------------------------------- */ /* Fade in from the bottom */ .scroll-up { animation: scrollUp linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the top */ .scroll-down { animation: scrollDown linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the left */ .fade-left { animation: fadeLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Fade in from the right */ .fade-right { animation: fadeRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ---------------------------------- * 4. Zoom Animations * ---------------------------------- */ /* Zoom into view */ .zoom-in { animation: zoomIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Zoom out of view */ .zoom-out { animation: zoomOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } } /* ---------------------------------- * 5. Bounce Animations * ---------------------------------- */ /* Bounce in from the bottom */ .bounce-in { animation: bounceIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceIn { 0% { transform: translateY(100px); } 60% { transform: translateY(-20px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } /* Bounce out to the bottom */ .bounce-out { animation: bounceOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes bounceOut { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(20px); opacity: 1; } 40% { transform: translateY(-10px); opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } } /* Bounce in from the left */ .bounce-left { animation: bounceLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceLeft { 0% { transform: translateX(-100px); } 60% { transform: translateX(20px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } /* Bounce in from the right */ .bounce-right { animation: bounceRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceRight { 0% { transform: translateX(100px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* ---------------------------------- * 6. Blur Animation * ---------------------------------- */ /* Seamless smooth blur effect on scroll */ .blur-text { animation: blurOnScroll both ease-in-out; animation-timeline: view(); animation-range: entry 150% cover 80%; animation-fill-mode: both; will-change: filter; } @keyframes blurOnScroll { 0% { filter: blur(20px); opacity: 1; } 20% { filter: blur(5px); } 40% { filter: blur(1px); opacity: 1; } 50% { filter: blur(0px); opacity: 1; } 60% { filter: blur(1px); } 80% { filter: blur(5px); } 100% { filter: blur(20px); opacity: 1; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e55e565 *//* * CSS Scroll-Linked Animations * * This code block contains various scroll-linked animations. * Apply the corresponding class (e.g., .fade-in, .scroll-up) to an element * to trigger the animation as it enters or exits the viewport. */ /* ---------------------------------- * 1. Rotation Animation * ---------------------------------- */ .rotate-image { animation: rotateOnScroll linear; animation-timeline: view(); animation-range: entry 0% cover 100%; animation-fill-mode: both; will-change: transform; transform-origin: center; } @keyframes rotateOnScroll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ---------------------------------- * 2. Fade and Zoom Animations * ---------------------------------- */ /* Fade In a single element */ .fade-in { animation: fadeIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: opacity; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fade Out a single element */ .fade-out { animation: fadeOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: opacity; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* For single-line headings with a zoom effect */ .fade-text-single { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 100% cover 40%; animation-fill-mode: both; } /* For multi-line content (image + text) */ .fade-text-multi { animation: fadeZoomIn both; animation-timeline: view(); animation-range: entry 50% cover 40%; animation-fill-mode: both; will-change: opacity, transform; } @keyframes fadeZoomIn { from { opacity: 0; transform: translateY(80px) scale(0.1); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------------------------------- * 3. Directional Scroll Animations * ---------------------------------- */ /* Fade in from the bottom */ .scroll-up { animation: scrollUp linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the top */ .scroll-down { animation: scrollDown linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes scrollDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade in from the left */ .fade-left { animation: fadeLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Fade in from the right */ .fade-right { animation: fadeRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes fadeRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ---------------------------------- * 4. Zoom Animations * ---------------------------------- */ /* Zoom into view */ .zoom-in { animation: zoomIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform, opacity; } @keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Zoom out of view */ .zoom-out { animation: zoomOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } } /* ---------------------------------- * 5. Bounce Animations * ---------------------------------- */ /* Bounce in from the bottom */ .bounce-in { animation: bounceIn linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceIn { 0% { transform: translateY(100px); } 60% { transform: translateY(-20px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } /* Bounce out to the bottom */ .bounce-out { animation: bounceOut linear; animation-timeline: view(); animation-range: exit 0% cover 50%; will-change: transform, opacity; } @keyframes bounceOut { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(20px); opacity: 1; } 40% { transform: translateY(-10px); opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } } /* Bounce in from the left */ .bounce-left { animation: bounceLeft linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceLeft { 0% { transform: translateX(-100px); } 60% { transform: translateX(20px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } /* Bounce in from the right */ .bounce-right { animation: bounceRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceRight { 0% { transform: translateX(100px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* ---------------------------------- * 6. Blur Animation * ---------------------------------- */ /* Seamless smooth blur effect on scroll */ .blur-text { animation: blurOnScroll both ease-in-out; animation-timeline: view(); animation-range: entry 150% cover 80%; animation-fill-mode: both; will-change: filter; } @keyframes blurOnScroll { 0% { filter: blur(20px); opacity: 1; } 20% { filter: blur(5px); } 40% { filter: blur(1px); opacity: 1; } 50% { filter: blur(0px); opacity: 1; } 60% { filter: blur(1px); } 80% { filter: blur(5px); } 100% { filter: blur(20px); opacity: 1; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b0e652b *//* Bounce in from the right */ .bounce-right { animation: bounceRight linear; animation-timeline: view(); animation-range: entry 0% cover 50%; will-change: transform; } @keyframes bounceRight { 0% { transform: translateX(100px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } }/* End custom CSS */