.topbanner {
  background-color: #424242;
  width: 100%;
  height: 100vh;
  text-align: center;
  color: #fff;
  margin-top: -5px;
}

.signals-page {
  overflow-x: hidden;
  width: 100%;
}

.topbanner-wt {
  background-color: #fff !important;
  color: var(--main-color-darkblue) !important;
}

.topbanner-body {
  padding: 10vmin 0 5vmin 0;
  z-index: 99;
  position: sticky;
}

.top-banner-m-text {
  font-family: "UbuntuBold";
  color: #fff;
  font-size: clamp(44px, 10vmin, 110px);
  line-height: clamp(44px, 10vmin, 110px);
  margin-bottom: clamp(4.4px, 1vmin, 11px);
}

.top-banner-xm-text {
  font-family: "Ubuntu";
  color: var(--main-color-darkblue);
  font-size: clamp(27px, 6vmin, 64px);
  line-height: clamp(27px, 6vmin, 64px);
  margin-bottom: clamp(2.7px, 0.6vmin, 6.4px);
}

.top-banner-xm-text-t {
  color: var(--main-color-darkblue);
  font-size: clamp(27px, 6vmin, 64px);
  line-height: clamp(27px, 6vmin, 64px);
  margin-bottom: clamp(2.7px, 0.6vmin, 6.4px);
}

.top-bannerxxm-text {
  font-family: "Ubuntu";
  color: var(--main-color-darkblue);
  font-size: clamp(23px, 5vmin, 53px);
  line-height: clamp(23px, 5vmin, 53px);
  margin-bottom: clamp(2.3px, 0.5vmin, 5.3px);
}

.top-bannerxxm-s-text {
  font-family: "UbuntuLight";
  color: var(--main-color-darkblue);
  font-size: clamp(14px, 3vmin, 30px);
  line-height: clamp(14px, 3vmin, 30px);
  margin-bottom: clamp(1.4px, 0.3vmin, 3px);
}

.top-banner-s-text {
  font-family: "Ubuntu";
  color: #fff;
  font-size: clamp(23px, 5vmin, 53px);
  line-height: clamp(23px, 5vmin, 53px);
  margin-bottom: clamp(2.3px, 0.5vmin, 5.3px);
}

.top-banner-s-text-t {
  color: #fff;
  font-size: clamp(23px, 5vmin, 53px);
  line-height: clamp(23px, 5vmin, 53px);
  margin-bottom: clamp(2.3px, 0.5vmin, 5.3px);
}

.top-banner-xs-text {
  font-family: "Ubuntu";
  color: var(--main-color-darkblue);
  font-size: clamp(12px, 2.5vmin, 24px);
  line-height: clamp(12px, 2.5vmin, 24px);
  margin-bottom: clamp(1.2px, 0.25vmin, 2.4px);
}

.top-banner-xs-text-t {
  color: var(--main-color-darkblue);
  font-size: clamp(12px, 2.5vmin, 24px);
  line-height: clamp(12px, 2.5vmin, 24px);
  margin-bottom: clamp(1.2px, 0.25vmin, 2.4px);
}

.font-normal {
  font-size: clamp(12px, 2.5vmin, 24px);
  line-height: clamp(12px, 2.5vmin, 24px);
  margin-bottom: clamp(1.2px, 0.25vmin, 2.4px);
  word-wrap: break-word;
}

