.zoom-in {
   transition: transform 0.3s ease-in-out;
  }

  .zoom-in:hover {
   transform: scale(1.2);
  }

  .icon-color-change {
   transition: color 0.3s ease-in-out;
  }

  .icon-color-change:hover {
   color: #8A2BE2;
  }

  .modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   justify-content: center;
   align-items: center;
  }

  .modal.active {
   display: flex;
  }

  /* circle */
  .rounded-full {
   border-radius: 50%;
  }