: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-10: min(0.83vw, 10px);
  --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-16: min(1.33vw, 16px);
  --pixels-17: min(1.42vw, 17px);
  --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-23: min(1.92vw, 23px);
  --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-10: 1.85vw;
    --pixels-11: 2.04vw;
    --pixels-12: 2.22vw;
    --pixels-13: 2.41vw;
    --pixels-15: 2.78vw;
    --pixels-16: 2.96vw;
    --pixels-17: 3.15vw;
    --pixels-18: 3.33vw;
    --pixels-19: 3.52vw;
    --pixels-20: 3.70vw;
    --pixels-21: 3.89vw;
    --pixels-23: 4.26vw;
    --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-8mp-turret {
  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: 69.58%;
    display: flex;
    flex-direction: column;
    color: white;
    margin: 0;
    padding: 0;

    @media (max-width: 540px) {
      top: 10.94%;
      left: 5.98%;
      transform: none;
      width: 89.77%;
    }
  }

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

  .emphasis {
    color: #00D78F;
  }

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

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

    @media (max-width: 540px) {
      margin-top: var(--pixels-10);
    }
  }

  .button-lookalike {
    padding: var(--pixels-13) var(--pixels-21);
    background-color: var(--accent-color);
    margin-right: var(--pixels-10);
    border: none;
    border-radius: 6px;
  }

  .ndaa-stamp {
    width: 8.14%;
    margin: 0;
    padding: 0;

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

  .google-alexa {
    margin-top: var(--pixels-18);
    width: 28.8%;

    @media (max-width: 540px) {
      margin-top: var(--pixels-10);
      width: 35.72%;
    }
  }

  .features-grid {
    display: grid;
    grid-template-columns: var(--grid-layout);
    grid-auto-rows: auto;
    row-gap: var(--pixels-40);
    column-gap: var(--pixels-24);
    width: 62%;
    padding: 0;
    margin-top: var(--pixels-100);

    /* @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 {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: var(--pixels-20);
    /* text-align: center;
    margin: 0;
    padding: 0; */
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

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

  .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;
    text-align: center;
    align-self: start;
  }

  .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-container-immovable {
      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.c5 {
    @media (max-width: 1400px) {
      top: 16vw;
    }
  }

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

  .swiper-btn.c1,
  .swiper-btn.c3 {
    @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;
    }
  }

  .full-width-text {
    width: 100%;
    margin: var(--pixels-55) 0 0;

    @media (max-width: 540px) {
      text-align: left;
    }
  }

  .indent-top {
    margin-top: var(--pixels-24);
  }

  .more-space {
    width: 101%;
  }

  .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: 24.29%;
    left: 48%;
    font-size: var(--pixels-23);
    font-family: "TP-Link Aktiv";

    @media (min-width: 1400px) {
      font-size: var(--pixels-24);
    }
    
    @media (max-width: 540px) {
      top: 16%;
      left: 29%;
    }
  }

  .c2s3t1 {
    color: white;
    top: 63%;
    left: 39.5%;
    font-size: var(--pixels-17);
    font-family: "TP-Link Aktiv";

    @media (min-width: 1400px) {
      font-size: var(--pixels-18);
    }

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

  .c2s3t2 {
    color: white;
    top: 29.5%;
    left: 33.5%;
    font-size: var(--pixels-17);
    font-family: "TP-Link Aktiv";

    @media (min-width: 1400px) {
      font-size: var(--pixels-18);
    }

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

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

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

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

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

  .c4s1g1 {
    top: 62.8%;
    left: 57%;
    color: white;

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

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

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

  .c4s1t3 {
    color: white;
    font-size: var(--pixels-18);
    top: 32.45%;
    right: 88.83%;

    @media (max-width: 540px) {
      top: 7%;
      right: 76.96%;
    }
  }

  .c4s1t4 {
    color: white;
    font-size: var(--pixels-18);
    top: 32.45%;
    left: 43.71%;
    font-weight: 500;

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

  .c4s1t5 {
    color: white;
    font-size: var(--pixels-18);
    right: 88.83%;
    top: 42.69%;

    @media (max-width: 540px) {
      top: 13.8%;
      right: 76.96%;
    }
  }

  .c4s1t6 {
    color: white;
    font-size: var(--pixels-18);
    left: 43.71%;
    top: 42.71%;
    font-weight: 500;

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

  .c4s1t7 {
    color: white;
    font-size: var(--pixels-18);
    right: 88.83%;
    top: 53.29%;

    @media (max-width: 540px) {
      top: 20.5%;
      right: 76.96%;
    }
  }

  .c4s1t8 {
    color: white;
    font-size: var(--pixels-18);
    left: 43.71%;
    top: 53.29%;
    font-weight: 500;

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

  .c4s1t9 {
    color: white;
    font-size: var(--pixels-18);
    right: 88.83%;
    top: 63.9%;

    @media (max-width: 540px) {
      top: 27.2%;
      right: 76.96%;
    }
  }

  .c4s1t10 {
    color: white;
    font-size: var(--pixels-18);
    left: 43.71%;
    top: 63.9%;
    font-weight: 500;

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

  .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.2%;
    }
  }

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

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

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

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

  .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.7%;
      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: 88%;
      width: 56%;
      line-height: 1.2;
    }
  }

  .c5s2g1 {
    width: 20.4%;
    top: 49.88%;
    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;
    line-height: 1.4;
  }

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

  .c5s2g2 {
    width: 29.9%;
    top: 49.88%;
    left: 32.46%;
    text-align: center;

    @media (max-width: 540px) {
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      line-height: 1.2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .c5s2t3 {
    font-size: var(--pixels-18);
    margin: 0;
    font-weight: 500;
    width: 90%;
    line-height: 1.4;

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

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

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

  .c5s2g3 {
    width: 25%;
    top: 49.88%;
    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;
    line-height: 1.4;
  }

  .c5s2t6 {
    font-size: var(--pixels-15);
    margin: var(--pixels-9) 0 0;
    width: 99%;
    line-height: 1.4;
  }


  .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: 87%;

    @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;
    width: 87%;

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

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

  .text-width {
    width: 80.2%;

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

  .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;
  }

  @media (max-width: 540px) {
    .mobile-only {
      display: contents !important;
    }

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