.trans-m-btn {
  background-color: transparent;
  border: 1px solid var(--main-color-lightblue);
  color: var(--main-color-lightblue);
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-m-btn:hover {
  background-color: var(--main-color-red);
}

.trans-m-btn-small {
  background-color: transparent;
  border: 1px solid var(--main-color-lightblue);
  color: var(--main-color-lightblue);
  width: fit-content;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-m-btn-small:hover {
  background-color: var(--main-color-red);
}

.d1-img {
  width: 30vmin;
}

.d2-img {
  position: absolute;
  right: 0;
  width: 35vmin;
}

.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* or: margin: 0 auto; */
  max-width: 100%;
  height: auto;
}

.trans-fill-m-btn {
  background-color: var(--main-color-gray);
  border: 1px solid var(--main-color-lightblue);
  color: var(--main-color-lightblue);
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-fill-m-btn-lb {
  background-color: var(--main-color-lightblue);
  border: none;
  color: var(--main-color-darkblue);
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-fill-m-btn-db {
  background-color: var(--main-color-darkblue);
  border: none;
  color: #fff;
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-fill-m-btn-rd {
  background-color: var(--main-color-red);
  border: none;
  color: #fff;
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-fill-m-btn-blue {
  background-color: #0319E3;
  border: none;
  color: #fff;
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-fill-m-btn-grn {
  background-color: #10E8E2;
  border: none;
  color: var(--main-color-darkblue);
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
  font-family: "Ubuntu";
}

.trans-fill-m-btn-wt {
  background-color: #fff;
  border: 1px solid var(--main-color-lightblue);
  color: var(--main-color-darkblue);
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
  font-family: "Ubuntu";
}

.trans-fill-m-btn:hover {
  background-color: var(--main-color-red);
}

.trans-fill-m-btn-lb:hover {
  background-color: var(--main-color-gray);
}

.trans-fill-m-btn-rd:hover {
  background-color: var(--main-color-gray);
}

.trans-fill-m-btn-blue:hover {
  background-color: var(--main-color-gray);
}

.trans-fill-m-btn-grn:hover {
  background-color: var(--main-color-red);
}

.trans-fill-m-btn-db:hover {
  background-color: var(--main-color-red);
}

.trans-fill-m-btn-wt:hover {
  background-color: var(--main-color-red);
}

.trans-fill-m-btn-2 {
  background-color: transparent;
  border: none;
  color: #001AFE;
  width: fit-content;
  cursor: pointer;
  padding: 2vmin 4vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(12px, 2.5vmin, 24px);
}

.trans-fill-m-btn-2:hover {
  background-color: var(--main-color-red);
  color: #fff;
}

.trans-fill-xm-btn {
  background-color: var(--main-color-darkblue);
  border: none;
  color: #fff;
  width: fit-content;
  cursor: pointer;
  padding: 1.5vmin 3vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(11px, 2.2vmin, 21px);
  font-family: "UbuntuLight";
}

.trans-fill-xm-lb-btn {
  background-color: var(--main-color-lightblue);
  border: none;
  color: var(--main-color-darkblue);
  width: fit-content;
  cursor: pointer;
  padding: 1.5vmin 3vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(11px, 2.2vmin, 21px);
  font-family: "UbuntuLight";
}

.trans-fill-xm-wt-btn {
  background-color: #fff;
  border: none;
  color: var(--main-color-darkblue);
  width: fit-content;
  cursor: pointer;
  padding: 1.5vmin 3vmin;
  border-radius: 10vmin;
  text-align: center;
  font-size: clamp(11px, 2.2vmin, 21px);
  font-family: "UbuntuLight";
}

.trans-fill-xm-btn:hover {
  background-color: var(--main-color-red);
  color: #fff;
}

.trans-fill-xm-lb-btn:hover {
  background-color: var(--main-color-red);
  color: #fff;
}

.trans-fill-xm-wt-btn:hover {
  background-color: var(--main-color-red);
  color: #fff;
}

.bg1 {
  position: absolute;
  left: -10vmin;
  margin-top: -20vmin;
  width: 80vmin;
}

.dots3 {
  position: absolute;
  right: 0;
  margin-top: 20vmin;
  width: 80vmin;
}

.bg2 {
  position: absolute;
  right: -10vw;
  width: 80vw;
}

.bg3 {
  position: absolute;
  right: 30vw;
  width: 40vw;
}

.fd-iot-report {
  width: 25vw;
  position: absolute;
  right: -2vw;
  min-width: 200px;
  z-index: 1;
}

.int1 {
  position: absolute;
  left: 0vw;
  width: 100vw;
  z-index: 1;
}

.sig1 {
  position: absolute;
  left: 0;
  width: 100vmin;
  margin-top: -20vmin;
}

.qa1 {
  position: absolute;
  right: -20vmin;
  width: 80vmin;
  margin-top: 50vmin;
}

.pt-bg-2 {
  position: absolute;
  right: 0;
  width: 80vw;
}

.pt-bg-3 {
  position: absolute;
  right: 0;
  width: 35vw;
  z-index: 1;
  margin-top: -32vw;
}

.pt-bg-4 {
  position: absolute;
  left: 0;
  width: 45vw;
  z-index: 1;
  margin-top: -15vw;
}

.pt-bg-5 {
  position: absolute;
  left: 0;
  width: 100vw;
  z-index: 1;
  margin-top: -10vw;
}

.pt-bg-6 {
  position: absolute;
  left: -5vw;
  width: 40vw;
  z-index: 1;
}

.sf-bg-1 {
  position: absolute;
  right: 0;
  width: 50vw;
  z-index: 1;
}

.sf-img-1 {
  width: 50vw;
  margin-top: 5vmin;
}

.sf-img-2 {
  width: 20vw;
  position: absolute;
  z-index: 1;
  left: 0;
}

.sf-img-6 {
  position: absolute;
  right: 0;
  width: 65vw;
  z-index: 1;
}

.sf-img-7 {
  position: absolute;
  right: 0;
  width: 20vw;
  z-index: 1;
  margin-top: -50vw;
}

.sch-bg-1 {
  position: absolute;
  left: 0;
  width: 20vw;
  z-index: 1;
}

.sch-bg-2 {
  position: absolute;
  left: 0;
  width: 100vw;
  z-index: 1;
}

.sch-img-1 {
  position: absolute;
  right: 0;
  width: 20vw;
  z-index: 1;
}

.qa2 {
  position: absolute;
  right: 20vw;
  width: 60vw;
  padding-top: 20vw;
}

.f-lb {
  color: var(--main-color-lightblue) !important;
}

.f-db {
  color: var(--main-color-darkblue) !important;
}

.f-rd {
  color: var(--main-color-red) !important;
}

.f-gray {
  color: var(--main-color-gray) !important;
}

.f-wt {
  color: #fff !important;
}

.f-ylw {
  color: #FBBC04 !important;
}

.f-grn {
  color: var(--main-color-green) !important;
}

.f-bld {
  font-family: "UbuntuBold" !important;
}

.f-light {
  font-family: "UbuntuLight" !important;
}

.f-thin {
  font-family: "UbuntuThin" !important;
}

.f-ubuntu {
  font-family: "Ubuntu" !important;
}

.f-bld-700 {
  font-weight: 700 !important;
}

.f-left {
  text-align: left !important;
}

.f-center {
  text-align: center !important;
}

.mobile-padding {
  padding-left: 4vw !important;
  padding-top: 0vmin !important;
}

.fd-bg-1 {
  position: absolute;
  width: 115vw;
  left: -10vw;
  top: 0;
}

.pt-bg-1 {
  position: absolute;
  width: 80vw;
  left: -20vw;
  top: -10vw;
}

.pt-img-2 {
  width: 100%;
}

.pt-img-3 {
  width: 100%;
}

.pt-img-4 {
  width: 80%;
  float: right;
}

.pt-img-6 {
  width: 100%;
  float: right;
}

.pt-img-7 {
  width: 80%;
}

.pt-img-8 {
  width: 50vw;
  margin-left: 35vw;
}

.sf-img-5 {
  width: 30vw;
  position: absolute;
  right: -5vw;
  z-index: 1;
  margin-top: -70vw;

}

.sfac-div {
  margin-top: 20vw;
}

.fd-bg-4 {
  position: absolute;
  width: 60vw;
  left: -10vw;
  z-index: 1;
}

.fd-bg-5 {
  position: absolute;
  width: 60vw;
  right: -10vw;
  margin-top: 80vw;
  z-index: 1;
}

.sf-img-20 {
  position: absolute;
  z-index: 1;
  right: 0;
  width: 60vw;
}


.fd-bg-1 {
  width: 80vw;
  left: 10vw;
  top: 0;
}

.fd-bg-2 {
  position: absolute;
  width: 115vw;
  left: -10vw;
  top: 35vmin;
}

.fd-d-1 {
  position: absolute;
  z-index: 2;
  width: 25vw;
}

.fd-d-2 {
  width: 20vw;
  max-width: 300px;
}

.fd-bg-3 {
  position: absolute;
  width: 40vw;
  right: -10vw;
}

.sig-bg-1 {
  position: absolute;
  width: 100vw;
  left: 0vw;
  z-index: 1;
  top: 0;
}

.sig-bg-2 {
  position: absolute;
  width: 50vw;
  right: 0vw;
  z-index: 1;
}

.sig-img-10 {
  position: absolute;
  width: 15vw;
  left: 0vw;
  z-index: 1;
}

.sig-bg-3 {
  position: absolute;
  width: 110vw;
  left: -5vw;
  z-index: 1;
  margin-top: -45vw;
}

.sig-bg-4 {
  position: absolute;
  width: 100vw;
  left: 0;
  z-index: 1;
}

.sig-img-8 {
  width: 100%;
  max-width: 150px;
}

.topbanner-body-leftaligned {
  width: 50vmin;
  text-align: left;
}

#iiot-fd-app-holder {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  grid-auto-rows: 160px;
  grid-gap: 20px;
  font-family: 'Ubuntu';
  z-index: 1;
  position: relative;
  padding-right: 160px;
}

.shop_card_title_top {
  margin: auto;
  width: fit-content;
  width: 100%;
  position: absolute;
  top: 15px;
  left: 0;
  text-align: center;
  color: var(--main-color-darkblue);
  font-size: initial;
  z-index: 99;
}

.sf-img-3 {
  width: 60%;
  background-color: #fff;
  position: sticky;
  z-index: 10;
}

.ncard {
  width: 100%;
  background-color: rgb(176, 222, 237);
  border-radius: 40px;
  padding: 5vmin;
  min-height: 40vmin;
  text-align: center;
  height: 100%;
}

.g423-container {
  position: relative;
  display: block;
  width: 100%;
  min-height: 10px;
}

.g423-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Style classes extracted from the SVG */
.g423-fill-none {
  fill: none;
}

.g423-fill-B0DEED {
  fill: #B0DEED;
}

.g423-fill-B0DEED-fill-opacity-0-75 {
  fill: #B0DEED;
  fill-opacity: 0.75;
}

.g423-fill-B0DEED-fill-opacity-0-5 {
  fill: #B0DEED;
  fill-opacity: 0.5;
}

.g423-fill-B0DEED-fill-opacity-0-25 {
  fill: #B0DEED;
  fill-opacity: 0.25;
}

.g423-fill-B0DEED-fill-opacity-0-21 {
  fill: #B0DEED;
  fill-opacity: 0.21;
}

.g423-fill-010A2D {
  fill: #010A2D;
}

.g423-fill-C01466 {
  fill: #C01466;
}

.g423-fill-black-fill-opacity-0 {
  fill: black;
  fill-opacity: 0;
}

.sig-img {
  width: 100%;
  height: 100%;
}

.card-grid-n {
  display: grid;
  /* Create 3 equal-width columns */
  grid-template-columns: repeat(3, min(20vw, 250px));
  gap: 20px;
  /* Center the grid content if there's extra space */
  justify-content: center;
}

.card-n {
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;

  /* --- Fixed Dimensions --- */
  width: 20vw;
  height: 20vw;

  max-width: 250px;
  max-height: 250px;


  /* --- Center content inside the fixed-size card --- */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  /* Prevents content from spilling out */

  border-radius: 24px;
  background-color: var(--main-color-lightblue);
  font-family: UbuntuLight;
  color: var(--main-color-darkblue);
  cursor: pointer;
}

.card-n:hover {
  zoom: 1.08;
}

.card-n-2 {
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;

  /* --- Fixed Dimensions --- */
  width: 20vw;
  height: 20vw;

  max-width: 250px;
  max-height: 250px;


  /* --- Center content inside the fixed-size card --- */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  /* Prevents content from spilling out */

  border-radius: 24px;
  background-color: var(--main-color-lightblue);
  font-family: UbuntuLight;
  color: var(--main-color-darkblue);
}

.card-n-text {
  font-size: min(1vw, 12px);
  position: sticky;
  z-index: 10;
}

.card-n-subtext {
  font-size: min(0.8vw, 10px);
  position: sticky;
  z-index: 10;
  color: var(--main-color-darkblue);
}

.card-n-link {
  font-size: min(1vw, 12px);
  color: #2904FB;
  font-family: "Ubuntu";
  position: sticky;
  z-index: 10;
}

.card-n-title {
  font-size: min(2vw, 24px);
  font-family: 'Ubuntu';
  font-weight: 700;
  word-break: break-word;
  position: sticky;
  z-index: 10;
}

.card-n-image {
  width: 10vw;
  max-width: 60px;
  height: 10vw;
  max-height: 60px;
}

.card-n-image-bg {
  position: absolute;
  z-index: 1;
  width: 10vw;
  max-width: 200px;
}

#iiot-fd-app-holder-n {
  margin: 25px 0;
  position: sticky;
  z-index: 10;
}

.pt-img-1 {
  position: absolute;
  right: -7vw;
  width: 55vw;
  margin-top: 10vmin;
}

.no-padding-r {
  padding-right: 0 !important;
}

.sch-img-10 {
  position: absolute;
  left: 0;
  width: 15vw;
  z-index: 1;
}

.sch-img-11 {
  position: absolute;
  left: 5vw;
  width: 10vw;
  z-index: 1;
}

.time-ico-img {
  width: 100%;
  max-width: 60px;
  position: sticky;
  z-index: 10;
}

.timeline-line {
  position: absolute;
  left: 20vw;
  top: -30vmin;
  bottom: 0;
  width: 1vmin;
  background-color: var(--main-color-darkblue);
  /* Dark blue line color */
  border-radius: 2px;
  z-index: 3;
}

.timeline-section-holder {
  padding-top: 20vmin;
  padding-left: 20vw;
  padding-right: 20vw;
  position: sticky;
  z-index: 10;
}

.timeline-section-holder .row {
  position: sticky;
  z-index: 10;
}

.timeline-section .div {
  position: sticky;
  z-index: 10;
}

.timeline-section-line {
  height: 1vmin;
  width: 5vw;
  background-color: var(--main-color-darkblue);
}

.timeline-section-finish {
  height: 4vw;
  width: 4vw;
  margin-left: -1.5vw;
  border-radius: 50%;
  background-color: var(--main-color-darkblue);
}

.timeline-section-title {
  padding-left: 5vw;
  margin-top: -1.5vw;
  position: sticky;
  z-index: 10;
}

.timeline-section-content {
  padding-left: 5vw;
}

.timeline-section {
  margin-bottom: 20vmin;
}

.container-tl {
  padding-left: 20vw;
  padding-right: 10vw;
}

.middle-text-div {
  width: 60% !important;
}

/* Base style for shapes */
.shape {
  cursor: pointer;
  /* Needed so transforms behave nicely in SVG */
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.2s ease;
}

/* Hover: make shapes bigger */
.shape:hover {
  transform: scale(1.2);
  /* Optional: stop rotation while hovered */
  animation-play-state: paused;
}


/* Idle rotation animation */
@keyframes rotateShape {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.idle-rotate {
  animation: rotateShape 8s linear infinite;
}

@keyframes pulseZoom {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.2);
    /* The peak size */
  }

  100% {
    transform: scale(0.8);
    /* Back to start */
  }
}

/* 2. Apply it to a class */
.pulse-effect {
  /* Crucial for proper scaling origin */
  transform-box: fill-box;
  transform-origin: center;

  /* animation-name | duration | timing-function | iteration-count */
  animation: pulseZoom 2s ease-in-out infinite;
}

/* Clickable text styling */
.clickableText {
  cursor: pointer;
  user-select: none;
}

.position-sticky-z2 {
  position: sticky;
  z-index: 99999;
}

.flu-vid-holder {
  margin-top: 0;
  position: relative;
  bottom: min(40vmin, 35vh);
  z-index: 9999;
  left: 5vw;
  width: 90vw;
}

.flumina_video_button {
  cursor: pointer;
  /* height: 4rem;
        width: auto;
        margin-left: 1rem; */
}

.flumina_video_button:hover {
  transform: scale(1.1);
}

.flumina_video_button2 {
  cursor: pointer;
  height: 4rem;
  width: auto;
  margin-left: 1rem;
}

.flumina_video_button2:hover {
  transform: scale(1.1);
}

#flumina_video_subholder {
  width: 100vw;
  margin: auto;
  height: 100vh;
  padding: 2rem 4rem;
  position: relative;
  max-width: 100%;
  max-height: 100%;
}


#flumina_video_subholder img {
  width: 100%;
  height: 100%;
}

.top-flum-video-holder {
  width: 15vmin;
}

#flumina_video_holder {
  top: 0;
  left: 0;
  z-index: 99999;
  height: 100vh;
  /* margin-top: -7vh; */
  position: fixed;
  transition: width 1s;
  width: 0;
  overflow: hidden;
}

