@charset "UTF-8";

@font-face {
  font-family: "Proxima Nova";
  src: url("../css/fonts/proximanova-black.woff2") format("woff2"), url("../css/fonts/proximanova-black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../css/fonts/proximanova-bold.woff2") format("woff2"), url("../css/fonts/proximanova-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../css/fonts/proximanova-semibold.woff2") format("woff2"), url("../css/fonts/proximanova-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../css/fonts/proximanova-light.woff2") format("woff2"), url("../css/fonts/proximanova-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../css/fonts/proximanova-regular.woff2") format("woff2"), url("../css/fonts/proximanova-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../css/fonts/RobotoMono-Regular.woff2") format("woff2"), url("../css/fonts/RobotoMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #070707;
  z-index: 99;
  justify-content: center;
  display: flex;
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}

html,
body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p,
a {
  font-family: "Proxima Nova", sans-serif;
}


button {
  border: none;
  background: none;
  outline: none;
}

/* LAYOUT
------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

figure {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  cursor: pointer;
}

video {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  opacity: 0;
}

svg:not(:root) {
  overflow: hidden;
}

/******** css start here *********/
.frames {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
}

#main {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
}

.root {
  font-size: 0.052086vw;
}

/* .root {
  font-size: 0.047359vw;
} */
.f-main {
  position: absolute;
}

@keyframes zoom-in {
  0% {
    transform: scale(0.8, 0.8);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


p {
  font-family: "Proxima Nova", sans-serif;
  color: #333333;
  font-weight: normal;
  font-size: 8rem;
  line-height: 10rem;
  margin-bottom: 0rem;
}

a:hover,
a:focus {
  text-decoration: none;
}

.middle-align {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

body {
  overflow: hidden;
  background-color: #ffffff;
  background-position: center;
  overflow-y: auto;
}

img {
  width: 100%;
}

/* play audio */

#player-container {
  position: absolute;
  left: 17.5%;
  z-index: 9999;
  padding-top: 3rem;
}

.home-header #player-container {
  left: 13.5%;
}

audio#my_audio,
audio#click-sound {
  display: none;
}

.click-area {
  z-index: 9;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  /* background: #00000050; */
}

#canvas-popup {
  background-color: #E2E4E5;
}

#canvas-zoom_in {
  position: absolute !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
}

/* CSS for the modal dialog */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow: hidden;
}

.modal-content {
  position: relative;
  height: 100%;
  background-color: #E2E4E5;
}

/* CSS for the close button */
.close,
.img-close {
  position: absolute;
  cursor: pointer;
  z-index: 999;
  opacity: 1;
  transition: 0.3s ease;
  width: 54.15rem;
  height: 54.15rem !important;
}

.img-close {
  transform: scale(0.61);
  bottom: 1%;
  right: 3%;
  z-index: 99999 !important;
}

.close img,
.img-close img {
  position: relative;
}

.play-img,
.play-img img {
  width: 75rem;
  height: 75rem;
}

button#popup-button {
  border: none;
  background: white;
  outline: none;
  position: absolute;
  top: 10%;
  font-size: 20rem;
  z-index: 999;
}

#replay-button {
  left: 2.5%;
  width: 52rem !important;
  height: 52rem !important;
  top: 76.9%;
  display: none;
}

#replay-button img {
  position: absolute;
}

/* popup screen end ************************************************/

#frames.move-top {
  z-index: 9;
}

/* zoom in css*/
#zoom-item {
  width: 66%;
  height: 66%;
  float: left;
  overflow: hidden;
  display: none;
}

.zoomItem {
  position: absolute;
  animation: fadeIn linear 1.4s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* hotspot points css start*/

.BornHS__Wrapper .BornHS__Input {
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -9999px;
  width: 0;
  z-index: -1;
}

.BornHS__Wrapper .BornHS__Input,
.BornHS__Wrapper .BornHS__Label {
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  transition: all 300ms ease !important;
  width: fit-content !important;
}

.BornHS__Modal__Input.button-purple .BornHS__Label {
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.main-page .top-logos {
  height: 90rem;
}

#click-play {
  display: none;
}

.BornHS__Wrapper .BornHS__Label {
  width: fit-content !important;
}

.BornHS__Wrapper.BornHS__Blur .BornHS__Input {
  display: none;
}

.BornHS__Wrapper.BornHS__Blur .BornHS__Input,
.BornHS__Label {
  opacity: 0.5;
  pointer-events: none;
}

.BornHS__Wrapper.BornHS__Blur .BornHS__Input:checked {
  display: inline-block;
}

.BornHS__Wrapper.BornHS__Blur .BornHS__Input:checked,
.BornHS__Label {
  opacity: 1;
  pointer-events: auto;
}

.BornHS__Modal,
.BornHS__Wrapper {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 1;
}

body.noScroll,
html.noScroll body {
  margin-right: 0px;
  overflow-x: hidden !important;
  /* overflow-y: auto; */
}

/* .noScroll {
  overflow: hidden !important;
} */

.box-text {
  display: none;
  position: absolute;
  bottom: 0%;
  padding: 10rem;
  background-color: #ffffff45;
  width: 100%;
}

.box-text p,
.box-text h3 {
  color: #ffffff;
}

h3.head-boxes {
  font-family: "Proxima Nova", sans-serif;
  font-size: 12rem;
  margin-bottom: 5rem;
}

.BornHS__Modal__Input {
  position: absolute;
  left: 21%;
  top: 33%;
}

.open-hotspot .play-button {
  transform: scale(0.5003);
  top: -7rem;
  right: 35rem;
}

.BornHS__Wrapper.wrapper-index {
  z-index: 99;
}

#bg-background {
  position: absolute;
  top: 0;
}

div#frames {
  top: 50%;
  transform: translate(0, -50%);
  z-index: 9;
  /* overflow: hidden; */
  width: 100% !important;
}

.vertical .img-close {
  right: 37%;
}

#canvas-activ {
  background-color: #ffffff;
}

