.header-call .icon {
  margin: 0 0.6rem 0.2rem 0.6rem;
  font-size: 3rem;
}

.category-dropdown.show>a,
.category-dropdown:hover>a {
  background-color: #263476;

}

.category-dropdown>a:not(.btn):hover {
  color: #fff !important;
}

.header-top a:hover:not(.dropdown .dropdown-box a) {
  color: #fff !important;
  opacity: 0.8;
}

.h1 {
  font-size: calc(3.375rem + 1.5vw) !important;
}

.h2 {
  font-size: calc(2.8125rem + 0.9vw) !important;
}

.h3 {
  font-size: calc(2.25rem + 0.6vw) !important;
}

.h4 {
  font-size: calc(1.5rem + 0.3vw) !important;
}

.h5 {
  font-size: calc(1.25rem + 0.2vw) !important;
}

.h6 {
  font-size: calc(1rem + 0.1vw) !important;
}

.text-small {
  font-size: calc(0.875rem + 0.1vw) !important;
}

.text-xsmall {
  font-size: calc(0.75rem + 0.1vw) !important;
}

.error-404 .banner-content {
  margin: 0 auto;
}

.error-404 {
  padding: 14rem 0 14rem 0;
}

.btn-dark {
  color: #fff;
  background-color: #ed1c25;
  border-color: #ed1c25;
}

.btn-dark:hover {
  color: #fff;
  background-color: #ed1c25;
  border-color: #ed1c25;
  opacity: 0.8;
}



.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.label-discount {
  background-color: #ed1c25 !important;
  color: #fff;
  /* padding: 0.2rem 0.5rem; */
  /* border-radius: 0.2rem; */
}

.new-price {
  color: #263476 !important;
}

.product-countdown .countdown-amount {
  /* background-color: #ed1c25!important; */
  color: #f77c29 !important;
  /* padding: 0.2rem 0.5rem; */
  /* border-radius: 0.2rem; */
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.px-5 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}


.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.mx-5 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.contact-us .icon-box-content p {
  white-space: pre-wrap;
  font-size: 1.2rem;
}

.product-label-group {
  top: 1rem;
  left: 1rem;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 2rem !important;
}

.m-6 {
  margin: 3rem !important;
}

.m-7 {
  margin: 4rem !important;
}

.m-8 {
  margin: 5rem !important;
}

.m-9 {
  margin: 6rem !important;
}

.m-10 {
  margin: 7rem !important;
}


.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 2rem !important;
}

.p-6 {
  padding: 3rem !important;
}

.p-7 {
  padding: 4rem !important;
}

.p-8 {
  padding: 5rem !important;
}

.p-9 {
  padding: 6rem !important;
}

.p-10 {
  padding: 7rem !important;
}

.widget-products.widget-products-bordered .widget-body {
  padding: 2.6rem 2rem 2.3rem;
}

/* make images not draggable */
img {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* make text truancate for .post-details .post-title */
/* .post-details .post-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} */
/* max 2 lines */
.home-post-wrapper .post-details .post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-post-wrapper .post-media img {
  width: 100%;
  min-height: 180px;
  height: 180px;
  max-height: 180px;
  object-fit: cover;
}

.category-group-image,
.category-group-icon {
  align-items: start;
}

.category-group-image .category-name {
  font-weight: bold;
}

.rounded {
  border-radius: 0.25rem !important;
}

.compare-availability .compare-value:not(.out-of-stock) {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
}

/* out of stock */
.compare-availability .compare-value.out-of-stock {
  font-size: 1.2rem;
  font-weight: bold;
  color: #f00;
}

.compare-table {
  overflow-x: unset;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* shadow bottom */
.shadow-bottom {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-bottom-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-bottom-xl {
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.2) !important;
}

.border {
  border: 1px solid #e5e5e5 !important;
}

.widget-about-desc {
  text-align: justify;
  line-height: 1.5 !important;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5 !important;
}

.w-max-content {
  width: max-content;
}

/* on mobile if show .product product-actions */
@media (max-width: 767px) {

  .product .product-action,
  .product .product-action-vertical,
  .product .product-action-horizontal {
    visibility: visible;
    opacity: 1;
  }

  .product .product-action-horizontal {
    bottom: 1.5rem;
  }
}

.product-action-horizontal {
  justify-content: space-evenly;
}

.product:not(.product-list-sm, .product-cart, .product-widget,.product-compare) {
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 0.55rem;
  padding: 1rem;
}

.product:not(.product-list-sm, .product-cart, .product-widget,.product-compare) .product-pa-wrapper {
  border-top: 1px solid #e5e5e5;
  text-align: center;
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
  padding: 2rem 0 1rem 0;
}

.order .order-table tbody td:first-child {
  padding-top: 1.5rem;
}

/* smooth scrol */
html {
  scroll-behavior: smooth;
}

.login-popup {
  max-width: 100rem;
  box-shadow: none !important;
}

.login-page .login-popup {
  box-shadow: none !important;
}
.product-single .product-variation-clean{
  top: 0!important;
}
.twentytwenty-container img{
  object-position: top;
}
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 5px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 15px; /* Set a specific slider handle width */
  height: 15px;
  border-radius: 50%;  /* Slider handle height */
  background: #263476; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 15px; /* Set a specific slider handle width */
  height: 15px;
  border-radius: 50%;  /* Slider handle height */
  background: #263476; /* Green background */
  cursor: pointer; /* Cursor on hover */
}