:root {
  --main-red: #e4002b;
  --main-white: #fff;

  --fz-10: 0.625rem;
  --fz-11: 0.6875rem;
  --fz-12: 0.75rem;
  --fz-14: 0.875rem;
  --fz-18: 1.125rem;
  --fz-20: 1.25rem;
  --fz-24: 1.5rem;
  --fz-26: 1.625rem;
  --fz-34: 2.125rem;
  --fz-36: 2.25rem;
}
@font-face {
  font-family: "franklin";
  src: url("../../fonts/diesel/itc-franklin-gothic-lt-demi-compressed.ttf");
}
@font-face {
  font-family: "franklingotic";
  src: url("../../fonts/diesel/itc-franklin-gothic-lt-demi-compressed.ttf");
}
@font-face {
  font-family: "BananaGrotesk-light"; /* Define the custom font name */
  src: url("../../fonts/diesel/BananaGrotesk-Light.woff2") format("woff2"),
    url("../../fonts/diesel/BananaGrotesk-Light.woff2") format("woff"); /* Define where the font can be downloaded */
  font-display: fallback; /* Define how the browser behaves during download */
}
@font-face {
  font-family: "BananaGrotesk-bold"; /* Define the custom font name */
  src: url("../../fonts/diesel/BananaGrotesk-Bold.woff2") format("woff2"),
    url("../../onts/diesel/BananaGrotesk-Bold.woff") format("woff"); /* Define where the font can be downloaded */
  font-display: fallback; /* Define how the browser behaves during download */
}
@font-face {
  font-family: "BananaGrotesk"; /* Define the custom font name */
  src: url("../../fonts/diesel/BananaGrotesk-Medium.woff2") format("woff2"),
    url("../../fonts/diesel/BananaGrotesk-Medium.woff") format("woff"); /* Define where the font can be downloaded */
  font-display: fallback; /* Define how the browser behaves during download */
}

* {
  font-family: BananaGrotesk, sans-serif;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: franklin, sans-serif;
  font-weight: 900;
}
/* reset */
a {
  color: var(--main-red);
  text-decoration: none;
  font-weight: 400;
}

a:hover {
  color: var(--main-red);
}

a:focus {
  color: var(--main-red);
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}
p,
h1,
h2,
h3,
h4,
h5 {
  margin-bottom: 0px;
}
body {
  background-color: var(--main-white);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #ff0000 #ebebeb;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  width: 7px;
  width: 7px;
}
*::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #ebebeb;
}

*::-webkit-scrollbar-track:hover {
  background-color: #ebebeb;
}

*::-webkit-scrollbar-track:active {
  background-color: #ebebeb;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ff0000;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #ff0000;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #ff0000;
}

video {
  width: 100%;
  height: auto;
}
/* clases */
.franklingotic {
  font-family: "franklingotic", sans-serif;
}
.font-family-banana {
  font-family: BananaGrotesk, sans-serif;
}
.font-family-franklin {
  font-family: franklin, sans-serif;
}
.letter-spacing-08 {
  letter-spacing: 0.8px;
}
.letter-spacing-1-1 {
  letter-spacing: 1.1px;
}
.outline-red {
  outline: 1px solid var(--main-red);
}
.text-red {
  color: var(--main-red);
}

.text-black {
  color: #333;
}

.bg-red {
  background-color: var(--main-red);
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}

.fz-10 {
  font-size: var(--fz-10);
}
.fz-11 {
  font-size: var(--fz-11);
}
.fz-12 {
  font-size: var(--fz-12);
}
.fz-14 {
  font-size: var(--fz-14);
}

.fz-18 {
  font-size: var(--fz-18);
}
.fz-20 {
  font-size: var(--fz-20);
}
.fz-24 {
  font-size: var(--fz-24);
}
.fz-26 {
  font-size: var(--fz-26);
}
.fz-28 {
  font-size: 1.75rem;
}

.fz-34 {
  font-size: var(--fz-34);
}

