.floating-products{
    position:absolute;
    inset:0;
    /* pointer-events:none; */
    overflow:hidden;
    z-index:2;
}

.product-wrapper{
    position:absolute;
    display:inline-block;
    animation-duration:16s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}

.product-wrapper .product{
    /* position:absolute; */
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    opacity:.95;
    filter:drop-shadow(0 15px 25px rgba(0,0,0,.08));
    /* animation-duration:16s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite; */
    transition:.35s;
    cursor:pointer;
}


.p1{
    top:50%;
    left:20%;
    width: 20%;
    animation-name:floatOne;
}

.p2{
    top: 42%;
    right: 45%;
    width: 25%;
    animation-name:floatTwo;
}

.p3{
    top: 45%;
    /* left: 50%; */
    right: 38%;
    width: 12%;
    animation-name:floatThree;
}

.p4{
    top: 75%;
    right: 20%;
    width: 20%;
    animation-name:floatFour;
}

.p5{
    bottom: 2%;
    left: 32%;
    width: 15%;
    transform:translateX(-50%);
    animation-name:floatFive;
}


@keyframes floatOne{ 
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-18px) rotate(8deg);
    }
}

@keyframes floatTwo{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(20px) rotate(-10deg);
    }
}

@keyframes floatThree{
    0%,100%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(20px);
    }
}

@keyframes floatFour{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-25px);
    }
}

@keyframes floatFive{
    0%,100%{
        transform:translateX(-50%) scale(1);
    }
    50%{
        transform:translateX(-50%) scale(1.08);
    }
}


.product{
    transition:.4s;
}

.product:hover{
    transform:scale(1.12);
    filter:drop-shadow(0 20px 35px rgba(0,0,0,.18));
}


@media(max-width:768px){
    .product{
        width:70px;
        opacity:.9;
    }

.p1{
    top: 60%;
    left: 20%;
    width: 25%;
}

.p2{
    top: 50%;
    right: 35%;
    width: 40%;
}

.p3{
    top: 70%;
    left: 15%;
    width: 20%;
}

.p4{
    top: 65%;
    right: 20%;
    width: 30%;
}

.p5{
    bottom: 10%;
    left: 60%;
    width: 35%;
    /* display:none; */
}

}


.product-tooltip-old{
    position:absolute;
    left:50%;
    top:-18px;
    transform:translate(-50%,-100%);
    background:#111;
    color:#fff;
    padding:8px 14px;
    border-radius:25px;
    font-size:13px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
    background:#fff;
    color:#222;
    border:1px solid #E5E5E5;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.product-tooltip{
    position:absolute;
    left:50%;
    bottom:calc(100% + 12px);
    transform:translateX(-50%);
    background:#fff;
    color:#222;
    border:1px solid #e5e5e5;
    padding:8px 14px;
    border-radius:25px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:9999;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.product-tooltip::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-6px;
    width:10px;
    height:10px;
    background:#fff;
    border-right:1px solid #E5E5E5;
    border-bottom:1px solid #E5E5E5;
    transform:translateX(-50%) rotate(45deg);
}

.product-wrapper:hover .product-tooltip{
    opacity:1;
    visibility:visible;
    /* transform:translateX(-50%) translateY(0); */
}

/* .product-wrapper:hover .product{
    animation-play-state: paused;
    transform:scale(1.08);
} */