.elementor-1795 .elementor-element.elementor-element-310bf9c{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-1795 .elementor-element.elementor-element-d921d56{--display:flex;--overflow:hidden;--border-radius:40px 40px 40px 40px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-1795 .elementor-element.elementor-element-0d650cc{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-1795 .elementor-element.elementor-element-e1ee60e img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-e0eae74 img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-97b8d06{--display:flex;}.elementor-1795 .elementor-element.elementor-element-50f9f72 img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-7e26189 img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-1b83dd2{--display:flex;}.elementor-1795 .elementor-element.elementor-element-c5fd026 img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-ff07a97 img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-fd079e5{--display:flex;}.elementor-1795 .elementor-element.elementor-element-2578e6e img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-63f2d59 img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-de986cc{--display:flex;}.elementor-1795 .elementor-element.elementor-element-2c2809c img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-938227a img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-90baa29{--display:flex;}.elementor-1795 .elementor-element.elementor-element-4c96062 img{width:100%;max-width:100%;}.elementor-1795 .elementor-element.elementor-element-4644a25 img{width:100%;max-width:100%;}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(min-width:768px){.elementor-1795 .elementor-element.elementor-element-310bf9c{--content-width:100vw;}}@media(max-width:767px){.elementor-1795 .elementor-element.elementor-element-310bf9c{--content-width:100vw;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-1795 .elementor-element.elementor-element-d921d56{--border-radius:24px 24px 24px 24px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-1795 .elementor-element.elementor-element-e0eae74 img{width:100%;max-width:100%;height:100%;object-fit:cover;}.elementor-1795 .elementor-element.elementor-element-7e26189 img{width:100%;max-width:100%;height:100%;object-fit:cover;}.elementor-1795 .elementor-element.elementor-element-ff07a97 img{width:100%;max-width:100%;height:100%;object-fit:cover;}.elementor-1795 .elementor-element.elementor-element-63f2d59 img{width:100%;max-width:100%;height:100%;object-fit:cover;}.elementor-1795 .elementor-element.elementor-element-938227a img{width:100%;max-width:100%;height:100%;object-fit:cover;}.elementor-1795 .elementor-element.elementor-element-4644a25 img{width:100%;max-width:100%;height:100%;object-fit:cover;}}/* Start custom CSS for container, class: .elementor-element-310bf9c */.animation-sec{
    position: relative;
    width: 90vw;
    height: 100vh;
    min-height: 600px;
}
.layers{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
    backface-visibility: hidden;

}
.img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
#dirty-house-desktop,
  #clean-house-desktop,
  #virus-desktop,
  #spray-desktop,
  #splash-desktop,
  #logo-desktop {
    display: block;
  }
@media screen and (max-width: 600px) {
    #dirty-house-desktop,
    #clean-house-desktop,
    #virus-desktop,
    #spray-desktop,
    #splash-desktop,
    #logo-desktop {
      display: none;
    }
    #dirty-house-mobile,
    #clean-house-mobile,
    #virus-mobile,
    #spray-mobile,
    #splash-mobile,
    #logo-mobile {
      display: block;
    }
}
.dirty-house{
    z-index: 1;
}
.clean-house{
    z-index: 2;
    opacity: 0;
    animation: cleanReveal 2s ease-in-out forwards;
    animation-delay: 5s;
}
@keyframes cleanReveal{
    from{opacity: 0;}
    to{opacity: 1;}
}
.virus{
    z-index: 3;
    animation: 
    virusFloat 1s ease-in-out infinite,
    virusExit 1s ease-in forwards;
    animation-delay: 0s, 5s;
    
}
@keyframes virusFloat{
    0%{
        transform: translate(0,10px);
    }
    
    50%{
        transform: translate(0,50px);
    }

    100%{
        transform: translate(0,10px);
    }
}
  @keyframes virusExit {
    from {
      transform: translate(0, 0) rotate(0deg) scale(1);
      opacity: 1;
    }
    to {
      transform: translate(140%, -140%) rotate(35deg) scale(.6);
      opacity: 0;
      visibility: hidden;
    }
}
.spray-entry{
    z-index: 4;
    transform: translate(-140%,140%);
    opacity: 0;
    animation: sprayEnter 1s cubic-bezier(.25,.8,.35,1) forwards;
    animation-delay: 3s;
}
@keyframes sprayEnter{
    0%{
        transform: translate(-140%,140%);
        opacity: 0;
    }
    60%{
        opacity: 1;
    }
    100%{
        transform: translate(0,0);
        opacity: 1;
    }
}
.splash{
    z-index: 5;
    opacity: 0;
    animation: splashSpray 2s ease-in forwards;
    animation-delay: 4s;
}
@keyframes splashSpray{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.logo{
    z-index: 6;
    opacity: 0;
    animation: logoReveal 1s ease-out forwards;
    animation-delay: 7s;
}
@keyframes logoReveal{
    from{
        opacity: 0;
        transform: scale(.94);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
@media screen and (max-width: 600px) {
        .animation-sec{
            width: 95vw;

    }
    .spray-entry {
      animation-name: sprayEnterMobile;
    }
    @keyframes sprayEnterMobile {
        
      0%   { transform: translate(-90%, 90%); opacity: 0; }
      60%  { opacity: 1; }
      100% { transform: translate(0, 0);      opacity: 1; }
    }
    .virus{
        animation-name: virusFloatMobile, virusExitMobile;
    }
    @keyframes virusFloatMobile {
        0%{
        transform: translate(0,10px);
    }
    
    50%{
        transform: translate(0,-10px);
    }

    100%{
        transform: translate(0,10px);
    }
    }
    @keyframes virusExitMobile {
        from {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
      }
      to {
        transform: translate(90%, -90%) rotate(30deg) scale(.6);
        opacity: 0;
        visibility: hidden;
      }
    }
}
@media (prefers-reduced-motion: reduce) {
    .virus, .spray-entry, .splash, .clean-house, .logo {
        animation-duration: .01ms !important;
        animation-iteration-count: 1!important;
    }
    .virus { opacity:0; visibility: hidden; }
    .clean-house, .logo, .splash { opacity: 1;}
    .spray-entry{ transform: translate(0, 0); opacity:1; }
}/* End custom CSS */