.elementor-2991 .elementor-element.elementor-element-941a74a{--display:flex;--min-height:325px;--z-index:5;}.elementor-2991 .elementor-element.elementor-element-0e3381e{--display:flex;--min-height:213px;--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-2991 .elementor-element.elementor-element-9394bca{--display:flex;--margin-top:361px;--margin-bottom:-685px;--margin-left:0px;--margin-right:0px;}.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-2991 .elementor-element.elementor-element-cd46a3d{text-align:end;}.elementor-2991 .elementor-element.elementor-element-cd46a3d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:140px;font-weight:800;color:var( --e-global-color-df9f6e2 );}.elementor-2991 .elementor-element.elementor-element-f632da0{text-align:end;}.elementor-2991 .elementor-element.elementor-element-f632da0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:87px;font-weight:800;color:var( --e-global-color-45a9371 );}.elementor-2991 .elementor-element.elementor-element-3f22d18{--display:flex;--min-height:325px;--z-index:5;}/* Start custom CSS for container, class: .elementor-element-0e3381e */.whole{
    position: relative;
    transition: 1s;
}


.banner {
    height: 100vh;
    overflow: hidden;
    position: relative;
    
}

.banner .product {
    width: 500px;
    height: 500px;
    position: absolute;
    bottom: 170px;
    left: 50%;
    transform: translatex(-50%);
    z-index: 1;
    transition: 0.7s;
    display: flex;
    
}



.banner .product .soda {
    
    background: 
        url(https://koddosy.com/wp-content/uploads/2025/02/before.png)-630px,
        url(https://koddosy.com/wp-content/uploads/2025/02/mockup.png);
    background-size: auto 100%;
    width: 280px;
    aspect-ratio: 2/4;    
    
    
    background-blend-mode: multiply;
    mask-image: url(https://koddosy.com/wp-content/uploads/2025/02/mockup.png);
        mask-size: auto 100%;
        
    transition: 1s ease-in-out;
    position: absolute;
    left: 50%;
        transform: translatex(-50%);
      
    
    
    
    
}



.banner .product .soda:hover {
    
    background: 
        url(https://koddosy.com/wp-content/uploads/2025/02/after.png)-1650px,
        url(https://koddosy.com/wp-content/uploads/2025/02/mockup.png);
    background-size: auto 100%;
    width: 280px;
    aspect-ratio: 2/4;    
    
    
    background-blend-mode: multiply;
    mask-image: url(https://koddosy.com/wp-content/uploads/2025/02/mockup.png);
        mask-size: auto 100%;

    
    
}




.banner .product .soda2 {
    
    background: 
        url(https://koddosy.com/wp-content/uploads/2025/02/after.png)0px,
        url(https://koddosy.com/wp-content/uploads/2025/02/mockup.png);
    background-size: auto 100%;
    width: 280px;
    aspect-ratio: 2/4;    
    
    
    background-blend-mode: multiply;
    mask-image: url(https://koddosy.com/wp-content/uploads/2025/02/mockup.png);
        mask-size: auto 100%;
        
    transition: 1s ease-in-out;
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
        
}

.timefor{
    transition: 1s;
    opacity: 1;
    position: absolute;
    left: 0;
        bottom: 30px;

}


.energy{
    transition: 1s;
        position: absolute;
    left: 0;
    opacity: 0;
    bottom: 30px;
}

.whole:hover .timefor{
    transform: translatex(730px);
    opacity: 0;
}


.whole:hover .energy{
    transform: translatex(730px);
    opacity: 1;
}/* End custom CSS */