.fz-36 {
  font-size: var(--fz-36);
}
.max-legnth {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.btn-primary {
  color: #fff;
  background-color: var(--main-red);
  border-radius: 0;
  border: 1px solid var(--main-red);
}

.btn-primary:hover {
  color: var(--main-red);
  background-color: #fff;
  border: 1px solid var(--main-red);
}

.btn-primary:focus {
  color: var(--main-red);
  background-color: #fff;
  border: 1px solid var(--main-red);
  box-shadow: none;
}

.btn-primary-white {
  color: var(--main-red);
  background-color: var(--main-white);
  border-radius: 0;
  border: 1px solid var(--main-white);
}

.btn-primary-white:hover {
  color: var(--main-white);
  background-color: var(--main-red);
  border: 1px solid var(--main-white);
}

.btn-primary-white:focus {
  color: var(--main-white);
  background-color: var(--main-red);
  border: 1px solid var(--main-white);
  box-shadow: none;
}
.over-red:hover {
  color: var(--main-white);
  background-color: var(--main-red);
  border: 1px solid var(--main-white);
}

.btn-primary-white:focus {
  color: var(--main-white);
  background-color: var(--main-red);
  border: 1px solid var(--main-white);
  box-shadow: none;
}
.movile-hide {
  display: none;
}
.border-50 {
  border-radius: 50%;
}

.bordes-y {
  border-top: 1px solid var(--main-red);
  border-bottom: 1px solid var(--main-red);
}

.bordes-x {
  border-left: 1px solid var(--main-red);
  border-right: 1px solid var(--main-red);
}

.borde-l {
  border-left: 1px solid var(--main-red);
}

.borde-r {
  border-right: 1px solid var(--main-red);
}

.borde-t {
  border-top: 1px solid var(--main-red);
}

.borde-b {
  border-bottom: 1px solid var(--main-red);
}
.bordes-light {
  border-color: var(--main-white);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #fff !important;
}
.circulo {
  width: 200px;
  height: 200px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid var(--main-red);
}
.checkout__img {
  width: 10.5rem;
  height: 16.2rem;
}
.max-width-80 {
  width: 80%;
  max-width: 20rem;
}
.max-width-50 {
  width: 80%;
  max-width: 18rem;
}
.max-width-30 {
  width: 80%;
  max-width: 10rem;
}
.product-content__badgeContainer {
  display: flex;
}
.plp__tile__badge {
  border: 1px solid green;
  font-size: 9px;
  padding-inline: 0.2rem;
  gap: 0.2rem;
  display: flex;
}

/* NAV */
.main__nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  width: auto;
  max-width: 454px;
  background-color: #fff;
  font-size: var(--fz-14);
}

.nav__bordes {
  border-top: 1px solid var(--main-red);
  border-bottom: 1px solid var(--main-red);
  border-left: 1px solid var(--main-red);
}

.bordes li {
  border-left: 1px solid var(--main-red);
}

.nav__link--container {
  position: relative;
}

.nav__link--container:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: var(--main-red);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.2s ease-in;
}

.nav__link--container:hover:after {
  transform-origin: center;
  transform: scaleX(1);
}

.activo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: var(--main-red);
}

#nav__login,
#nav__search {
  width: 100%;
  overflow-y: auto;
  height: 95vh;
  /* height: 100%; */
}

.show {
  display: block;
}

.bar1,
.bar2,
.bar3 {
  width: 25px;
  height: 2px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
  background-color: var(--main-red);
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -5px) rotate(45deg);
}

.form-control {
  border: none;
  border: none;
  border-bottom: 1px solid var(--main-red);
  border-radius: 0;
}

.form-control:focus {
  border-bottom: 1px solid var(--main-red);
  box-shadow: none;
}

.form-floating {
  color: var(--main-red);
  font-size: var(--fz-14);
}

/* END NAV */

/* MAIN LOGO */
.main__logo {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.main__logo svg {
  width: 120px;
  height: 66px;
  position: absolute;
  top: 0;
  left: 0;
}
.main__logo2 svg {
  width: 120px;
  height: 66px;
}
.logoDiesel {
  width: 95px;
}

/* END MAIN LOGO */

/* HERO BANNER */
.hero_banner {
  position: relative;
}

.hero__text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--main-white);
  width: 80%;
  max-width: 20rem;
}

/* END HERO BANNER */

.visual__picture {
  height: 100%;
  width: auto;
  display: block;
}
.visual__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.grilla__populares--item {
  border: 1px solid var(--main-red);
}
.grilla__populares--item:hover {
  filter: contrast(130%);
  cursor: pointer;
}

.container__my {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . . ."
    ". . . ."
    ". . . .";
  border: 1px solid var(--main-red);
}

.myborders {
  border: 1px solid var(--main-red);
  margin: -1px -1px;
}
.myborders:hover {
  filter: contrast(130%);
  cursor: pointer;
}

.custom-btn--red {
  background: var(--main-red);
  border: 1px solid var(--main-red);
  color: var(--main-white);
  /* text-transform: uppercase; */
  padding: 0.375rem 1.8rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #fff;
  transition: ease-in-out 600ms;
}
.custom-btn--red:hover {
  box-shadow: inset 300px 0 0 0 #fff;
  color: var(--main-red);
}
.custom-btn--white {
  background: var(--main-white);
  border: 1px solid var(--main-white);
  color: var(--main-red);
  text-transform: uppercase;
  padding: 0.375rem 1.5rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #fff;
  transition: ease-in-out 600ms;
}
.custom-btn--white:hover {
  box-shadow: inset 700px 0 0 0 var(--main-red);
  color: var(--main-white);
}

