/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[5]!./src/components/common/nav-tabs/index.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.nav_tabs {
  width: 100%;
}

.nav_tabs__nav ul {
  display: flex;
  align-items: center;
}

.nav_tabs__nav ul > li {
  display: inline-block;
}

.nav_tabs__nav ul > li > a {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: var(--regular);
  font-size: 20px;
  color: var(--color-boulder);
  line-height: 1.2;
  padding: 6px 12px;
  transition: var(--def-transition-300ms);
  will-change: color, text-shadow;
  position: relative;
}

@media (max-width: 528px) {
  .nav_tabs__nav ul > li > a {
    font-size: 16px;
  }
}
@media (min-width: 529px) and (max-width: 768px) {
  .nav_tabs__nav ul > li > a {
    font-size: 18px;
  }
}
.nav_tabs__nav ul > li > a:hover {
  color: var(--color-blue-charcoal);
}

.nav_tabs__nav ul > li > a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--color-blue-charcoal);
  transform: translate(-50%, -3px);
  transition: var(--def-transition-300ms);
  will-change: width;
  position: absolute;
  top: 100%;
  left: 50%;
}

.nav_tabs__nav ul > li > a.active {
  color: var(--color-blue-charcoal);
}

.nav_tabs__nav ul > li > a.active::after {
  width: calc(100% - 24px);
}

.nav_tabs__body > div {
  animation: fade-in-up15 300ms var(--easeinout) forwards;
}

@keyframes fade-in-up15 {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[5]!./src/components/sections/top-discounts/index.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.top_discounts {
  /**
   * Nav Tabs
   */
  /**
   * Swiper
   */
}

@media (max-width: 768px) {
  .top_discounts {
    padding-block: 45px;
  }
}
@media (min-width: 769px) and (max-width: 1280px) {
  .top_discounts {
    padding-block: 60px;
  }
}
@media (min-width: 1280px) {
  .top_discounts {
    padding-block: 90px;
  }
}
.top_discounts .side__left {
  width: 40%;
  padding-left: calc(var(--container-offset-left) + 15px);
  padding-right: 30px;
}

@media (max-width: 768px) {
  .top_discounts .side__left {
    width: 100%;
    padding-right: 15px;
    padding-bottom: 30px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .top_discounts .side__left {
    width: 50%;
  }
}
.top_discounts .side__right {
  width: 60%;
}

@media (max-width: 768px) {
  .top_discounts .side__right {
    width: 100%;
    padding: 0 15px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .top_discounts .side__right {
    width: 50%;
  }
}
.top_discounts .nav_tabs__nav {
  margin-left: -10px;
  padding-bottom: 5px;
  overflow-x: auto;
}

.top_discounts .nav_tabs__body {
  padding: 40px 0 0;
}

@media (max-width: 768px) {
  .top_discounts .nav_tabs__body {
    padding: 20px 0 0;
  }
}
.top_discounts [data-nav-tabs-content-id] h1,
.top_discounts [data-nav-tabs-content-id] h2,
.top_discounts [data-nav-tabs-content-id] h3,
.top_discounts [data-nav-tabs-content-id] h4,
.top_discounts [data-nav-tabs-content-id] h5,
.top_discounts [data-nav-tabs-content-id] h6 {
  font-family: var(--font-primary);
  color: var(--color-blue-charcoal);
  line-height: 1.2;
}

.top_discounts [data-nav-tabs-content-id] h1,
.top_discounts [data-nav-tabs-content-id] h2,
.top_discounts [data-nav-tabs-content-id] h3,
.top_discounts [data-nav-tabs-content-id] h4 {
  font-weight: var(--semi-bold);
  font-size: 42px;
}

@media (max-width: 528px) {
  .top_discounts [data-nav-tabs-content-id] h1,
  .top_discounts [data-nav-tabs-content-id] h2,
  .top_discounts [data-nav-tabs-content-id] h3,
  .top_discounts [data-nav-tabs-content-id] h4 {
    font-size: 32px;
  }
}
@media (min-width: 529px) and (max-width: 648px) {
  .top_discounts [data-nav-tabs-content-id] h1,
  .top_discounts [data-nav-tabs-content-id] h2,
  .top_discounts [data-nav-tabs-content-id] h3,
  .top_discounts [data-nav-tabs-content-id] h4 {
    font-size: 36px;
  }
}
@media (min-width: 649px) and (max-width: 1024px) {
  .top_discounts [data-nav-tabs-content-id] h1,
  .top_discounts [data-nav-tabs-content-id] h2,
  .top_discounts [data-nav-tabs-content-id] h3,
  .top_discounts [data-nav-tabs-content-id] h4 {
    font-size: 38px;
  }
}
.top_discounts [data-nav-tabs-content-id] h5,
.top_discounts [data-nav-tabs-content-id] h6 {
  font-weight: var(--medium);
  font-size: 24px;
}

@media (max-width: 768px) {
  .top_discounts [data-nav-tabs-content-id] h5,
  .top_discounts [data-nav-tabs-content-id] h6 {
    font-size: 18px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .top_discounts [data-nav-tabs-content-id] h5,
  .top_discounts [data-nav-tabs-content-id] h6 {
    font-size: 20px;
  }
}
.top_discounts [data-nav-tabs-content-id] p {
  margin: 15px 0 0;
}

.top_discounts .swiper__slide {
  width: 280px;
}

.top_discounts .swiper__navs {
  width: 100%;
}

.top_discounts .swiper__navs button {
  width: 32px;
  aspect-ratio: 1;
}

@media (hover: hover) and (pointer: fine) {
  .top_discounts .swiper__navs button:first-of-type:hover svg {
    transform: translateX(-2px);
  }
}
.top_discounts .swiper__navs button:last-of-type {
  margin-left: 15px;
}

@media (hover: hover) and (pointer: fine) {
  .top_discounts .swiper__navs button:last-of-type:hover svg {
    transform: translateX(2px);
  }
}
.top_discounts .swiper__navs button svg {
  width: 22px;
  aspect-ratio: 1;
  transition: transform var(--def-transition-300ms);
}

.top_discounts .swiper__scrollbar {
  width: calc(100% - 280px) !important;
  margin-right: 30px;
  position: relative !important;
}

@media (max-width: 768px) {
  .top_discounts .swiper__scrollbar {
    width: calc(100% - 80px) !important;
  }
}