#flumina_video_holder.blurred {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#flumina_video_close {
  position: absolute;
  right: 2rem;
  top: 1rem;
  font-size: 2rem;
  display: none;
  cursor: pointer;
  z-index: 9999999;
}

.iiot-section p, .new-topbanner p {
  margin-bottom: 0;
  line-height: 1.1;
  word-break: break-all;
}

.iiot-top-chart {
  width: 100%;
}

.new-topbanner {
  background-color: #424242;
  color: #fff;
  min-height: 100vh;
  padding-top: 5vmin;
}

.flow-text-iiot strong {
  color: var(--main-color-lightblue);
  font-family: "UbuntuBold";
}

.top-hero-text-container{
  padding-top: 80px;
}

.dot-1{
  width: min(100%, 200px);
}

.iiot-section {
  padding-top: 10vmin;
  padding-bottom: 10vmin;
  position: sticky;
  z-index: 10;
  padding-left: 10vmin !important;
}

.iiot-sec-bookmark{
  background-color: var(--main-color-darkblue);
  padding: 10px 20px;
  width: fit-content;
  color: #fff;
  margin-top: 5vmin;
}

.iiot-sec-bookmark p {
  line-height: 1;
  margin: 0;
}

.dot-left-20{
  position: absolute;
  left: 0;
  width: min(30vmin, 300px);
  margin-top: 30vmin;
  z-index: 1;
}

