.float-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 4px 15px 0px #0000001F;
    border-radius: 8px;
    color: #FBFDFA;
    transition: 0.3s ease-out;
}
.float-box .side{
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
}
/* .float-cont-1{
    position: absolute;
    top: 136px;
    left: 22px;
} */
.float-box-1{
    background-color:#E63746;
    min-width: 132px;
    padding: 6px;
    font-size: 10px;
}
@media (min-width:768px){
    .float-cont-1{
        padding: 12px;
        min-width: 282px;
        font-size: 16px;
        font-weight: 500;
        /* left: 56px;
        top: 250px; */
    }
}

.float-box-1.rotate{
    transform: rotate(-20deg);
}

.float-box-1:hover{
     transform: rotate(-19deg) scale(1.02);
     box-shadow: 0px 4px 15px 0px #00000046;
}
/*  */
.float-box-2{
    
    width: 134px;
    padding: 10px;
    background-color:#FCFEFC ;
    color: #6B6B6B;
    font-size: 8px;
    gap: 10px;
}
/* .float-cont-2{
    position: absolute;
    right: 20px;
    top: 140px;
    z-index:2;
} */
@media (min-width:768px){
    /* .float-cont-2{
    right: 50px;
    top: 180px;
} */
    .float-box-2{
        font-size: 14px;
        width: 235px;
         
    }
}
.float-box-2.rotate{
    transform: rotate(10deg);
}

.float-box-2:hover{
     transform: rotate(9deg) scale(1.02);
     box-shadow: 0px 4px 15px 0px #00000046;
}

/*  */

/* .float-cont-3{
position: absolute;
right: 20px;
bottom: 10px;
} */
.float-box-cont{
display: flex;
flex-direction: column;
width: 180px;

}

.float-box-cont.rotate{
    transform: rotate(3deg);
}
.float-box-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    box-shadow: 0px 4px 15px 0px #0000001F;
    border-radius: 8px;
    background-color:#FCFEFC ;
    color: #FBFDFA;
    transition: 0.3s ease-out;
     padding: 12px;
     margin-bottom: 8px;
}
.float-box-title .side{
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    color: #6B6B6B;
}

.floats-holder{
    border: 0.54px solid #F1F2F4;
    background:#FCFEFC;
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0px 2.58px 9.67px 0px #0000001F;
    display: flex;
    flex-direction: column;
    font-size: 8px;
    position: relative;
    /* clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); */
    transition: 0.5s ease-in-out;
}

.floats{
   padding: 12px;
   font-size: 8px;
   background:#FCFEFC;
   color: #6B6B6B;
   border-radius: 4px;
   transition: 0.2s ease;
}

.float-box-cont:hover .floats-holder{
    clip-path: polygon(0 0, 100% 0, 110% 120%, -10% 100%);
}

.float-box-cont:hover .floats{
    transform: translateX(0px);
    opacity: 1;
}
.float-box-title .side img{
    transition: 0.3s ease-out;
}
.float-box-cont:hover .float-box-title .side img{
    transform: rotate(180deg);
}
@media (min-width:768px){
    .float-box-cont{
        font-size: 14px;
        width: 236px;
        height: 207px;
    }
    /* .float-cont-3{
        position: absolute;
        bottom: 50px;
        right: 40px;
        } */
}

.floats-holder img{
    position: absolute;
    right: 20px;
    top: 25%;
    animation: cursor 6s infinite;
}

.floats:first-child{
    animation: get-hovered 6s infinite;
}
.floats:nth-child(2){
    animation: get-hovered 6s infinite 2s;
}
.floats:nth-child(3){
    animation: get-hovered 6s infinite 4s;
}
@keyframes get-hovered{
    5%{
        background-color: #E63746;
        color: #FBFDFA;
    }
    35%{
        background-color: #E63746;
        color: #FBFDFA;
    }
    40%{
      background:#FCFEFC;
        color: #6B6B6B;
        transform: scale(1);
    }
    100%{
        background:#FCFEFC;
        color: #6B6B6B;
    }
}

@keyframes cursor{
    
    30%{
        top: 25%;
        right: 20px;
    }
    35%{
        top: 50%;
        right: 5px;
    }
    
    65%{
        top: 50%;
         right: 5px;
    }
    70%{
        top: 75%;
         right: 20px;
    }
    100%{top: 75%;
     right: 20px;}

}

/* */
/* .float-cont-4{
    position: absolute;
    bottom: 110px;
    left: 20px;
} */
.float-box-4{
    width: 154px;
    padding: 12px;
    background-color:#FCFEFC ;
    color: #6B6B6B;
    font-size: 10px;
    gap: 10px;
}
@media (min-width:768px){
    .float-box-4{
        font-size: 14px;
        width: 235px;
    }
    /* .float-cont-4{
 position: absolute;
    left: 40px;
    } */
}
.float-box-4.rotate{
    transform: rotate(-3deg);
}

.float-box-4:hover{
     transform: rotate(-2deg) scale(1.02);
     box-shadow: 0px 4px 15px 0px #00000046;
}