/* Main container for the banner */
    .responsive-banner {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; /* Takes the full width of the parent container */
        background-color: #f9f9f9; /* Background color for better visibility */
        padding: 10px; /* Space around the banner */
        overflow: hidden; /* Ensures no extra content is displayed */
    }
    /* Styling for the image */
    .responsive-banner img {
        width: 100%; /* Ensure the image scales to fit the container width */
        max-width: 1200px; /* Limit the maximum width of the banner */
        height: auto; /* Maintain the aspect ratio */
        border-radius: 8px; /* Optional: Add rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
    }
    /* Make the image responsive for smaller screens */
    @media (max-width: 768px) {
        .responsive-banner img {
            max-width: 95%; /* Slightly smaller for mobile view */
        }
    }
    @media (max-width: 480px) {
        .responsive-banner img {
            max-width: 100%; /* Full-width for smaller screens */
            border-radius: 5px; /* Reduce rounded corners on smaller screens */
        }
    }
    #price-form {
        overflow: hidden;
        max-height: 390px; /* Decreased height */
        border-radius: 5px;
    }/*f92658*/
    /* Title Section */
    #price-form .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        cursor: pointer;
        background-color: #970303;
        font-weight: bold;
        font-size: 15px;
        border-bottom: 1px solid #ddd;
        transition: background-color 0.3s ease;
    }
    #price-form .title:hover {
        background-color: #970303;
        color: #fff;
    }
    #price-form .toggle-icon {
        font-size: 20px;
        color: #333;
        transition: transform 0.3s ease;
    }
    /* Content Section */
    #price-form .content {
        padding: 15px;
        background-color: #fafafa;
        max-height: none;
        border: 1px solid #ccc; /* Border color */
        border-radius: 8px; /* Rounded corners */
    }
    #price-form .filter-group {
        margin-bottom: 20px;
    }
    #price-form label {
        display: block;
        font-size: 14px;
        /*font-weight: bold;*/
        margin-bottom: 10px;
    }
    #price-form input[type="range"] {
        width: 100%;
        margin: 10px 0;
        cursor: pointer;
    }
    #priceValue {
        margin-top: 5px;
        font-size: 14px;
        color: #555;
    }
    /* Filter Items */
    #price-form .form-item {
        display: flex;
        align-items: center;
    }
    #price-form .filter-item {
        font-size: 14px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
    }
    #price-form .items-count {
        font-size: 12px;
        color: #888;
    }
    .filter-group {
        margin: 15px 0;
    }
    .range-slider {
        position: relative;
        width: 100%;
        height: 5px;
        background: #ddd;
        border-radius: 5px;
        margin: 20px 0;
    }
    .range-slider input[type="range"] {
        position: absolute;
        width: 100%;
        height: 5px;
        -webkit-appearance: none;
        appearance: none;
        background: none;
        pointer-events: none;
    }
    .range-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: #970303;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 3;
    }
    .range-slider input[type="range"]::-moz-range-thumb {
        width: 15px;
        height: 15px;
        background: #ef754c;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 3;
    }
    .slider-track {
        position: absolute;
        height: 5px;
        background: #970303;
        border-radius: 5px;
        z-index: 2;
        top: 0;
    }
    #priceValue {
        font-size: 16px;
        color: #555;
        /*font-weight: bold;*/
        margin-top: 10px;
        text-align: center;
    }
    /* Image Container with Hover Effect */
    .image-container {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .primary-img,
    .hover-img {
        width: 200%;
        max-width:440px;
        height: 200px;
        display: block;
        transition: opacity 0.3s ease;
        justify-self:center;
    }
    .hover-img {
        position: absolute;
        top: 0;
        left: -99px;
        opacity: 0;
    }
    .image-container:hover .primary-img {
        opacity: 0;
    }
    .image-container:hover .hover-img {
        opacity: 1;
    }
    /* Product Grid Styles */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 60px;
    }
    .product {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 15px;
        width: 200px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    .product:hover {
        transform: scale(1.03);
    }
    .product img {
        width: 200%;
        max-width: 440px;
        max-height: 200px;
        height: 200px;
        object-fit: contain;
        border-radius: 5px;
        margin-bottom: 10px;
        justify-self:center;
    }
    .product h4 {
        font-size: 16px;
        color: #333;
        margin: 10px 0;
    }
    .product p {
        font-size: 14px;
        color: #800000;
        margin-bottom: 10px;
    }
    /* Truncated Product Name */
    .product-name {
        color: #003366;
        font-weight: bold;
        text-align: center;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .product-name a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        ext-overflow: ellipsis;
        line-height: 1.5;
        height: calc(1.5em * 2);
        font-size: 14px;
        color: #333;
        text-decoration: none;
    }
    /* Pagination Styles */
    .pagination {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 20px 0;
    }
    .pagination a {
        text-decoration: none;
        padding: 8px 12px;
        border: 1px solid #007bff;
        border-radius: 4px;
        transition: background-color 0.3s;
    }
    .pagination a:hover {
        background-color: #007bff;
        color: white;
    }
    /* Price Range Slider */
    #priceRange {
        width: 100%;
        margin: 10px 0;
        appearance: none;
        background: #ddd;
        height: 6px;
        border-radius: 5px;
        outline: none;
        transition: background 0.3s ease;
    }
    #priceRange::-webkit-slider-thumb,
    #priceRange::-moz-range-thumb,
    #priceRange::-ms-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #970303;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    #priceRange::-webkit-slider-thumb:hover,
    #priceRange::-moz-range-thumb:hover,
    #priceRange::-ms-thumb:hover {
        background: #970303;
    }
    #priceValue {
        margin-top: 10px;
        font-size: 16px;
        color: #333;
        text-align: center;
        /*font-weight: bold;*/
    }
    /* Responsive Styles */
    
    /* For medium screens (tablets) */
    @media (max-width: 992px) {
        .product-grid {
            /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
            gap: 55px; /* Reduce gap between products */
        }
        .product h4 {
            font-size: 14px; /* Adjust font size for product names */
        }
        .product p {
            font-size: 12px; /* Adjust price font size */
        }
        .product-name a {
            font-size: 12px; /* Adjust font size for truncated product name */
        }
        #priceValue {
            font-size: 14px; /* Adjust price value font size */
        }
    }
    /* For small screens (phones) */
    @media (max-width: 768px) {
        .product-grid {
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Make each product take full width on small screens */
            gap: 10px; /* Reduce gap */
        }
        .product img {
            max-width: 100%; /* Ensure the image is responsive and fits within the container */
            height: auto;
        }
        .product h4 {
            font-size: 14px; /* Slightly smaller font size for product names */
        }
        .product p {
            font-size: 12px; /* Smaller font size for price */
        }
        .product-name a {
            font-size: 12px; /* Smaller font size for truncated names */
        }
        #priceValue {
            font-size: 14px; /* Adjust price font size */
        }
    }
    /* For extra small screens (mobile phones) */
    @media (max-width: 480px) {
        .product-grid {
            grid-template-columns: 1fr; /* Stack products vertically */
            gap: 10px; /* Maintain small gap */
        }
        .product {
            padding: 10px; /* Adjust padding to fit better on small screens */
        }
        .product h4 {
            font-size: 14px; /* Adjust font size */
        }
        .product p {
            font-size: 12px; /* Adjust font size for price */
        }
        .product-name a {
            font-size: 12px; /* Adjust font size for truncated name */
        }
        #priceValue {
            font-size: 14px; /* Adjust font size */
        }
    }
    .filter-block {
        cursor: pointer;
        padding: 5px;          /* Optional: Add padding for better spacing */
    }
    .title {
        display: flex;                    /* Use flexbox for alignment */
        justify-content: space-between;   /* Space between title and toggle icon */
        align-items: center;              /* Center vertically */
        font-weight: bold;                /* Make the title bold */
    }
    .filter-icon {
        margin-left: 10px;              /* Space between title and icon */
        font-weight: bold;               /* Make the icon bold */
        transition: transform 0.2s;      /* Smooth rotation transition */
    }
    /* Hover effect */
    .filter-block:hover {
        background-color: #fafafa; /* Light background on hover */
    }
    #category-title:hover {
        background-color: #ef754c;
        color: #fff;
    }
    .jewellery-columns-wrap {
        margin: 20px; /* Adjust the value as needed */
    }
    /*product display*/
    /* Custom CSS for col-md-4 col-xs-6 with margin-left */
    .col-md-4.col-xs-6 {
        margin-left: 160px; /* Apply margin-left as per the inline style */
        padding: 10px; /* Optional: Add some padding for spacing inside */
        box-sizing: border-box; /* Ensure padding doesn't affect width */
    }
    /* Custom CSS for col-md-3 col-xs-6 with margin-left */
    .col-md-3.col-xs-6 {
        margin-left: 180px; /* Apply margin-left as per the inline style */
        padding: 10px;  /* Optional: Add some padding inside */
        box-sizing: border-box; /* Ensure padding doesn't affect width */
    }
    /* Responsive design for medium screens (tablets) */
    @media (max-width: 992px) {
        .col-md-4.col-xs-6 {
            margin-left: 20px; /* Decrease margin-left for medium screens */
            width: calc(50% - 20px); /* Take 50% width minus margin for better alignment */
        }
        .col-md-3.col-xs-6 {
            margin-left: 20px; /* Decrease margin-left for medium screens */
            width: calc(50% - 20px); /* Take 50% width minus margin for better alignment */
        }
    }
    /* Responsive design for smaller screens (tablets and phones) */
    @media (max-width: 768px) {
        .col-md-4.col-xs-6 {
            margin-left: 0; /* Remove margin-left on smaller screens */
            width: 100%; /* Make the column take full width */
            padding: 8px; /* Adjust padding for smaller screens */
        }
        .col-md-3.col-xs-6 {
            margin-left: 0; /* Remove margin-left on smaller screens */
            width: 100%; /* Make the column take full width */
            padding: 8px; /* Adjust padding for smaller screens */
        }
    }
    /* Responsive design for phones (smaller than 480px) */
    @media (max-width: 480px) {
        .col-md-4.col-xs-6 {
            margin-left: 0; /* Remove margin-left on very small screens */
            width: 100%; /* Make the column take full width */
            padding: 6px; /* Further reduce padding on mobile */
        }
        .col-md-3.col-xs-6 {
            margin-left: 0; /* Remove margin-left on very small screens */
            width: 100%; /* Make the column take full width */
            padding: 6px; /* Further reduce padding on mobile */
        }
    }
    /*ribbin css*/
    .discount-ribbon {
        position: relative;
        top: 0;
        left: 0;
        z-index: 10;
        width: 50px;
        height: 50px;
    }
    .product {
        position: relative;
    }
    .ad-container {
        width: 100%;
        text-align: center;
        margin: 20px 0;
    }
    .responsive-ad {
        max-width: 100%;
        height: auto;
    }
    /* Grid container */
    .product-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid */
        gap: 20px; /* Space between products */
        padding: 20px;
    }
    /* Product item */
    .product-item {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: center;
        background: #fff;
    }
    /* Advertisement container */
    .advertisement_above1 {
        text-align: center; /* Center the text */
        border-radius: 8px; /* Optional rounded corners */
        margin-bottom: 20px; /* Space between footer and advertisement */
        grid-column: 1 / -1; /* Ensure the ad spans across all columns */
        width: 100%; /* Make ad full width */
        position: relative; /* Ensure the container allows for absolute positioning of the image */
        height: 100%; /* Ensure the height of the container is 100% */
    }
    /* Advertisement image */
    .advertisement_above1 img {
        width: 100%;  /* Make image take up full width of its container */
        height: 100%;  /* Make image take up full height of its container */
        object-fit: fill;  /* Ensure the image stretches to fully cover the container */
        border-radius:15px;
    }
    .featured-tag {
        position: absolute;
        top: 0;
        right: 0;
        transform: rotate(-90deg);
        transform-origin: top right;
        background: none;
        color: #970303;
        font-weight: bold;
        font-size: 9px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 5px;
        margin-right: 15px;
    }
    .spotlight-ribbon {
        position: absolute;
        top: 10px;
        left: -1px;
        background-color: #970303;
        color: white;
        padding: 4px;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        border-radius: 2px;
        text-transform: uppercase;
        z-index: 10;
    }
    /*Add to Cart Button*/
    .cart-icon {
        cursor: pointer;
        position: relative;
    }
    .cart-icon svg {
        width: 24px;
        height: 24px;
        position: relative;
        flex-shrink: 0;
    }
    .fly-image {
        position: relative;
        width: 100px;
        height: 100px;
        z-index: 9999;
        pointer-events: none;
        transition: transform 1s ease-in-out, opacity 1s ease-in-out;
        border-radius: 50%;
        top: 600px;
    }
    /* Footer container styling */
    .rings_above {
        padding: 20px; /* Padding around the content */
        text-align: center; /* Center the text */
        border-radius: 5px; /* Optional rounded corners */
        margin-bottom: 20px; /* Space between footer and advertisement */
        position: relative;
        width: 98%; /* Decreased width (Adjust as needed) */
        max-width: 750%; /* Optional: Limit maximum width */
        margin-left: auto; /* Center it horizontally */
        margin-right: auto; /* Center it horizontally */
        overflow: hidden; /* Ensures image doesn't overflow the container */
    }
    .footer-image {
        width: 100%; /* Makes the image cover the entire width */
        height: 100%; /* Makes the image cover the entire height */
        object-fit: cover; /* Ensures the image covers the div area without distortion */
        border-radius: 5px; /* Apply rounded corners, adjust value for more/less curve */
    }