: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 {
       width: 50px;
       height: 50px;
       border: 1px solid var(--main-clr);
       border-radius: 50%;
       position: relative;
       overflow: hidden;
       display: none;
   }

   .offer-footer p {

       text-align: center;
       font-weight: 700;
       text-transform: uppercase;
       bottom: 50%;
       font-size: 0;
       transition: opacity 0.5s ease, transform 0.5s ease, font-size 0.5s ease;
   }

   .offer-footer p span {
       /* color: var(--main-clr);
   font-size: 14px;
   font-weight: 900; */
   }

   .offer-footer img {
       width: 70%;
       position: absolute;
       object-fit: contain;
       left: 50%;
       transform: translateX(-50%);
       opacity: 0;
       z-index: 10;
       top: 100%;
       transition: opacity 0.5s ease, transform 0.5s ease;
   }

   .show-text {
       opacity: 1;
       font-size: 8px !important;
       transform: translateY(0);
       /* color: black; */
   }

   .show-text span {
       color: var(--main-clr);
       font-size: 14px;
       font-weight: 900;
   }

   .show-image {
       top: 50% !important;
       opacity: 1 !important;
       transform: translate(-50%, -50%) !important;
   }

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