.circular-menu {
   position: fixed;
   box-sizing: border-box;
   z-index: 98;
   right: calc(12% - 32px);
   bottom: 5vh;
 }

 .overlay {
   position: fixed;
   pointer-events: none;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100vw;
   background-color: #000000B5;
   opacity: 0;
   transition: .5s;
 }

 .overlay.active {
   pointer-events: auto !important;
   opacity: 1;
 }

 .toggle {
   position: relative;
   z-index: 10;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: #FF6B00;
   cursor: pointer;
   text-align: center;
 }

 .toggle i {
   font-size: 30px;
   line-height: 60px;
   color: #fff;
   transition: .5s;
 }

 .toggle.active i {
   transform: rotate(45deg);
 }

 .floating-btn {
   position: absolute;
   bottom: 30px;
   right: 0;
   width: 60px;
 }

 .floating-btn ul {
   position: relative;
   box-sizing: border-box;
   list-style-type: none;
   padding-inline-start: 0px;
   padding-bottom: 30px;
   overflow: hidden;
   height: 0px;
   opacity: 0;
   transition: .5s;
 }

 .floating-btn.active ul {
   height: calc((60px + 15px) * 2 + 30px);
   opacity: 1;
 }

 .floating-btn ul li {
   position: relative;
   overflow: hidden;
   height: 60px;
   width: 60px;
   border-radius: 50%;
   margin-bottom: 15px;
 }

 .floating-btn a {
   text-align: center;
   position: absolute;
   height: 100%;
   width: 100%;
   color: #fff;
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .floating-btn i,
 .floating-btn span {
   line-height: 60px;
   font-size: 36px;
 }

 @media (min-width: 640px) {
   .circular-menu {
     right: calc(8% - 32px);
   }
 }

 @media (min-width: 1024px) {
   .circular-menu {
     right: calc(4% - 32px);
   }
 }