:root {
       --glass-bg: rgba(255, 255, 255, 0.12);
       /* base translucent fill */
       --glass-border: rgba(255, 255, 255, 0.25);
       /* thin bright border */
       --glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
       --glass-radius: 100vw;
       --glass-blur: 10px;
       /* backdrop blur amount */
   }

   .mobile-footer {
       width: 90%;
       position: fixed;
       left: 50%;
       bottom: 10px;
       transform: translate(-50%, 0);
       padding: 0px 5%;
       height: 60px;
       /* background: #fff; */
    
       z-index: 999;
       overflow: hidden;

       background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
       background-color: var(--glass-bg);
       /* fallback color if gradients not desired */
       border: 1px solid var(--glass-border);
       border-radius: var(--glass-radius);
       box-shadow: var(--glass-shadow);
       padding: 20px;
       color: #fff;
       /* blur the area *behind* the element (frosted effect) */
       backdrop-filter: blur(var(--glass-blur)) saturate(120%);
       -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
       /* Safari */
       /* Make sure element is slightly translucent so blur shows through */
       /* For better edges on very thin borders: */
       outline: 1px solid transparent;
   }


   .footer-icon.active {
       position: relative;
   }
  

   /* @supports (bottom: env(safe-area-inset-bottom)) {
       .mobile-footer {
           bottom: calc(env(safe-area-inset-bottom) + 10px);
       }
   } */

   .footer-icon.active::after {
       content: "";
       position: absolute;
       width: 5px;
       height: 5px;
       border-radius: 50%;
       bottom: -13px;
       left: 50%;
       transform: translate(-50%, -50%);
       background: var(--main-clr);
       z-index: -1;
   }

   .o-footer-icon.active::after {
       content: "";
       position: absolute;
       width: 60px;
       height: 6px;
       border-radius: 0px 0px 5px 5px;
       top: 2px;
       left: 50%;
       transform: translate(-50%, -50%);
       background: var(--main-clr);
       z-index: -1;
   }

   .footer-icon img {
       width: 25px;
       height: 25px;
   }
   .footer-icon i {
     
       color: black;
       font-size: 25px;
   }

    .footer-icon.active i{
       color: var(--main-clr);
   }
   .offer-footer {
     
     
   }
   .offer-footer i{
    font-size: 35px;
    color: green;
   }

   
   
.website-footer div:nth-child(2) a:nth-child(n+6) {
    display: none;
}