/** Shopify CDN: Minification failed

Line 1366:8 Expected ":"

**/

*, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    background-color: white;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  #root, #__next {
    isolation: isolate;
  }

/* variables declarations */

:root {
  --black: #000000;
  --low-gray: #D9D9D9;
  --mid-gray: #808080;
  --bg-gray: #FAF8F7;
  --cart-gray: #F6F6F6;
  --white: #ffffff;
  --orange: #BD541A;
  --d-gray: #48473D;
  --a-black: #202020;
  --mesh-col:#4B4F54;
  --scale: .75;
  --scale2: 1;
}

/* end of variables declarations */


::-moz-selection { /* Code for Firefox */
  color: var(--black);
  background: rgba(255,112,34,.5);
}

::selection {
  color: var(--black);
  background: rgba(255,112,34,.5);
}

/* font face declarations */

@font-face {
    font-family: "GeistSemi";
    src: url("//12p.com/cdn/shop/t/9/assets/Geist-SemiBold.woff?v=128988427462942631041777569955") format("woff"),
         url("//12p.com/cdn/shop/t/9/assets/Geist-SemiBold.otf?v=9341439209259764311777569955") format("opentype");
    font-display: swap;
}
@font-face {
    font-family: "GeistReg";
    src: url("//12p.com/cdn/shop/t/9/assets/Geist-Regular.woff?v=19280738938062407651777569955") format("woff"),
         url("//12p.com/cdn/shop/t/9/assets/Geist-Regular.otf?v=162609672043791279381777569955") format("opentype");
    font-display: swap;
}
@font-face {
    font-family: "GeistMed";
    src: url("//12p.com/cdn/shop/t/9/assets/Geist-Medium.woff?v=175686688835893586981777569955") format("woff"),
         url("//12p.com/cdn/shop/t/9/assets/Geist-Medium.otf?v=116399610050512792331777569955") format("opentype");
    font-display: swap;
}
@font-face {
    font-family: "GeistBold";
    src: url("//12p.com/cdn/shop/t/9/assets/Geist-Bold.woff?v=74632280886063830641777569955") format("woff"),
         url("//12p.com/cdn/shop/t/9/assets/Geist-Bold.otf?v=4275") format("opentype");
    font-display: swap;
}

/* end of font face declarations */


/* font declarations */

.black-text {
  color: var(--black);
}

.orange-text {
  color: var(--orange);
}

.dg-text {
  color: var(--d-gray);
}

.mesh-text {
  color: var(--mesh-col);
}

.mg-text {
  color: var(--mid-gray);
}

.white-text {
  color: var(--white);
}

.font-label {
  font-family: "GeistSemi";
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.03em;
}

.font-thin-label {
  font-family: "GeistReg";
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.03em;
}

.font-small-label {
  font-family: "GeistSemi";
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.03em;
}

.font-heading-m {
  font-family: "GeistSemi";
  font-size: 64px;
  line-height: 58.4px;
  letter-spacing: -0.03em;
}

@media screen and (max-width: 768px) {
  .font-heading-m {
    font-family: "GeistSemi";
    font-size: 40px;
    line-height: 36.4px;
  letter-spacing: -0.03em;
  }
}

.font-heading-ms {
  font-family: "GeistSemi";
  font-size: 48px;
  line-height: 44px;
  letter-spacing: -0.04em;
}

@media screen and (max-width: 768px) {
  .font-heading-ms {
    font-family: "GeistSemi";
    font-size: 40px;
    line-height: 36.4px;
  letter-spacing: -0.03em;
  }
}

.font-heading-s {
  font-family: "GeistSemi";
  font-size: 40px;
  line-height: 36.4px;
  letter-spacing: -0.03em;
}

.font-h2 {
  font-family: "GeistSemi";
  font-size: 32px;
  line-height: 29px;
  letter-spacing: -0.03em;
}

.font-h3 {
  font-family: "GeistBold";
  font-size: 16px;
  line-height: 23.4px;
  letter-spacing: -0.03em;
}

.font-huge-para {
  font-family: "GeistMed";
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -0.03em;
}

@media screen and (max-width: 768px) {
  .font-huge-para {
    font-family: "GeistMed";
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.03em;
  }
}

.font-med-para {
    font-family: "GeistMed";
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.03em;
  }

.font-para {
  font-family: "GeistMed";
  font-size: 16px;
  line-height: 23.4px;
  letter-spacing: -0.03em;
}

.font-para-thin {
  font-family: "GeistMed";
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: -0.03em;
}

.font-para-big {
  font-family: "GeistMed";
  font-size: 18px;
  line-height: 23.4px;
  letter-spacing: -0.03em;
}

.font-para-bold {
  font-family: "GeistSemi";
  font-size: 18px;
  line-height: 17.1px;
  letter-spacing: -0.03em;
}

.font-cart-title {
  font-family: "GeistSemi";
  font-size: 24px;
  line-height: 21.8px;
  letter-spacing: -0.03em;
}

.font-cart-close {
  font-family: "GeistReg";
  font-size: 14px;
  line-height: 18.2px;
  letter-spacing: -0.03em;
}

.font-cart-item {
  font-family: "GeistSemi";
  font-size: 16px;
  line-height: 14.5px;
  letter-spacing: -0.03em;
}