.hover-red {
  background: var(--main-white);
  color: var(--main-red);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #fff;
  transition: ease-in-out 600ms;
}
.hover-red:hover {
  box-shadow: inset 700px 0 0 0 var(--main-red);
  color: var(--main-white);
}

.visual__images {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* WHATS APP */
.sticky {
  display: block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 9;
}
.sticky img {
  width: 60px;
}
.logo__sticky {
  display: block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  top: 0px; /* Place the button at the bottom of the page */
  left: 0; /* Place the button 30px from the right */
  z-index: 9;
}
.sticky_red {
  display: block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 94px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 9;
}
.sticky_red img {
  width: 60px;
}
/* END WHATS APP */
.container__populares {
  max-width: 700px;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 3rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1f);
  grid-template-rows: 1rf;
  grid-template-areas: ". .";
  gap: 1rem;
}
.footer__icon--size {
  font-size: 3rem;
}
.detalle-ul li {
  font-size: var(--fz-14);
  color: var(--main-red);
  font-weight: 400;
}
.detalle-ul li::before {
  content: "\2022";
  color: var(--main-red);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
/* Detalle Producto */
.gallery {
  background: #eee;
}

.gallery-cell {
  height: 100vh;

  counter-increment: gallery-cell;
}

.gallery-cell img {
  object-fit: contain;
  height: 100%;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;

  line-height: 200px;
  font-size: 80px;
  color: white;
}
.flickity-button-icon {
  fill: red;
}
.flickity-button:focus {
  box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.724);
}
.flickity-page-dots .dot {
  background-color: rgb(248, 248, 248);
}

.detalle-color {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.724);
  outline: 1px solid var(--main-red);
  overflow: hidden;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 1px;
}
.detalle-color div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.detalle-color--productos {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.724);
  outline: 1px solid var(--main-red);
  overflow: hidden;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 1px;
}
.detalle-color--productos div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.product-detail
  .product-container_general
  .attribute-values.giftcard-amount
  .attribute-value,
.product-detail
  .product-container_general
  .attribute-values.size
  .attribute-value,
