.main-steps-bar {
     width: 100%;
     background: #fff;
     overflow-x: hidden;
 }

 .main-steps-wrap {
     width: 100%;
     padding: 15px 20px;
 }

 .main-steps-wrap .row .col-4 {
     padding: 0px;
 }

 .main-steps-wrap .row .col-4:first-child .main-step {
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     border-left: 2px solid #333;
 }

 .main-step {
     display: flex;
     align-items: center;
     justify-content: space-between;
     border: 2px solid #333;
     border-right: none;
     border-left: none;
     padding: 12px 20px;
     position: relative;
     /* background: #fff; */
     border-radius: 20px;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     opacity: 0.5;
 }

 .main-step-content {
     width: fit-content;
     display: flex;
     align-items: center;
 }

 .main-step-number h2 {
     font-size: 40px;
     font-weight: 600;
     line-height: 24px;
     color: var(--text-color);
     margin-bottom: 0px;
 }

 .main-step-title {
     display: flex;
     flex-direction: column;
     text-align: left;
 }

 .main-step-title span {
     font-size: 13px;
     line-height: 13px;
     font-weight: 300;
     color: var(--text-color);
     margin-bottom: 5px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .main-step-title h5 {
     font-size: 16px;
     font-weight: 600;
     line-height: normal;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin-bottom: 0px;
 }

 .main-step-icon img {
     width: 40px;
     height: auto;
 }

 .main-step-arrow {
     position: absolute;
     top: -9px;
     right: -29px;
     width: 70px;
     height: auto;
     z-index: 1;
 }

 .main-step-icon {
     display: block;
 }

 .main-step-arrow img {
     width: 116%;
     height: auto;
 }

 .main-step.active {
     background: #f0f0f0;
     opacity: 1;
 }

.product-card-anchor-control {
    pointer-events: none;  /* disables clicking */
    cursor: default;       /* avoid pointer hand */
}

 @media (max-width: 1399.98px) {}

 @media (max-width: 1199.98px) {}

 @media (max-width: 991.98px) {
    .main-step-number h2 {
        font-size: 35px;
     }
    .product-card-anchor-control {
        pointer-events: auto;
        cursor: pointer;
    }
 }

 @media (max-width: 767.98px) {
     .main-step {
         padding: 5px 7px;
     }

     .main-step-number h2 {
         font-size: 24px;
     }

     .main-step-title span {
         font-size: 13px;
         width: 60%;
     }

     .main-step-title h5 {
         font-size: 15px;
         width: 60%;
     }

     .main-step-arrow {
         top: -6px;
         right: -19px;
         width: 50px;
     }
 }

 @media (max-width: 575.98px) {
     .main-steps-wrap {
         padding: 10px;
     }

     .main-step {
         padding: 5px 7px;
     }

     .main-step-number h2 {
         font-size: 20px;
     }

     .main-step-title span {
         font-size: 12px;
         width: 100%;
     }

     .main-step-title h5 {
         font-size: 14px;
         width: 100%;
     }

     .main-step-icon {
         display: none;
     }
 }

 @media (max-width: 400px) {
     .main-step-title span {
         font-size: 12px;
         width: 70%;
     }

     .main-step-title h5 {
         font-size: 14px;
         width: 70%;
     }
 }

 .collection-section {
     background-color: #fff;
 }

 .collection-section .collection-section-heading {
     text-align: center;
     font-weight: 600;
 }

 .collection-section .collection-section-para {
     text-align: center;
     font-weight: 500;
 }

 .ring-categories-wrapper {
     position: relative;
     padding: 0 1.5rem;
 }

 .ring-categories {
     background-color: #fff;
     display: flex;
     justify-content: center;
     overflow-x: auto;
     gap: 1.5rem;
     padding: 5px 0px;
     scroll-behavior: smooth;
     scrollbar-width: none;
     position: relative;
 }

 .ring-categories::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari */
 }

 .ring-categories .category {
     text-align: center;
     cursor: pointer;
     transition: transform 0.2s ease-in-out;
     padding: 0.5rem;
     border: 1px solid #fff;
     border-radius: 15px;
     background-color: #fff;
 }

 .ring-categories .category:hover,
 .ring-categories .category.active {
     transform: scale(1.05);
     border: 1px solid #000000;
 }

 .ring-categories .category img {
     width: 100px;
     /* Adjusted size for consistency */
     height: 60px;
     /* Adjusted size for consistency */
     display: block;
     margin-left: auto;
     margin-right: auto;
     object-fit: contain;
     /* Ensure image fits without distortion */
 }

 .ring-categories .category .category-name {
     font-size: 15px;
     font-weight: bold;
     color: #555;
     margin-bottom: 10px;
 }

 .scroll-button-left {
     position: absolute;
     top: 50%;
     left: 10px;
     transform: translateY(-50%);
     width: 20px;
 }

 .scroll-button-right {
     position: absolute;
     top: 50%;
     right: 5px;
     transform: translateY(-50%);
     width: 20px;
 }

 .arrow-btn {
     background: none;
     border: none;
     font-size: 15px;
     cursor: pointer;
     z-index: 2000;
     display: block;
 }

 @media (max-width: 1200px) {
     .ring-categories {
         justify-content: start;
         overflow-x: auto;
     }
 }

 @media (max-width: 768px) {

     .ring-categories {
         justify-content: space-around;
         padding: 1rem;
         gap: 1rem;
     }
 }

 .filter-wrapper {
     margin: auto;
 }