.font-cart-info {
  font-family: "GeistReg";
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.03em;
}

.underline {
  text-decoration: underline;
}

.nav-link-style {
  font-family: "GeistBold";
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.03em;
}

@media screen and (max-width: 768px) {
  .nav-link-style {
    font-family: "GeistMed";
    font-size: 18px;
    line-height: 16.4px;
    letter-spacing: -0.03em;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
}

ul.nav-links-list-mob li:last-child {
    border: 0;
}

.nav-link-style a {
  text-decoration: none;
  color: var(--mid-gray);
  transition: .3s;
}

.nav-link-style a:hover {
  color: var(--orange);
}

.active-link a {
  color: var(--black)
}

@media screen and (max-width: 768px) {
  .nav-link-style {
  }
}

.footer-font {
  font-family: "GeistMed";
  font-size: 14px;
  line-height: 13.4px;
  letter-spacing: -0.03em;
}

.footer-font a {
  text-decoration: none;
  color: var(--mid-black);
  transition: .3s;
}

.footer-font a:hover {
  color: var(--orange);
}

.footer-font-b {
  font-family: "GeistSemi";
  font-size: 14px;
  line-height: 13.4px;
  letter-spacing: -0.03em;
}



.text-center {
  text-align: center;
}
/* end of font declarations */

/* buttons */

.main-small-button {
    font-family: "GeistBold";
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: var(--white);
    background-color: var(--black);
    padding: 16px 32px;
    border-radius: 100px;
    border: 0;
    cursor: pointer;
    transition: .3s;
}

.main-small-button:hover {
  background-color: var(--orange);
}

@media screen and (max-width: 768px) {
  .main-small-button {
     padding: 10px 18px;
  }
  .main-home {
    padding: 16px 32px;
  }
}

.main-mini-button {
    font-family: "GeistReg";
    font-size: 14px;
    letter-spacing: -0.03em;
    line-height: 120%;
    color: var(--white);
    background-color: var(--d-gray);
    padding: 16px 24px;
    border-radius: 100px;
    border: 0;
    cursor: pointer;
    transition: .3s;
}
.main-mini-button-mesh {
    background-color: var(--mesh-col);
    cursor: pointer;
    transition: .3s;
}

.main-mini-button:hover {
  background-color: var(--orange);
}

.main-cart-button {
    font-family: "GeistBold";
    font-size: 14px;
    letter-spacing: -0.03em;
    line-height: 120%;
    color: var(--white);
    background-color: var(--a-black);
    padding: 16px 24px;
    border-radius: 100px;
    border: 0;
    cursor: pointer;
    transition: .3s;
    width: 100%;
    text-align: center;
}

.main-cart-button:hover {
  background-color: var(--orange);
}

/* layout declarations */

.main-grid {
  position:relative;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 8px;
  padding: 0 24px;
}

@media screen and (max-width: 768px) {
  .main-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.full-screen {
    min-height: 100.5vh;
}

@media screen and (max-width: 768px) {
    .full-screen {
        width:auto;
        min-height: auto;
    }
}

.imagery-holder {
  grid-column: 1 / 17; /* Spanning from 1st to 16th column */
  background-color: var(--bg-gray);
  margin-left: -24px;
  overflow: hidden;
}

@media screen and (max-width: 1080px) {
    .imagery-holder {
    grid-column: 1 / 15; /* Spanning from 1st to 16th column */
    background-color: var(--bg-gray);
    margin-left: -24px;
    overflow: hidden;
  }
}

@media screen and (max-width: 768px) {
  .imagery-holder {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    grid-row: 2; /* Placing it on the second row */
    margin-left: -24px;
    width: calc(100% + 48px);
    height: auto;
  }
}

.right-imagery-holder {
  grid-column: 11 / 25;
  background-color: var(--bg-gray);
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .right-imagery-holder {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    grid-row: 2; /* Placing it on the second row */
    width: 100%;
    height: auto;
  }
}

.right-info-holder {
  grid-column: 18 / 24;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap:80px;
}


@media screen and (max-width: 1080px) {
    .right-info-holder {
    grid-column: 16 / 24;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap:80px;
  }
}

@media screen and (max-width: 768px) {
  .right-info-holder {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    grid-row: 1;
    gap:32px;
  }
}

.no-gap{
  gap: 0px;
}

.smaller-gap {
  gap:56px;
}

@media screen and (max-width: 768px) {
  .smaller-gap {
    gap:32px;
  }
}

.left-info-holder {
  grid-column: 2 / 8; /* Spanning from 1st to 16th column */
  display:flex;
  flex-direction: column;
  gap: 80px;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .left-info-holder {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    grid-row: 1; 
    gap: 32px;
  }
}

.hero-full-imagery {
  grid-column: 1 / 25; /* Spanning from 1st to 24th column */
  background-color: var(--bg-gray);
  grid-row: 2;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .hero-full-imagery {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    width: 100%;
    height: 50vh;
  }
}
.oneline {
  white-space: nowrap;
}

.hero-pt {
  padding-top: 124px;
}

.py-section {
  padding: 80px 0;
}

.section-pt {
  padding-top: 80px;
}

.big-pt {
  padding-top: 176px;
}

.big-pb {
  padding-bottom: 176px;
}

.tc-pb {
  margin-bottom: 88px;
}

@media screen and (max-width: 768px) {
  .hero-pt {
    padding-top: 160px;
  }

  .hero-pt-mobile {
    padding-top: 160px;
  }

  .scale-up-v {
    transform:scale(2);
  }

  .hero-pt-prod{
    padding-top: 120px!important;
  }
  .section-pt-mobile {
    padding-top: 80px;
  }

  .section-pb-mobile {
    padding-bottom: 56px;
  }

  .py-section {
    padding: 56px 24px;
  }

  .section-pt {
    padding-top: 56px;
  }

  .big-pt {
    padding-top: 96px;
  }

  .big-pb {
    padding-bottom: 64px;
  }

  .tc-pb {
    margin-bottom: 32px;
  }

  .small-pb {
    padding-bottom: 32px;
  }
}

.hero-lab-item {
  grid-column: 9 / 17;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .hero-lab-item {
    grid-column: 1 / 5;
    gap: 20px;
    padding-bottom: 56px;
  }
}

.lab-banner {
  grid-column: 19 / 25;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  justify-content: end;
  padding-bottom: 8px;
}

@media screen and (max-width: 1280px) {
  .lab-banner {
    grid-column: 17 / 25;
    grid-row: 1;
    display:flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 8px;
  }
}

@media screen and (max-width: 768px) {
  .lab-banner {
    grid-column: 1 / 5;
    grid-row: 2;
  }
}
.hero-blog-item {
  grid-column: 1 / 9;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 64px;
}

@media screen and (max-width: 768px) {
  .hero-blog-item {
    grid-column: 1 / 5;
    gap: 20px;
    padding-bottom: 56px;
  }
}

.tc-border {
  grid-column: 2 / 24;
  grid-row: 2;
  height: 1px;
  background-color: var(--low-gray);
  margin-top: 116px;
}

@media screen and (max-width: 768px) {
  .tc-border {
    grid-column: 1 / 5;
    grid-row: 3;
    margin-top: 40px;
  }
}

.left-header-holder {
  grid-column: 2 / 10;
  grid-row: 1;
}

@media screen and (max-width: 768px) {
  .left-header-holder {
    grid-column: 1 / 5;
  }
}

.right-para-holder {
  grid-column: 11 / 24;
  grid-row: 1;
}

@media screen and (max-width: 768px) {
  .right-para-holder {
    grid-column: 1 / 5;
    grid-row: 2;
  }
}

.half-sized-block {
  grid-column: 2 / 16;
  padding-top: 164px;
  padding-bottom: 64px;
  display:flex;
  flex-direction: column;
  gap: 36px;
}

@media screen and (max-width: 768px) {
  .half-sized-block {
    grid-column: 1 / 5;
    padding-top: 72px;
    padding-bottom: 40px;
    gap: 24px;
  }
}

.left-half-imagery {
  grid-column: 1 / 13;
  grid-row: 1;
  padding-top: 100%;
  position:relative;
  background-color: var(--bg-gray);
}

@media screen and (max-width: 768px) {
  .left-half-imagery {
    grid-column: 1 / 5;
  }
}

.right-half-imagery {
  grid-column: 13 / 25;
  grid-row: 1;
  padding-top: 100%;
  position:relative;
  background-color: var(--bg-gray);
}

@media screen and (max-width: 768px) {
  .right-half-imagery {
    grid-column: 1 / 5;
    grid-row: 2;
  }
}


.left-half-cart {
  grid-column: 1 / 13;
  grid-row: 1;
  position:relative;
  background-color: var(--bg-gray);
  padding: 48px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .left-half-cart {
    grid-column: 1 / 5;
    padding: 16px;
  }
}

.justify-center {
  justify-content: center;
}

/* end of layout declarations */


/* image declarations */

.lab-hero-image {
  width: auto;
  height: auto;
  max-width: 45%;
  max-height: 60%;
}

/* When a lab hero shows a 3D model instead of a still image, the
   <model-viewer> needs explicit dimensions (default is 300x150). Sized
   smaller than the still-image hero — the 3D render up-scales worse
   than a static photo. */
.lab-hero-model {
  /* Width is driven by an inline --mv-width-pct so the debug slider
     and the section setting can both move it live. */
  width: var(--mv-width-pct, 42%);
  height: 75%;
  background: transparent;
  --poster-color: transparent;
  /* Override .main-ball's transform: scale(var(--scale)) so the
     basicScroll grow-on-scroll effect doesn't blow up the model
     and make it look low-res. */
  transform: none !important;
  cursor: grab;
}
.lab-hero-model:active { cursor: grabbing; }

.lab-hero-model::part(default-progress-bar),
.lab-hero-model::part(default-ar-button) {
  display: none;
}
@media screen and (max-width: 768px) {
  .lab-hero-model {
    width: 75%;
    height: 60%;
  }
}


.visual-cover {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.absolute-cover {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* end of image declarations */



/* blog */

.blog-posts-holder {
  grid-column: 1 / 25;
  position: relative;
  display:flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .blog-posts-holder {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    flex-direction: column;
  }
}

.blog-post-link {
  width: calc(33.333% - 5.33px);
  position: relative;
  padding-top: calc(33.333% - 5.33px);
  background-color: var(--bg-gray);
}

@media screen and (max-width: 768px) {
  .blog-post-link {
    width: 100%;
    padding-top: 100%;
  }
}

.blog-post-link:hover .blog-post-link-image {
  transform: scale(1.1) translate(-45%, -45%);
}

.blog-post-link-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  max-height: 50%;
  transition: .3s;
}
/* end of blog */



/* article */
  .specs-holder {
    display:flex;
    flex-direction: column;
    gap: 18px;
  }

  @media screen and (max-width: 768px) {
    .specs-holder {
      display:flex;
      flex-direction: column;
      gap: 12px;
    }
  }

  .single-spec-holder {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }


.section-full-imagery {
  grid-column: 1 / 25; /* Spanning from 1st to 24th column */
  background-color: var(--bg-gray);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .section-full-imagery {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    width: 100%;
    height: auto;
  }
}

.see-more-blog-posts-holder {
  grid-column: 1 / 25;
  grid-row: 2;
  position: relative;
  display:flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .see-more-blog-posts-holder {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    flex-direction: column;
  }
}

.section-logo{
  width: 50%;
  height:auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* end of article */



/* faq */

.hero-faq-item {
  grid-column: 2 / 10;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 16px;
}

@media screen and (max-width: 768px) {
  .hero-faq-item {
    grid-column: 1 / 5;
    gap: 20px;
    padding-bottom: 32px;
  }
}

.faq-left {
  grid-column: 2 / 8;
  grid-row: 1;
}

@media screen and (max-width: 768px) {
  .faq-left {
    grid-column: 1 / 5;
  }
}

.faq-center {
  grid-column: 10 / 16;
  grid-row: 1;
}

@media screen and (max-width: 768px) {
  .faq-center {
    grid-column: 1 / 5;
    grid-row: 2;
  }
}

.faq-right {
  grid-column: 18 / 24;
  grid-row: 1;
}

@media screen and (max-width: 768px) {
  .faq-right {
    grid-column: 1 / 5;
    grid-row: 3;
  }
}

.faq-container {
  display:flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 64px;
}

@media screen and (max-width: 768px) {
  .faq-container {
    display:flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 40px;
  }
}

/* end of faq */


/* terms and conditions */

.hero-tc-item {
  grid-column: 7 / 19;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 88px;
}

@media screen and (max-width: 768px) {
  .hero-tc-item {
    grid-column: 1 / 5;
    gap: 20px;
    padding-bottom: 72px;
  }
}

/* end of terms and conditions */


/* product */


.product-hero-top{
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-bottom: 20px;
}


.product-hero-title {
  margin-bottom: 28px;
}

.product-hero-bottom{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-top: 40px;
  align-items: center;
}

.product-secondary-cta-holder {
  grid-column: 10 / 16;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  padding-top: 80px;
  padding-bottom: 656px;
  z-index: 5;
}

@media screen and (max-width: 768px) {
  .product-secondary-cta-holder {
    grid-column: 1 / 5;
    padding-top: 72px;
    padding-bottom: 200px;
  }
}

.negative-margin{
  margin-bottom: -252px;
}

@media screen and (max-width: 768px) {
  .negative-margin{
    margin-bottom: -10px;
  }
}

.ov-hidden {
  overflow: hidden;
}

.product-secondary-cta-image{
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top:200px;
  left:0;
  object-fit: cover;

}

.product-faq-container {
  display:flex;
  flex-direction: column;
  gap: 28px;
}

.product-faq-holder {
  display:flex;
  flex-direction: column;
  gap: 20px;
}

/* end of product */


/* navigation */

.nav-mobile-button {
    display:none;
}

@media screen and (max-width: 768px) {
  .nav-mobile-button {
    display:flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    border-radius: 100px;
    background-color: transparent;
    /* White border + mix-blend-mode: difference reads as a clean
       dark outline on light backgrounds, light on dark. Thicker than
       the previous 1px so it matches the visual weight of the Cart pill. */
    border: 1.5px rgba(255,255,255,0.85) solid;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
  }
  .nav-open .nav-mobile-button {
    /* Subtle fill in the open state makes the X feel like a "stop"
       button rather than a flimsy circle with two strokes. */
    background-color: rgba(255,255,255,0.08);
  }
}

.nav-line {
  width: 20px;
  height: 2.5px;
  /* Nav uses mix-blend-mode: difference — white renders as black on light
     backgrounds. Square ends look crisper on a chunky X than pills. */
  background-color: var(--white);
  border-radius: 1.5px;
  opacity: 1;
  transition: transform .25s cubic-bezier(.4,.0,.2,1), opacity .18s ease;
}

/* With line height 2.5 + gap 5, line centres sit at y = ±7.5 from the
   button centre. translateY 7.5 brings the top/bottom lines onto the
   centre line BEFORE rotation, so the X arms intersect cleanly through
   the middle (no offset jog). */
.nav-open .nav-mob-top {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-open .nav-mob-bottom {
  transform: translateY(-7.5px) rotate(-45deg);
}
.nav-open .nav-mob-center {
  opacity: 0;
  transform: scaleX(0);
}

.nav-container{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  padding-top: 24px;
}
@media screen and (max-width: 768px) {
  .nav-container{
    padding-bottom: 24px;
    /* No background — nav stays transparent so content scrolls behind it,
       matching the desktop look. */
    width: 100%;
  }
}

.nav-logo-holder {
  grid-column: 1 / 4;
  margin-top: 4px;
}

@media screen and (max-width: 768px) {
  .nav-logo-holder {
    grid-column: 1 / 3;
  }
}

.nav-logo-image-d {
  width:100%;
  height:auto;
  /* Cap so the logo can't scale up on very wide / 4K screens and grow tall
     enough to overlap the page hero below the fixed nav. Normal desktop
     widths render the logo well under this, so they are unaffected. */
  max-width: 300px;
}
.nav-logo-image-m {
  display:none;
}
@media screen and (max-width: 768px) {
  /* Use the white SVG logo on mobile too — mix-blend-mode: difference on the
     nav inverts white to black on light backgrounds and back to white on dark
     ones, keeping the logo visible everywhere. The black logo (m) would
     invert to white and disappear over white bg. */
  .nav-logo-image-d {
    display:block;
    width:100%;
    height:auto;
    max-width: 168px;
  }
  .nav-logo-image-m {
    display:none;
  }
}

.nav-links-holder {
  grid-column: 5 / 21;
  display: flex;
  flex-direction:row;
  justify-content: center;
  gap: 24px;
  padding-top: 16px;
  list-style-type: none;
  padding-inline-start: 0px;
}

@media screen and (max-width: 768px) {
  .nav-links-holder {
      display:none;
  }
}

.nav-links-holder-mob {
  display:none;
}

@media screen and (max-width: 768px) {
  .nav-links-holder-mob {
      display:block;
      z-index:49;
      position: fixed;
      width: 100vw;
      height: 100vh;
      top:0;
      left:0;
      background-color: rgba(0, 0, 0, 0.2);
      visibility: hidden;
  }

  .nav-links-list-mob {
      list-style-type: none;
      padding-inline-start: 0px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: start;
      padding-top: 100px;
      padding-left: 24px;
      padding-right: 24px;
      background-color: var(--white);
      transform: translateY(-100%);
      transition: .4s;
  }

  .nav-body-show {
    transform: translateY(0);
  }
  .nav-holder-on {
    visibility: visible;
    background-color: rgba(0,0,0,0.2);
}
}




.nav-cart-holder {
  grid-column: 22 / 25;
  display: flex;
  flex-direction:row;
  justify-content: end;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .nav-cart-holder {
    grid-column: 3 / 5;
  }
}
/* end of navigation */

.pointer-me {
  cursor: pointer;
  transition: .3s;
}

.pointer-me:hover {
  color: var(--orange);
}

.cart-item-image{
  width: 60%;
  height 60%;
  margin-left:20%;
  margin-top: 20%;
}

.cart-semi {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 16px;
  align-items: end;
}

.cart-item-holder {
  display:flex;
  flex-direction: row;
  gap: 64px;
  padding: 24px 0px;
}
@media screen and (max-width: 768px) {
  .cart-item-holder {
    gap: 16px;
  }
}

.cart-item-holder-mini {
  display:flex;
  flex-direction: row;
  gap: 24px;
  padding: 24px 0px;
}
@media screen and (max-width: 768px) {
  .cart-item-holder-mini {
    gap: 16px;
  }
}


.cart-item-left {
  width: 216px;
  height: 216px;
  border-radius: 8px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .cart-item-left {
    width: 144px;
    height: 144px;
    border-radius: 4px;
  }
}

.cart-item-left-mini {
  width: 144px;
  height: 144px;
  background-color:white;
  border-radius: 4px;
  overflow: hidden;
}


.cart-item-right {
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-right-top{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-quan-holder{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cart-quan-widget{
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 4px;
}

.left-half-cart-top {
  height: 100%;
  padding-bottom: 40px;
}



.pop-up-back {
    z-index: 100;
    width:100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0);
    transition: .3s;
    visibility: hidden;
}

.cta-side-holder-on {
  visibility: visible;
  background-color: rgba(0,0,0,0.2);
}

.pop-up-body {
    margin-top: 24px;
    margin-bottom: 48px;
    grid-column: 17 / 25;
    height: calc(100% - 48px);
    background-color: var(--cart-gray);
    border-radius: 16px;
    padding: 32px;
    transition: .4s;
    transform: translateX(calc(100% + 100px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow:hidden;
}

@media screen and (max-width: 768px) {
  .pop-up-body {
    margin-top: 24px;
    margin-bottom: 120px;
    grid-column: 1 / 5;
    height: calc(100% - 120px);
    background-color: var(--cart-gray);
    border-radius: 8px;
    padding: 24px;
    transition: .4s;
    transform: translateX(calc(100% + 100px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.cta-side-body-on {
  transition: .4s;
  transform: translateX(0);
}
/* cart */


/* footer */

.footer-body {
  z-index: 10;
  background-color: var(--bg-gray);
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 24px;
  margin-right: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
  height: 220px;
}

@media screen and (max-width: 768px) {
  .footer-body {
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 8px;
    margin-bottom: 0px;
    height: auto;
  }
}


.footer-r1 {
  grid-column: 2 / 8;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  justify-content:center;
}

@media screen and (max-width: 768px) {
  .footer-r1 {
    grid-column: 1 / 3; /* Spanning from 1st to 4th column */
    margin-bottom: 32px;
  }
}

.footer-r2 {
  grid-column: 9 / 14;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Wrapper around the "Footballs pending approval" headline and the kits
   sub-message, so they stay grouped at the top of the column while
   justify-content: space-between pushes the ©2025 line to the bottom. */
.footer-r2__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-r2__kits {
  max-width: 36ch;
  line-height: 1.45;
  opacity: 0.7;
}
.footer-r2__kits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-r2__kits a:hover {
  color: var(--orange);
}

@media screen and (max-width: 768px) {
  .footer-r2 {
    grid-column: 1 / 4; /* Spanning from 1st to 4th column */
    grid-row: 2;
    gap: 24px;
    margin-bottom: 40px;
  }
}

.footer-r3 {
  grid-column: 15 / 17;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 28px;
}

@media screen and (max-width: 768px) {
  .footer-r3 {
    grid-column: 1 / 3; /* Spanning from 1st to 4th column */
    grid-row: 3 / 5;
    gap: 20px;
  }
}

.footer-r4 {
  grid-column: 18 / 21;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 28px;
}

@media screen and (max-width: 768px) {
  .footer-r4 {
    grid-column: 3 / 5; /* Spanning from 1st to 4th column */
    grid-row: 3;
    gap: 20px;
  }
}

.footer-r5 {
  grid-column: 21 / 25;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 28px;
}

@media screen and (max-width: 768px) {
  .footer-r5 {
    margin-top: 32px;
    grid-column: 1 / 3; /* Spanning from 1st to 4th column */
    grid-row: 5;
    gap: 20px;
  }
}

.footer-links-holder {
  display: flex;
  flex-direction:column;
  gap: 14px;
  list-style-type: none;
  padding-inline-start: 0px;
}

/* home */

.home-hero {
  width: 100%;
  min-height: 100vh;
  position:relative;
  overflow:hidden;
}

.home-full{
  height:100%;
}

.home-hero-content{
  grid-column: 2 / 8;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  z-index: 5;
}

.width-fit {
  width: fit-content;
}

@media screen and (max-width: 768px) {
  .home-hero-content{
    grid-column: 1 / 5;
    align-items: center;
  }
}

.no-decoration{
  text-decoration: none;
}

.home-hero-cta {
  width: 100%;
  min-height: calc(100vh + 300px);
  position:relative;
  overflow:hidden;
}

@media screen and (max-width: 768px) {
  .home-hero-cta {
    width: 100%;
    min-height: 100vh;
  }
}


/* banner */

  .banner-holder {
    background-color: var(--bg-gray);
    height: auto;
    width: 348px;
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap:32px;
    padding: 32px;
    z-index: 6;
    transition: .3s;
}
 .banner-holder-home {
    background-color: var(--bg-gray);
    height: auto;
    width: 348px;
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap:32px;
    padding: 32px;
    z-index: 6;
    transition: .3s;
}

.banner-holder-2 {
    background-color: var(--bg-gray);
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 32px;
    z-index: 5;
}

.banner-gone {
  opacity:0;
}

.take-width {
  min-width: 100%;
}


.heading-holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.heading {
    font-size: 24px;
    line-height: 95%;
    letter-spacing: -0.03em;
    font-family: "GeistSemi";
}

.heading-mobile {
    font-size: 18px;
    line-height: 97%;
    letter-spacing: -0.03em;
    font-family: "GeistSemi";
    display:none;
}



.form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-holder {
    border-bottom : 1px solid #050708;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
}

.custom-email {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: "GeistReg";
    font-size: 14px;
    line-height: 91%;
    color: #050708;
    letter-spacing: -0.03em;
    padding-right: 16px;
    outline: none;
}

.success-message{
    font-family: "GeistReg";
    font-size: 14px;
    letter-spacing: -0.03em;
    line-height: 91%;
    padding-top:16px;
}

.custom-email {
    outline: none;
    background-color: transparent;
}

.custom-email:active {
  color: var(--orange);
}

.custom-email:focus {
  color: var(--orange);
}


.custom-button {
    border: 0;
    background-color: transparent;
    font-family: "GeistSemi";
    font-size: 14px;
    line-height: 91%;
    color: #050708;
    letter-spacing: -0.03em;
    padding: 0;
    cursor: pointer;
    transition: .25s;
}

.custom-button:hover {
    color: var(--orange);
}


@media only screen and (max-width: 768px) {

    .banner-holder {    
        position: fixed;
        left: 24px;
        bottom: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: auto;
        width: calc( 100vw - 48px );
        padding: 32px;
    }
 .banner-holder-home {    
        position: fixed;
        left: 24px;
        bottom: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: auto;
        width: calc( 100vw - 48px );
        padding: 32px;
    }
    .mobile-logo-holder{
        display:flex;
        flex-direction: row;
        justify-content: center;
        padding-top:40px;
        position: fixed;
        top:0px;
        left: 0px;
        width:100vw;
    }
    .form-holder {
        justify-content: space-between;
    }
    .custom-email {
        width: 100%;
    }

}


.desktop-mix {
  mix-blend-mode: difference;
  color:white;
}
.desktop-mix-nav {
  mix-blend-mode: difference;
  color:white;
}

.white-bg-mix {
  background-color: var(--white);
  color: var(--black);
}

.nav-mix a{
  color: white;
}
.nav-mix-button {
  background-color:white;
  color:black;
}
@media only screen and (max-width: 768px) {
  /* Mobile inherits the desktop mix-blend-mode: difference effect on
     .desktop-mix and .desktop-mix-nav so the logo and nav stay readable
     against any background colour. */

  .nav-mix-button {
    border: 1px solid rgba(0,0,0,0.1);
    font-family: "GeistSemi";
  }
  .text-center-m{
  text-align: center;
}
}



/* basicscroll */
.main-ball{
  transform: scale(var(--scale));
}

.cta-ball{
  transform: scale(var(--scale2));
}

.fadable {
  opacity: 0;
  transition: 2s;
}

.lets-fade {
  opacity: 1;
}

.opacity5 {
  opacity: .5;
}

.pb-200{
  padding-bottom: 200px;
}

.richtext a{
  color:inherit;
}
.richtext p,h1,h2,h3,h4,h5 {
  margin-bottom:16px;
}
.richtext a:hover{
  color:inherit;
}

.hide-check {
        display:none!important;
    }

.center-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}



.ball-bg-cart {
  width: 100%;
  height: auto;
  position: absolute;
  bottom:-36px;
  left:0;
}

.relative-cont{
  position: relative;
  overflow: auto;
}

.cart-bottom-holder-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.cart-total-price-holder {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


.hero-lab-car {
  padding-top: 24px;
  padding-bottom: 24px;
  grid-column: 1 / 25;
  grid-row: 2;
  border-top: 1px solid rgba(0,0,0,.2);
}

.car-translate {
  display:flex;
  flex-direction:row;
  gap: 12px;
  animation-name: carousel1;
  animation-timing-function: linear;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

.w1 {
  width: 185px!important;
  flex-shrink: 0;
  text-align:center;
}

.w2 {
  width: 5px!important;
  flex-shrink: 0;
  text-align:center;
}
@keyframes carousel1 {
  from {
    transform: translateX(0px);
    }
  to {
    transform: translateX(-214px);
  }
}
@media screen and (max-width: 768px) {
  .hero-lab-car {
      grid-column: 1 / 5;
  }
}

.hero-lab-item2 {
  grid-column: 7 / 19;
  grid-row: 1;
  display:flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .hero-lab-item2 {
    grid-column: 1 / 5;
    gap: 20px;
    padding-bottom: 32px;
  }
}

.hero-full-imagery2 {
  grid-column: 1 / 25; /* Spanning from 1st to 24th column */
  background-color: var(--bg-gray);
  grid-row: 3;
  /* Pulled from inline --hero-imagery-height so each lab page can tune
     its own hero height via section settings or the debug panel. */
  height: var(--hero-imagery-height, 100vh);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .hero-full-imagery2 {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    width: 100%;
    /* On mobile, halve whatever the desktop value is so a short hero
       stays short and a full-height hero stays at a sensible mobile size. */
    height: calc(var(--hero-imagery-height, 100vh) * 0.5);
  }
}

.over-hidden {
  overflow-x: hidden;
}

.no-wrap{
  text-wrap: nowrap;
}

.m-8{
  margin-top: 8px;
  margin-bottom: 8px;
}

.no-decor {
  text-decoration: none;
}

.m--16{
  margin-top: -16px;
}
.full-b-width {
  width: 100%;
  text-align: center;
}

.comment-holder {
  width: 500px;
  max-width: 500px;
  margin-right: 64px;
  flex: 1 0 auto;
}


@media screen and (max-width: 768px) {
  .comment-holder {
    width: 250px;
    max-width: 240px;
    margin-right: 42px;
    flex: 1 0 auto;
  }
}

.comment-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.comments-pack {
  display: flex;
  flex-direction: row;
}

.all-comments {
  display: flex;
  flex-direction: row;
  animation-name: carousel2;
  animation-timing-function: linear;
  animation-duration: 19s;
  animation-iteration-count: infinite;
}

.all-comments-right {
  display: flex;
  flex-direction: row;
  animation-name: carousel2;
  animation-timing-function: linear;
  animation-duration: 19s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

.comments-car {
  width:100vw;
  overflow-x:hidden;
  padding-top: 64px;
  padding-bottom: 64px;
}

@keyframes carousel2 {
  from {
    transform: translateX(0px);
    }
  to {
    transform: translateX(-2820px);
  }
}

.comment-sep {
  margin-left: 24px;
  margin-right: 24px;
  height: 1px;
  background-color: rgba(72, 71, 61, .2);
}

.section-full-imagery-rel {
  grid-column: 1 / 25; /* Spanning from 1st to 24th column */
  background-color: var(--bg-gray);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 768px) {
  .section-full-imagery {
    grid-column: 1 / 5; /* Spanning from 1st to 4th column */
    width: 100%;
    height: auto;
  }
}

.vid-btn-holder {
  position:absolute;
  left: 40px;
  bottom: 32px;
  z-index: 3;
}

.visual-cover-trans {
   width: 100%;
  height: 100%; /* Set to auto to maintain aspect ratio */
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
}



.blog-post-link-1 {
  width: calc(25% - 6px);
  position: relative;
  padding-top: calc(25% - 6px);
  background-color: var(--bg-gray);
}

@media screen and (max-width: 1280px) {
  .blog-post-link-1 {
    width: calc(33.333% - 5.33px);
    position: relative;
    padding-top: calc(33.333% - 5.33px);
    background-color: var(--bg-gray);
  }
}

@media screen and (max-width: 768px) {
  .blog-post-link-1 {
    width: 100%;
    padding-top: 100%;
  }
}

.blog-post-link-1:hover .blog-post-link-image {
  transform: scale(1.1) translate(-45%, -45%);
}
.npb{ padding-bottom:0!important; gap:0!important;}
.blog-post-link-1n {
  width: calc(16.6% - 6px);
  position: relative;
  padding-top: calc(16.6% - 6px);
}

@media screen and (max-width: 1280px) {
  .blog-post-link-1n {
    width: calc(33.333% - 5.33px);
    position: relative;
    padding-top: calc(33.333% - 5.33px);
  }
}

@media screen and (max-width: 768px) {
  .blog-post-link-1n {
    width: 100%;
    padding-top: 100%;
  }
}

.blog-post-link-1n:hover .blog-post-link-image {
  transform: scale(1.1) translate(-45%, -45%);
}

.lab-ball-name{
  position: absolute;
  bottom: 24px;
  width: 100%;
  padding: 16px;
  font-family: "GeistSemi";
  color: black;
  text-align: center;
  font-size: 14px;
  line-height: 13.4px;
  letter-spacing: -0.03em;
}

.lab-ball-name-n{
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 16px;
  font-family: "GeistReg";
  text-transform: uppercase;
  color: black;
  text-align: center;
  font-size: 14px;
  line-height: 13.4px;
  letter-spacing: -0.03em;
}


.absolute-unit {
  position: absolute;
  top:124px;
  left:24px;
  font-family: "GeistMed";
  font-size: 16px;
  line-height: 23.4px;
  color: #BD541A;
  opacity: .75;
  transition: .3s all;
  text-decoration: none;
}

.absolute-unit:hover {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .absolute-unit {
    top:104px;
  }
}




 .notification {
            position: absolute;
            z-index: 1000;
            background-color: #FAF8F7;
            padding: 12px;
            width: 164px;
            border-radius: 100px;
            border: 1px solid #dedede;
            opacity: 0;
            transition: all .15s;
              font-family: "GeistReg";
              font-size: 14px;
              line-height: 14px;
              text-align: center;
        }
        .fade-in {
            opacity: 1;
        }
        .fade-out {
            opacity: 0;
            transform: translateY(-10px);
        }


.inside-link-style a {
  text-decoration: none;
  color: var(--d-gray);
  transition: .3s;
}

.inside-link-style a:hover {
  color: var(--orange);
}


.vc-v1 {opacity:1;}
.vc-v2 {opacity:1; }
.vc-v3 {opacity:1; }

.vc-hidden {
  opacity:0; display: none;
}
.variant-swatches {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.variant-swatch {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.variant-swatch img {
  display: block;
  width: 100%;
  height: auto;
}
.variant-swatch.is-active {
  border-color: rgba(0,0,0,.1); /* highlight border when selected */
}
.variant-swatch:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}


.my-help-16{
  margin-top:16px;
  margin-bottom:16px;
}





.offerback{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: block;
    z-index: 1000;
}
.offerblack {
    position:relative;
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: .3s all;
}

.offerbody{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.offerclose {
    width: 24px;
    height: 24px;
    border-radius: 1000px;
    background: rgba(0,0,0,1);
    transition: .2s;
    cursor: pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}

.offerclose:hover {
    background-color: var(--orange);
}

.offerblock {
    display: flex;
    flex-direction: column;
    width: 458px;
    height: auto;
    background: white;
    border-radius: 10px;
    overflow:hidden;
}


.offerimageholder{
width: 100%;
display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
height: 212px;
overflow: hidden;
}


.offerinside {
  width: 100%;
  padding: 40px;
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.offerprices{ 
  display:flex;
  flex-direction: row;
  justify-content:center;
  gap: 8px;
  padding: 16px;
}

.crossed-text {
position:relative;

}

.crossed-text:after {
  position:absolute;
  top: 48%;
  left:0;
  right:0;
  height: 2px;
  background:var(--mesh-col);
  content: " ";
}
.full-button-100 {
  width: 100%;
}


.hide-offer-back{
  visibility: none;
  z-index: -1;
}

.hide-offer-black{
  opacity:0;
  transition: .3s all;
}



@media screen and (max-width: 488px) {
  .offerbody{
    padding: 16px;
  }

  .offerblock {
    width: 100%;
  }
}


.mb-w-0 {
  margin-bottom: 0;
}

.w-imp-100 {
  width: 100%;
}