.product-detail
  .product-container_general
  .attribute-values.length
  .attribute-value {
  height: 3rem;
  min-width: 5rem;
  border: 1px solid var(--main-red);
}
.product-detail
  .product-container_general
  .variation-attribute
  .attribute-value {
  background-color: transparent;
  color: var(--main-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 1.6rem;
  height: 3rem;
  border: 1px solid var(--main-color-opacity);
  margin-top: 1rem;
}

.form-select {
  border-radius: 0;
  color: var(--main-red);
  border-color: var(--main-red);
}
.form-select--checkout {
  border-radius: 0;
  color: var(--main-red);
  border-color: var(--main-red);
  border-top: none;
  border-inline: none;
}
textarea:focus-visible {
  outline-color: #e4002b;
}
.accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='red'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='red'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
accordion-button:not(.collapsed) {
  box-shadow: none !important;
  border: 1px solid red;
}
.accordion-button:focus {
  box-shadow: none !important;
}
.map-responsive {
  overflow: hidden;
  padding-bottom: 60.25%;
  position: relative;
  height: 0;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
/* acordion */
/* Style the buttons that are used to open and close the accordion panel */
.accordion2 {
  background-color: #ffffff;
  color: var(--main-red);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 1s;
}
span.accordion2:after {
  content: "\002B";
  color: var(--main-red);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
span.active:after {
  content: "-";
  color: var(--main-red);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion2:hover {
  background-color: #ffffff;
}

/* Style the accordion panel. Note: hidden by default */

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.carousel-control-prev {
  height: 90%;
}
.carousel-control-next {
  height: 90%;
}
/* galeria de similares */
.carousel-wrap {
  margin: 50px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel {
  z-index: 0;
}
.owl-carousel .item {
  position: relative;
  z-index: 100;
  -webkit-backface-visibility: hidden;
}
.carousel-control-next-icon {
  filter: invert();
}
.carousel-control-prev-icon {
  filter: invert();
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: #ff0002 !important;
}
.carrito {
  background-image: url("../../img/hero_img.jpg");
  width: 100vw;
  height: 60vh;
  background-position: center;
}

/* end fix */
.owl-nav > button {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
  color: var(--main-red);
}

.owl-nav .owl-prev {
  left: -31px;
}

.owl-nav .owl-next {
  right: -31px;
}
.owl-dots {
  display: none;
}
.products_buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.offcanvas {
  z-index: 9999;
}

.form-check-input:checked {
  background-color: var(--main-red);
  border-color: var(--main-red);
}
.form-check-input_news:checked {
  background-color: var(--main-red);
  border-color: var(--main-white);
}
.accordion-header {
  background-color: #fff;
}
.accordion-item:first-of-type .accordion-button {
  border-radius: 0;
}
.accordion-button:not(.collapsed) {
  color: #e4002b;
  background-color: transparent;
}
.accordion-button:focus {
  /* border-color: #e4002ab7; */
  box-shadow: 0 0 0 0.25rem rgba(253, 13, 13, 0.362);
}
.busqueda_avanzada > .accordion {
  padding: 0;
}
.accordion-item {
  border: none;
}
.container__feed {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . ."
    ". . ."
    ". . .";
}
.feed_img {
  width: 100%;
  height: 100%;
}
@media (min-width: 1000px) {
  /* NAV */
  .desktop-hide {
    display: none;
  }
  .map-responsive {
    padding-bottom: 30.25%;
  }
  .movile-hide {
    display: block;
  }

  /* END NAV */

  /* MAIN LOGO */
  .main__logo {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
  }
  #Header_Desktop_Logo_Big {
    width: 290px;
    height: 160px;
  }
  .main__logo svg {
    width: 300px;
  }
  .logoDiesel {
    width: 250px;
  }
  .main__logo2 svg {
    width: 360px;
    height: 198px;
  }
  /* END MAIN LOGO */
  .footer__icon--size {
    font-size: 3.4rem;
  }
  .footer__bit_text {
    font-size: var(--fz-18);
    font-weight: 500;
  }
  .footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1f);
    grid-template-rows: 1rf;
    grid-template-areas: ". . . .";
  }
  .content-detalle {
    position: absolute;
    top: 15px;
    left: 0;
    width: calc(min(23.5vw, 520px) / 1.8260869565 + 10rem);
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .vh-45 {
    height: 45vh;
  }
  .detalle-color--productos {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.724);
    outline: 1px solid var(--main-red);
    overflow: hidden;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px 1px;
  }
}
@media (max-width: 1020px) {
  .custom-btn--redsmall {
    font-size: 0.75rem !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
}

.ribbon {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 93px;
  height: 93px;
  text-align: right;
}

.ribbon span {
  font-size: 0.8rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 32px;
  transform: rotate(45deg);
  width: 125px;
  display: block;
  background: #79a70a;
  background: linear-gradient(#f70505 0%, #8f0808 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 17px;
  right: -29px;
}

.ribbon span::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #79a70a;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79a70a;
  border-left-color: #8f0808;
  border-top-color: #8f0808;
}

.ribbon span::after {
  content: "";
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1;
  border-right: 3px solid #79a70a;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79a70a;
  border-right-color: #8f0808;
  border-top-color: #8f0808;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 171px; /* Place the button at the bottom of the page */
  right: 38px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /* background-color: var(--main-red); */ /* Set a background color */
  background-color: transparent;
  /* color: white; */ /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  /* padding: 10px; */ /* Some padding */
  /* border-radius: 50% */ /* Rounded corners */
  /* font-size: 18px; */ /* Increase font size */
}

#myBtn:hover {
  background-color: transparent; /* Add a dark-grey background on hover */
}
.hero-banner {
  width: 100vw;
  height: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.hero-banner img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top left;
  display: block;
}

/* marquee */
.marquee {
  background-color: #000000;
  color: #ffffff;
  font-feature-settings: unset;
  font-size: 12px;
  overflow: hidden;
  padding: 10px 0;
}

.marquee--long {
  font-size: 12px;
  font-weight: 200;
}

.marquee span {
  display: inline-block;
  white-space: nowrap;
  color: #ffffff;
  width: var(--tw);

  text-shadow: var(--tw) 0 currentColor, calc(var(--tw) * 2) 0 currentColor,
    calc(var(--tw) * 3) 0 currentColor, calc(var(--tw) * 4) 0 currentColor,
    calc(var(--tw) * 5) 0 currentColor, calc(var(--tw) * 6) 0 currentColor,
    calc(var(--tw) * 7) 0 currentColor;

  will-change: transform;
  animation: marquee var(--ad) linear infinite;
  animation-play-state: running;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}
/* .logo__sticky,
.main__nav {
  transition: top 0.3s ease;
} */