.dot-left-30{
  position: absolute;
  left: 0;
  width: min(30vmin, 300px);
  margin-top: 30vmin;
  z-index: 1;
}

.dot-left-21{
  position: absolute;
  left: 0;
  width: min(30vmin, 300px);
  margin-top: 30vmin;
  z-index: 1;
}

.dot-right-22{
  position: absolute;
  right: 0;
  width: min(30vmin, 300px);
  margin-top: 30vmin;
  z-index: 1;
}

.dot-left-20{
  position: absolute;
  left: 0;
  width: min(30vmin, 300px);
  margin-top: 30vmin;
  z-index: 1;
}

.zustand-th{
  border-bottom: 1px solid var(--main-color-darkblue);
  padding-bottom: 5px;
}

.arr-1 {
  width: min(100%, 80px);
}

.machine-text span {
  color: var(--main-color-red);
}

.machine-text strong {
  font-family: "UbuntuBold";
}

.dot-10 {
  width: min(100%, 400px);
}

.bg-right-20 {
  position: absolute;
  right: 0;
  width:80vmin;
  margin-top: -30vmin;
  z-index: 1;
}

.arr-2 {
  width: min(100%, 100px);
  margin: 0 auto;
}

.arr-3 {
  width: min(100%, 80px);
  margin: 0 auto;
}

