.floating-container {
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
    margin: 0px 0 20px 0;
    z-index: 100000000000;
}

.floating-button {
    position: absolute;
    width: 65px;
    height: 65px;
    background: #8193F2;
    bottom: 0;
    border-radius: 50%;
    left: 0;
    color: white;
    line-height: 65px;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    z-index: 100;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 7px 29px 0px;
    cursor: pointer;
}

.element-container {
    position: absolute;
    width: 100px; /* Lebar container saat tertutup */
    height: 100px; /* Ketinggian container saat tertutup */
    overflow: hidden;
    bottom: 0;
    right: 0;
    transition: width 0.5s, height 0.5s;
}

.element-container.open {
    width: 100px; /* Lebar container saat terbuka */
    height: 370px; /* Ketinggian container saat terbuka */
}

.float-element {
    position: relative;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    margin: 15px 0;
    color: white;
    display: grid;
    place-items: center;
    z-index: 0;
    cursor: pointer;
    opacity: 0;
    margin-left: 5px;
    transition: opacity 0.3s;
}

.float-element a {
    text-decoration: none;
    color: white;
}

.float-element a i {
    font-size: 20px;
}

.float-element:nth-child(1) {
    background: #3b5998;
}

.float-element:nth-child(2) {
    background: #25d366;
}

.float-element:nth-child(3) {
    background: #962fbf;
}

.float-element:nth-child(4) {
    background: #010101;
}

.element-container.open .float-element {

    opacity: 1;

}


/*.floating-container*/
/*{*/
/*    position: fixed;*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    margin: 0px 0 20px 0;*/
/*    z-index: 100000000000;*/
/*    transition: .5s;*/
/*}*/

/*.floating-container:hover {*/
/*    height: 370px;*/
/*}*/

/*.floating-container:hover .floating-button {*/
/*    transform: translateY(15px);*/
/*    box-shadow: 0 0 10px #8193F2;*/
/*    transition: all .3s;*/
/*    transform: rotate(180deg);*/
/*}*/

/*.floating-button {*/
/*    position: absolute;*/
/*    width: 65px;*/
/*    height: 65px;*/
/*    background: #8193F2;*/
/*    bottom: 0;*/
/*    border-radius: 50%;*/
/*    left: 0;*/
/*    color: white;*/
/*    line-height: 65px;*/
/*    text-align: center;*/
/*    font-size: 25px;*/
/*    font-weight: 700;*/
/*    z-index: 100;*/
/*    box-shadow: rgba(255, 255, 255, 0.2) 0px 7px 29px 0px;*/
/*    cursor: pointer;*/
/*    -webkit-transition: all .3s;*/
/*    transition: all .3s;*/
/*    transform: translateY(-10px);*/
/*}*/


/*.float-element {*/
/*    position: relative;*/
/*    border-radius: 50%;*/
/*    width: 55px;*/
/*    height: 55px;*/
/*    margin: 15px 0;*/
/*    color: white;*/
/*    display: grid;*/
/*    place-items: center;*/
/*    z-index: 0;*/
/*    opacity: 0;*/
/*    cursor: pointer;*/
/*    transition: .3s ease-in-out;*/
/*    left: 0;*/
/*    bottom: 0;*/
/*}*/
/*.element-container*/
/*{*/
/*    transition: .5s;*/
  
/*    left: 0;*/
/*    position: relative;*/
/*    padding-left: 5px;*/
/*}*/

/*.float-element a {*/
/*    text-decoration: none;*/
/*    color: white;*/
/*}*/

/*.float-element a i {*/
/*    font-size: 20px;*/
/*}*/

/*.float-element:nth-child(1) {*/
/*    background: #3b5998;*/
/*    transition: .3s ease-in-out;*/
/*}*/

/*.float-element:nth-child(2) {*/
/*    background: #25d366;*/
/*    transition: .3s ease-in-out;*/
/*}*/

/*.float-element:nth-child(3) {*/
/*    background: #962fbf;*/
/*    transition: .3s ease-in-out;*/
/*}*/
/*.float-element:nth-child(4) {*/
/*    background: #010101;*/
/*    transition: .3s ease-in-out;*/
/*}*/


/*.floating-container:hover .element-container .float-element:nth-child(1) {*/
/*    transition: .3s ease-in-out;*/
/*    animation: come-in .4s forwards .3s;*/
/*}*/

/*.floating-container:hover .element-container .float-element:nth-child(2) {*/
/*    animation: come-in .4s forwards .2s;*/
/*    transition: .3s ease-in-out;*/

/*}*/

/*.floating-container:hover .element-container .float-element:nth-child(3) {*/
/*    animation: come-in .4s forwards .1s;*/
/*    transition: .3s ease-in-out;*/
/*}*/
/*.floating-container:hover .element-container .float-element:nth-child(4) {*/
/*    animation: come-in .4s forwards .1s;*/
/*    transition: .3s ease-in-out;*/
/*}*/