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

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

.topbanner-body {
  padding: 6vmin 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);
}

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

.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: 10vw;
  width: 80vw;
}

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

@media (max-width: 992px) {
  .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;
  }
}