:root {
  --accent-color: #00A870;
  --content-width: 66%;
  --grid-layout: repeat(4, 1fr);
  --grid-gap: 20px;
  --grid-font-size: clamp(12px, 8.615px + 0.441vw, 16px);
  --pixels-3: min(0.25vw, 3px);
  --pixels-6: min(0.50vw, 6px);
  --pixels-9: min(0.75vw, 9px);
  --pixels-11: min(0.92vw, 11px);
  --pixels-12: min(1.00vw, 12px);
  --pixels-13: min(1.08vw, 13px);
  --pixels-15: min(1.25vw, 15px);
  --pixels-18: min(1.50vw, 18px);
  --pixels-19: min(1.58vw, 19px);
  --pixels-20: min(1.67vw, 20px);
  --pixels-21: min(1.75vw, 21px);
  --pixels-24: min(2.00vw, 24px);
  --pixels-25: min(2.08vw, 25px);
  --pixels-26: min(2.17vw, 26px);
  --pixels-27: min(2.25vw, 27px);
  --pixels-28: min(2.33vw, 28px);
  --pixels-30: min(2.50vw, 30px);
  --pixels-32: min(2.67vw, 32px);
  --pixels-36: min(3.00vw, 36px);
  --pixels-40: min(3.33vw, 40px);
  --pixels-44: min(3.67vw, 44px);
  --pixels-50: min(4.17vw, 50px);
  --pixels-55: min(4.58vw, 55px);
  --pixels-57: min(4.75vw, 57px);
  --pixels-60: min(5.00vw, 60px);
  --pixels-100: min(8.33vw, 100px);
  --pixels-110: min(9.17vw, 110px);
  --pixels-135: min(11.25vw, 135px);
}

@media (max-width: 540px) {
  :root {
    --content-width: 90%;
    --grid-layout: repeat(2, 1fr);
    --grid-gap: 5px;
    --grid-font-size: 12px;
    --pixels-3: 0.56vw;
    --pixels-6: 1.11vw;
    --pixels-9: 1.67vw;
    --pixels-11: 2.04vw;
    --pixels-12: 2.22vw;
    --pixels-13: 2.41vw;
    --pixels-15: 2.78vw;
    --pixels-18: 3.33vw;
    --pixels-19: 3.52vw;
    --pixels-20: 3.70vw;
    --pixels-21: 3.89vw;
    --pixels-24: 4.44vw;
    --pixels-25: 4.63vw;
    --pixels-26: 4.81vw;
    --pixels-27: 5.00vw;
    --pixels-28: 5.19vw;
    --pixels-30: 5.56vw;
    --pixels-32: 5.93vw;
    --pixels-36: 6.67vw;
    --pixels-40: 7.41vw;
    --pixels-44: 8.15vw;
    --pixels-50: 9.26vw;
    --pixels-55: 10.19vw;
    --pixels-57: 10.56vw;
    --pixels-60: 11.11vw;
    --pixels-100: 18.52vw;
    --pixels-110: 20.37vw;
    --pixels-135: 25.00vw;
  }
}

body {
  margin: 0;
}