@media (max-width: 992px) {
  .iiot-section {
    padding-left: 2vmin !important;
  }

  .dot-left-20{
    opacity: 0.5;
  }

  .topbanner-body {
    padding: 10vmin 0 5vmin 0;
  }

  .d2-img {
    margin-top: 10vmin;
  }

  .pt-img-1 {
    margin-top: 15vmin;
  }

  .card-grid-n {
    grid-template-columns: repeat(2, min(30vw, 250px));
  }

  .card-n {
    width: 30vw;
    height: 30vw;
  }

  .card-n-text {
    font-size: min(1.5vw, 12px);
  }

  .card-n-link {
    font-size: min(1.5vw, 12px);
  }

  .card-n-title {
    font-size: min(3vw, 24px);
  }

  .middle-text-div {
    width: 70% !important;
  }
}

@media (max-width: 768px) {
  .mobile-padding {
    padding-left: 10vw !important;
    padding-top: 3vmin !important;
  }

  .pt-img-1 {
    margin-top: 20vmin;
  }

  .pt-img-2 {
    width: 80%;
  }

  .pt-img-3 {
    width: 50%;
  }

  .pt-img-4 {
    width: 30%;
  }

  .pt-img-6 {
    width: 50%;
  }

  .pt-img-7 {
    width: 50%;
  }

  .pt-bg-3 {
    width: 40vw;
  }

  .pt-bg-4 {
    width: 60vw;
  }

  .sfac-div {
    margin-top: 10vw;
  }

  .timeline-line {
    top: -32vmin;
  }

  .middle-text-div {
    width: 80% !important;
  }
}

