.font-urbanist {
  font-family: "Urbanist", sans-serif !important;
}
.btn-cart {
  background-color: #000d6b; /* normal state */
  transition: background-color 0.3s ease;
}

/* Mobile (default) – no side padding */
.section-portion {
  padding-left: 0;
  padding-right: 0;
}

/* Web / desktop view (lg and up) */
@media (min-width: 992px) {
  .section-portion {
    padding-left: 4.2rem;
    padding-right: 4.2rem;
  }
}

.text-color {
 color: #000d6b; /* normal state */

}
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
    background-color: #000d6b;
    color: #fff; /* optional but usually looks better */
  }
/* --- Sort pill --- */
.sort-by .dropdown-toggle::after { display: none; } /* hide BS caret */
.bg-filter{
    background: #eaeaea;    
}

.bg-filter:hover{ background: #eaeaea; }
.sort-pill{
  background: #eaeaea;          /* light grey like screenshot */
  border: 0;
  border-radius: 9999px;
  padding: 10px 16px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: 16px;
  
}
.sort-pill .label{ font-weight: 700; margin-right: 4px; }  /* “Sort by:” bold */
.sort-pill:focus{ outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.sort-pill:hover{ background: #eaeaea; }

/* Dropdown menu look */
.sort-menu{
  --radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 260px;             /* roomy like the mock */
}
.sort-menu .dropdown-item{
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
}
.sort-menu .dropdown-item:hover,
.sort-menu .dropdown-item:focus{
  background: #f3f4f6;
}

/* Keep row tidy on small screens */
.filter-container{ gap: .5rem; flex-wrap: wrap; }
.sort-by{ order: 2; } /* sits after the chips by default */
@media (min-width: 576px){
  .sort-by{ order: 0; } /* feel free to reorder on larger screens */
}


.btn-cart:hover {
  background-color: #12144c; /* hover state */
}
.add-btn-bg {
  background-color: #ececec;
}
.btn-closes {
  color: white;
}
.customize-btn:hover {
  background-color: #ececec !important;
  color: #0a0a40 !important;
}
/* Checkbox */
.form-check-input[type="checkbox"] {
  background-color: #ececec;
  border: 1px solid #ccc;
}
.form-check-input[type="checkbox"]:checked {
  background-color: #12144c;
  border-color: #12144c;
}

/* Radio */
.form-check-input[type="radio"] {
  background-color: #ececec;
  border: 1px solid #ccc;
}
.form-check-input[type="radio"]:checked {
  background-color: #12144c;
  border-color: #12144c;
}
.border-checkout {
  border: 2px solid #000d6b;
}

.border-checkout:hover {
  border: 2px solid #000d6b;
}

.icon-color {
  color: #000d6b;
}
.nav-pills .nav-link.active {
  background-color: #000d6b !important;
  color: #fff !important;
  border: 1px solid #000d6b !important;
}

/* Inactive tab */
.nav-pills .nav-link {
  border: 2px solid #000d6b !important;
  color: #000d6b !important;
  background-color: transparent !important;
}


.dual-range{
    --thumb: 18px;             /* thumb diameter */
    --track: 4px;              /* track thickness */
    --brand: #161c4b;          /* navy color */
    position: relative;
    height: max(var(--thumb), 36px);
  }

  /* Base and filled tracks — perfectly centered */
  .dual-range .track,
  .dual-range .range-fill{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--track);
    border-radius: 999px;
  }
  /* Leave room for half a thumb at both ends so edges meet thumb centers */
  .dual-range .track{
    left: calc(var(--thumb) / 2);
    right: calc(var(--thumb) / 2);
    background: #e5e7eb; /* light gray */
  }
  .dual-range .range-fill{
    background: var(--brand);
  }

  /* Overlapped range inputs */
  .dual-range input[type=range]{
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;                   /* kills Bootstrap .form-range default margin */
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;        /* track is inert; thumbs enable events */
  }

  /* WebKit (Chrome/Edge/Safari) */
  .dual-range input[type=range]::-webkit-slider-runnable-track{
    height: var(--track);
    background: transparent;
  }
  .dual-range input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: #250c87;
 
    position: relative;
 
  }

  /* Firefox */
  .dual-range input[type=range]::-moz-range-track{
    height: var(--track);
    background: transparent;
  }
  .dual-range input[type=range]::-moz-range-thumb{
    pointer-events: auto;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    box-shadow: 0 0 0 3px rgba(22,28,75,.08);
    position: relative;
    z-index: 2;
  }