/* web page for navigation */
.container {
  max-width: 100%;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

h1 {
  font-family: "Proxima Nova", sans-serif;
  font-weight: 900;
  font-size: 64rem;
  line-height: 72rem;
  color: #151515;
  margin-bottom: 30rem;
  font-weight: 500;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}

.in-anime {
  animation: animeIn;
  animation-duration: 0.8s;
  visibility: visible;
}

@keyframes animeIn {
  0% {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }

  50% {
    opacity: 1;
  }
}

/* web page for navigation ends*/

/***************** hotspots start **********************/
.hotspot-area {
  z-index: 9;
  cursor: pointer;
  display: flex;
}

.hotspot-area p {
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  border-radius: 50rem;
  padding: 0px;
  cursor: pointer;
  margin-left: 0rem;
  color: #ffffff;
  padding: 8rem 16rem;
  font-size: 14rem;
  line-height: 1.3em;
  display: flex;
  padding-left: 40rem;
  font-family: "Proxima Nova", sans-serif;
  position: absolute;
  left: -2%;
}

.hotspot-area img {
  z-index: 2;
  cursor: pointer;
}

#bg-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 27.5%;
  margin: auto;
  z-index: 99;
}

#text-container {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

#text-container p {
  background-color: #ffffff;
  width: 15%;
  height: fit-content;
  border-color: transparent;
  box-shadow: rgb(214 214 214 / 83%) 2px 2px 5px 2px;
  -webkit-box-shadow: rgb(214 214 214 / 83%) 2px 2px 5px 2px;
  -moz-box-shadow: rgba(214, 214, 214, 0.83) 2px 2px 5px 2px;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20rem 15rem;
  text-align: left;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-name: trans-in;
  font-size: 14rem;
  line-height: 1.3em;
  z-index: 99;
  transform-origin: center;
}

#text-image {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

#text-image p {
  width: 100%;
  height: fit-content;
  -moz-box-shadow: rgba(214, 214, 214, 0.83) 2px 2px 5px 2px;
  border-radius: 8px;
  position: absolute;
  left: 0;
  right: 0;
  top: 17%;
  padding: 20rem 15rem;
  text-align: left;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-name: trans-in;
  color: #fff;
  font-size: 16rem;
  line-height: 1.3em;
  z-index: 99;
  transform-origin: center;
}

@keyframes trans-in {
  0% {
    opacity: 0;
    transform: scale3d(0.7, 0.7, 0.7);
  }

  100% {
    opacity: 1;
  }
}

img.crs-btn {
  position: absolute;
  right: 1%;
  width: 35rem;
  cursor: pointer;
  z-index: 99999;
  background: #fff;
  margin-top: 8rem;
  top: -5%;
}

.crs-btn {
  display: none;
}

/***************** hotspots end **********************/
/***************** textarea start **********************/
.text-area {
  position: absolute;
}

.link-area {
  cursor: pointer;
  position: absolute;
  z-index: 9;
}

/***************** textarea end **********************/

/***************** Link iframe popup **********************/
#iframe-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 80%);
  display: none;
  z-index: 99;
}

#popup-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border: 0px;
}

#close-iframe {
  position: absolute;
  top: 20rem;
  right: 15rem;
  width: 50rem;
  cursor: pointer;
  border-radius: 50rem;
  background-color: #f47d32;
  padding: 15rem;
  transition: 0.3s ease-in;
}

#close-iframe:hover {
  background-color: #c45a18;
}

/***************** Link iframe popup end**********************/
/***************** Subtitle**********************/
.subtitle-area {
  position: absolute;
  z-index: 9;
  font-family: "Proxima Nova", sans-serif;
  font-weight: 500;
  margin: auto !important;
  left: 0 !important;
  right: 0;
  padding: 0px !important;
  text-align: center;
}

/***************** Subtitle end**********************/
/***************** Image**********************/
.image-area {
  position: absolute;
}

#bg-background {
  opacity: 0;
}

/***************** Image end**********************/
/*****************Video in video**********************/
.picture-area video {
  opacity: 1;
  width: 100%;
  height: 100%;
}

.picture-area {
  position: absolute;
}

/*****************Video in video end**********************/

.text-area {
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  height: calc(100% - 172rem);
}