@media (max-width: 576px) {
  .topbanner-body {
    padding: 30vmin 0 5vmin 0;
  }

  .topbanner {
    height: 75vh;
  }

  .d2-img {
    margin-top: 30vmin;
  }

  .pt-img-1 {
    margin-top: 30vmin;
  }

  .pt-img-6 {
    width: 65%;
  }

  .pt-bg-3 {
    width: 50vw;
  }

  .pt-bg-4 {
    width: 70vw;
  }

  .fd-bg-2 {
    top: 85vmin;
  }

  .card-grid-n {
    /* Switch to a single column layout */
    grid-template-columns: repeat(2, min(40vw, 250px));
  }

  .card-n {
    /* On mobile, allow the card to be centered in the single column */
    /* This rule is inherited, but we could add mobile-specific changes here if needed */
    /* margin: 0 auto; */
    /* Horizontally center the card */
    width: 40vw;
    height: 40vw;
  }

  .card-n-text {
    font-size: min(2vw, 12px);
  }

  .card-n-link {
    font-size: min(2vw, 12px);
  }

  .card-n-title {
    font-size: min(4vw, 24px);
  }

  .sf-img-3 {
    width: 90%;
  }

  .timeline-line {
    top: -34vmin;
  }

  .timeline-section-title {
    margin-top: -3vw;
  }

  .middle-text-div {
    width: 100% !important;
  }

  .nfc-mobile-cont {
    margin-top: 50vw;
  }

  .flu-vid-holder {
    bottom: min(25vmin, 15vh);
  }
}