/* template.css */

body {
  font-family: "DM Sans", sans-serif;
  background: #06080b;
  color: #f2f6f8;
  padding-top: 64px;
}
table, tr, td {
  font-family: "DM Sans", sans-serif !important;
  color: #f2f6f8 !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', serif;
  color: #f2f6f8 !important;
}
div, p, span, small, strong {
  font-family: "DM Sans", sans-serif;
  color: #f2f6f8 !important;
}
a {
  color: #cdbbff !important;
}
.fs-14 {
  font-size: 14px;
}
.fs-12 {
  font-size: 12px;
}
.ls-1 {
  letter-spacing: 0.5px;
}
.ls-2 {
  letter-spacing: 1px;
}
.ls-3 {
  letter-spacing: 1.5px;
}
.ls-4 {
  letter-spacing: 2px;
}
.ls-5 {
  letter-spacing: 2.5px;
}
.ls-6 {
  letter-spacing: 3px;
}
.border-c1 {
  border: 1px solid #bae0f0;
}
.card {
  background: #06080b;
  border: 1px solid #bae0f0;
}
.card-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, color-mix(in srgb, #13181b 94%, transparent) 10%, color-mix(in srgb, #13181b 20%, transparent) 35%, color-mix(in srgb, #13181b 10%, transparent) 80%, color-mix(in srgb, #13181b 5%, transparent) 100%);
  z-index: 0;
}
.text-c1 {
  color: #22272b !important;
}
.text-c2 {
  color: #06080b !important;
}
.text-c3 {
  color: #f2f6f8 !important;
}
.text-c4 {
  color: #cdbbff !important;
}
.text-c5 {
  color: #bae0f0 !important;
}
.text-c6 {
  color: #9ca2a6 !important;
}
.bg-c1 {
  background: #13181b !important;
}
.bg-c2 {
  background: #06080b !important;
}
.bg-c3 {
  background: #f2f6f8 !important;
}
.bg-c4 {
  background: #22272b !important;
}
.bg-c5 {
  background: #bae0f0 !important;
}
.bg-c6 {
  background: rgba(34, 39, 43, 0.80);
  background: linear-gradient(to right, rgba(6, 8, 11, 0.82), rgba(6, 8, 11, 0.82));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 1px 12px 0 rgba(30, 25, 50, 0.09);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
}
.bg-c7 {
  background-image: linear-gradient(to right, #bae0f0, #22272b);
}
.bg-warning-2 {
  background: #ff7201 !important;
}
.bg-1-star {
  background: #f73 !important;
}
.bg-2-stars {
  background: #ff9600 !important;
}
.bg-3-stars {
  background: #ffb000 !important;
}
.bg-4-stars {
  background: #b0cb1f !important;
}
.bg-5-stars {
  background: #2bab2d !important;
}
.cursor-pointer {
  cursor: pointer;
}
.add-to-bookmarks {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background-color: transparent;
  border: none;
  z-index: 3;
}
.main-link:hover, .main-link:active, .main-link.active {
  background: #22272b !important;
  color: #f2f6f8 !important;
}
.un1, .un2, .un3, .un4, .un5 {
  display: inline-block;
  text-decoration: none;
}
.un1:after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: #cdbbff;
  transition: 300ms;
}
.un2:after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: #06080b;
  transition: 300ms;
}
.un3:after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: #f2f6f8;
  transition: 300ms;
}
.un4:after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: #cdbbff;
  transition: 300ms;
}
.un5:after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: #bae0f0;
  transition: 300ms;
}
.un3:hover {
  color: #f2f6f8 !important;
}
.un4:hover {
  color: #cdbbff !important;
}
.un5:hover {
  color: #bae0f0 !important;
}
.un1:hover:after, .un2:hover:after, .un3:hover:after, .un4:hover:after, .un5:hover:after {
  width: 100%;
}
.shadow-xl {
  box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.5) !important;
}
.text-shadow {
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}
.text-shadow-2 {
  text-shadow: 1px 1px 2px #000;
}
.font-size-50 {
  font-size: 50px;
}
.btn.bg-c1 {
  background: transparent !important;
  color: #22272b !important;
  border: 1px solid #22272b !important;
}
.btn.bg-c2 {
  color: #cdbbff !important;
  border: 1px solid #cdbbff !important;
}
.btn.bg-c2 img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(14%) saturate(496%) hue-rotate(2deg) brightness(97%) contrast(85%) !important;
  mix-blend-mode: multiply;
}
.btn.bg-c4 {
  color: #06080b !important;
}
.btn.bg-c5 {
  color: #06080b !important;
  background: #bae0f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 0 16px 2px rgba(186, 224, 240, 0.22);
  transition: box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), filter 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  font-size: 1.25rem;
  padding: 12px 32px;
  border: none !important;
  filter: brightness(1);
  position: relative;
  cursor: pointer;
}
.btn.bg-c5:hover, .btn.bg-c5:focus-visible {
  box-shadow: 0 0 36px 8px rgba(186, 224, 240, 0.36);
  filter: brightness(1.07);
  outline: none;
}
.btn.bg-c1:hover, .btn.bg-c1.active {
  background: #22272b !important;
  border: 1px solid #06080b !important;
  color: #06080b !important;
}
.btn.bg-c2:hover, .btn.bg-c2.active {
  background: #13181b !important;
  color: #bae0f0 !important;
  border: 1px solid #bae0f0 !important;
}
.btn.bg-c2:hover img, .btn.bg-c2.active img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(1374%) hue-rotate(292deg) brightness(90%) contrast(116%) !important;
  mix-blend-mode: multiply;
}
.btn.bg-c4:hover, .btn.bg-c4.active {
  background: #bae0f0 !important;
  border: 1px solid #bae0f0 !important;
  color: #f2f2f2 !important;
}
.btn-facebook {
  background-color: #4267b2;
  border-color: #4267b2;
  color: #fff !important;
}
.btn-facebook:hover {
  background-color: #4267b2;
  border-color: #4267b2;
}
.navbar-nav .mobile-user-dropdown .dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}
.navbar-nav .mobile-user-dropdown .dropdown-menu {
  position: absolute;
}
.navbar-nav li a #cart_quantity_badge {
  font-size: 10px;
  position: relative;
  top: -10px;
  right: 10px;
}
.navbar-nav .dropdown-item.active, .navbar-nav .dropdown-item:active {
  background-color: #06080b !important;
  color: #fff !important;
}
.navbar-brand img {
  height: 36px;
}
.navbar .navbar-toggler {
  border: 1px solid #bae0f0;
  box-shadow: none;
}
.navbar .navbar-toggler .bi.bi-list:before {
  color: #bae0f0 !important;
}
.navbar .navbar-toggler:not(.collapsed) .bi.bi-list:before {
  content: "\F659";
  color: #d81c24 !important;
}
.navbar .navbar-toggler:not(.collapsed) {
  border: 1px solid #d81c24 !important;
}
.navbar .navbar-toggler:not(.collapsed) .right-nav {
  display: none;
  /* Breadcrumb */
}
.breadcrumb {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  /* Override Bootstrap's default pseudo-element separator */
}
.breadcrumb-item + .breadcrumb-item::before {
  float: none;
  display: inline-flex;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  content: "\f285";
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal;
  speak: never;
  color: #cdbbff !important;
  /* Ensure all breadcrumb items are vertically centered */
}
.breadcrumb-item a, .breadcrumb-item span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: #cdbbff !important;
}
.my-account-menu .nav-link {
  background-color: #13181b;
}
.my-account-menu .nav-link:hover {
  background-color: #bae0f0;
  color: #06080b !important;
}
.my-account-menu .nav-link:hover span, .my-account-menu .nav-link:hover i {
  color: #06080b !important;
}
.my-account-menu .nav-link.active, .my-account-menu .nav-link.active span {
  background-color: #bae0f0;
  color: #06080b !important;
}
.search-btn {
  cursor: pointer;
}
.page-item .page-link {
  color: #cdbbff !important;
  background-color: #13181b !important;
}
.page-item.active .page-link {
  background: #bae0f0 !important;
  color: #f0f0f0 !important;
  border-color: #bae0f0 !important;
}
.animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.animated-2 {
  animation-duration: 1.1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.animated-3 {
  animation-duration: 1.4s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.animated-4 {
  animation-duration: 1.7s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  animation-name: slideInRight;
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
.details-icons {
  width: 48px;
  height: 48px;
}
label.error {
  color: red;
  margin-bottom: 15px;
}
.home-banner .home-banner-img {
  height: 550px;
  object-fit: cover;
}
.home-banner .overlay {
  position: absolute;
  width: 50%;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(to right, #000, rgba(255, 255, 255, 0));
}
.home-banner .carousel-caption {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  left: 10%;
  width: 550px;
  z-index: 3;
}
.home-banner .carousel-caption.home-2 {
  width: 500px;
}
.home-banner .carousel-caption h1 {
  font-family: 'Space Grotesk', serif;
}
.hiw-slide-dots {
  text-align: center;
  padding: 0;
  margin: 10px auto;
}
.hiw-slide-dots li {
  list-style: none;
  border-bottom: 7px solid #22272b;
  display: inline-block;
  margin-right: 5px;
  width: 30px;
}
.hiw-slide-dots li.slick-active {
  border-bottom: 7px solid #06080b;
}
.hiw-slide-dots li button {
  font-size: 0;
  display: none;
}
#next_arrow {
  position: absolute;
  right: -12px;
  top: 45%;
  font-size: 30px;
  color: #22272b;
}
#prev_arrow {
  position: absolute;
  top: 45%;
  left: -12px;
  font-size: 30px;
  color: #22272b;
}
#next_arrow_brands {
  position: absolute;
  right: -12px;
  top: 35%;
  font-size: 30px;
  color: #22272b;
}
#prev_arrow_brands {
  position: absolute;
  top: 35%;
  left: -12px;
  font-size: 30px;
  color: #22272b;
}
.view-item-detail {
  position: absolute;
  z-index: 9999;
  bottom: 0;
  right: 11px;
}
#loginModal .nav-tabs .nav-item.show .nav-link, #loginModal .nav-tabs .nav-link {
  border: none;
  color: #cdbbff;
}
#loginModal .nav-tabs .nav-item.show .nav-link.active, #loginModal .nav-tabs .nav-link.active {
  border: none;
  border-bottom: 1px solid #bae0f0;
  color: #bae0f0;
}
#loginModal .btn-close {
  position: absolute;
  top: 20px;
  right: 10px;
}
#loginModal .hr-form {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #cdbbff;
  line-height: 0.1em;
  margin: 20px 0 20px;
}
#loginModal .hr-form span {
  background: #212529;
  padding: 0 10px;
}
.pills-tab {
  /* Center slick arrows under carousel */
}
.pills-tab li .nav-link {
  background: transparent;
  color: #bae0f0 !important;
  border: 1px solid #bae0f0;
  margin-right: 10px;
}
.pills-tab li .nav-link.active, .pills-tab li .nav-link:hover {
  background: #bae0f0 !important;
  color: #06080b !important;
}
.carousel-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  gap: 16px;
  position: relative;
  width: 100%;
  z-index: 2;
  /* Style the custom arrow icons */
}
.carousel-arrows i {
  font-size: 22px;
  color: #22272b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  background: #13181b;
  border: 1px solid #bae0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  user-select: none;
}
.carousel-arrows i:hover {
  background: #bae0f0;
  color: #13181b;
  /* Hide default slick arrows */
}
.featured-list .slick-arrow {
  display: none !important;
}
.ajax-loading {
  position: absolute;
  right: 115px;
  top: 15px;
  z-index: 9;
}
.no-results {
  padding: 15px;
}
.ajax-section-header {
  padding: 8px 15px;
  background-color: #222;
  font-weight: bold;
  font-size: 0.9em;
  color: white;
}
.ajax-item.error {
  color: #dc3545;
  background-color: white;
  /* Spinners */
}
.spinner {
  margin: 0px auto;
  height: 25px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
.cookie-message {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 85px 0 20px;
  background: #22272b;
  border-bottom: 1px solid #ccc;
  box-shadow: 0px 0px 3px #ccc;
  z-index: 99;
}
.cookie-message .cookiebar-close {
  position: absolute;
  top: 0;
  *top: -2px;
  right: 20px;
  cursor: pointer;
}
.cookie-message p, .cookie-message a {
  color: #fff;
  font: bold 11px/18px Arial;
  margin: 0.6em 0;
}
.red .cookiebar-close {
  background: #06080b;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px transparent solid;
  border-radius: 2px;
  box-shadow: 0.3px 0.3px 0 0.1px;
  text-decoration: none;
}
.red .cookiebar-close:hover {
  color: #bae0f0;
  background: #cdbbff;
  box-shadow: 0.5px 0.5px 0.2px 0.2px;
}
.card.shadow-sm:hover, .card.shadow-sm:active {
  border: 1px solid #22272b;
  transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.wa-position {
  position: fixed;
  width: 42px;
  height: 42px;
  bottom: 10px;
  right: 10px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wa-position .wp-icon::before {
  margin-top: 10px;
}
.wa-position::before, .wa-position::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.45);
  animation: waPulse 2.4s ease-out infinite;
}
.wa-position:hover {
  color: #fff;
  background-color: #22c35d;
}
@keyframes waPulse {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.btn-whatsapp {
  border-color: #fff !important;
  color: #fff !important;
  background: #25d366 !important;
}
.btn-whatsapp:hover {
  background-color: #20b858 !important;
  color: #fff !important;
  border-color: #20b858 !important;
  transition: background-color 0.2s, color 0.2s;
}
.search-pill {
  background: #fff;
  border-radius: 800px;
  padding: 8px 8px 8px 24px;
}
.search-pill input {
  border: none;
  outline: none;
  box-shadow: none;
}
.search-pill input:focus {
  box-shadow: none;
}
.stampy-map-page {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--navbar-height, 70px) - var(--footer-height, 52px));
  background: #0a0d12;
  overflow: hidden;
}
#stampy-map {
  position: absolute;
  inset: 0;
}
.stampy-topbar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.stampy-topbar > * {
  pointer-events: auto;
}
.stampy-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #161b24;
  border: 1px solid #262c38;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  color: #f5f7fa;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.stampy-chip:hover {
  border-color: #3b4456;
}
.stampy-chip.is-active {
  border-color: #5fd3c4;
}
.stampy-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: #8b93a1;
}
.stampy-chip-dot--mine {
  background: #5fd3c4;
}
.stampy-chip-dot--others {
  background: #b9a7f5;
}
.stampy-season-pill {
  background: #161b24;
  border: 1px solid #262c38;
  border-radius: 12px;
  padding: 8px 16px;
  text-align: right;
}
.stampy-season-pill-label {
  display: block;
  font-size: 11px;
  color: #8b93a1;
  letter-spacing: 0.03em;
}
.stampy-season-pill-value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #f5f7fa;
}
.stampy-claim-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #161b24;
  border: 1px solid #262c38;
  border-radius: 16px;
  padding: 16px 20px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.stampy-claim-panel.is-hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