.disable {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes slideRightToLeft {
  from {
    transform: translateX(80%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.right-in {
  animation: slideRightToLeft 0.8s ease-in-out forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

.right-in-img {
  animation: slideRightimg 0.7s ease-in-out forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

@keyframes slideRightimg {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeftToRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.left-in {
  animation: slideLeftToRight 1.1s ease-in-out forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.animate-fadeInUp {
  animation: fade-in-up30 0.7s linear forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.action-btn.animate-fadeInUp {
  animation-delay: 0.5s !important;
  opacity: 0;
  animation: fade-in-up 1s ease-in-out forwards;
}

@keyframes fade-in-up {
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  10% {
    transform: translateY(70rem);
    opacity: 0;
  }
}

@keyframes fade-in-up30 {
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  10% {
    transform: translateY(30rem);
    opacity: 0;
  }
}

@keyframes fade-in-down {
  100% {
    transform: translateY(60rem);
    opacity: 0;
  }

  10% {
    transform: translateY(0rem);
    opacity: 1;
  }
}

.animate-textUp {
  animation: fade-in-up30 0.5s linear forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

@keyframes text-up {
  100% {
    transform: translate(0rem, 0rem);
    opacity: 1;
  }

  75% {
    transform: translate(5rem, 2rem);
    opacity: 0.75;
  }

  50% {
    transform: translate(10rem, 5rem);
    opacity: 0.5;
  }

  25% {
    transform: translate(20rem, 8rem);
    opacity: 0.25;
  }

  0% {
    transform: translate(30rem, 10rem);
    opacity: 0;
  }
}

/* .fullscreen-mode .full-screen-btn {
  background-image: url(../images/full-act.svg) !important;
}
.fullscreen-mode .full-screen-btn:hover {
  background-image: url(../images/full-act-hover.svg) !important;
} */
.text-click {
  font-size: 20rem;
  color: #fff;
}

#click-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: #AAB9CC; */
  /* background-color: #bcc8d7; */
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-in-out;
}

.zoom-in {
  display: none;
  animation: zoomIn 0.5s forwards;
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.top-index {
  z-index: 2 !important;
}

.fade-in {
  animation: fadeIn 0.4s ease-in forwards;
  animation-delay: 0.4s;
  /* Delay before the animation starts */
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn-left {
  100% {
    transform: translateX(0rem);
    opacity: 1;
  }

  10% {
    transform: translateX(-40rem);
    opacity: 0;
  }
}

sup {
  top: -0.8em !important;
  font-size: 50%;
}

/* css custom **********************************************/
.text-24 {
  font-size: 28rem;
  font-weight: 500;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #000;
  margin-bottom: 10rem;
}

.sub-24 {
  font-size: 24rem;
  font-weight: 400;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #000;
  margin-bottom: 10rem;
}

.text-16 {
  font-size: 16rem !important;
  font-weight: 400;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #000;
}

.text-32 {
  font-size: 32rem;
  font-weight: 600;
  font-family: "Proxima Nova";
  line-height: 1.2em;
  color: #16192C;
}

.text-28 {
  font-size: 28rem;
  font-weight: 500;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.2em;
  color: #000000;
  margin-bottom: 15rem;
}

.text-22 {
  font-size: 22rem;
  font-weight: 700;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.2em;
  color: #333333;
  margin-bottom: 10rem;
}

.text-20 {
  font-size: 20rem;
  font-weight: 400;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #000;
  margin-bottom: 20rem;
}

.text-18 {
  font-size: 18rem;
  font-weight: 400;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #000;
  margin-bottom: 15rem;
}

/* css custom end**********************************************/

.header-main {
  width: 100%;
  height: 76rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rem;
  z-index: 2;
}

.title-head {
  text-align: center;
  position: absolute;
  z-index: 9;
  height: auto !important;
  width: 100% !important;
  left: 0;
  right: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  top: 18rem;
  z-index: -1;
}

.logo-left {
  width: 25%;
}

.logo-left img {
  width: 194rem;
}

.logo-right {
  position: relative;
  display: flex;
  width: 25%;
  justify-content: flex-end;
}

.image-right-one {
  width: 108rem;
}

.image-right-two {
  width: 214rem;
}

[class^="col-"] {
  padding-right: 15rem;
  padding-left: 15rem;
}

.menu-wrapper {
  display: flex;
  z-index: 2;
  position: relative;
  background-color: #26235D;
  height: 96rem;
  align-items: center;
  text-align: center;
  left: 0;
  right: 0;
  padding: 0rem 20rem;
  justify-content: center;
}

.menu-wrapper ul {
  padding: 0;
  margin: 0;
  display: flex;
}

.primary-btn {
  color: #26235D;
  text-align: center;
  font-family: "Proxima Nova";
  font-size: 16rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2em;
  border-radius: 6rem;
  background: #ffffff;
  display: inline-flex;
  height: 42rem;
  padding: 12rem 58rem;
  justify-content: center;
  align-items: center;
  margin-right: 16rem;
  cursor: pointer;
  min-width: fit-content;
}

.primary-btn.active {
  background-color: #51FF81;
}

.primary-btn:hover {
  background: #51FF81;
  transition: 0.25s ease-in-out;
}

.menu-wrapper ul .primary-btn:last-child {
  margin-right: 0;
}

.main-content {
  width: 100%;
  height: 100%;
  padding: 20rem;
  z-index: 2;
  display: flex;
  position: relative;
}

.image-container {
  border-radius: 16rem;
  border: 1rem solid #E2E4E5;
  width: 59%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.left-panel {
  width: 23.4%;
  height: 100%;
  padding-right: 20rem;
}

.right-panel {
  width: 23.4%;
  height: 100%;
  padding-left: 20rem;
}

.video-city {
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

/* smart buildings start*/
.panel {
  width: 100%;
  background: #FFF;
  border-radius: 16rem;
  padding: 20rem;
  position: relative;
  height: 740rem;
  border: 1rem solid #E2E4E5;
  overflow: hidden;
}

.section-title {
  font-weight: 700;
  font-size: 22rem;
  margin-bottom: 5rem;
  color: #2C3546;
  font-family: "Proxima Nova", sans-serif;
}

.steps {
  list-style: none;
  padding: 0;
  position: relative;
  font-family: "Proxima Nova", sans-serif;

}

/* Full static vertical line */
.steps::before {
  content: "";
  position: absolute;
  width: 1rem;
  background: #C5C7C5;
  /* Default grey */
  left: 15rem;
  top: 30rem;
  bottom: 30rem;
  /* Prevents grey line below the last step */
  z-index: 0;
  transition: opacity 0.3s ease-in-out;
  background: linear-gradient(to bottom, rgba(197, 199, 197, 1), rgba(197, 199, 197, 0)) !important;

}

/* Dynamic Progress Bar on each step */
.step::after {
  content: "";
  position: absolute;
  width: 1rem;
  background: #51FF81;
  /* Progress color */
  left: 15rem;
  top: 40rem;
  /* Start below the circle */
  height: 0rem;
  z-index: 1;
  transition: height 0.5s ease-in-out;
}

.step {
  font-size: 18rem;
  padding: 16rem 0rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #C5C7C5;
  transition: color 0.5s ease-in-out;
  font-weight: 600;
  font-family: "Proxima Nova", sans-serif;
  cursor: pointer;
}

.step .heading {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 5rem;
  font-size: 18rem;
  line-height: 1.2em;
  font-family: "Proxima Nova", sans-serif;

}

.step .circle {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16rem;
  font-weight: 600;
  margin-right: 10rem;
  border: 1rem solid #C5C7C5;
  background-color: #FFF;
  color: #C5C7C5;
  position: relative;
  z-index: 2;
  font-family: "Proxima Nova", sans-serif;
}

.step.completed .circle {
  background-color: #51FF81;
  color: #2C3546;
  border: 1rem solid #51FF81;
}

.step.active {
  font-weight: 600;
  color: #DE1B54;

}
.step.active .circle::after, .step.completed .circle::after {
  box-shadow: none;
  animation: none;
}
/* pulse css */
.step .circle::after {
  content: '';
  position: absolute;
  top: -1rem;
  border-radius: 50%;
  width: 30rem;
  height: 30rem;
  box-shadow: 0 0 0 0 #BFFFD0;
  animation: pulse-shadow 1.8s infinite ease-out;
  z-index: -1;
}

/* Pulse animation */
@keyframes pulse-shadow {
  0% {
      box-shadow: 0 0 0 0 #BFFFD0, 0 0 0 0 #EEFFF2;
  }
  50% {
      box-shadow: 0 0 0 5rem rgba(191, 255, 208, 0.9), 
                  0 0 0 10rem rgba(238, 255, 242, 0.8);
  }
  100% {
      box-shadow: 0 0 0 10rem rgba(191, 255, 208, 0), 
                  0 0 0 15rem rgba(238, 255, 242, 0);
  }
}



.step.active .circle {
  border: 1rem solid #DE1B54;
  color: #DE1B54;
  background-color: #FFF;
}

.step.completed::after {
  height: 100%;
  /* Extends progress bar only for completed steps */
}

.step .description {
  font-size: 16rem;
  line-height: 1.2em;
  color: #888888;
  margin-left: 0rem;
  font-family: "Proxima Nova", sans-serif;
  font-weight: 400;
  padding-left: 60rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, padding 0.3s ease-in-out;
  position: relative;
}

.step.active .description {
  max-height: 350rem;
  opacity: 1;
}

.description::before {
  content: "";
  position: absolute;
  width: 5rem;
  height: 5rem;
  background: #888888;
  left: 45rem;
  top: 5rem;
  z-index: 2;
  transition: height 0.5s ease-in-out;
  border-radius: 50rem;
}

.step.next-step-1 .heading {
  opacity: 1 !important;
}

.step.next-step-2 .heading {
  opacity: 0.9 !important;
}

.step.next-step-3 .heading {
  opacity: 0.8 !important;
}

/* Hide grey line when the last step is active */
.steps.hide-line::before {
  opacity: 0;
}

.step.completed .heading {
  color: #2C3546;
}

.step:nth-child(1) .heading {
  opacity: 1;
}

/* Step 1 - Full opacity */
.step:nth-child(2) .heading {
  opacity: 0.9;
}

/* Step 2 */
.step:nth-child(3) .heading {
  opacity: 0.8;
}

/* Step 3 */
.step:nth-child(4) .heading {
  opacity: 0.7;
}

/* Step 4 */
.step:nth-child(5) .heading {
  opacity: 0.6;
}

/* Step 5 */
.step:nth-child(6) .heading {
  opacity: 0.5;
}

/* Step 6 */
.step:nth-child(7) .heading {
  opacity: 0.4;
}

/* Step 7 */
.step:nth-child(8) .heading {
  opacity: 0.3;
}

/* Step 8 - Least visible */

.step.completed .heading {
  opacity: 1 !important;
  color: #2C3546;
}

.step.active .heading {
  opacity: 1 !important;
}

/* smart buildings end*/
#play-button-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 88rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s;
}

#play-button-main:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.image-city {
  display: none;
  opacity: 0;
  transform: translateY(20rem);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  position: absolute;
  animation: fadeInUp-city 0.6s ease-in-out;
  width: 100%;
}

.tab-content-wrap {
  animation: fadeInUp-city 0.6s ease-in-out;
}

.image-city.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp-city 0.6s ease-in-out;
}

@keyframes fadeInUp-city {
  from {
    opacity: 0;
    transform: translateY(20rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .border-screen {
  border-bottom: 20rem solid #ffffff;
} */
/* .right-panel .panel:after {
  content: "";
  width: 100%;
  height: 56rem;
  background-color: #D5E0DF;
  position: absolute;
  display: inline-block;
  left: 0;
  bottom: 0;
} */

.root {
  font-size: 0.052086vw;
}

:root {
  font-size: 0.052086vw;
}

.panel.inner-pannel-left {
  border-radius: 0;
  padding: 0;
  border: none;
  /* overflow-y: scroll; */
}

/* .main-content {
  overflow: auto;
} */
.left-panel {
  z-index: 99;
}

.text-22-head {
  font-size: 22rem;
  font-weight: 700;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.2em;
  color: #16192C;
  margin-bottom: 15rem;
}

.grey-area {
  padding: 20rem 24rem 24rem;
  border-radius: 20rem;
  background-color: #D5E0DF;
}

.white-bg {
  background-color: #fff;
  padding: 10rem;
  border-radius: 10rem;
  box-shadow: 0rem 0rem 1rem 0rem rgba(12, 26, 75, 0.24), 0rem 3rem 8rem -1rem rgba(50, 50, 71, 0.05);
  width: 100%;
}

.grey-area .card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: unset;
  padding-bottom: 5rem;
  border: none;
}

.icon-box {
  display: flex;
  align-items: center;
  color: #2C3546;
  font-size: 16rem;
}

span.icon-box img {
  width: 27rem;
  margin-right: 10rem;
}

.counter-wrap {
  display: flex;
  position: relative;
  font-size: 24rem;
  font-weight: 400;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #2C3546;
}

.text-12 {
  font-size: 12rem;
  font-weight: 400;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #2C3546;
}

.text-19 {
  font-size: 19rem;
  font-weight: 600;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  color: #2C3546;
}

.counter-inner {
  display: flex;
  font-size: 24rem;
}

.counter-wrap img {
  /* position: absolute; */
  top: 0;
  width: 20rem;
  margin-bottom: 8rem;
  margin-left: 5rem;
}

.countercards-inner {
  gap: 9rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grey-area .card:last-child {
  padding-bottom: 0;
}

.mt-30 {
  margin-top: 20rem;
}

.icon {
  width: 15rem;
}

.pb-10 {
  padding-bottom: 7rem;
}

.fadeInUp {
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(15rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* secound screen start -  Prescriptive Maintenance For Critical Assets ****** */
.colored {
  font-weight: 600;
  color: #6CC049;
}

.progressContent {
  display: flex;
  justify-content: space-between;
}

.progressbar {
  width: 100%;
  height: 7rem;
  background-color: #E2F2DB;
  border-radius: 6rem;
  overflow: hidden;
  position: relative;
  margin: 8rem 0 2rem;
}

.progress-fill {
  height: 100%;
  width: 0;
  background-color: #6CC049;
  border-radius: 6rem;
  transition: width 2.5s ease-in-out;
}

.progressbar.orange {
  background-color: #FEECD9;
}

.progressbar.orange .progress-fill {
  background-color: #F99F42;
}

.div-wrapper {
  justify-content: space-between;
  gap: 10rem;
}

.progress-table {
  background: white;
  padding: 10rem 20rem;
  border-radius: 12rem;
  box-shadow: 0rem 0rem 10rem rgba(0, 0, 0, 0.1);
}

.progress-circles {
  display: flex;
  gap: 9rem;
  width: 90%;
  padding: 0 10rem;
  justify-content: flex-start;
  text-align: left;
}

.panel-predictive .white-bg {
  padding-bottom: 8rem;
}

.circle {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background-color: #e0e0e0;
  /* Default grey */
  position: relative;
}

/* Fully filled circle (Fade-in effect applied to this) */
.circle .fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--fill-color);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Half-filled effect */
.circle .half-fill::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(92deg, #4caf50 50%, #ddd 50%);
  left: 0;
  top: 0;
  border-radius: 50%;
}

.yellow-Prow .circle .half-fill::after {
  background: linear-gradient(92deg, #F7D752 50%, #ddd 50%);
}

.orange-Prow .circle .half-fill::after {
  background: linear-gradient(92deg, #FA4F56 20%, #ddd 50%);
}

.percentage {
  font-weight: 600;
  width: 10%;
  text-align: end;
}

.label.text-16 {
  width: 20%;
  line-height: 1.1em;
}

.progress-row {
  display: flex;
  align-items: center;
  /* gap: 20rem; */
}

.text-16 {
  color: #2C3546 !important;
}

.panel-predictive .icon {
  margin-right: 10rem;
  width: 22rem;
}

.panel-predictive .number {
  font-size: 30rem;
  font-weight: 400;
  line-height: 27rem;
}

.panel-predictive .counter-wrap {
  align-items: baseline;
  gap: 5rem;
}

.panel-predictive .suffix.text-16 {
  font-weight: 600;
  line-height: 1.1em;
}

.bg-green .btn.cta-btn {
  border-radius: 16rem;
  background: #51FF81;
  padding: 22rem 25rem;
  margin-bottom: 0rem;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.bg-green:hover .btn.cta-btn {
  background: #3DBF61;
}

.btn.cta-btn span.btn-text {
  color: #16192C;
  text-align: center;
  font-family: "Proxima Nova", sans-serif;
  font-size: 22rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: #fff;
  padding: 12rem 15rem;
  border-radius: 10rem;
  box-shadow: 0rem 0rem 1rem 0rem rgba(12, 26, 75, 0.24), 0rem 3rem 8rem -1rem rgba(50, 50, 71, 0.05);
  width: 100%;
  display: block;
}

/* secound screen start -  Prescriptive Maintenance For Critical Assets END ****** */


/* third screen start -  Road Safety - Accident Management START ****** */
.card-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10rem;
  margin-bottom: 10rem;
}

.card-counter:last-child {
  margin-bottom: 0;
}

.panel-Road .card-counter .icon {
  width: 40rem;
  margin-right: 20rem;
}

.panel-Road .card-counter .text-20 {
  font-weight: 600;
  color: #16192C;
}

.panel-Road .card-counter .counter-wrap {
  font-size: 30rem;
  color: #16192C;
  gap: 5rem;
  line-height: 1.2em;
}

.panel-Road .white-bg {
  padding: 10rem 20rem;
}

.text-red-b {
  font-weight: 600;
  color: #DF1B54;
}

.panel-Road .text-22-head {
  margin-bottom: 13rem;
}

/* third screen start -  Road Safety - Accident Management END ****** */


/* fourth screen start -  MSW Management START ****** */

.panel-MSWManagement .white-bg.progress-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.panel-MSWManagement .progress-wrap .text-16 {
  font-weight: 600;
  text-align: center;
  width: 100%;
  padding-bottom: 15rem;
}

.mb-10 {
  margin-bottom: 10rem;
}

.text-16b {
  font-weight: 600;
}

/* .panel-MSWManagement .white-bg.progress-wrap{
padding-bottom: 0;
} */
.panel-MSWManagement .progress-circle {
  transition: stroke-dashoffset 2s ease-in-out;
  stroke-linecap: round;
  /* Makes the ends rounded */
}

/* Color Variations */
.panel-MSWManagement .progress-circle.orange {
  stroke: #FFA500;
}

.panel-MSWManagement .progress-circle.blue {
  stroke: #173C5D;
}

.panel-MSWManagement .progress-circle.yellow {
  stroke: #F7D752;
}

.panel-MSWManagement .progress-circle.green {
  stroke: #6CC049;
}

.panel-MSWManagement .progress-background.orange {
  stroke: #FEECD9;
}

.panel-MSWManagement .progress-background.blue {
  stroke: #D3E4F4;
}

.panel-MSWManagement .progress-background.yellow {
  stroke: #FDF7DC;
}

.panel-MSWManagement .progress-background.green {
  stroke: #E2F2DB;
}

.panel-MSWManagement .progress-text {
  font-size: 28rem;
  font-weight: 300;
  fill: #2C3546;
  color: #2C3546;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  position: absolute;
  top: 0;
  left: 0;
  width: 95rem;
  height: 95rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-container.full-round-svg {
  position: relative;
}

/* fourth screen -  MSW Management END ****** */


/* fifth screen -  Mobility Governance START ****** */

.panel-MobilityGovernance .progress-wrap svg path {
  stroke-linecap: round;
  stroke-width: 6;
}

.panel-MobilityGovernance .white-bg.progress-wrap {
  padding-bottom: 0;
}

.panel-MobilityGovernance .white-bg.progress-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.panel-MobilityGovernance .progress-wrap svg path.grey {
  stroke: #F3F4F3;
}

.panel-MobilityGovernance .progress-wrap svg {
  width: 85rem;
  margin-right: 10rem;
  margin-top: -15rem;
}

#progress path.blue {
  stroke: url(#gradient);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

#progress1 path.blue {
  stroke: url(#gradient1);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

#progress2 path.blue {
  stroke: url(#gradient1);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

.half-round-progressbar #progress1, .half-round-progressbar #progress {
  position: relative;
}

.panel-MobilityGovernance .svg-countertext {
  font-size: 24rem !important;
  font-weight: 300;
  fill: #2C3546;
  color: #2C3546;
  font-family: "Proxima Nova", sans-serif;
  line-height: 1.4em;
  position: absolute;
  top: 24rem;
  left: 27rem;

}

.first-s .suffix {
  font-size: 20rem;
  line-height: 1.8em;
}

.text-bold {
  font-weight: 600 !important;
}

.panel-MobilityGovernance .counter-div .card-counter {
  align-items: flex-end;
  padding: 7rem 15rem;
}

.panel-MobilityGovernance .counter-wrap {
  font-size: 30rem;
  line-height: 1.1em;
}

.panel-MobilityGovernance .flex-cards {
  display: flex;
  gap: 10rem;
}

.panel-MobilityGovernance .flex-cards .card-counter {
  justify-content: flex-start;
  gap: 5rem;
  margin-bottom: 0;
  align-items: flex-start;
  min-width: 105rem;
  justify-content: space-between;
  padding: 8rem 10rem;
}

.panel-MobilityGovernance .flex-cards .card-counter .counter-wrap {
  align-items: baseline;
}

/* fifth screen -  Mobility Governance END ****** */

/* sixth screen -  Environment Management START ****** */
.panel-EnvironmentManagement .icon {
  width: 40rem;
  margin-right: 20rem;
}

.panel-EnvironmentManagement .countercards-inner {
  gap: 10rem;
  display: flex;
}

.panel-EnvironmentManagement .countercards-inner .white-bg:first-child {
  width: 87%;
}

.panel-EnvironmentManagement .white-bg {
  padding: 6rem 10rem;
}

/* sixth screen -  Environment Management END ****** */

/* seventh screen - Fire Emergency Response START ****** */
.panel-FireEmergency .icon {
  width: 30rem;
  margin-right: 10rem;
}

.panel-FireEmergency .counter-wrap {
  align-items: baseline;
  font-size: 30rem;
  font-weight: 300;
  gap: 5rem;
}

/* seventh screen - Fire Emergency Response END ****** */


/* popup UI css ********************************* */
.bg-green .cta-btn.cta-icon-btn {
  display: flex;
  align-items: center;
  gap: 20rem;
  padding: 19rem 25rem;
}

.cta-btn.cta-icon-btn img {
  width: 60rem;
}

.bg-green.full-green .cta-btn.cta-icon-btn span.btn-text {
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-align: left;
}

#popup-overlay1, #popup-overlay2 {
  display: none;
  position: fixed;
  top: 0rem;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

.popup-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 25rem;
  border-radius: 16rem;
  /* box-shadow: 0rem 4rem 10rem rgba(0, 0, 0, 0.2); */
  z-index: 1000;
  width: 100%;
  max-width: 96%;
  height: 915rem;
}


.popup-text li {
  color: #16192C;
  font-family: "Proxima Nova", sans-serif;
  font-size: 20rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3em;
  padding-bottom: 15rem;
}

.popup-content.popup-text .col-md-5 {
  padding-left: 0;
}

.text-40 {
  color: #16192C;
  font-family: "Proxima Nova", sans-serif;
  font-size: 40rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 30rem;
}

.popup-text ul {
  padding-left: 30rem;
  list-style: number;
  padding-right: 50rem;
}

.highlighted {
  font-weight: 700;
  transition: background-size .25s cubic-bezier(.785, .135, .15, .86) 0s !important;
  background-image: linear-gradient(90deg, #51FF81 0%, #51FF81 100%) !important;
  padding: 0 0 1rem;
  background-repeat: no-repeat;
  display: inline !important;
  text-decoration: none;
  background-size: 100% 20rem !important;
  background-position: 0 95%;
  padding: 0 5rem;
}

.popup-text ul li::marker {
  font-weight: 600;
}

.popup-close, .close-lightbox, #closeLightbox {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 15rem;
  right: 15rem;
  background: #DE1B57;
  color: #fff;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  transition: all 0.3s ease-in;
}

.popup-close:hover, .close-lightbox:hover, #closeLightbox:hover {
  transform: scale(0.95);
  transform-origin: center;
}

.popup-close svg, .close-lightbox svg, #closeLightbox svg {
  width: 15rem;
  height: 15rem;
}

.grey-wrapper {
  display: flex;
  gap: 20rem;
  justify-content: flex-end;
}

.grey-inner1, .grey-inner2, .grey-inner3 {
  background-color: #D9D9D9;
  width: 25%;
  height: 85rem;
}

.video-wrapper video, .lightbox video, .lightbox2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  opacity: 1;
  border-radius: 16rem;
}

.video-wrapper {
  cursor: pointer;
  position: relative;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rem;
}

.lightbox-content {
  position: relative;
  background: #000;
  padding: 0rem;
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 16rem;
}

.lightbox2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rem;
}

.lightbox2 .lightbox-content {
  background: unset;
}

.lightbox-content-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16rem;
}

#popup-video1,#popup-video2,#popup-video3,#popup-video4 {
  /* width: 100%;
  border-radius: 16rem;
  object-fit: contain; */
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  opacity: 1;
  border-radius: 16rem;
}

#playPauseBtn {
  margin-top: 10rem;
  padding: 8rem 16rem;
  font-size: 16rem;
  cursor: pointer;
  border: none;
  border-radius: 5rem;
  background: #f99f42;
  color: white;
  display: none;
}

#closeLightbox {
  top: 30rem;
  right: 60rem;
}

.video-wrapper .play-icon {
  width: 64rem;
  position: absolute;
  top: 44%;
  left: 47%;
  transition: all 0.3s ease-in;
}

.video-wrapper:hover .play-icon {
  transform: scale(0.92);

}

/* popup UI css END********************************* */

/* Tab popup UI start ********************************/


.btn-wrap {
  text-align: center;
  /* margin-top: 30rem; */
}

.popup-container.tabpopup-container {
  display: none;
  position: fixed;
  max-width: 96%;
  height: auto;
  min-height: 915rem;
}

.lightbox-div.pl-60 {
  padding-left: 37rem;
}

img.lightbox-img {
  /* padding: 0 355rem; */
  height: 100%;
  object-fit: contain;
}

button.close-lightbox {
  top: 40rem;
  right: 40rem;
}

.popup-container.tabpopup-container {
  padding: 0;
}

#popup-overlay2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

button.popup-close.close-popup2 {
  top: 40rem;
  right: 40rem;
}

.tab-wrapper {
  text-align: center;
}

.tab-btns {
  display: flex;
  justify-content: flex-start;
  gap: 40rem;
  padding: 30rem 40rem;
  background: #E9EBEC;
  border-radius: 16rem 16rem 0px 0px;
}

.tab-btn {
  cursor: pointer;
  padding: 12rem 20rem;
  background-color: #232626;
  color: #fff;
  border-radius: 16rem;
  font-family: "Proxima Nova", sans-serif;
  font-size: 24rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: all 0.3s ease-in;
  display: flex;
  align-items: center;
  gap: 20rem;
  text-align: left;
}

.tab-btn:hover {
  background-color: #3DBF61;
}

.tab-btn img {
  width: 54rem;
}

.tab-btn.active {
  background-color: #51FF81;
  color: #000000;
}

.tab-content {
  padding: 30rem 25rem;
  border-top: 2rem solid #ddd;
  text-align: left;
}

.tab-content .text-40 {
  margin-bottom: 15rem;
}

.tab-content .text-24 {
  font-weight: 400;
  margin-bottom: 20rem;
  font-size: 20rem;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

.lightbox-div {
  position: relative;
}

.expand {
  width: 40rem;
  position: absolute;
  top: 10rem;
  right: 10rem;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.expand:hover {
  transform: scale(0.9);
  transition: all 0.3s ease-in;
}

video.preview-video {
  opacity: 1;
  position: relative;
  bottom: unset;
  top: unset;
  left: unset;
  right: unset;
  width: 100%;
  border-radius: 16rem;
}

.lightbox-div .play-btn {
  width: 80rem;
  position: absolute;
  top: 43%;
  left: 49%;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.lightbox-div .play-btn:hover {
  transform: scale(0.92);
  transition: all 0.3s ease-in;
}

.lightbox.bg-trasparent {
  border-radius: 16rem;
}

/* Tab popup UI END ********************************/

.next-btn, .back-btn {
  position: relative;
  font-size: 0;
  cursor: pointer;
}

.back-btn {
  top: 884rem !important;
  right: 14.3%;
}

.next-btn {
  top: 884rem !important;
  right: 10.4%;
}

.back-btn::after {
  content: '';
  background-image: url(../images/back-btn.svg);
  height: 40rem;
  width: 40rem;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  font-size: 0;
  cursor: pointer;
  display: inline-block;
  transition: 0.2s ease-in-out;
}

.next-btn::after {
  content: '';
  background-image: url(../images/next-btn.svg);
  height: 40rem;
  width: 40rem;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  font-size: 0;
  cursor: pointer;
  display: inline-block;
  transition: 0.2s ease-in-out;
}

.next-btn:hover::after {
  background-image: url(../images/next-btn-hov.svg);
}

.back-btn:hover::after {
  content: '';
  background-image: url(../images/back-btn-hov.svg);
}

/* .right-panel .panel:before {
  content: "";
  width: 1rem;
  height: 40rem;
  background-color: #fff;
  position: absolute;
  display: inline-block;
  left: 50%;
  right: 0;
  bottom: 8rem;
  text-align: center;
  z-index: 9;
} */
#preloader img {
  width: 85rem;
  height: 85rem;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: 0;
  text-align: center;
  display: flex;
}

/* preloader */
.blobs {
  width: 300rem;
  height: 300rem;
  position: relative;
  overflow: hidden;
  border-radius: 70rem;
  transform-style: preserve-3d;
  top: 400rem;
}

.blobs .blob-center {
  transform-style: preserve-3d;
  position: absolute;
  background: #51FF81;
  top: 50%;
  left: 50%;
  width: 30rem;
  height: 30rem;
  transform-origin: left top;
  transform: scale(0.9) translate(-50%, -50%);
  animation: blob-grow linear 3.4s infinite;
  border-radius: 50%;
  box-shadow: 0 -10rem 40rem -5rem #51FF81;
}

.blob {
  position: absolute;
  background: #51FF81;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: blobs ease-out 3.4s infinite;
  transform: scale(0.9) translate(-50%, -50%);
  transform-origin: center top;
  opacity: 0;
}

.blob:nth-child(1) {
  animation-delay: 0.2s;
}

.blob:nth-child(2) {
  animation-delay: 0.4s;
}

.blob:nth-child(3) {
  animation-delay: 0.6s;
}

.blob:nth-child(4) {
  animation-delay: 0.8s;
}

.blob:nth-child(5) {
  animation-delay: 1s;
}

@keyframes blobs {
  0% {
    opacity: 0;
    transform: scale(0) translate(calc(-330px - 50%), -50%);
  }

  1% {
    opacity: 1;
  }

  35%, 65% {
    opacity: 1;
    transform: scale(0.9) translate(-50%, -50%);
  }

  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@keyframes blob-grow {
  0%, 39% {
    transform: scale(0) translate(-50%, -50%);
  }

  40%, 42% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  43%, 44% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  45%, 46% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  47%, 48% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  52% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  54% {
    transform: scale(1.7, 1.6) translate(-50%, -50%);
  }

  58% {
    transform: scale(1.8, 1.7) translate(-50%, -50%);
  }

  68%, 70% {
    transform: scale(1.7, 1.5) translate(-50%, -50%);
  }

  78% {
    transform: scale(1.6, 1.4) translate(-50%, -50%);
  }

  80%, 81% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  82%, 83% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  84%, 85% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  86%, 87% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  90%, 91% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  92%, 100% {
    transform: scale(0) translate(-50%, -50%);
  }
}

/* home page */

.home-page {
  background-color: #070707;
  min-height: 100vh;
  /* height: 100%; */
  padding: 40rem 30rem;
}

.home-logodiv {
  text-align: right;
  padding-bottom: 35rem;
}

.home-logo {
  width: 168rem;
  text-align: right;
}

.head-64 {
  color: #51FF81;
  font-family: "Roboto Mono", sans-serif;
  font-size: 64rem;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 40rem;
  line-height: 1.2em;
}


.box {
  min-height: 186rem;
  border-radius: 16rem;
  margin: 10rem;
  padding: 20rem 25rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: end;
  border: 1rem solid transparent;
  transition: all 0.3s ease-in;
  cursor: pointer;
}

.box:hover {
  border: 1rem solid #51FF81;
}

.box .text-24 {
  color: #fff !important;
  display: block;
  font-size: 24rem;
  margin-bottom: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}

.box .text-32 {
  color: #fff !important;
  font-weight: 700;
  width: 100%;
}

span.icon-hover {
  margin-bottom: 30rem;
  display: block;
  /* width: 35rem; */
}

.box span.icon-hover svg {
  width: 38rem;
  height: 38rem;
}

.box span.icon-hover svg path {
  transition: all 0.3s ease-in;
}

.box:hover span.icon-hover svg path {
  fill: #51FF81;
}

.item5.box {
  min-height: 392rem;
}

.box.item1 {
  background-image: url(../images/home-predictive.png);
}

.box.item2 {
  background-image: url(../images/home-road-safty.png);
}

.box.item3 {
  background-image: url(../images/home-smart.png);
}

.box.item4 {
  background-image: url(../images/home-msw.png);
}

.box.item5 {
  background-image: url(../images/home-mobility.png);
}

.box.item6 {
  background-image: url(../images/home-environment.png);
}

.box.item7 {
  background-image: url(../images/home-fire.png);
}

.head-20 {
  color: #51FF81;
  font-family: "Proxima Nova", sans-serif;
  font-size: 20rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2rem;
  text-transform: uppercase;
  margin-bottom: 25rem;
}

.city-ban-wrap .head-20 {
  padding: 20rem 10rem 0;
  margin-bottom: 10rem;
}

.city-ban-wrap {
  border-radius: 16px;
  border: 1px solid #6A7373;
  padding: 10rem;
}

.row-gap-20 {
  display: flex;

}

.ml-20 {
  margin-left: 20rem;
}

.head-btn-wrap {
  border-radius: 16px;
  border: 1px solid #6A7373;
  padding: 30rem 20rem 20rem;
  margin-top: 40rem;
}

.head-btn-wrap .cta-btn {
  border-radius: 16rem;
  background: #51FF81;
  color: #16192C;
  text-align: left;
  display: flex;
  gap: 20rem;
  align-items: center;
  transition: all 0.3s ease-in;
  text-align: center;
  font-family: "Proxima Nova", sans-serif;
  font-size: 30rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 12rem 15rem;
  border-radius: 10rem;
  width: 100%;
}

.head-btn-wrap .cta-btn:hover {
  background: #3DBF61;
}

.head-btn-wrap .cta-btn img {
  width: 70rem;
}

.homevideo-lightbox-wrap {
  position: relative;
}

.homevideo-lightbox-wrap .homeplay-icon {
  width: 64rem;
  position: absolute;
  top: 42%;
  left: 46%;
  transition: all 0.3s ease-in;
  cursor: pointer;
}

.homevideo-lightbox-wrap .homeplay-icon:hover {
  transform: scale(0.92);
}

#homelightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#homelightbox-container {
  position: relative;
  background: #000;
  /* padding: 20px; */
  width: 100%;
  height: 100%;
}

#homelightbox-content img, #homelightbox-content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  /* position: relative; */
  border-radius: 16rem;
}

#homelightbox-close {
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab1 .preview-img {
  width: 98%;
}

.tab ul {
  list-style: number;
}

.tab li {
  font-size: 22rem;
  font-family: "Proxima Nova", sans-serif;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  padding-bottom: 10rem;
}

.tab li .text-bold {
  font-weight: 700;
}

.panel-MobilityGovernance .grey-area {
  padding: 18rem 24rem 23rem;
}

.panel-MobilityGovernance .text-22-head {
  margin-bottom: 14rem;
}

.panel-EnvironmentManagement .countercards-inner .text-12 {
  padding-bottom: 5rem;
}

.body-home {
  background-color: #070707;
}

.progress-container.full-round-svg svg {
  width: 95rem !important;
  height: 95rem !important;
}

.progress-container.full-round-svg svg {
  width: 95rem !important;
  height: 95rem !important;
}

p.description {
  padding-bottom: 10rem;
}

p.description:last-child {
  padding-bottom: 0;
}

body.hide-scroll {
  overflow: hidden;
  transition: overflow 0.5s ease-in-out;
}

div#popup-container1 {
  padding: 40rem;
}

div#popup-container1 .text-40 {
  margin-bottom: 40rem;
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

div#popup-container1 .row {
  animation: fadeInUp 1.1s ease-out forwards;
  opacity: 0;
}

div#popup-container1 .popup-close {
  top: 40rem;
  right: 55rem;
}

.right-global svg {
  width: 62rem;
  height: 57rem;
}

#popup-container1 .image-wrap img {
  border-radius: 16rem;
}
.for-suffix .suffix {
  font-size: 18rem;
}

p.andMore-text.text-16.text-bold {
  padding-left: 30rem;
  font-size: 20rem !important;
  color: #16192C !important;
}
sub {
  bottom: -4rem;
  margin-right: 2rem;
}

.panel-EnvironmentManagement .for-suffix .counter-wrap {
  align-items: baseline;
}