.floating-icon {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10%;
    width: 40px;
    height: 120px; /* Adjust the height for the vertical button */
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    writing-mode: vertical-rl; /* Make text vertical */
    background-color: white; 
    color: #ff00dd; 
    border: 2px solid #164194;
    font-weight: bold;
    z-index: 99; /* set the z-index to the highest value */
    display: inline-block; /* ensure it is visible on small screens*/
    box-shadow: 3px 3px 7px rgba(2, 3, 110, 0.2); /* Add a shadow to the button */
    /* transition: right 3s ease-in-out; Slow transition from right to left */
    animation: mymove 1s ;

}

/* You can add more styles to your icon, like hover effects. */
.floating-icon:hover {
    background-color: #e6e6ff;
}

.icon {
    font-size: 24px; /* adjust the icon size*/
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {


    .floating-icon {
        display: inline-block; /* show the vertical button on smaller size screens  */
    }


}
@keyframes mymove {
    from {left: 0px;}
    to {left: 15px;}
  }
  
  @keyframes mynewmove {
    from {right: 0px;}
    to {right: 15px;}
  }