/* Floating Message */
   .floating-message {
       position: fixed;
       bottom: 71px;
       right: 11px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 15px;
       z-index: 999;
   }

   .floating-icons {
       display: flex;
       flex-direction: column;
       gap: 15px;
       opacity: 0;
       transform: translateY(20px);
       transition: all 0.4s ease;
       pointer-events: none;
   }

   .floating-icons.show {
       opacity: 1;
       transform: translateY(0);
       pointer-events: all;
   }

   .floating-icons .icon a {
       display: block;
       width: 40px;
       height: 40px;
       background: #ffffff;
       border-radius: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }

   .floating-icons.show .icon {
       transform: scale(1);
   }

   .floating-icons.show .icon:nth-child(1) {
       animation: slideUp 0.3s ease 0.1s both;
   }

   .floating-icons.show .icon:nth-child(2) {
       animation: slideUp 0.3s ease 0.2s both;
   }

   .floating-icons.show .icon:nth-child(3) {
       animation: slideUp 0.3s ease 0.3s both;
   }

   .floating-icons.show .icon:nth-child(4) {
       animation: slideUp 0.3s ease 0.4s both;
   }

   @keyframes slideUp {
       from {
           transform: translateY(20px) scale(0);
           opacity: 0;
       }

       to {
           transform: translateY(0) scale(1);
           opacity: 1;
       }
   }

   .floating-icons .icon:hover {
       transform: scale(1.1);
       box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
   }

   .floating-icons img {
       width: 30px;
       height: 30px;
       border-radius: 50%;
   }

   .floating-toggle {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background-color: #c2148e;
       padding: .5rem;
       border-radius: 50%;
       border: none;
       cursor: pointer;
   }

   .floating-toggle svg {
       fill: #ffffff;
   }

   /* Hide SVG and show X when active */
   .floating-toggle.active .floating-box svg {
       display: none;
   }

   .floating-toggle.active .floating-box::after {
       content: "\f00d";
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       font-size: 20px;
       color: #fff;
   }

   .button-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #ff7d15;
   }

   .details-btn {
       width: 50%;
       font-size: 18px;
       color: #444444;
       padding: 10px;
       background: linear-gradient(#38c4ee, #1da8d9);
       text-align: center;
       clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
       text-decoration: none;

   }

   .details-btn:hover {
       text-decoration: none;
       color: #444444;
   }

   .buyNow-btn {
       width: 50%;
       font-size: 18px;
       color: #444444;
       padding: 10px;
       background: linear-gradient(#fe9c34, #ff7008);
       text-align: center;
       text-decoration: none;
   }

   .buyNow-btn:hover {
       text-decoration: none;
       color: #444444;
   }

   @media screen and (max-width:425px) {

       .details-btn,
       .buyNow-btn {
           font-size: 16px;
       }
   }

   @media screen and (max-width:365px) {

       .details-btn,
       .buyNow-btn {
           font-size: 14px;
       }
   }

   @media screen and (max-width:340px) {

       .details-btn,
       .buyNow-btn {
           font-size: 12px;
       }
   }

   /* Footer Navigation */
   .footer-navigation {
       position: fixed;
       left: 0;
       bottom: 0;
       right: 0;
       background: var(--s-hf-bg);
       z-index: 999;
       padding: 15px 0;
       box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.2);
       width: 100%;
       display: none;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }

   .navigation-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 0;
   }

   .navigation-container .footer-navigation-item .icon {
       margin: 0 0 7px;
       font-size: 24px;
       text-align: center;
       border: none;
   }

   .navigation-container .footer-navigation-item .icon .material-icons {
       width: auto;
       height: auto;
   }

   .navigation-container .footer-navigation-item .icon i {
       color: #fff;
       font-size: 35px;
   }

   .navigation-container .footer-navigation-item .navigation-content h5 {
       margin-bottom: 0;
       font-size: 18px;
       color: rgba(255, 255, 255, 0.5);
       text-align: center;
       line-height: normal;
       margin: 0;
   }

   @media screen and (max-width: 1279px) {
       .footer-navigation {
           display: flex;
       }
   }

   @media screen and (max-width: 992px) {
       .footer-navigation {
           padding: 0;
           height: 61px;
           line-height: 61px;
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
       }

       .footer-navigation .container {
           padding: 0;
           margin: 0;
       }

       .navigation-container .footer-navigation-item {
           display: flex;
           flex-direction: column;
           flex: 0 0 20%;
           text-align: center;
           align-items: center;
       }

       .navigation-container .footer-navigation-item .icon {
           font-size: 24px;
           height: 24px;
           line-height: 24px;
           text-align: center;
       }

       .navigation-container .footer-navigation-item .icon .material-icons {
           width: 36px;
           height: 36px;
           line-height: 36px;
       }

       .navigation-container .footer-navigation-item .icon i {
           font-size: 20px;
       }

       .navigation-container .footer-navigation-item .navigation-content h5 {
           font-size: 10px;
           color: rgba(255, 255, 255, 0.5);
           font-weight: normal;
           text-align: center;
       }

   }


   .banner-slider .slider-container {
       position: relative;
       width: 100%;
       overflow: hidden;
   }

   .banner-slider .slider {
       display: flex;
       transition: transform 0.5s ease-in-out;
   }

   .banner-slider .slide {
       min-width: 100%;
   }

   .banner-slider .slide img {
       width: 100%;
       margin: auto;
       height: auto;
       /* maintain aspect ratio */
       display: block;
       object-fit: cover;
       /* crop nicely if needed */
   }

   /* Arrows */
   .banner-slider .arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       /* background: rgba(250, 248, 248, 0.3); */
       background: #fe9c34;
       border: none;
       width: 40px;
       height: 40px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       color: #333;
       z-index: 10;
       transition: all 0.3s ease;
   }

   .banner-slider .arrow:hover {
       background: #ff7008;
       /* transform: translateY(-50%) scale(1.1); */
   }

   .banner-slider .arrow-left {
       left: 0;
   }

   .banner-slider .arrow-right {
       right: 0;
   }

   /* Dots */
   .banner-slider .dots-container {
       position: absolute;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 10px;
       z-index: 10;
   }

   .banner-slider .dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: #4b4444;
       cursor: pointer;
       transition: all 0.3s ease;
       border: 2px solid transparent;
   }

   .banner-slider .dot.active {
       background: #143b85;
       transform: scale(1.2);
       border-color: #143b85;
   }

   .banner-slider .dot:hover {
       background: #143b85;
   }

   /* Responsive */
   @media (max-width: 768px) {
       .banner-slider .arrow {
           width: 20px;
           height: 20px;
           font-size: 16px;
       }

       .banner-slider .arrow-left {
           left: 0;
       }

       .banner-slider .arrow-right {
           right: 0;
       }

       .banner-slider .dots-container {
           bottom: 20px;
       }

       .banner-slider .dot {
           width: 10px;
           height: 10px;
       }
   }