#whatsapp-button {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 1000;

}



#whatsapp-icon {

    width: 60px;  /* Set the size of the WhatsApp icon */

    height: 60px;

    background-color: #25d366;

    padding: 10px;

    border-radius: 50%;

}

#cart-button {

    position: fixed;

    bottom: 100px;   /* Adjust the distance from the bottom */

    right: 20px;

    z-index: 1000;

}



#cart-icon {

    width: 60px;  /* Set the size of the cart icon */

    height: 60px;

    background-color: #ff8c00;  /* Customize the button color */

    padding: 10px;

    border-radius: 50%;

}

#scrollable-nav {

    display: flex;

    overflow-x: auto; /* Enable horizontal scrolling */

    white-space: nowrap; /* Prevent line breaks */

    padding: 0;

    margin: 0;

}



#scrollable-nav .nav-item {

    flex-shrink: 0; /* Prevent items from shrinking */

}



#scrollable-nav .nav-link {

    display: inline-block;

    white-space: nowrap;

    padding: 10px 15px;

    margin-right: 10px;

    text-align: center;

}



#scrollable-nav::-webkit-scrollbar {

    height: 8px; /* Adjust scrollbar height if needed */

}



#scrollable-nav::-webkit-scrollbar-thumb {

    background-color: rgba(0, 0, 0, 0.2); /* Scrollbar thumb color */

    border-radius: 4px;

}



#scrollable-nav::-webkit-scrollbar-track {

    background-color: transparent; /* Track color */

}

#whatsapp-button {

        position: fixed;

        bottom: 20px;

        right: 20px;

        z-index: 1000;

    }

    

    #whatsapp-icon {

        width: 60px;  /* Set the size of the WhatsApp icon */

        height: 60px;

        background-color: #25d366;

        padding: 10px;

        border-radius: 50%;

    }

    #cart-button {

        position: fixed;

        bottom: 90px;   /* Adjust the distance from the bottom */

        right: 20px;

        z-index: 1000;

    }

    

    #cart-icon {

        width: 60px;  /* Set the size of the cart icon */

        height: 60px;

        background-color:rgb(5, 5, 5);  /* Customize the button color */

        border-radius: 50%;

        color: white;

        padding: 20px 14px 25px 14px;

        font-size: 25px;

    }



    .active-size {

     background-color:black;

     color:white;

    }

    .active-color {

     border:2px solid black;

    }

    .cart-count2 {

        position: absolute;

    right: 0;

    background: red;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    color: white;

    padding: 0px 0px 8px 8px;

    font-size: 10px;

    font-weight: 600;

    }

    .scroll-container {

  width: 100%;

  overflow-x: auto; /* Enables horizontal scrolling */

  white-space: normal; /* Prevents wrapping */

  padding: 10px 0;

}



.scroll-container::-webkit-scrollbar {

  display: none; /* Hides scrollbar in Chrome, Edge, and Safari */

}



.scroll-content a {

  display: inline-block;

  margin: 0 5px;

  color: #333;

  letter-spacing:.1rem;

  cursor: pointer;

  font-family: 'Poppins', sans-serif;

  font-size:10px;

  text-transform:uppercase;

}

.scroll-content a.active {

    color: #333;

    text-decoration: none; /* Remove default underline */

    border-bottom: 1px solid #333; /* Custom underline */

    padding-bottom: 1px; 

}

.col-xl-4 {

    width:33% !important;

}

.col-xl-6 {

    width:50% !important;

}

.col-xl-3{

    width:25% !important;

}

.col-xl-2{

    width:16.16% !important;

}

.col-xl-7{

    width:14.28571%;

    flex: 0 0 14.28571%;

    max-width: 14.28571%;

}



.col-xl-1{

    width:100%;

    flex: 0 0 100%;

    max-width: 100%;

}

@media (max-width: 576px) {

.col-md-4{

    width:25% !important;

    flex: 0 0 25% !important;

    max-width: 25% !important;

}

.col-2-mobile {

    width:100% !important;

    flex: 0 0 100% !important;

    max-width: 100% !important;

}

.colsm-100{

    width:100% !important;

    flex: 0 0 100% !important;

    max-width: 100% !important;

}

.colsm-50{

    width:50% !important;

    flex: 0 0 50% !important;

    max-width: 50% !important;

}

.product-price{

    font-size: 8px !important;

}

.product-title a{

    font-size: 7px !important;

    left:1px !important;

    width: 65% !important;

    text-align: left !important;

}

}

/* Currency Switcher Container */

.currency-switcher {

  display: grid;

  justify-content: center; /* Center the spans */

  align-items: center;    /* Align spans vertically */

  background-color: #cccccc;

  position: fixed; /* Makes it fixed at the top */

  top: 50%;

  right: 0;

  z-index: 1000; /* Ensures it stays on top */

}



/* Currency spans */

.currency {

  padding: 0px 5px;

  font-size: 14px;

  color: #333;

  cursor: pointer;

  border-radius: 4px;

  transition: background-color 0.3s, color 0.3s;

}



.currency:hover {

  background-color: #e0e0e0; /* Light gray hover effect */

}



.currency.active {

  background-color: #000000; /* Blue background for active */

  color: #fff; /* White text for active */

}

.product-animation {

    visibility: hidden;  /* Hide products initially */

    opacity: 0;

    transition: opacity 0.6s ease, visibility 0s linear 0.6s;

}



.skeleton {

    background-color: #f0f0f0;

    border-radius: 10px;

    animation: loading 1.5s infinite ease-in-out;

    transition: opacity 0.6s ease;

}



@keyframes loading {

    0% {

        background-color: #f0f0f0;

    }

    50% {

        background-color: #e0e0e0;

    }

    100% {

        background-color: #f0f0f0;

    }

}



.fade-in {

    visibility: visible;

    opacity: 1;

    transition: opacity 0.6s ease;

}



.product-title-animation {

    opacity: 0; /* Initially hide the title */

    transition: opacity 0.6s ease;

}



.product.fade-in .product-title-animation {

    opacity: 1; /* Title fades in with the card */

}