.topbanner {
  background-color: var(--main-color-darkblue);
  width: 100%;
  height: max-content;
  min-height: 100vh;
  text-align: center;
  color: #fff;
  z-index: 99;
  position: sticky;
}

.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);
  word-break: break-all;
}

.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-text-2 {
  font-family: "Ubuntu";
  color: var(--main-color-darkblue);
  font-size: clamp(18px, 4vmin, 41px);
  line-height: clamp(18px, 4vmin, 41px);
  margin-bottom: clamp(1.8px, 0.4vmin, 4.1px);
}

.top-bannerxxm-s-text {
  font-family: "Ubuntu";
  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-2 {
  font-family: "Ubuntu";
  color: #fff;
  font-size: clamp(18px, 4vmin, 41px);
  line-height: clamp(18px, 4vmin, 41px);
  margin-bottom: clamp(1.8px, 0.4vmin, 4.1px);
}

.top-banner-s-text-t {
  font-family: "UbuntuThin";
  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: "UbuntuLight";
  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-family: "UbuntuLight";
  font-size: clamp(12px, 2.5vmin, 24px);
  line-height: clamp(12px, 2.5vmin, 24px);
  margin-bottom: clamp(1.2px, 0.25vmin, 2.4px);
  color: #fff;
}

.font-normal-s {
  font-family: "UbuntuLight";
  font-size: clamp(9px, 1.8vmin, 16px);
  line-height: clamp(9px, 1.8vmin, 16px);
  margin-bottom: clamp(0.9px, 0.18vmin, 1.6px);
  color: #fff;
}

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

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

.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: 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-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: var(--main-color-green);
  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;
}

.co2-p-img-1 {
  margin-top: 10vmin;
  width: 100%;
}

.co2-p-img-3 {
  margin-top: 10vmin;
  width: 100%;
}

.co2-f-img-2 {
  width: 100%;
}

.co2-p-img-7 {
  width: 100%;
}

.co2-ccf-img-3{
  width: 100%;
}

.co2-p-img-8{
  width: 100%;
}

.co2-p-img-4 {
  width: 15vw;
  min-width: 250px;
  justify-content: start;
  display: flex;
}

.co2-ccf-img-4 {
  position: absolute;
  left: -10vw;
  z-index: 1;
  width: 80vw;
  margin-top: 1vw;
}

.co2-ccf-img-5 {
  position: absolute;
  left: -10vw;
  z-index: 1;
  width: 80vw;
  margin-top: 1vw;
}

.qa1 {
  position: absolute;
  right: -20vw;
  width: 60vw;
}

.co2-p-img-9 {
  position: absolute;
  right: 5vmin;
  z-index: 1;
  width: 20vmin;
  margin-top: -15vmin;
}

.co2-p-img-9-2 {
  position: absolute;
  right: 5vmin;
  z-index: 1;
  width: 20vmin;
  margin-top: -25vmin;
}

.co2-f-img-4 {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 85vw;
  margin-top: -34vw;
}

.co2-f-img-5 {
  position: absolute;
  left: -10vw;
  z-index: 1;
  width: 65vw;
  margin-top: 15vw;
}

.sf-img-3 {
  width: 70%;
  position: sticky;
  z-index: 10;
  margin-top: 5vmin;
}

.sf-img-20-2 {
  position: absolute;
  z-index: 1;
  right: 0;
  width: 90vw;
  margin-top: -20vw;
  opacity: 0.15;
}

.co2-p-img-10 {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 45vmin;
  margin-top: -15vmin;
}

.co2-pcf-img-3 {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 80vmin;
  margin-top: -15vmin;
}

.co2-p-img-11 {
  position: absolute;
  left: 10vmin;
  z-index: 1;
  width: 90vmin;
  margin-top: 20vmin;
}

.co2-p-img-12 {
  position: absolute;
  right: 0;
  z-index: 1;
  width: 20vmin;
  margin-top: 15vmin;
}

.co2-p-img-13 {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 20vmin;
  margin-top: -10vmin;
}

.co2-p-img-13-2 {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 20vmin;
  margin-top: -30vmin;
}

.co2-f-img-4-2 {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100vw;
  margin-top: 0vmin;
}

.co2-pcf-img-5 {
  position: absolute;
  left: -40vmin;
  z-index: 1;
  width: 80vmin;
  margin-top: 0vmin;
}

.co2-pcf-img-6 {
  position: absolute;
  right: -30vmin;
  z-index: 1;
  width: 70vmin;
  margin-top: 0vmin;
}

.co2-pcf-img-7 {
  position: absolute;
  left: 0vmin;
  z-index: 1;
  width: 40vw;
  margin-top: 0vmin;
}


.co2-p-img-14 {
  position: absolute;
  left: -10vmin;
  z-index: 1;
  width: 90vmin;
  margin-top: 60vmin;
}

.co2-p-img-15 {
  position: absolute;
  left: 0vmin;
  z-index: 1;
  width: 60vmin;
  margin-top: 15vmin;
}

.co2-p-img-16 {
  position: absolute;
  right: 0vmin;
  z-index: 1;
  width: 90vmin;
  margin-top: 25vmin;
}

.co2-f-img-7 {
  position: absolute;
  right: 0vmin;
  z-index: 1;
  width: 40vmin;
  margin-top: 0vmin;
}

#middleHoldeMainN {
  background-image: url('/img/bg_index_new2.svg');
  background-size: cover;
  /* Ensures the image covers the whole div */
  background-position: center;
  /* Centers the image within the div */
  width: 100%;
  /* Ensures the div takes up 100% width */
  height: auto;
  padding-bottom: 35vmin;
}

.border-grn {
  border: 1px solid var(--main-color-green);
}

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

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

.ncard {
  width: 100%;
  background-color: var(--main-color-darkblue);
  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: 15px;
  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;
}

.co2TopBanSm {
  width: 50vw !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;
  }

  .co2TopBanSm {
    width: 100% !important;
  }

  .co2-p-img-1 {
  width: 100%;
}

.co2-p-img-7 {
  width: 100%;
}
}

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

  .topbanner {
    min-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;
  }
}