#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: 'ABC DIATYPE';

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%;

}

.col-xl-3{

width:25% !important;

}

.col-xl-2{

width:16.16% !important;

}

.col-xl-7{

width:14.2857%;

flex: 0 0 14.2857%;

max-width: 14.2857%;

}

.col-xl-8{

    width:12.5%;

    flex: 0 0 12.5%;

    max-width: 12.5%;

}

.col-xxl-6{

    width:16.6666%;

    flex: 0 0 16.6666%;

    max-width: 16.6666%;

}



.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;

}

.colsm-33 {

    width:33% !important;

    flex: 0 0 33% !important;

    max-width: 33% !important;

}

.product-price{

    font-size: 10px !important;

}

.product-title a{

    font-size: 7px !important;

    left:10px !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;



    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

    background-size: 200% 100%;

}



/* @keyframes loading {

    0% {

        background-color: #f0f0f0;

    }

    50% {

        background-color: #e0e0e0;

    }

    100% {

        background-color: #f0f0f0;

    }

} */

@keyframes loading {

    0% {

        background-position: -200% 0;

    }

    100% {

        background-position: 200% 0;

    }

}



.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 */

}