.stampy-claim-badge {
  display: block;
  font-size: 11px;
  color: #5fd3c4;
  margin-bottom: 2px;
}
.stampy-claim-title strong {
  font-size: 18px;
  color: #f5f7fa;
}
.stampy-claim-points {
  font-size: 13px;
  color: #8b93a1;
}
.stampy-claim-btn {
  background: #5fd3c4;
  color: #04342c;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.stampy-claim-btn:disabled {
  background: #262c38;
  color: #8b93a1;
  cursor: not-allowed;
}
.stampy-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 600;
  background: #161b24;
  border: 1px solid #262c38;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  color: #f5f7fa;
}
.stampy-toast--success {
  border-color: #5fd3c4;
}
.stampy-toast--error {
  border-color: #e2645a;
}
.stampy-toast.is-hidden {
  display: none;
}
.leaflet-control-zoom {
  border: none !important;
}
.leaflet-control-zoom a {
  background: #161b24 !important;
  color: #f5f7fa !important;
  border-color: #262c38 !important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 1200px) {
  .home-banner .overlay {
    width: 100%;
  }
}
@media (max-width: 992px) {
  .navbar-brand img {
    height: 32px;
  }
  .home-banner .home-banner-img {
    height: 450px;
  }
}
@media (max-width: 768px) {
  .home-banner .home-banner-img {
    height: 600px;
  }
  .home-banner .carousel-caption {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    top: 35%;
    left: 5%;
    width: 450px;
  }
  .home-banner .carousel-caption.home-2 {
    width: 330px;
  }
  .breadcrumb-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
  }
  .breadcrumb-scroll::-webkit-scrollbar {
    display: none;
  }
  .breadcrumb-scroll .breadcrumb-item {
    flex-shrink: 0;
    font-size: 13px;
  }
  .breadcrumb-scroll .breadcrumb-item + .breadcrumb-item {
    padding-left: 6px;
  }
  .breadcrumb-scroll .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 6px;
  }
  .breadcrumb {
    font-size: 13px;
  }
  .breadcrumb-item + .breadcrumb-item::before {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}
@media (max-width: 576px) {
  .navbar-brand img {
    height: 30px;
  }
  .home-banner .home-banner-img {
    height: 550px;
  }
  .home-banner .carousel-caption {
    top: 50%;
    width: 310px;
  }
  .toast {
    width: 320px !important;
  }
  .search-pill {
    background: #fff;
    border-radius: 800px;
    padding: 6px 6px 6px 14px;
  }
}