.omada-t8s4-4t {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  font-family: 'Manrope';
  align-items: center;

  @media (max-width: 540px) {
    width: 85.185%;
    padding-top: var(--pixels-30);
  }

  .inner-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;

    @media (max-width: 1400px) {
      width: 92%;
    }

    @media (max-width: 540px) {
      width: 100%;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
    line-height: 1.2;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  p {
    font-size: 1rem;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b {
    font-weight: bold;
  }

  h1,
  h2,
  h3,
  p,
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 1.25rem;
  }

  .mobile-only {
    display: none !important;
  }

  .desktop-only {
    display: contents;
  }

  .product-banner {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
  }

  .banner-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
  }

  .banner-overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8.5%;
    width: 47.28%;
    display: flex;
    flex-direction: column;
    color: white;
    margin: 0;
    padding: 0;

    @media (max-width: 540px) {
      top: 12.96vw;
      transform: none;
      width: 86.68%;
    }
  }

  .overlay-title {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: var(--pixels-36);

    @media (min-width: 1200px) {
      font-size: 36px;
    }
  }

  .emphasis {
    color: #00D78F;
  }

  .overlay-text {
    font-size: clamp(15px, 10.789px + 0.548vw, 20px);
    font-size: var(--pixels-18);
    margin: var(--pixels-20) 0;
    padding: 0;

    @media (min-width: 1200px) {
      margin: 20px 0;
      font-size: 18px;
    }
  }

  .button-row {
    display: flex;
    align-items: center;
    font-size: var(--pixels-18);
    padding: 0;
    line-height: 1;

    @media (min-width: 1200px) {
      font-size: 18px;
    }
  }

  .button-lookalike {
    padding: var(--pixels-13) var(--pixels-30);
    background-color: var(--accent-color);
    margin-right: clamp(20px, 11.579px + 1.096vw, 30px);
    border: none;
    border-radius: 6px;

    @media (min-width: 1200px) {
      padding: 13px 30px;
    }
  }

  .ndaa-stamp {
    width: clamp(50px, 28.947px + 2.741vw, 75px);
    margin: 0;
    padding: 0;
  }

  .features-grid {
    display: grid;
    grid-template-columns: var(--grid-layout);
    row-gap: var(--pixels-40);
    column-gap: var(--pixels-24);
    width: var(--content-width);
    padding: 0;
    margin-top: 7.71vw;

    @media (min-width: 1200px) {
      row-gap: 44px;
      column-gap: 24px;
      margin-top: 92.5px;
    }

    @media (max-width: 540px) {
      margin-top: 14.81vw;
      width: 87.3913%;
      /* column-gap: 10.37vw;
      row-gap: 8.15vw; */
    }
  }

  .grid-item {
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .grid-item-image {
    display: inline-block;
    margin: 0;
    padding: 0;
  }

  .gi-1,
  .gi-3,
  .gi-5,
  .gi-6,
  .gi-7 {
    width: var(--pixels-32);
  }

  .gi-2,
  .gi-4,
  .gi-8 {
    height: var(--pixels-32);
  }

  .grid-item-title {
    display: flex;
    color: #2B2B2B;
    flex-direction: column;
    margin-top: var(--pixels-20);
    padding: 0;
    font-size: var(--pixels-18);
    line-height: 1.5;
  }

  .carousel-header {
    text-align: center;
    font-size: var(--pixels-36);
    font-weight: 500;
    margin: 0;
    padding: 0;
    line-height: 1;

    @media (min-width: 1200px) {
      font-size: 36px;
    }

    @media (max-width: 540px) {
      line-height: 1.5;
    }
  }

  .carousel-slide-header {
    font-size: var(--pixels-24);
    line-height: 1.2;
    text-align: center;
    font-weight: 500;
    padding: 0;
    margin: var(--pixels-55) 0 var(--pixels-9);

    @media (min-width: 1200px) {
      margin: 55px 0 9px;
      font-size: 24px;
    }

    @media (max-width: 540px) {
      margin-top: 8vw;
    }
  }

  .carousel-slide-text {
    text-align: center;
    font-size: var(--pixels-18);
    line-height: 1.75;
    margin: 0;
    width: 92%;

    @media (min-width: 1200px) {
      font-size: 18px;
    }

    @media (max-width: 540px) {
      width: 100%;
    }
  }

  .section-banner {
    width: 100%;
    margin: clamp(20px, 3.165px + 2.193vw, 40px) auto;
    padding: 0;
    display: block;
    margin: var(--pixels-50) 0;

    @media (min-width: 1200px) {
      margin: 50px 0;
    }
  }

  .carousel-container {
      position: relative;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      row-gap: clamp(10px, -12.73px + 3.55vw, 40px);
      box-sizing: border-box;
      margin-top: var(--pixels-55);

      @media (max-width: 540px) {
        margin-top: 9.26vw;
      }
  }

  .carousel-viewport {
    width: 100%;
    overflow: hidden;
  }

  .swiper-btn {
    background-color: #a3a3a3;
    color: #ffffff;
    border: none;
    width: var(--pixels-60);
    height: var(--pixels-60);
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 200%; */
    font-size: var(--pixels-36);
    font-weight: 300;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    position: absolute;
    top: 210px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    z-index: 999;

    @media (max-width: 540px) {
      width: var(--pixels-40);
      height: var(--pixels-40);
      font-size: var(--pixels-30);
    }
  }

  .swiper-btn.prev {
    left: -100px;

    @media (max-width: 1400px) {
      left: 0;
      transform: translate(-50%, -50%);
    }

    /* @media (max-width: 540px) {
      left: 0;
      transform: translate(-50%, -50%);
    } */
  }

  .swiper-btn.next {
    right: -100px;
    
    @media (max-width: 1400px) {
      right: 0;
      transform: translate(50%, -50%);
    }
  }

  .swiper-btn.c1,
  .swiper-btn.c2,
  .swiper-btn.c3,
  .swiper-btn.c4,
  .swiper-btn.c5 {
    @media (max-width: 1400px) {
      top: 16vw;
    }
  }

  .swiper-btn.c2 {
    @media (max-width: 540px) {
      top: 50vw;
    }
  }

  .swiper-btn.c1,
  .swiper-btn.c3,
  .swiper-btn.c4 {
    @media (max-width: 540px) {
      top: 59.44vw;
    }
  }

  .swiper-btn.c5 {
    @media (max-width: 540px) {
      top: 51vw;
    }
  }

  .swiper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .carousel-track {
      display: flex;
      width: 100%;
      will-change: transform;
      backface-visibility: hidden;
      transition: transform 0.4s ease-in-out;
  }

  .carousel-item {
      flex: 0 0 calc(100% - 2px);
      width: calc(100% - 2px);
      display: block;
      margin-left: 1px;
      margin-right: 1px;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .carousel-picture-container {
    position: relative;
    width: 100%;
  }

  .carousel-picture-text {
    position: absolute;
    font-size: var(--pixels-24);
    line-height: 1;
    margin: 0;
    padding: 0;

    @media (min-width: 1200px) {
      font-size: 24px;
    }
  }

  .c1s2t1 {
    color: white;
    bottom: 3%;
    left: 25%;
    transform: translateX(-50%);
    width: 50%;
    text-align: center;

    @media (max-width: 540px) {
      left: 0%;
      transform: none;
      width: 100%;
      top: 43.25%;
      bottom: auto;
    }
  }

  .c1s2t2 {
    color: white;
    bottom: 3%;
    left: 75%;
    width: 50%;
    transform: translateX(-50%);
    text-align: center;

    @media (max-width: 540px) {
      bottom: auto;
      width: 70%;
      /* transform: none; */
      left: 50%;
      top: 89.32%;
      line-height: 1.2;
    }
  }

  .c2s2t1 {
    color: white;
    top: 23.3%;
    left: 48%;
    
    @media (max-width: 540px) {
      top: 15%;
      left: 28.5%;
    }
  }

  .c2s3t1 {
    color: white;
    top: 62.3%;
    left: 39.6%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      top: 40%;
      left: 27.39%;
    }
  }

  .c2s3t2 {
    color: white;
    top: 29%;
    left: 33.3%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      top: 17.5%;
      left: 32%;
    }
  }

  .c3s1t1 {
    color: white;
    left: 37.5%;
    top: 36%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      left: 7.28%;
      top: 56.25%;
    }
  }

  .c3s1t2 {
    color: white;
    left: 58.33%;
    top: 36%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      left: 7.28%;
      top: 85%;
    }
  }

  .c3s1t3 {
    color: white;
    left: 37.5%;
    top: 81%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      left: 65.32%;
      top: 56.25%;
    }
  }

  .c3s1t4 {
    color: white;
    left: 58.33%;
    top: 81%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      left: 65.32%;
      top: 85%;
    }
  }

  .c3s1t5 {
    color: white;
    left: 23.46%;
    top: 64%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      left: 39.56%;
      top: 27.42%;
    }
  }

  .c3s1t6 {
    color: #00e194;
    left: 65.3%;
    top: 48%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      left: 39.56%;
      top: 78.5%;
      width: 22.6%;
      text-align: center;
    }
  }

  .c3s2t1 {
    top: 8%;
    left: 2.4%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      top: 4.68%;
      left: 3.91%;
    }
  }

  .c3s2t2 {
    top: 8%;
    left: 53%;
    font-size: var(--pixels-18);

    @media (max-width: 540px) {
      top: 54.22%;
      left: 3.91%;
    }
  }

  .c4s1g1 {
    top: 14.7%;
    left: 12.08%;

    @media (max-width: 540px) {
      top: 5.5%;
      left: 12.34%;
    }
  }

  .c4s1t1 {
    color: white;
    font-size: var(--pixels-18);
    margin: 0;
    line-height: 1;
  }

  .c4s1t2 {
    color: #00a870;
    font-size: var(--pixels-57);
    margin: 0;
    line-height: 1.2;
    font-weight: bold;
  }

  .c4s1g2 {
    top: 14.7%;
    left: 30%;

     @media (max-width: 540px) {
      top: 5.5%;
      left: 59.57%;
    }
  }

  .c4s1t3 {
    color: white;
    font-size: var(--pixels-18);
    margin: 0;
    line-height: 1;
  }

  .c4s1t4 {
    color: #00a870;
    font-size: var(--pixels-57);
    margin: 0;
    line-height: 1.2;
    font-weight: bold;
  }

  .c4s1g3 {
    top: 63%;
    left: 53.2%;

    @media (max-width: 540px) {
      top: 79.5%;
      left: 8%;
    }
  }

  .c4s1t5 {
    color: white;
    font-size: var(--pixels-18);
    margin: 0;
    line-height: 1;
  }

  .c4s1t6 {
    color: #00a870;
    font-size: var(--pixels-57);
    margin: 0;
    line-height: 1.2;
    font-weight: bold;
  }

  .c5s1t1 {
    color: white;
    line-height: 1;
    font-size: var(--pixels-24);
    left: 58.67%;
    top: 13.53%;

    @media (max-width: 540px) {
      top: 44.4%;
      left: 15.76%;
      width: 60%;
      line-height: 1.4;
    }
  }

  .c5s1t2 {
    color: white;
    line-height: 1;
    font-size: var(--pixels-18);
    left: 58.67%;
    top: 28.5%;

    @media (max-width: 540px) {
      left: 15.76%;
      top: 57%;
    }
  }

  .c5s1t3 {
    color: white;
    line-height: 1;
    font-size: var(--pixels-18);
    left: 58.67%;
    top: 42%;

    @media (max-width: 540px) {
      left: 15.76%;
      top: 63.9%;
    }
  }

  .c5s1t4 {
    color: white;
    line-height: 1;
    font-size: var(--pixels-18);
    left: 58.67%;
    top: 56%;

    @media (max-width: 540px) {
      left: 15.76%;
      top: 70.8%;
    }
  }

  .c5s1t5 {
    color: white;
    line-height: 1;
    font-size: var(--pixels-18);
    left: 58.67%;
    top: 69.5%;

    @media (max-width: 540px) {
      left: 15.76%;
      top: 77.3%;
      width: 56%;
      line-height: 1.2;
    }
  }

  .c5s1t6 {
    color: white;
    line-height: 1;
    font-size: var(--pixels-18);
    left: 58.67%;
    top: 83%;

    @media (max-width: 540px) {
      left: 15.76%;
      top: 87.7%;
      width: 56%;
      line-height: 1.2;
    }
  }

  .c5s2g1 {
    width: 20.4%;
    top: 49.76%;
    left: 6.08%;
    text-align: center;

    @media (max-width: 540px) {
      width: 95%;
      top: 16%;
      left: 50%;
      transform: translateX(-50%);
      line-height: 1.2;
    }
  }

  .c5s2t1 {
    font-size: var(--pixels-18);
    margin: 0;
    font-weight: 500;
  }

  .c5s2t2 {
    font-size: var(--pixels-15);
    margin: var(--pixels-9) 0 0;
  }

  .c5s2g2 {
    width: 29.75%;
    top: 49.76%;
    left: 32.46%;
    text-align: center;

    @media (max-width: 540px) {
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      line-height: 1.2;
    }
  }

  .c5s2t3 {
    font-size: var(--pixels-18);
    margin: 0;
    font-weight: 500;
  }

  .c5s2t4 {
    font-size: var(--pixels-15);
    margin: var(--pixels-9) 0 0;
  }

  .c5s2g3 {
    width: 25%;
    top: 49.76%;
    left: 69%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (max-width: 540px) {
      width: 95%;
      top: 78%;
      left: 50%;
      transform: translateX(-50%);
      line-height: 1.2;
    }
  }

  .c5s2t5 {
    font-size: var(--pixels-18);
    margin: 0;
    font-weight: 500;
    width: 80%;
    text-align: center;
  }

  .c5s2t6 {
    font-size: var(--pixels-15);
    margin: var(--pixels-9) 0 0;
  }


  .clear-detail-section {
    width: 100%;
    margin-top: var(--pixels-100);

    @media (min-width: 1200px) {
      margin-top: 100px;
    }
  }

  .remote-control-section {
    width: 100%;
    margin-top: var(--pixels-100);
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (min-width: 1200px) {
      margin-top: 100px;
    }
  }

  .remote-control-header {
    text-align: center;
    font-size: var(--pixels-36);
    font-weight: 500;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    width: 88%;

    @media (min-width: 1200px) {
      font-size: 36px;
    }
  }

  .remote-control-text {
    text-align: center;
    font-size: var(--pixels-18);
    line-height: 1.5;
    margin: var(--pixels-19) 0 0;

    @media (min-width: 1200px) {
      font-size: 18px;
    }
  }

  .carousel-img {
      width: 100%; 
      height: auto;
      display: block;
  }

  .links-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: var(--pixels-28);
    font-size: var(--pixels-18);
  }

  .links-container a {
    text-decoration: none;
    color: var(--accent-color);
    line-height: 1;
  }
}