.dropdown-container {
    position: relative;    /*Add this */
    display: inline-block;
    } 

 .dropdown-btn-metal,
 .dropdown-btn-shape,
 .dropdown-btn-size,
 .dropdown-btn-price {
     padding: 5px 7px;
     font-size: 13px;
     cursor: pointer;
     border: 1px solid #ccc;
     background: #fff;
     border-radius: 6px;
     transition: background-color 0.3s ease;
     display: flex;
     align-items: center;
     gap: 8px;
 }


 .dropdown-btn-metal i,
 .dropdown-btn-shape i,
 .dropdown-btn-size i,
 .dropdown-btn-price i {
     font-size: 10px;
 }

 .dropdown-btn-metal:hover,
 .dropdown-btn-shape:hover,
 .dropdown-btn-size:hover,
 .dropdown-btn-price:hover {
     background-color: #f9f9f9;
 }

 .dropdown-content-metal,
 .dropdown-content-shape,
 .dropdown-content-size,
 .dropdown-content-price {
     display: none;
     position: absolute;
     background-color: #fff;
     min-width: 180px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     padding: 0.5rem;
     border-radius: 6px;
     z-index: 100;
     margin-top: 0.5rem;
     border: 1px solid #ddd;
 }

 .dropdown-content-metal .dropdown-option img {
     width: 30px;
     height: 30px;
     object-fit: contain;
     border-radius: 15px;
     border: 1px solid #777;
 }

 .dropdown-option {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 10px;
     padding: 6px 8px;
     border: 1px solid #eee;
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     margin-bottom: 0.5rem;
 }

 .dropdown-option:hover {
     background-color: #f0f0f0;
 }

 .dropdown-content-shape {
     display: none;
     min-width: 250px;
     left: 0px;
 }

 .dropdown-content-shape .dropdown-content-shape-wrapper .dropdown-option {
     display: flex;
     flex-direction: column;
     justify-content: center;
     flex: 1;
     gap: 10px;
     padding: 6px 8px;
     border: 1px solid #eee;
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     margin-bottom: 0rem;
 }

 .dropdown-content-shape .dropdown-content-shape-wrapper .dropdown-option:nth-child(even) {
     margin-right: 0;
 }

 .dropdown-content-shape .dropdown-content-shape-wrapper .dropdown-option:last-child {
     flex: 1 1 100%;
     max-width: none;
     margin-right: 0;
 }

 .dropdown-content-shape .dropdown-content-shape-wrapper .dropdown-option img {
     width: 80px;
     height: 40px;
     object-fit: contain;
     border-radius: 15px;
 }

 .dropdown-content-shape .dropdown-content-shape-wrapper .filtertext1 {
     font-size: 10px;
     font-weight: 600;
     color: var(--text-color);
 }

 .dropdown-btn-shape .dropdown-btn-shape-icon {
     width: 20px;
     height: 20px;
     text-align: center;
     overflow: hidden;
     display: flex;
     justify-content: center;
 }

 .dropdown-btn-shape .dropdown-btn-shape-icon img {
     width: 40px;
     height: auto;
 }

 .dropdown-option img {
     width: 50px;
     height: 50px;
     object-fit: contain;
     border-radius: 15px;
 }

 .filtertext1 {
     font-size: 12px;
     font-weight: 600;
     color: var(--text-color);
 }

 #price_sort {
     padding: 0.4rem 0.7rem 0.4rem 0.3rem;
     border-radius: 6px;
     border: 1px solid #ccc;
     font-size: 13px;
     cursor: pointer;
     background-color: #fff;
     transition: border-color 0.3s ease;
 }

 #price_sort:focus {
     outline: none;
     border-color: #007bff;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 .filter-wrapper .offcanvas-bottom {
     height: auto;
 }

 .filter-wrapper .offcanvas-bottom .offcanvas-body {
     height: 70vh;
     overflow-y: scroll;
 }

 .filter-wrapper .offcanvas-header,
 .filter-wrapper .offcanvas-bottom {
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
 }

 .filter-wrapper .offcanvas-header {
     background: #f9f9f9;
 }

 .filter-wrapper .offcanvas-header .Reload-button,
 .filter-wrapper .offcanvas-header .close-button {
     border: none;
     background: transparent;
 }

 .filter-wrapper .offcanvas-header .offcanvas-title {
     font-size: 14px;
 }

 .filter-wrapper .offcanvas-body .offcanvas-filter-metal {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .filter-wrapper .offcanvas-body .offcanvas-filter-metal .dropdown-option {
     flex: 0 0 calc(25% - 0.5rem);
     flex-direction: column;
     border-radius: 12px;
 }

 @media (max-width: 420px) {
     .filter-wrapper .offcanvas-body .offcanvas-filter-metal .dropdown-option {
         flex: 0 0 calc(50% - 0.5rem);
         flex-direction: column;
         border-radius: 12px;
     }
 }

 .range-wrapper {
     position: relative;
     width: 100%;
     background-color: #ffffff;
     /* padding: 20px; */
 }

 .range-wrapper .range-container {
     position: relative;
     width: 100%;
     height: 50px;
 }

 .range-heading {
     font-size: 20px;
     color: var(--text-color);
     font-weight: 700;
     margin-left: 15px;
     margin-bottom: 15px;
 }

 input[type="range"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     width: 100%;
     outline: none;
     position: absolute;
     margin: auto;
     top: 0;
     bottom: 0;
     background-color: transparent;
     pointer-events: none;
 }

 .slider-track {
     background: #ffffff;
     width: calc(100% - 30px);
     height: 20px;
     position: absolute;
     top: 0;
     bottom: 0;
     border-radius: 0px;
     border: 1px solid #333;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     margin: 0px 15px;
 }

 .slider-track-color-bg {
     background: linear-gradient(90deg, rgb(255, 254, 235) 10%, rgb(255, 255, 255) 90%) !important;
 }

 .slider-track-clarity-bg {
     background: url('/static/img/others/clarity-filter-hint.webp') center center / cover no-repeat;
 }


 input[type="range"]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     height: 5px;
 }

 input[type="range"]::-moz-range-track {
     -moz-appearance: none;
     height: 5px;
 }

 input[type="range"]::-ms-track {
     appearance: none;
     height: 5px;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     height: 52px;
     width: 30px;
     background: url('../static/img/icons/filtering-diamond.webp') no-repeat center center;
     background-size: cover;
     margin-top: -26px;
     cursor: pointer;
     pointer-events: auto;
 }

 input[type="range"]::-moz-range-thumb {
     -webkit-appearance: none;
     height: 1.7em;
     width: 1.7em;
     cursor: pointer;
     border-radius: 50%;
     pointer-events: auto;
     border: none;
 }

 input[type="range"]::-ms-thumb {
     appearance: none;
     height: 1.7em;
     width: 1.7em;
     cursor: pointer;
     border-radius: 50%;
     pointer-events: auto;
 }

 input[type="range"]:active::-webkit-slider-thumb {
     background-color: transparent;
     border: none;
 }

 .values {
     background-color: #ffffff;
     width: calc(100% - 30px);
     position: relative;
     margin: 0px 15px;
     border-radius: 10px;
     border: 1px solid #333;
     border-bottom: none;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
     text-align: center;
     font-weight: 500;
     font-size: 12px;
     color: #333;
     display: flex;
     align-items: center;
 }

 .values .color-value,
 .values .clarity-value,
 .values .carat-value {
     flex: 1 1 0%;
     padding: 4px 0px;
     border-right: 1px solid #333;
     transition: all 0.3s ease-in-out;
     display: inline-block;
     background-color: #eee;
     opacity: 0.4;
 }

 .values .color-value:first-child,
 .values .clarity-value:first-child,
 .values .carat-value:first-child {
     border-top-left-radius: 10px;
 }

 .values .color-value:last-child,
 .values .clarity-value:last-child,
 .values .carat-value:last-child {
     border-right: none;
     border-top-right-radius: 10px;
 }

 .values .color-value.active,
 .values .clarity-value.active,
 .values .carat-value.active {
     background-color: #ffffff;
     color: var(--text-color);
     opacity: 1;
     border: 1px solid #000 !important;
 }

 .cut-button {
     width: 100%;
     padding: 10px 0px;
     text-align: center;
     background: #e8e8e8;
     border: none;
     outline: none;
 }

 .custom-tooltip {
     position: relative;
     display: inline-block;
     cursor: pointer;
 }

 .custom-tooltip i {
     color: #777;
     border: none;
     font-size: 14px;
     border-radius: 10px;
 }

 .custom-tooltip .tooltip-text {
     visibility: hidden;
     width: max-content;
     max-width: 200px;
     background-color: #e8e8e8;
     color: var(--text-color);
     text-align: left;
     padding: 6px 10px;
     border-radius: 4px;
     position: absolute;
     top: 120%;
     /* adjust as needed */
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     opacity: 0;
     transition: opacity 0.2s ease;
     font-size: 12px;
     font-weight: 400;
     line-height: 18px;
     height: auto;
 }

 .custom-tooltip:hover .tooltip-text {
     visibility: visible;
     opacity: 1;
 }


 .cut-buttons-group {
     border: 1px solid #333;
     display: flex;
     align-items: center;
     border-radius: 15px;
 }

 .cut-button {
     width: 100%;
     padding: 10px 0px;
     text-align: center;
 }

 .cut-button:first-child {
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
     border-right: 1px solid #333;
 }

 .cut-button:last-child {
     border-bottom-right-radius: 15px;
     border-top-right-radius: 15px;
     border-left: 1px solid #333;
 }

 .cut-button:hover {
     background: #777;
     color: #fff;
 }

 .budget-input.is-invalid {
     border-color: red;
 }

 /* Chrome, Safari, Edge */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 /* Firefox */
 input[type="number"] {
     -moz-appearance: textfield;
 }

 .vertical-spinner {
     position: relative;
     display: inline-flex;
     align-items: center;
     width: 100%;
 }

 .vertical-spinner input[type="number"] {
     width: 100%;
     padding-right: 30px;
     height: 40px;
     font-size: 16px;
     text-align: center;
     border-top-left-radius: 7px;
     border-bottom-left-radius: 7px;
 }

 .spinner-buttons {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .spinner-buttons button {
     width: 30px;
     height: 50%;
     border: none;
     background-color: #333;
     color: #fff;
     font-weight: bold;
     cursor: pointer;
     padding: 0;
     font-size: 16px;
     line-height: 1;
     border-left: 1px solid #ccc;
 }

 .spinner-buttons button:hover {
     background-color: #e8e8e8;
     color: var(--text-color);
 }