/* COPY & FIND        300823 

Common style
Section-1 all
Section-2 all
Section-3 all
Section-4 all
Mobile View All

*/
/* Common style starts    ( FONTS, wifi , Scroll bar , garden arrows )----------------------------------------------- */
body {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
.disconnected-cnt1 {
  transform: rotate(270deg);
  color: red !important;
  width: 143px;
  margin-left: -73px;
  margin-top: -136px;
}
.disconnected-cnt2 {
  transform: rotate(270deg);
  position: absolute;
  color: red !important;
  width: 143px;
  margin-left: -73px;
}

/* All arrows arrows animations starts --->--->--->--->---<---<---<---<---<---<---<--- */

/* Wetland to watertank starts-------> */
.lr-blue-arw-back-1 {
  width: 173px;
  position: absolute;
  margin-top: -238px;
  margin-left: 433px;
  transform: rotate(270deg);
}

.lr-blue-arw-front-1 {
  width: 173px;
  position: absolute;
  margin-top: -238px;
  margin-left: 433px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;
  transform: rotate(270deg);
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Wetland to watertank end-------> */

/* Anaerobic to Wetland starts-------> */
.lr-red-arw-back-1 {
  width: 187px;
  position: absolute;
  margin-top: -201px;
  margin-left: 210px;
  transform: rotate(270deg);
}

.lr-red-arw-front-1 {
  width: 173px;
  width: 187px;
  position: absolute;
  margin-top: -201px;
  margin-left: 210px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;

  transform: rotate(270deg);

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Anaerobic to Wetland end-------> */

/* Settler to Anaerobic starts-------> */
.lrs1-red-arw-back-1 {
  width: 23px;
  position: absolute;
  margin-top: -166px;
  margin-left: 253px;
  transform: rotate(270deg);

  z-index: -1;
}

.lrs1-red-arw-front-1 {
  width: 23px;
  position: absolute;
  margin-top: -166px;
  margin-left: 253px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;

  transform: rotate(270deg);

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  z-index: -1;
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Settler to Anaerobic end-------> */

/* Watertank to Garden starts-------> */
.lrs1-blue-arw-back-1 {
  width: 21px;
  position: absolute;
  margin-top: -111px;
  margin-left: 666px;
  transform: rotate(270deg);
  z-index: -1;
}

.lrs1-blue-arw-front-1 {
  width: 21px;
  position: absolute;
  margin-top: -111px;
  margin-left: 666px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;

  transform: rotate(270deg);
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  z-index: -1;
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Watertank to Garden end-------> */

/* ppl bottom left to right starts-------> */
.lrs-bend-red-arw-back-1 {
  width: 21px;
  position: absolute;
  margin-top: 240px;
  margin-left: -64px;
  transform: rotate(270deg);
  /* z-index: -1; */
}

.lrs-bend-red-arw-front-1 {
  width: 21px;
  position: absolute;
  margin-top: 240px;
  margin-left: -63px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;
  transform: rotate(270deg);
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  /* z-index: -1; */
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* ppl bottom left to right end-------> */

/* ppl bottom (top to bottom) starts-------> */
.tbs-bend-red-arw-back-1 {
  width: 41px;
  /* height: 121px; */
  position: absolute;
  margin-top: 182px;
  margin-left: -126px;
  /* transform: rotate(270deg); */
  /* z-index: -1; */
}
.tbs-bend-red-arw-front-1 {
  width: 41px;
  position: absolute;
  margin-top: 182px;
  margin-left: -126px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;

  /* transform: rotate(270deg); */

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  /* z-index: -1; */
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* ppl bottom (top to bottom) end-------> */

/* borewell to ppl  big blue bend arrow-1 (bottom to top) starts-------> */
.bt-b-bend-arrow-back-1 {
  width: 19px;
  position: absolute;
  margin-top: 74px;
  margin-left: 1221px;
  transform: rotate(180deg);
  z-index: -1;
}
.bt-b-bend-arrow-front-1 {
  width: 19px;
  position: absolute;
  margin-top: 74px;
  margin-left: 1221px;
  /* filter: saturate(7.5); */
  -webkit-animation: top-arrrow-anim 7s linear infinite;

  transform: rotate(180deg);

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  z-index: -1;
}

/* All top arrrow anim animation */
@-webkit-keyframes top-arrrow-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
    -webkit-mask-position: 300px 900px;
  }
}
/* borewell to ppl  big blue bend arrow-1 (bottom to top) end-------> */

/* borewell to ppl  big blue bend arrow-2 (right to left) starts-------> */
.rl-b-bend-arrow-back-1 {
  width: 25px;
  position: absolute;
  margin-top: -196px;
  margin-left: 951px;
  transform: rotate(90deg);
  /* z-index: -1; */
}

.rl-b-bend-arrow-front-1 {
  width: 25px;
  position: absolute;
  margin-top: -196px;
  margin-left: 951px;
  /* filter: saturate(7.5); */
  -webkit-animation: top-arrrow-anim 7s linear infinite;
  transform: rotate(90deg);

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  /* z-index: -1; */
}

/* borewell to ppl  big blue bend arrow-2 (right to left) end-------> */

/* borewell to ppl  big blue center arrow-3 ( right to left center) starts-------> */
.rl-b-cent-arrow-back-1 {
  width: 25px;
  position: absolute;
  margin-top: -178px;
  margin-left: 432px;
  transform: rotate(90deg);
  /* z-index: -1; */
}

.rl-b-cent-arrow-front-1 {
  width: 25px;
  position: absolute;
  margin-top: -178px;
  margin-left: 432px;
  /* filter: saturate(7.5); */
  -webkit-animation: top-arrrow-anim 7s linear infinite;
  transform: rotate(90deg);
  /* -webkit-animation-delay: 3s; */
  /* -webkit-animation-direction: up; */
  /* -webkit-mask-size: 300px 3000px; */
  /* -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0))); */
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  /* z-index: -1; */
}

/* borewell to ppl  big blue center arrow-3 ( right to left center) end-------> */

/* borewell to ppl  big blue corner arrow-4 ( right to left bend) starts-------> */
.rl-b-cor-bend-arrow-back-1 {
  width: 18px;
  position: absolute;
  margin-top: -79px;
  margin-left: 28px;
  transform: rotate(90deg);
  /* z-index: -1; */
}
.rl-b-cor-bend-arrow-front-1 {
  width: 18px;
  position: absolute;
  margin-top: -79px;
  margin-left: 28px;
  /* filter: saturate(7.5); */
  -webkit-animation: top-arrrow-anim 7s linear infinite;
  transform: rotate(90deg);
  /* -webkit-animation-delay: 3s; */
  /* -webkit-animation-direction: up; */
  /* -webkit-mask-size: 300px 3000px; */
  /* -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0))); */
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  /* z-index: -1; */
}
/* borewell to ppl  big blue corner arrow-4 ( right to left bend) end-------> */

/* borewell to ppl  big blue corner arrow-5 ( top to bottom bend) starts-------> */
.tb-b-cor-bend-arrow-back-1 {
  width: 41px;
  /* height: 121px; */
  position: absolute;
  margin-top: 75px;
  margin-left: -126px;
  /* transform: rotate(270deg); */
  /* z-index: -1; */
}
.tb-b-cor-bend-arrow-front-1 {
  width: 41px;
  position: absolute;
  margin-top: 75px;
  margin-left: -126px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;
  /* transform: rotate(270deg); */

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  /* z-index: -1; */
}
/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* borewell to ppl  big blue corner arrow-5 ( top to bottom bend) end-------> */

/* Arrows animation sec-3 starts=================================================================================================== */

/* Settler to Anaerobic starts-------> */
.lrs1-red-arw-back-2 {
  width: 18px;
  position: absolute;
  margin-top: -132px;
  margin-left: 154px;
  transform: rotate(270deg);
  z-index: -1;
}

.lrs1-red-arw-front-2 {
  width: 18px;
  position: absolute;
  margin-top: -132px;
  margin-left: 154px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;

  transform: rotate(270deg);

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  z-index: -1;
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Settler to Anaerobic end-------> */

/* Anaerobic to Wetland starts-------> */
.lr-red-arw-back-2 {
  width: 187px;
  position: absolute;
  margin-top: -162px;
  margin-left: 89px;
  transform: rotate(270deg);
}
.lr-red-arw-front-2 {
  width: 187px;
  width: 187px;
  position: absolute;
  margin-top: -162px;
  margin-left: 89px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;

  transform: rotate(270deg);

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Anaerobic to Wetland end-------> */

/* Wetland to watertank starts-------> */
.lr-blue-arw-back-2 {
  width: 173px;
  position: absolute;
  margin-top: -238px;
  margin-left: 348px;
  transform: rotate(270deg);
}

.lr-blue-arw-front-2 {
  width: 173px;
  position: absolute;
  margin-top: -238px;
  margin-left: 348px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;

  transform: rotate(270deg);

  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Wetland to watertank end-------> */

/* Watertank to Garden starts-------> */
.lrs1-blue-arw-back-2 {
  width: 21px;
  position: absolute;
  margin-top: -111px;
  margin-left: 530px;
  transform: rotate(270deg);
  z-index: -1;
}

.lrs1-blue-arw-front-2 {
  width: 21px;
  position: absolute;
  margin-top: -111px;
  margin-left: 530px;
  /* filter: saturate(7.5); */
  -webkit-animation: l-r-anim 7s linear infinite;
  transform: rotate(270deg);
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
  z-index: -1;
}

/* anim */
@-webkit-keyframes l-r-anim {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
/* Watertank to Garden end-------> */
/* Arrows animation sec-3 end=================================================================================================== */

/* Arrows animation sec-4 starts=================================================================================================== */

/* All arrows arrows animations end --->--->--->--->---<---<---<---<---<---<---<--- */

/* All garden arrows animations starts */

.garrow-back-1 {
  width: 159px;
  position: absolute;
  margin-top: -287px;
  margin-left: 44px;
}

.garrow-front-1 {
  width: 159px;
  position: absolute;
  margin-top: -287px;
  margin-left: 44px;
  filter: saturate(7.5);
  -webkit-animation: garrowwipe 7s linear infinite;
  -webkit-mask-image: -webkit-gradient(
    linear, left bottom,left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
}

.garrow-back-2 {
  width: 159px;
  position: absolute;
  margin-top: -359px;
  margin-left: -249px;
}

.garrow-front-2 {
  width: 159px;
  position: absolute;
  margin-top: -359px;
  margin-left: -249px;
  filter: saturate(7.5);
  -webkit-animation: garrowwipe 7s linear infinite;
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
}

.garrow-back-3 {
  width: 159px;
  position: absolute;
  margin-top: -289px;
  margin-left: 43px;
}

.garrow-front-3 {
  width: 159px;
  position: absolute;
  margin-top: -289px;
  margin-left: 43px;
  filter: saturate(7.5);
  -webkit-animation: garrowwipe 7s linear infinite;
  -webkit-mask-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255, 0, 0)),
    color-stop(0.25, rgb(58, 228, 16)),
    color-stop(0.27, rgba(15, 94, 197, 0)),
    color-stop(0.8, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(165, 53, 53, 0))
  );
}

/* garrow common anim */
@-webkit-keyframes garrowwipe {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}

/* All garden arrows animations end */
/* FONTS START */

.form-control {
  transition: transform 0.2s !important;
  font-size: 1.3rem !important;
  color: rgb(0, 0, 0) !important;
  border-radius: 100px !important;
  border: 1px solid #cccccc;
  padding: 4px 8px 4px 8px;
  width: 100% !important;
  outline: none;
  font-family: blackfont;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) -3px -9px 6px inset;
  transition: 0.4s !important;
  position: absolute !important;
}
.form-control:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
  transition: 0.4s !important;
}
option {
  background-color: #ffffff;
  font-size: 1.8rem;
  color: #000000;
  font-family: blackfont;
}

@font-face {
  font-family: boldfont;
  src: url(fonts/DINBd__.ttf);
}
@font-face {
  font-family: thinfont;
  src: url(fonts/DINLi__.ttf);
}
@font-face {
  font-family: mediumfont;
  src: url(fonts/DINMd__.ttf);
}
@font-face {
  font-family: blackfont;
  src: url(fonts/DINBk__.ttf);
}
/* FONTS END */
.wifi-container {
  /* background: aqua; */
  margin-top: -221px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.well-wifi-container {
  /* background: aqua; */
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-dot {
  background-color: green;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: -118px;
  margin-left: -88px;
  animation: blink 1s linear infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
.live-dot-red {
  /* background-color: rgb(255, 22, 22); */
  background-image: radial-gradient(#ff1919, #af0000);
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: -118px;
  margin-left: -88px;
  border: 0.1px solid rgb(130 130 130);
  animation: blinker11 1s linear infinite;
}

@keyframes blinker11 {
  50% {
    opacity: 0;
  }
}
.well-wifi-container-bot {
  /* background: aqua; */
  position: absolute;
  margin-top: 661px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 44%;
  transform: rotate(60deg);
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
/*Scroll bar styles start*/
::-webkit-scrollbar {
  /* width: 7px !important; */

  width: 7px !important;
}

::-webkit-scrollbar:hover {
  width: 7px !important;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  visibility: hidden;
}
::-webkit-scrollbar-thumb {
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);  */
  border-radius: 17px;
  background: white !important;
}
::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 0 0 6px black;
  width: 7px !important;
}
/*Scroll bar styles end*/

marquee {
  background: #ffeae8;
  color: #f15843;
  border-radius: 10px;
  /* padding: 7px 7px 7px 7px; */
  padding: 7px;
  font-size: 14px;
  font-weight: 800;
  font-family: boldfont;
}

/* play pause section starts------- */

/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%)
    center/15000%;
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}

.stop-icon {
  width: 50%;
  cursor: pointer !important;
  z-index: 1;
  opacity: 0.7;
}
.play-icon {
  width: 50%;
  cursor: pointer !important;
  z-index: 1;
  opacity: 0.7;
}
.ps-ply-text-container {
  /* background-color: #00aeef; */
  color: black;
  font-weight: 700;
  margin-top: 53px;
  margin-left: -17px;
  position: absolute;
  width: 36px;
  text-align: center;
}
.play-pause-btn-container {
  display: flex;
  align-items: center;
  justify-content: end;
}
.ps-ply-btn {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 90px;
  width: 220px;
}
.ps-ply-circle {
  background-color: rgb(231 231 231 / 84%);
  border-radius: 50%;
  box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051),
    0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06),
    0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059),
    0 35px 80px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  height: 70px;
  position: absolute;
  width: 70px;
  /* filter: drop-shadow(3px 3px 7px #0b7cb4); */
  display: flex;
  align-items: center;
  justify-content: center;
  /* opacity: 0.6; */
}
.ps-ply-btn:active .ps-ply-circle {
  background: #a0a0a0;
  filter: none;
}
.icono {
  height: 200px;
  transform: rotate(-120deg);
  transition: transform 500ms;
  width: 200px;
  /* margin-top: -13px; */
}
.parte {
  background: black;
  height: 200px;
  position: absolute;
  width: 200px;
}
.izquierda {
  clip-path: polygon(
    43.77666% 55.85251%,
    43.77874% 55.46331%,
    43.7795% 55.09177%,
    43.77934% 54.74844%,
    43.77855% 54.44389%,
    43.77741% 54.18863%,
    43.77625% 53.99325%,
    43.77533% 53.86828%,
    43.77495% 53.82429%,
    43.77518% 53.55329%,
    43.7754% 53.2823%,
    43.77563% 53.01131%,
    43.77585% 52.74031%,
    43.77608% 52.46932%,
    43.7763% 52.19832%,
    43.77653% 51.92733%,
    43.77675% 51.65633%,
    43.77653% 51.38533%,
    43.7763% 51.11434%,
    43.77608% 50.84334%,
    43.77585% 50.57235%,
    43.77563% 50.30136%,
    43.7754% 50.03036%,
    43.77518% 49.75936%,
    43.77495% 49.48837%,
    44.48391% 49.4885%,
    45.19287% 49.48865%,
    45.90183% 49.48878%,
    46.61079% 49.48892%,
    47.31975% 49.48906%,
    48.0287% 49.4892%,
    48.73766% 49.48934%,
    49.44662% 49.48948%,
    50.72252% 49.48934%,
    51.99842% 49.4892%,
    53.27432% 49.48906%,
    54.55022% 49.48892%,
    55.82611% 49.48878%,
    57.10201% 49.48865%,
    58.3779% 49.4885%,
    59.6538% 49.48837%,
    59.57598% 49.89151%,
    59.31883% 50.28598%,
    58.84686% 50.70884%,
    58.12456% 51.19714%,
    57.11643% 51.78793%,
    55.78697% 52.51828%,
    54.10066% 53.42522%,
    52.02202% 54.54581%,
    49.96525% 55.66916%,
    48.3319% 56.57212%,
    47.06745% 57.27347%,
    46.11739% 57.79191%,
    45.42719% 58.14619%,
    44.94235% 58.35507%,
    44.60834% 58.43725%,
    44.37066% 58.41149%,
    44.15383% 58.27711%,
    43.99617% 58.0603%,
    43.88847% 57.77578%,
    43.82151% 57.43825%,
    43.78608% 57.06245%,
    43.77304% 56.66309%,
    43.773% 56.25486%
  );
  transition: clip-path 500ms;
}
.derecha {
  clip-path: polygon(
    43.77666% 43.83035%,
    43.77874% 44.21955%,
    43.7795% 44.59109%,
    43.77934% 44.93442%,
    43.77855% 45.23898%,
    43.77741% 45.49423%,
    43.77625% 45.68961%,
    43.77533% 45.81458%,
    43.77495% 45.85858%,
    43.77518% 46.12957%,
    43.7754% 46.40056%,
    43.77563% 46.67156%,
    43.77585% 46.94255%,
    43.77608% 47.21355%,
    43.7763% 47.48454%,
    43.77653% 47.75554%,
    43.77675% 48.02654%,
    43.77653% 48.29753%,
    43.7763% 48.56852%,
    43.77608% 48.83952%,
    43.77585% 49.11051%,
    43.77563% 49.38151%,
    43.7754% 49.65251%,
    43.77518% 49.9235%,
    43.77495% 50.1945%,
    44.48391% 50.19436%,
    45.19287% 50.19422%,
    45.90183% 50.19408%,
    46.61079% 50.19394%,
    47.31975% 50.1938%,
    48.0287% 50.19366%,
    48.73766% 50.19353%,
    49.44662% 50.19338%,
    50.72252% 50.19353%,
    51.99842% 50.19366%,
    53.27432% 50.1938%,
    54.55022% 50.19394%,
    55.82611% 50.19408%,
    57.10201% 50.19422%,
    58.3779% 50.19436%,
    59.6538% 50.1945%,
    59.57598% 49.79136%,
    59.31883% 49.39688%,
    58.84686% 48.97402%,
    58.12456% 48.48572%,
    57.11643% 47.89493%,
    55.78697% 47.16458%,
    54.10066% 46.25764%,
    52.02202% 45.13705%,
    49.96525% 44.01371%,
    48.3319% 43.11074%,
    47.06745% 42.4094%,
    46.11739% 41.89096%,
    45.42719% 41.53667%,
    44.94235% 41.3278%,
    44.60834% 41.24561%,
    44.37066% 41.27137%,
    44.15383% 41.40575%,
    43.99617% 41.62256%,
    43.88847% 41.90709%,
    43.82151% 42.24461%,
    43.78608% 42.62041%,
    43.77304% 43.01978%,
    43.773% 43.428%
  );
  transition: clip-path 500ms;
}
.puntero {
  border-radius: 50%;
  cursor: pointer;
  height: 100px;
  position: absolute;
  -webkit-tap-highlight-color: transparent;
  width: 100px;
}
.active .icono {
  transform: rotate(-90deg);
}
.active .izquierda {
  clip-path: polygon(
    56.42249% 57.01763%,
    54.93283% 57.0175%,
    53.00511% 57.01738%,
    50.83554% 57.01727%,
    48.62036% 57.01718%,
    46.55585% 57.01709%,
    44.83822% 57.01702%,
    43.66373% 57.01698%,
    43.22863% 57.01696%,
    42.86372% 57.01904%,
    42.56988% 57.01621%,
    42.3402% 56.99486%,
    42.16778% 56.94152%,
    42.0457% 56.84267%,
    41.96705% 56.68478%,
    41.92493% 56.45432%,
    41.91246% 56.13777%,
    41.91258% 55.76282%,
    41.9129% 55.37058%,
    41.91335% 54.96757%,
    41.91387% 54.56032%,
    41.91439% 54.15537%,
    41.91485% 53.75926%,
    41.91517% 53.3785%,
    41.91529% 53.01965%,
    41.94275% 52.72355%,
    42.02117% 52.51653%,
    42.14465% 52.38328%,
    42.30727% 52.30854%,
    42.50308% 52.27699%,
    42.72619% 52.27341%,
    42.97065% 52.28248%,
    43.23056% 52.2889%,
    43.94949% 52.28896%,
    45.45083% 52.28912%,
    47.47445% 52.28932%,
    49.76027% 52.28957%,
    52.04818% 52.28981%,
    54.07805% 52.29003%,
    55.5898% 52.29019%,
    56.32332% 52.29024%,
    56.58221% 52.28816%,
    56.83726% 52.28948%,
    57.07897% 52.30593%,
    57.29794% 52.34898%,
    57.48468% 52.43029%,
    57.62978% 52.56146%,
    57.72375% 52.7541%,
    57.75718% 53.01981%,
    57.75713% 53.37763%,
    57.75699% 53.81831%,
    57.75679% 54.31106%,
    57.75657% 54.82507%,
    57.75635% 55.32958%,
    57.75615% 55.79377%,
    57.75601% 56.18684%,
    57.75596% 56.47801%,
    57.7549% 56.50122%,
    57.74034% 56.5624%,
    57.6955% 56.64887%,
    57.60334% 56.748%,
    57.44691% 56.84712%,
    57.20925% 56.93358%,
    56.87342% 56.99471%
  );
}
.active .derecha {
  clip-path: polygon(
    56.42249% 42.44625%,
    54.93283% 42.44637%,
    53.00511% 42.44649%,
    50.83554% 42.4466%,
    48.62036% 42.4467%,
    46.55585% 42.44679%,
    44.83822% 42.44685%,
    43.66373% 42.4469%,
    43.22863% 42.44691%,
    42.86372% 42.44483%,
    42.56988% 42.44767%,
    42.3402% 42.46902%,
    42.16778% 42.52235%,
    42.0457% 42.6212%,
    41.96705% 42.77909%,
    41.92493% 43.00956%,
    41.91246% 43.32611%,
    41.91258% 43.70105%,
    41.9129% 44.0933%,
    41.91335% 44.49631%,
    41.91387% 44.90355%,
    41.91439% 45.3085%,
    41.91485% 45.70462%,
    41.91517% 46.08537%,
    41.91529% 46.44422%,
    41.94275% 46.74032%,
    42.02117% 46.94735%,
    42.14465% 47.0806%,
    42.30727% 47.15534%,
    42.50308% 47.18688%,
    42.72619% 47.19047%,
    42.97065% 47.1814%,
    43.23056% 47.17497%,
    43.94949% 47.17491%,
    45.45083% 47.17476%,
    47.47445% 47.17455%,
    49.76027% 47.1743%,
    52.04818% 47.17406%,
    54.07805% 47.17384%,
    55.5898% 47.17369%,
    56.32332% 47.17363%,
    56.58221% 47.17571%,
    56.83726% 47.17439%,
    57.07897% 47.15795%,
    57.29794% 47.1149%,
    57.48468% 47.03359%,
    57.62978% 46.90242%,
    57.72375% 46.70977%,
    57.75718% 46.44406%,
    57.75713% 46.08625%,
    57.75699% 45.64557%,
    57.75679% 45.15282%,
    57.75657% 44.6388%,
    57.75635% 44.1343%,
    57.75615% 43.6701%,
    57.75601% 43.27703%,
    57.75596% 42.98586%,
    57.7549% 42.96265%,
    57.74034% 42.90148%,
    57.6955% 42.815%,
    57.60334% 42.71587%,
    57.44691% 42.61675%,
    57.20925% 42.53029%,
    56.87342% 42.46916%
  );
}
/* play pause section end------- */

/* Common style end----------------------------------------------- */

/*Section-5 all starts=======================================================================================*/
.main-section-5 {
  width: 100%;
  height: 100vh;
  border: 2px dashed rgb(0, 68, 255);
}
/*Section-5 all end=======================================================================================*/

/*Section-4 all starts=======================================================================================*/
.stucture-back-btm {
  width: 100%;
  height: 88%;
  z-index: 1;
  background: white;
  /* border: 1px solid red; */
  padding: 10px;
  overflow-x: scroll;
}
.main-section-4 {
  width: 100%;
  height: 112vh;
  /* border: 2px dashed green; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-4-position {
  /* border: 2px dashed red; */
  width: 1635px;
  /* height: 100%; */
  height: 906px;

  margin-top: 5.5%;
}
.main-4 {
  position: sticky;
  /* border:2px dashed blue; */
  /* height: 100vh; */
}
.content-tl {
  font-size: 17px;
  font-weight: 800;
  font-family: boldfont;
  text-shadow: 0 0 6px white;
  position: absolute;
  margin-left: -13px;
}
.data-collected-container {
  position: absolute;
  margin-left: -1606%;
  margin-top: 798%;
  font-size: 1.3rem;
}
.areahide {
  width: 100px;
  height: 58px;
  background: white;
  position: absolute;
  z-index: 1;
  margin-top: 497%;
  margin-left: 649%;
}

.table-container {
  width: 696px;
  width: 733px;
  height: 155px;
  /* border: 1px solid black; */
  position: absolute;
  margin-left: -1606%;
  margin-top: 499%;
  transition: transform 0.4s;
}
.v-h {
  width: 12% !important;
}
.s-h {
  width: 26% !important;
}
.a-h {
  width: 32% !important;
}
.v-hr {
  width: 33% !important;
}
table {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  font-family: boldfont;
  font-size: 12px;
}
tr {
  border: 1px solid black;
  text-align: center;
}
tr:hover {
  background-color: #f7f7f7;
}
td {
  border: 1px solid rgb(0, 0, 0) !important;
  text-align: center;
}
th {
  border: 1px solid rgb(0, 0, 0) !important;
}
.table-container-right {
  width: 264px;
  height: 155px;
  /* border: 1px solid black; */
  position: absolute;
  margin-left: 844%;
  margin-top: 498%;
  transition: transform 0.4s;
  z-index: 1;
}
.borewell-container3 {
  width: 692px;
  height: 201px;
  /* background-color: #fff3cb; */
  background-image: linear-gradient(
    2deg,
    #e2cc99 25%,
    #fff3cb6e 70%,
    #8c6e0dd9 80%
  );
  border-radius: 0 0 30px 30px;
  margin-left: 28px;
  margin-top: 68px;
}
.layer-img3 {
  width: 692px;
  height: 200px;
  background-color: #fff3cb;
  border-radius: 0 0 45px 45px;
  position: absolute;
  margin-top: -221px;
  /* opacity: 0.8; */
  z-index: -1;
}

.disable-w2 {
  width: 350px;
  height: 188px;
  background: #ffffffe3;
  position: absolute;
  margin-top: -192%;
  margin-left: 237%;
  z-index: 1;
}
.disable-w2-bt {
  width: 158px;
  height: 59px;
  background: #ffffffe3;
  position: absolute;
  margin-top: -9%;
  margin-left: 421%;
  z-index: 1;
}

.disable-w1 {
  width: 350px;
  height: 243px;
  background: #ffffffe3;
  position: absolute;
  margin-top: -250%;
  margin-left: 237%;
  z-index: 1;
}
.disable {
  opacity: 0;
}
.dcheck-img {
  width: 30px;
}

.dcheck-container-1 {
  position: absolute;
  margin-left: 190%;
  margin-top: 70%;
  /* border:1px solid red; */
}
.dcheck-container-2 {
  position: absolute;
  margin-left: 389%;
  margin-top: 70%;
  /* border: 1px solid red; */
}

.pointing {
  position: absolute;
  width: 37px;
  height: 165px;
  background: transparent;
  margin-top: -548%;
  margin-left: -63%;
  border-top: 3px dashed black;
  border-right: 3px dashed black;
  border-radius: 0 10px;
  z-index: 2;
}

.dcheck-container-3 {
  position: absolute;
  margin-left: 499%;
  margin-top: -192%;
  /* border: 1px solid red; */
}

.pointing2 {
  position: absolute;
  width: 44px;
  height: 71px;
  background: transparent;
  margin-top: 121%;
  margin-left: -93%;
  border-bottom: 3px dashed black;
  border-right: 3px dashed black;
  border-radius: 0 0 10px;
}

.dcheck-container-4 {
  position: absolute;
  margin-left: 499%;
  margin-top: 62%;
  /* border: 1px solid red; */
}
.pointing3 {
  position: absolute;
  width: 43px;
  height: 71px;
  background: transparent;
  margin-top: -233%;
  margin-left: -94%;
  border-top: 3px dashed black;
  border-right: 3px dashed black;
  border-radius: 0 10px 0px;
}

.dcheck-container-5 {
  position: absolute;
  margin-left: 928%;
  margin-top: -145%;
  /* border: 1px solid red; */
}
.pointing4 {
  position: absolute;
  width: 37px;
  height: 71px;
  background: transparent;
  margin-top: -233%;
  margin-left: -63%;
  border-top: 3px dashed black;
  border-right: 3px dashed black;
  border-radius: 0 10px 0px;
}
/*Section-4 all starts=======================================================================================*/

/*Section-3 all starts=======================================================================================*/
.main-section-3 {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  /* border:2px dashed rgb(0, 68, 255); */
}
.main-section-3-position {
  /* border: 2px dashed red; */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* height: 632px; */
}

.main-card {
  height: 100%;
  /* align-items: center; */
  justify-content: center;
}
.card {
  /* width: 100%; */
  height: 86%;
  /* border: 2.7px solid black !important; */
  box-shadow: rgb(219 219 219 / 30%) 2px 5px 0px 3px;
  border: 2.7px solid #c9c9c9;
  border-radius: 35px !important;
  margin: 7px;
}

.stucture-back-c1 {
  width: 100%;
  height: 100%;
  z-index: 1;
  /* background: rgb(199, 199, 199); */
  /* border: 1px solid red; */
  /* position: absolute; */
  padding: 10px;
  width: 100%;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stucture-back-c1-position {
  /* border: 2px dashed green; */
  width: 723px;
  height: 648px;
}
.main-c1 {
  position: sticky;
  margin-top: 18%;
}
.left-right-red-arw-21 {
  background-color: #ef4237;
  width: 116px;
  height: 10px;
  position: absolute;
  margin-left: -113px;
  margin-top: 98px;
  /* border-radius: 0 0 0 10px; */
  z-index: -1;
  animation: changeBackgroundColorred 1s infinite;
}
.card-headings {
  font-size: 19px;
  font-weight: 800;
  font-family: boldfont;
  margin-top: 14px;
  margin-left: 11px;
}

.c1-chart-container {
  /* width: 737px;
  height: 190px;
 
  border-top: 2px dashed blue;
  border-bottom: 2px dashed blue;
  position: absolute;
  margin-top: 138%;
  margin-left: 67px; */
}
.c1-chart-container {
  width: 661px;
  /* background-color: #efefef; */
  border-top: 3px dashed blue;
  /* border-bottom: 3px dashed blue;*/
  position: absolute;
  margin-top: 118%;
  margin-left: 142px;
}

.settler2 {
  width: 38px;
  height: 89px;
  margin-left: 137px;
  margin-top: -20px;
}
.settler-content2 {
  width: 130px;
  margin-left: 93px;
  text-align: center;
  margin-top: -24px;
}
.reading-card-12 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 69px;
  height: 130px;
  /* background-color: #d6e4ec; */
  position: absolute;
  margin-top: -130px;
  margin-left: 1px;
}
.anaerobic-content2 {
  width: 130px;
  margin-left: 61px;
  text-align: center;
}
.left-right-red-arw-32 {
  /* background-color: #EF4237; */
  width: 75px;
  height: 15px;
  position: absolute;
  margin-left: 179px;
  margin-top: -96px;
  animation: lineanim-red 1s infinite;
}
.triangle-right-red-32 {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 13px solid #ef4237;
  border-bottom: 13px solid transparent;
  position: absolute;
  margin-top: -2.7px;
  margin-left: 74px;
  transform: rotate(270deg);
  animation: trianim-red 1s infinite;
}
.anaerobic-img2 {
  width: 65px;
  margin-left: 89px;
  margin-top: -27px;
}
.left-right-red-arw-42 {
  background-color: #ef4237;
  width: 40px;
  height: 8px;
  position: absolute;
  margin-left: 158px;
  margin-top: -116px;
  animation: lineanim-red 1s infinite;
}
.bot-top-red-arw-42 {
  background-color: #ef4237;
  width: 52px;
  height: 8px;
  position: absolute;
  margin-left: 191.4px;
  margin-top: -159px;
  transform: rotate(90deg);
  animation: lineanim-red 1s infinite;
}
.left-right-top-red-arw-42 {
  background-color: #ef4237;
  width: 38px;
  height: 8px;
  position: absolute;
  margin-left: 236px;
  margin-top: -204px;
  animation: lineanim-red 1s infinite;
}
.top-bot-red-arw-42 {
  background-color: #ef4237;
  width: 33px;
  height: 8px;
  position: absolute;
  margin-left: 200.5px;
  margin-top: -79px;
  transform: rotate(270deg);
  animation: lineanim-red 1s infinite;
}
.left-right-bot-red-arw-42 {
  background-color: #ef4237;
  width: 43px;
  height: 8px;
  position: absolute;
  margin-left: 234px;
  margin-top: -43px;
  animation: lineanim-red 1s infinite;
}
.wetland-12 {
  width: 88px;
  height: 108px;
  background-image: linear-gradient(89deg, #ffbfba, #cef3ff);
  margin-top: -268px;
  margin-left: 286px;
}
.wetland-22 {
  width: 88px;
  height: 108px;
  /* border: 1px solid red; */
  background-image: linear-gradient(89deg, #ffbfba, #cef3ff);
  margin-top: 38px;
  margin-left: 286px;
}

.wetland-border-img2 {
  width: 88px;
  height: 108.6px;
  margin-left: -0.6px;
  margin-top: 0px;
  position: absolute;
}
.wetland-1-bottom2 {
  width: 88px;
  height: 19px;
  background-image: linear-gradient(89deg, #f17063, #54a9d8);
  border: 1px solid black;
  margin-left: 284.8px;
  display: flex;
  text-align: center;
  justify-content: center;
}
.wetland-2-bottom2 {
  width: 88px;
  height: 19px;
  background-image: linear-gradient(89deg, #f17063, #54a9d8);
  border: 1px solid black;
  margin-left: 284.8px;
  display: flex;
  text-align: center;
  justify-content: center;
}

.wetland-1-content2 {
  width: 188px;
  margin-left: 240px;
  text-align: center;
}
.wetland-2-content2 {
  width: 188px;
  margin-left: 240px;
  text-align: center;
}
.grass-img2 {
  width: 100%;
  margin-top: -11px;
  /* position: absolute; */
}
.left-right-top-blue-arw-52 {
  background-color: #118ecb;
  width: 38px;
  height: 8px;
  position: absolute;
  margin-left: 377px;
  margin-top: -280px;
}
.top-bot-blue-arw-52s {
  background-color: #118ecb;
  width: 56px;
  height: 8px;
  position: absolute;
  margin-left: 407px;
  margin-top: -233px;
  transform: rotate(90deg);
}
.top-bot-blue-arw-522 {
  background-color: #118ecb;
  width: 37px;
  height: 8px;
  position: absolute;
  margin-left: 414px;
  margin-top: -154px;
  transform: rotate(90deg);
}
.right-left-bot-blue-arw-52 {
  background-color: #118ecb;
  width: 39px;
  height: 8px;
  position: absolute;
  margin-left: 374px;
  margin-top: -118px;
}
.left-right-blue-arw-52 {
  background-color: #118ecb;
  width: 42px;
  height: 16px;
  position: absolute;
  margin-left: 439px;
  margin-top: -195px;
}
.watertank-img2 {
  width: 47px;
  margin-left: 495px;
  margin-top: -376px;
}
.watertank-content2 {
  width: 64px;
  margin-left: 486px;
  text-align: center;
  margin-top: -156px;
}
.watertank-dotarrow-container2 {
  width: 100px;
  height: 30px;
  margin-left: 467px;
  margin-top: -63px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.left-right-blue-arw-62 {
  background-color: transparent;
  width: 54px;
  height: 16px;
  position: absolute;
  margin-left: 546px;
  margin-top: -87px;
}
.fm-img-22 {
  width: 45px;
  margin-top: -4.8px;
  margin-left: -23.1px;
  position: absolute;
  z-index: 1;
}
.fm-img2 {
  width: 46.8px;
  position: absolute;
  margin-top: -5.7px;
  margin-left: 15.3px;
  z-index: 1;
}
.reading-card-12 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 130px;
  /* background-color: #d6e4ec; */
  position: absolute;
  margin-top: -130px;
  margin-left: -1px;
}
.reading-card-22 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 130px;
  /* background-color: #d6e4ec; */
  position: absolute;
  margin-top: -130px;
  margin-left: -14.3px;
}
.fm-img-name2 {
  position: absolute;
  margin-top: 20.8px;
  margin-left: 15px;
  z-index: 1;
  font-family: blackfont;
  font-size: 0.8rem;
  background-color: rgb(255, 254, 254);
}
.fm-img-name22 {
  position: absolute;
  margin-top: 20.8px;
  margin-left: 2px;
  z-index: 1;
  font-family: blackfont;
  font-size: 0.8rem;
  background-color: rgb(255, 254, 254);
}
.settler-dotarrow-container2 {
  height: 12px;
  margin-left: 138px;
  margin-top: -68px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.anaerobic-dotarrow-container2 {
  height: 30px;
  margin-left: 104px;
  margin-top: -83px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.black-dotted-line-fm-crt1 {
  border: 1px dashed rgb(179 179 179);
  transform: rotate(90deg);
  width: 354px;
  position: absolute;
  margin-top: 198px;
  margin-left: -184%;
  z-index: 1;
  z-index: -1;
}
.black-dotted-line-fm-crt2 {
  border: 1px dashed rgb(179 179 179);
  transform: rotate(90deg);
  width: 407px;
  position: absolute;
  margin-top: 236px;
  margin-left: -330%;
  z-index: 1;
  z-index: -1;
}

/*card1 end--------------------------*/

/*card2 starts--------------------------*/

.stucture-back-c2 {
  width: 100%;
  height: 100%;
  z-index: 1;
  /* background: white; */
  /* border: 1px solid red; */
  /* position: absolute; */
  padding: 10px;
  width: 100%;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stucture-back-c2-position {
  /* border: 2px dashed rgb(0, 255, 85); */
  width: 802px;
  height: 632px;
}
.main-c2 {
  position: sticky;
  /* margin-top: 33%; */
}

/* garden arrows starts */
.left-right-blue-arw-7c2 {
  background-color: #118ecb;
  width: 37px;
  height: 18px;
  position: absolute;
  margin-left: 53px;
  margin-top: -67px;
}
.left-right-blue-arw-71c2 {
  background-color: #118ecb;
  width: 106px;
  height: 8px;
  position: absolute;
  margin-left: 88px;
  margin-top: -67px;
  /* border-radius: 0px 10px 0px 0px; */
}
.arrow-down-1c2 {
  background-color: #118ecb;
  width: 16px;
  height: 8px;
  position: absolute;
  margin-left: 217px;
  margin-top: -29px;
  transform: rotate(90deg);
}
.blueline-coverc2 {
  background-color: #5aa8d6;
  background-color: #118ecb;
  width: 72px;
  height: 8px;
  margin-left: 89px;
  margin-top: -64px;
  border-radius: 0 10px 0 0;
  transform: rotate(354deg);
  position: absolute;
}
.bend-5c2 {
  width: 53px;
  height: 105px;
  border: solid 3px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: -62.4px;
  margin-left: 34px;
  position: absolute;
}
.arrow-down-5c2 {
  background-color: #118ecb;
  width: 3px;
  height: 66px;
  position: absolute;
  margin-left: 99.9px;
  margin-top: -31px;
}
.bend-4c2 {
  width: 53px;
  height: 105px;
  border: solid 3px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: -66.4px;
  margin-left: 55px;
  position: absolute;
}
.arrow-down-4c2 {
  background-color: #118ecb;
  width: 3px;
  height: 91px;
  position: absolute;
  margin-left: 121.4px;
  margin-top: -36px;
}
.bend-3c2 {
  width: 53px;
  height: 105px;
  border: solid 3px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: -68.4px;
  margin-left: 71px;
  position: absolute;
}
.arrow-down-3c2 {
  background-color: #118ecb;
  width: 3px;
  height: 27px;
  position: absolute;
  margin-left: 136.9px;
  margin-top: -36px;
}
.bend-2c2 {
  width: 77px;
  height: 113px;
  border: solid 8px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 100%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: -73.4px;
  margin-left: 83px;
  position: absolute;
}
.arrow-down-2c2 {
  background-color: #118ecb;
  width: 8px;
  height: 38px;
  position: absolute;
  margin-left: 162.6px;
  margin-top: -32px;
}

/* garden arrows end */

.borewell-container2 {
  width: 497px;
  height: 272px;
  height: 298px;
  /* background-color: #fff3cb; */
  background-image: linear-gradient(
    2deg,
    #e2cc99 25%,
    #fff3cb6e 70%,
    #8c6e0dd9 80%
  );
  border-radius: 0 0 45px 45px;
  margin-left: 53px;
  margin-top: 290px;
}
.layer-img2 {
  width: 497px;
  height: 272px;
  background-color: #fff3cb;
  border-radius: 0 0 45px 45px;
  position: absolute;
  margin-top: -296px;
  margin-left: -248px;
  z-index: -1;
  position: absolute;
}
.grass-top-img2 {
  width: 222px;
  margin-top: -60px;
  margin-left: -348px;
}
.garden-content2 {
  width: 94px;
  margin-left: 202px;
  margin-top: -222px;
  position: absolute;
}
.borewell-img2 {
  width: 24px;
  position: absolute;
  margin-top: -234px;
  margin-left: 61px;
}
.b-well-arrow-img2 {
  width: 48px;
  position: absolute;
  margin-top: -74px;
  margin-top: -85px;
  margin-left: 49px;
  animation: evopratearrows 4.5s linear infinite;
}
.borewell-content2 {
  width: 55px;
  margin-left: 325px;
  margin-top: -222px;
  position: absolute;
}
.monitoringwell-img2 {
  width: 18px;
  position: absolute;
  margin-top: -230px;
  margin-left: 146.2px;
}
.monitoringwell-content2 {
  width: 77px;
  margin-left: 415px;
  margin-top: -222px;
  position: absolute;
  text-align: left;
}
.reading-card-32 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 130;
  /* background-color: #d6e4ec; */
  position: absolute;
  margin-left: 417.1px;
  margin-top: -17.7%;
}
.dot-32 {
  cursor: pointer !important;
  width: 6px;
  height: 20px;
  border-top: 1px solid #626262;
  border-bottom: 1px dotted black;
  background-image: linear-gradient(91deg, #707070, #f3f3f3, #3d3d3d);
  border-radius: 14%;
  position: absolute;
  margin-top: 592px;
  z-index: 1;
  transition: transform 0.4s;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.black-dotted-line-vr-32 {
  border: 1px dashed rgb(0, 0, 0);
  transform: rotate(90deg);
  width: 354px;
  position: absolute;
  margin-top: 263px;
  z-index: 1;
  z-index: 0;
}
.well-wifi-container-bot2 {
  /* background: aqua; */
  position: absolute;
  margin-top: 513px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 44%;
  transform: rotate(60deg);
}
.fm-chart-line1 {
  border: 0.1px dashed rgb(153 153 153);
  transform: rotate(90deg);
  width: 396px;
  position: absolute;
  margin-top: 641px;
}
.fm-chart-line2 {
  border: 0.1px dashed rgb(153 153 153);
  transform: rotate(90deg);
  width: 396px;
  position: absolute;
  margin-top: 641px;
}
.chart-water {
  width: 100%;
  height: 70%;
  bottom: 0;
  opacity: 0.8;
  filter: saturate(3.3);
}

/* Scaling starts ==================*/
.scale-container2 {
  width: 124px;
  height: 298px;
  /* border: 1px solid #66c6ea; */
  margin-left: 505px;
  margin-top: -223px;
  border-bottom: 3px dashed rgb(0, 0, 0);
  border-top: 3px dashed rgb(0, 0, 0);
  text-align: end;
}
.scale-lines {
  border-top: 1px dotted rgb(98 98 98);
  height: 1.4%;
}
.scalevalue-container2 {
  width: 143px;
  height: 292px;
  /* border: 1px solid #66c6ea; */
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.watervalue2 {
  position: absolute;
  width: 20%;
  bottom: 0px;
  background-color: #8fc5e5d6;
  background-image: url(images/water.gif);
  /* animation: watervalue-anim 3s forwards; */
  z-index: 2;
  margin-left: -17px;
  opacity: 0.8;
  filter: saturate(3.3);
}

@keyframes watervalue-anim {
  0% {
    height: 0;
  }
  100% {
    height: 80%; /*<<<<<<<<<<<<< water level 0 to 100 change here*/
  }
}
.value-content2 {
  color: black;
  font-size: 12px;
  font-weight: 800;
  font-family: boldfont;
  /* text-shadow: 0 0 10px white; */
  margin-top: -17px;
  background: #ffffff00;
  text-align: center;
  backdrop-filter: blur(3px);
}
.dateday-container2 {
  width: 124px;
  height: 124px;
  /* border: 1px solid #080808; */
  margin-left: 505px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dateday2 {
  transform: rotate(270deg);
  color: black;
  font-size: 12px;
  font-weight: 800;
  font-family: boldfont;
}
.display-time {
  display: none;
}
.glevel-heading222 {
  width: 124px;
  /* border: 1px solid #66c6ea; */
  /* position: absolute; */
  bottom: 28px;
  text-align: center;
  color: black;
  font-size: 11px;
  font-family: boldfont;
  margin-top: -16px;
}
.glevel-heading333 {
  width: 124px;
  bottom: 11px;
  text-align: center;
  color: black;
  font-size: 11px;
  font-family: boldfont;
  margin-top: 11px;
}
/* Scaling end ==================*/
/*card2 end--------------------------*/
.live-text {
  color: rgb(4, 170, 4);
  position: absolute;
  /* margin-top: -118px;
  margin-left: -88px; */
  animation: textblink 1s linear infinite;
}

@keyframes textblink {
  50% {
    opacity: 0.3;
  }
}
.d-updates {
  font-size: 13px;
}
/*Section-3 all end=======================================================================================*/

/*Section-2 all starts=======================================================================================*/

.main-section-2 {
  /* border: 2px dashed red; */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.stc-position {
  /* border: 2px dashed rgb(68, 0, 255); */
  width: 1635px;
  height: 800px;
}

.main {
  position: sticky;
}

.stucture-back {
  width: 100%;
  /* height: 100vh; */
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(178deg, #b3dceb, transparent);
  background: white;
  /* border:1px solid red; */
  /* position: absolute; */
  padding: 10px;
  width: 100%;
  overflow-x: scroll;
}
.heading {
  color: black;
  font-weight: 600;
  font-size: 2.25rem;
  text-transform: uppercase;
  font-family: boldfont;
}
.benefit-container {
  width: 696px;
  /* border: 1px solid black; */
  position: absolute;
  margin-left: -1606%;
  margin-top: 376% !important;
  transition: transform 0.4s;
}
.benefit-container:hover {
  color: #071218;
  cursor: default;
  z-index: 2;
}
.benifit-logo-container {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 3px;
  width: 46px;
  height: 46px;
  /* border: 1px solid; */
  margin-top: 1px;
}
.benifit-img {
  width: 100%;
}
.ppl-img {
  width: 140px;
}
.topkldvalue-container {
  position: absolute;
  margin-top: -160px;
  margin-left: 148px;
  cursor: default;
}
.topkldvalue-value {
  font-size: 16px;
  font-weight: 700;
  font-family: blackfont;
}
.pplvalue-container {
  position: absolute;
  margin-top: -26px;
  margin-left: 74px;
  background: #ffffff;
  padding-left: 4px;
  padding-right: 4px;
}
.pplvalue-value {
  font-size: 14px;
  font-weight: 700;
  font-family: blackfont;
  cursor: default;
}
.top-blue-arw-3 {
  background-color: #118ecb;
  width: 289px;
  height: 10px;
  position: absolute;
  margin-left: 58px;
  margin-top: -137px;
  transform: 2s;
  /* animation: changeBackgroundColor 1s infinite; */
}

.top-blue-arw-2 {
  background-color: #118ecb;
  width: 462px;
  height: 10px;
  position: absolute;
  margin-left: 367px;
  margin-top: -137px;
}

.top-blue-arw-1 {
  background-color: #118ecb;
  width: 495px;
  height: 10px;
  position: absolute;
  margin-left: 849px;
  margin-top: -137px;
}
.top-blue-arw-0 {
  background-color: #118ecb;
  width: 252px;
  height: 10px;
  position: absolute;
  margin-left: 1250px;
  margin-top: 20px;
  transform: rotate(90deg);
}
.blue-bend-1 {
  width: 81px;
  height: 103px;
  border: solid 10.3px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 100%/100px 100px 0 0;
  transform: rotate(45deg);
  position: absolute;
  margin-left: 445px;
  margin-top: -5px;
  /* animation: triangleanimbluee 3s linear infinite; */
}
@keyframes triangleanimbluee {
  0% {
    border: solid 10.3px #035a8d;
    border-color: #035a8d transparent transparent transparent;
    border-color: #8d0303 transparent transparent transparent;
  }

  50% {
    border: solid 10.3px #108cd4;
    border-color: #108cd4 transparent transparent transparent;
    border-color: #d4b010 transparent transparent transparent;
  }
  100% {
    border: solid 10.3px #52aee4;
    border-color: #52aee4 transparent transparent transparent;
    border-color: #ececec transparent transparent transparent;
  }
}

.triangle-left-2 {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 13px solid #118ecb;
  border-bottom: 13px solid transparent;
  position: absolute;
  margin-top: -8px;
  margin-left: -9px;
}
.triangle-left-3 {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 13px solid #118ecb;
  border-bottom: 13px solid transparent;
  position: absolute;
  margin-top: -8px;
  margin-left: -11px;
}
.top-bot-red-arw-1 {
  background-color: #ef4237;
  width: 100px;
  height: 10px;
  position: absolute;
  margin-left: -29px;
  margin-top: 44px;
  transform: rotate(90deg);
}
.left-right-red-arw-2 {
  background-color: #ef4237;
  background-color: transparent;
  width: 116px;
  height: 10px;
  position: absolute;
  margin-left: 16px;
  margin-top: 98px;
  border-radius: 0 0 0 10px;
  z-index: -1;
  animation: changeBackgroundColorred 1s infinite;
}
/* .triangle-right-red-2 {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 13px solid #EF4237;
  border-bottom: 13px solid transparent;
  position: absolute;
  margin-top: -8px;
  margin-left: 115px;
  transform: rotate(180deg);
} */
.triangle-right-red-2 {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 12px solid #ef4237;
  border-bottom: 10px solid transparent;
  position: absolute;
  margin-top: -5px;
  margin-left: 115px;
  transform: rotate(180deg);
}

.settler {
  width: 65px;
  height: 89px;
  margin-left: 137px;
  margin-top: -43px;
}
.settler-dotarrow-container {
  width: 100px;
  height: 30px;
  margin-left: 127px;
  margin-top: -84px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.settler-img {
  width: 100%;
}
.overflow-content {
  width: -18px;
  margin-left: 30px;
  margin-top: 70px;
  text-align: center;
  position: absolute;
  width: 94px;
}
.settler-content {
  width: 130px;
  margin-left: 105px;
  text-align: center;
  margin-top: 22px;
}
.names {
  font-size: 12px;
  font-weight: 800;
  font-family: boldfont;
  text-shadow: 0 0 6px white;
}

.bn-logo-h {
  font-size: 19px;
  font-weight: 800;
  font-family: boldfont;
}
.bn-logo-h:hover {
  font-size: 19px;
  font-weight: 800;
  font-family: boldfont;
}
.bn-logo-content {
  font-weight: 800;
  font-family: boldfont;
}
.white-line-hr {
  border: 0.8px solid white;
  margin-top: 21px;
}
.white-line-vr {
  border: 0.8px solid white;
  transform: rotate(90deg);
  width: 20px;
  margin-top: -23px;
}

/* .left-right-red-arw-3 {
  background-color: #EF4237;
  width: 98px;
  height: 15px;
  position: absolute;
  margin-left: 211px;
  margin-top: -118px;
  animation: lineanim-red 1s infinite;
} */

.left-right-red-arw-3 {
  background-color: transparent;
  width: 98px;
  height: 15px;
  position: absolute;
  margin-left: 211px;
  margin-top: -118px;
  animation: lineanim-red 1s infinite;
  z-index: -1;
  /* opacity: 0; */
}
/* @keyframes lineanim-red {
  0% {
    background-color: #EF4237;
   
  }
  10% {
    background-color: #f0574c;
 }
  50% {
    background-color: #f36056;
     
  }
  100% {
    background-color: #f5827a;
   
  }
} */

.triangle-right-red-3 {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 13px solid #ef4237;
  border-bottom: 13px solid transparent;
  position: absolute;
  margin-top: -2.7px;
  margin-left: 97px;
  transform: rotate(270deg);
  animation: trianim-red 1s infinite;
}
@keyframes trianim-red {
  0% {
    border: solid 10.3px;
    border-color: #ef4237 transparent transparent transparent;
  }
  10% {
    border: solid 10.3px;
    border-color: #f0574c transparent transparent transparent;
  }
  50% {
    border: solid 10.3px;
    border-color: #f36056 transparent transparent transparent;
  }
  100% {
    border: solid 10.3px;
    border-color: #f5827a transparent transparent transparent;
  }
}

.anaerobic-img {
  width: 100px;
  margin-left: 121px;
  margin-top: -43px;
}

.anaerobic-dotarrow-container {
  /* border: 1px dashed blue; */
  width: 100px;
  height: 30px;
  margin-left: 128px;
  margin-top: -90px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anaerobic-content {
  width: 130px;
  margin-left: 105px;
  text-align: center;
}
.fm-img {
  width: 46.8px;
  position: absolute;
  margin-top: -6px;
  margin-left: 26.3px;
  z-index: 1;
}
.fm-img-name {
  position: absolute;
  margin-top: 18.8px;
  margin-left: 25px;
  z-index: 1;
  font-family: blackfont;
  font-size: 0.8rem;
}
/* .fm-img-2 {
  width: 46.8px;
  margin-top: -5.1px;
  margin-left: 4.3px;
  position: absolute;
  z-index:1;
} */
.fm-img-2 {
  width: 46.8px;
  margin-top: -5.3px;
  margin-left: 4.3px;
  position: absolute;
  z-index: 1;
}
.fm-img-2-name {
  width: 46px;
  margin-top: 22px;
  margin-left: 4.3px;
  position: absolute;
  z-index: 1;
  font-family: blackfont;
  font-size: 0.8rem;
}

.left-right-red-arw-4 {
  background-color: #ef4237;
  width: 40px;
  height: 8px;
  position: absolute;
  margin-left: 232px;
  margin-top: -152px;
  animation: lineanim-red 1s infinite;
}
.bot-top-red-arw-4 {
  background-color: #ef4237;
  width: 52px;
  height: 8px;
  position: absolute;
  margin-left: 264.4px;
  margin-top: -195px;
  transform: rotate(90deg);
  animation: lineanim-red 1s infinite;
}
.top-bot-red-arw-4 {
  background-color: #ef4237;
  width: 33px;
  height: 8px;
  position: absolute;
  margin-left: 274.5px;
  margin-top: -117px;
  transform: rotate(270deg);
  animation: lineanim-red 1s infinite;
}
.left-right-bot-red-arw-4 {
  background-color: #ef4237;
  width: 43px;
  height: 8px;
  position: absolute;
  margin-left: 308px;
  margin-top: -82px;
  animation: lineanim-red 1s infinite;
}
.left-right-top-red-arw-4 {
  background-color: #ef4237;
  width: 38px;
  height: 8px;
  position: absolute;
  margin-left: 309px;
  margin-top: -241px;
  animation: lineanim-red 1s infinite;
}
.triangle-right-top-red-4 {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-right: 12px solid #ef4237;
  border-bottom: 12px solid transparent;
  position: absolute;
  margin-top: -6px;
  margin-left: 37px;
  transform: rotate(270deg);
  animation: trianim-red 1s infinite;
}
.triangle-right-bot-red-4 {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-right: 12px solid #ef4237;
  border-bottom: 12px solid transparent;
  position: absolute;
  margin-top: -6px;
  margin-left: 37px;
  transform: rotate(270deg);
  animation: trianim-red 1s infinite;
}
.wetland-1 {
  width: 98px;
  height: 108px;
  background-image: linear-gradient(89deg, #ffbfba, #cef3ff);
  margin-top: -293px;
  margin-left: 362px;
}
.wetland-1-bottom {
  width: 97.3px;
  height: 19px;
  background-image: linear-gradient(89deg, #f17063, #54a9d8);
  border: 1px solid black;
  margin-left: 362.4px;
  display: flex;
  text-align: center;
  justify-content: center;
}
.wetland-1-content {
  width: 188px;
  margin-left: 328px;
  text-align: center;
}
.dotarrow {
  width: 13px;
  height: 39px;
  display: inline-flex;
  transform: rotate(270deg);
  margin-top: -10px;
}
.dotarrow:before,
.dotarrow:after {
  content: "";
  width: 50%;
  background: linear-gradient(
        to bottom left,
        transparent calc(50% - 1px),
        rgb(255, 255, 255) 0 calc(50% + 1px),
        transparent 0
      )
      bottom/100% 10px,
    repeating-linear-gradient(rgb(255, 255, 255) 0 7px, transparent 0 15px)
      right/1px 100%;
  background-repeat: no-repeat;
  background-clip: content-box;
  /* box-sizing:border-box; */
  animation: hide infinite 1.5s ease-in;
}
.dotarrow:after {
  transform: scaleX(-1);
}
@keyframes hide {
  50% {
    padding: 150px 0 0;
  }
  50.1% {
    padding: 0 0 150px;
  }
}

.dotarrow-small {
  width: 13px;
  width: 15px;
  height: 29px;
  display: inline-flex;
  transform: rotate(270deg);
  margin-top: -7px;
}
.dotarrow-small:before,
.dotarrow-small:after {
  content: "";
  width: 50%;
  background: linear-gradient(
        to bottom left,
        transparent calc(50% - 1px),
        rgb(255, 255, 255) 0 calc(50% + 1px),
        transparent 0
      )
      bottom/100% 10px,
    repeating-linear-gradient(rgb(255, 255, 255) 0 7px, transparent 0 15px)
      right/1px 100%;
  background-repeat: no-repeat;
  background-clip: content-box;
  /* box-sizing:border-box; */
  animation: hide infinite 1.5s ease-in;
}
.dotarrow-small:after {
  transform: scaleX(-1);
}

.wetland-2 {
  width: 98px;
  height: 108px;
  /* border: 1px solid red; */
  background-image: linear-gradient(89deg, #ffbfba, #cef3ff);
  margin-top: 26px;
  margin-left: 362px;
}
.wetland-2-bottom {
  width: 97.3px;
  height: 19px;
  background-image: linear-gradient(89deg, #f17063, #54a9d8);
  border: 1px solid black;
  margin-left: 362.4px;
  display: flex;
  text-align: center;
  justify-content: center;
}
.wetland-2-content {
  width: 188px;
  margin-left: 328px;
  text-align: center;
}
.grass-img {
  width: 100%;
  margin-top: -11px;
  position: absolute;
}
.wetland-border-img {
  width: 97px;
  height: 108.6px;
  margin-left: 0.4px;
  margin-top: 0px;
  position: absolute;
}

/* wetland to water tank styles starts ==========================*/
.left-right-top-blue-arw-5 {
  background-color: #118ecb;
  width: 38px;
  height: 8px;
  position: absolute;
  margin-left: 465px;
  margin-top: -280px;
}
.top-bot-blue-arw-5 {
  background-color: #118ecb;
  width: 56px;
  height: 8px;
  position: absolute;
  margin-left: 495px;
  margin-top: -233px;
  transform: rotate(90deg);
}
.top-bot-blue-arw-52 {
  background-color: #118ecb;
  width: 37px;
  height: 8px;
  position: absolute;
  margin-left: 505px;
  margin-top: -154px;
  transform: rotate(90deg);
}
.right-left-bot-blue-arw-5 {
  background-color: #118ecb;
  width: 39px;
  height: 8px;
  position: absolute;
  margin-left: 465px;
  margin-top: -118px;
}
.left-right-blue-arw-5 {
  background-color: #118ecb;
  width: 42px;
  height: 16px;
  position: absolute;
  margin-left: 529px;
  margin-top: -195px;
}
.triangle-right-blue-5 {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-right: 12px solid #118ecb;
  border-bottom: 12px solid transparent;
  position: absolute;
  margin-top: -4px;
  margin-left: 41px;
  transform: rotate(180deg);
}

/* wetland to water tank styles end ==========================*/
/* water tank to garden styles starts ==========================*/

.watertank-img {
  width: 47px;
  margin-left: 588px;
  margin-top: -376px;
}
.watertank-content {
  width: 64px;
  margin-left: 582px;
  text-align: center;
  margin-top: -156px;
}
.watertank-dotarrow-container {
  width: 100px;
  height: 30px;
  margin-left: 561px;
  margin-top: -64px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.left-right-blue-arw-6 {
  /* background-color: #118ECB; */
  background-color: transparent;
  width: 54px;
  height: 16px;
  position: absolute;
  margin-left: 643px;
  margin-top: -87px;
}
/* .triangle-right-blue-6 {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-right: 12px solid #118ECB;
  border-bottom: 12px solid transparent;
  position: absolute;
  margin-top: -4px;
  margin-left: 53px;
  transform: rotate(180deg);
} */

.black-dotted-line-vr {
  border: 1px dashed rgb(0, 0, 0);
  transform: rotate(90deg);
  width: 106px;
  position: absolute;
  margin-top: 31px;
}
.reading-card-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 130px;
  /* background-color: #d6e4ec; */
  position: absolute;
  margin-top: -130px;
  margin-left: 10px;
}
.reading-card-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 130px;
  /* background-color: #d6e4ec; */
  position: absolute;
  margin-top: -130px;
  margin-left: -12px;
}
.reading-card-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 130px;
  /* background-color: #d6e4ec; */
  position: absolute;
  margin-top: -130px;
  margin-left: 566.8px;
}
.black-dotted-line-vr-3 {
  border: 1px dashed rgb(0, 0, 0);
  transform: rotate(90deg);
  width: 381px;
  position: absolute;
  margin-top: 307px;
  z-index: 1;
  z-index: 0;
}
.dot-3 {
  cursor: pointer !important;
  width: 6px;
  height: 20px;
  border-top: 1px solid #626262;
  border-bottom: 1px dotted black;
  background-image: linear-gradient(91deg, #707070, #f3f3f3, #3d3d3d);
  border-radius: 14%;
  position: absolute;
  margin-top: 665px;
  z-index: 1;
  transition: transform 0.4s;

  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.dot-3:hover {
  transform: scale(2.5);
  cursor: default;
  z-index: 2;
}
.sensor-txt {
  font-size: 3px;
  font-weight: 700;
  transform: rotate(270deg);
}
.display {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 22px;
  height: 27px;
  color: black;
  background-color: #eaac21;
  border: 1px solid black;
  border-radius: 4px;
  margin-top: -118px;
  transition: transform 0.4s;
  font-family: boldfont;
  position: absolute;
}
.display:hover {
  transform: scale(1.5);
  transform: scale(2.5);
  cursor: default;
  z-index: 2;
}
.flowmeter-head-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -118px;
  width: 32px;
  position: absolute;
  z-index: 1;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: transform 0.4s;
  transform: scale(2.2);
  cursor: default;
}
.flowmeter-head-container:hover {
  transform: scale(4.2);
  cursor: default;
}
.fm-head-img {
  width: 100%;
  position: absolute;
  transition: transform 0.4s;
  cursor: pointer;
}
.fm-head-img:hover {
  width: 100%;
  position: absolute;
}

.tot-display {
  background-color: #ffffff33;
  border-radius: 0.5px;
  width: 67%;
  /* height: 3px; */
  padding: 0.1px 0px 0.1px 0px;
  position: absolute;
  margin-top: -4.2px;
}
.flow-display {
  background-color: #ffffff33;
  border-radius: 0.5px;
  width: 67%;
  /* height: 3.8px; */
  padding: 0.1px 0px 0.1px 0px;
  position: absolute;
  margin-top: 4.2px;
}
.bgl-display {
  background-color: #ffffff33;
  border-radius: 0.5px;
  width: 67%;
  /* height: 3.8px; */
  padding: 0.1px 0px 0.1px 0px;
  position: absolute;
  /* margin-top: -4px; */
}
.bgl-txt {
  color: #071218;
  font-family: boldfont;
  font-size: 2.7px !important;
  float: left;
  padding-left: 0.3px;
}
.bgl-blw-txt {
  color: #7b7c7d;
  font-family: boldfont;
  font-size: 1.8px !important;
  margin-top: 16px;
  position: absolute;
  z-index: 1;
}

.tot-txt {
  color: #071218;
  font-family: boldfont;
  font-size: 2.7px !important;
  float: left;
  padding-left: 0.3px;
}
.flow-txt {
  color: #071218;
  font-family: boldfont;
  font-size: 2.7px !important;
  float: left;
  padding-left: 0.3px;
}

.tot-value {
  color: #071218;
  font-family: boldfont;
  font-size: 2.7px !important;
  float: right;
  padding-right: 0.3px;
}
.flow-value {
  color: #071218;
  font-family: boldfont;
  font-size: 2.7px !important;
  float: right;
  padding-right: 0.3px;
}

.dot {
  width: 6px;
  height: 6px;
  /* background-color: black; */
  border-radius: 50%;
  position: absolute;
  margin-top: 123px;
}
ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 37px;
}
.value {
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-top: 8px;
}
.value-name {
  font-size: 8px !important;
  font-weight: 700 !important;
}

.value-3 {
  font-size: 9px !important;
  font-weight: 800 !important;
  margin-top: 8px;
  margin-left: -5px;
}
.m {
  font-size: 7px !important;
  position: absolute;
  margin-top: -11px;
  margin-left: 18px;
}
/* water tank to garden styles end ==========================*/
.borewell-container {
  width: 692px;
  height: 272px;
  /* background-color: #fff3cb; */
  background-image: linear-gradient(
    2deg,
    #e2cc99 25%,
    #fff3cb6e 70%,
    #8c6e0dd9 80%
  );
  border-radius: 0 0 45px 45px;
  margin-left: 28px;
  margin-top: 68px;
}
.layer-img {
  width: 692px;
  height: 272px;
  background-color: #fff3cb;
  border-radius: 0 0 45px 45px;
  position: absolute;
  margin-top: -221px;
  /* opacity: 0.8; */
  z-index: -1;
}

.grass-top-img {
  width: 222px;
  margin-top: -60px;
  margin-left: 17px;
}
.garden-arrow-img {
  width: 205px;
  margin-top: -73px;
  margin-left: -216px;
  animation: gardenarrows 2.5s linear infinite;
}
@keyframes gardenarrows {
  0% {
    transform: translateY(-0%) rotate(0deg);
    opacity: 0.2;
  }

  50% {
    transform: translateY(1vh) rotate(-0deg);
    opacity: 0.9;
  }
  100% {
    transform: translateY(1vh) rotate(-0deg);
    opacity: 0.2;
    opacity: 0.9;
  }
}
.garden-toparrow-img {
  width: 121px;
  margin-top: -364px;
  margin-left: -170px;
  animation: evopratearrows 2.5s linear infinite;
}
@keyframes evopratearrows {
  100% {
    transform: translateY(-0%) rotate(0deg);
  }
  0% {
    transform: translateY(2vh) rotate(-0deg);
    opacity: 0.2;
    opacity: 0.9;
  }
}
.wetland-toparrow-img {
  width: 79px;
  margin-top: -44px;
  margin-left: 9px;
  position: absolute;
  animation: evopratearrows 2.5s linear infinite;
}
.wetland-toparrow-img-2 {
  width: 79px;
  margin-top: -23px;
  margin-left: 9px;
  position: absolute;
  z-index: -1;
  animation: evopratearrows 2.5s linear infinite;
}
.cloud-img {
  width: 83px;
  position: absolute;
  margin-top: -481px;
  margin-left: 333px;
}

.wave-bottom-container {
  width: 100%;
  height: 24px;
  margin-top: 18px;
  /* border:1px solid; */
}
.wave-top-container {
  width: 100%;
  height: 29px;
  margin-top: -28px;
  /* border: 1px solid red; */
}
/* waves */
.wave-container {
  height: 28px; /* change the height of the waves here */
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave-1 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='rgb(26, 151, 212)'/%3E%3C/svg%3E");
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.6;
  filter: saturate(1.8);
}
.wave-2 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='rgb(26, 151, 212)'/%3E%3C/svg%3E");
  width: 200%;
  height: 100%;
  animation: wave 6s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.6;
  filter: saturate(1.8);
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.rechargewell-img {
  width: 18px;
  position: absolute;
  margin-top: -229px;
  margin-left: 366px;
}
.r-well-arrow-img {
  width: 48px;
  position: absolute;
  margin-top: -45px;
  margin-top: -52px;
  margin-left: 351.4px;
  animation: rwellarrow 4.5s linear infinite;
}
@keyframes rwellarrow {
  0% {
    transform: translateY(-0%) rotate(0deg);
    opacity: 0.9;
  }

  50% {
    transform: translateY(1vh) rotate(-0deg);
    opacity: 0.9;
  }
  100% {
    transform: translateY(1vh) rotate(-0deg);
    opacity: 0.2;
    opacity: 0.9;
  }
}

.rechargewell-content {
  width: 70px;
  margin-left: 388px;
  margin-top: -220px;
  position: absolute;
}
.borewell-img {
  width: 24px;
  position: absolute;
  margin-top: -234px;
  margin-left: 465px;
}
.b-well-arrow-img {
  width: 48px;
  position: absolute;
  margin-top: -74px;
  margin-top: -85px;
  margin-left: 452px;
  animation: evopratearrows 4.5s linear infinite;
}
.borewell-content {
  width: 55px;
  margin-left: 490px;
  margin-top: -222px;
  position: absolute;
}
.monitoringwell-img {
  width: 18px;
  position: absolute;
  margin-top: -230px;
  margin-left: 569.2px;
  cursor: pointer;
}
.monitoringwell-content {
  width: 55px;
  margin-left: 590px;
  margin-top: -222px;
  position: absolute;
}
.garden-content {
  width: 94px;
  margin-left: 236px;
  margin-top: -222px;
  position: absolute;
}
.left-right-blue-arw-7 {
  background-color: #118ecb;
  width: 18px;
  height: 18px;
  position: absolute;
  margin-left: 72px;
  margin-top: 0px;
}
.left-right-blue-arw-71 {
  background-color: #118ecb;
  width: 106px;
  height: 8px;
  position: absolute;
  margin-left: 88px;
  margin-top: 0px;
  /* border-radius: 0px 10px 0px 0px; */
}
.bend-1 {
  width: 77px;
  height: 113px;
  border: solid 8px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 100%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: -7.4px;
  margin-left: 53px;
  position: absolute;
}
.bend-2 {
  width: 77px;
  height: 113px;
  border: solid 8px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 100%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: -5.4px;
  margin-left: 83px;
  position: absolute;
}
/* small-bend */
.bend-3 {
  width: 53px;
  height: 105px;
  border: solid 3px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: -0.4px;
  margin-left: 71px;
  position: absolute;
}
.bend-4 {
  width: 53px;
  height: 105px;
  border: solid 3px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: 1.6px;
  margin-left: 55px;
  position: absolute;
}
.bend-5 {
  width: 53px;
  height: 105px;
  border: solid 3px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: 4.6px;
  margin-left: 34px;
  position: absolute;
}
.blueline-cover {
  background-color: #5aa8d6;
  background-color: #118ecb;
  width: 72px;
  height: 8px;
  margin-left: 89px;
  margin-top: 4px;
  border-radius: 0 10px 0 0;
  transform: rotate(354deg);
  position: absolute;
}

.arrow-down-1 {
  background-color: #118ecb;
  width: 16px;
  height: 8px;
  position: absolute;
  margin-left: 217px;
  margin-top: 39px;
  transform: rotate(90deg);
}
.triangle-down-1 {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 7px solid #118ecb;
  border-bottom: 8px solid transparent;
  position: absolute;
  margin-top: -4px;
  margin-left: 13px;
  transform: rotate(180deg);
}
.arrow-down-2 {
  background-color: #118ecb;
  width: 8px;
  height: 38px;
  position: absolute;
  margin-left: 162.6px;
  margin-top: 38px;
}
.triangle-down-2 {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 7px solid #118ecb;
  border-bottom: 8px solid transparent;
  position: absolute;
  margin-top: 31px;
  transform: rotate(270deg);
}
.arrow-down-3 {
  background-color: #118ecb;
  width: 3px;
  height: 27px;
  position: absolute;
  margin-left: 136.9px;
  margin-top: 33px;
}
.triangle-down-3 {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 3px solid #118ecb;
  border-bottom: 4px solid transparent;
  position: absolute;
  margin-top: 24px;
  transform: rotate(270deg);
}

.arrow-down-4 {
  background-color: #118ecb;
  width: 3px;
  height: 91px;
  position: absolute;
  margin-left: 121.4px;
  margin-top: 33px;
}
.triangle-down-4 {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 3px solid #118ecb;
  border-bottom: 4px solid transparent;
  position: absolute;
  margin-top: 87px;
  transform: rotate(270deg);
}
.arrow-down-5 {
  background-color: #118ecb;
  width: 3px;
  height: 66px;
  position: absolute;
  margin-left: 99.9px;
  margin-top: 33px;
}
.triangle-down-5 {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 3px solid #118ecb;
  border-bottom: 4px solid transparent;
  position: absolute;
  margin-top: 62px;
  transform: rotate(270deg);
}

.red-bend-1 {
  width: 81px;
  height: 103px;
  border: solid 10px #ef4237;
  border-color: #ef4237 transparent transparent transparent;
  border-radius: 100%/100px 100px 0 0;
  transform: rotate(135deg);
  position: absolute;
  margin-left: 22px;
  margin-top: -102px;
}
.white-card {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  margin-top: -26px;
  margin-left: 72px;
  z-index: 6;
}

.red-bend-2 {
  width: 53px;
  height: 115px;
  border: solid 8px #d2b7b5;
  border-color: #ef4237 transparent transparent transparent;
  border-radius: 120%/94px 94px 0 0;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(45deg);
  margin-top: -10px;
  position: absolute;
  animation: bendanim-red 1s infinite;
}
@keyframes bendanim-red {
  0% {
    border-color: #ef4237 transparent transparent transparent;
  }
  10% {
    border-color: #f0574c transparent transparent transparent;
  }
  50% {
    border-color: #f36056 transparent transparent transparent;
  }
  100% {
    border-color: #f5827a transparent transparent transparent;
  }
}
.red-bend-3 {
  width: 53px;
  height: 105px;
  border: solid 8px #ef4237;
  border-color: #ef4237 transparent transparent transparent;
  border-radius: 120%/94px 94px 0 0;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(45deg);
  margin-top: -8.6px;
  margin-left: -6.4px;
  position: absolute;
  animation: bendanim-red 1s infinite;
}
.red-bend-4 {
  width: 53px;
  height: 105px;
  border: solid 8px #ef4237;
  border-color: #ef4237 transparent transparent transparent;
  border-radius: 120%/94px 94px 0 0;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(314deg);
  margin-top: -10px;
  margin-left: -4.7px;
  position: absolute;
  animation: bendanim-red 1s infinite;
}
.red-bend-5 {
  width: 53px;
  height: 105px;
  border: solid 8px #ef4237;
  border-color: #ef4237 transparent transparent transparent;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(223deg);
  margin-top: -88.8px;
  margin-left: -5.2px;
  position: absolute;
  animation: bendanim-red 1s infinite;
}
.blue-bend-6 {
  width: 53px;
  height: 105px;
  border: solid 8px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/94px 94px 0 0;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(45deg);
  margin-top: -8.8px;
  margin-left: -7.5px;
  position: absolute;
}
.blue-bend-7 {
  width: 53px;
  height: 105px;
  border: solid 8px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/94px 94px 0 0;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(134deg);
  margin-top: -87.1px;
  margin-left: 2.8px;
  position: absolute;
}
.blue-bend-8 {
  width: 53px;
  height: 105px;
  border: solid 8px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/94px 94px 0 0;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(227deg);
  margin-top: -87.7px;
  margin-left: -5.4px;
  position: absolute;
}
.blue-bend-9 {
  width: 53px;
  height: 105px;
  border: solid 8px #118ecb;
  border-color: #118ecb transparent transparent transparent;
  border-radius: 120%/94px 94px 0 0;
  border-radius: 125%/80px 97px 0 0;
  transform: rotate(133deg);
  margin-top: -86.6px;
  margin-left: -8.2px;
  position: absolute;
}
.red-light-bend-1 {
  width: 79px;
  height: 105px;
  border: solid 5px #ef4237;
  border-color: #ef4237 transparent transparent transparent;
  border-radius: 120%/100px 100px 0 0;
  transform: rotate(45deg);
  margin-top: 4.6;
  margin-left: -8px;
  margin-top: 0px;
  position: absolute;
  opacity: 0.5;
}
.red-triangle-light {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 9px solid #ef4237;
  border-bottom: 10px solid transparent;
  position: absolute;
  transform: rotate(270deg);
  margin-left: 73.2px;
  margin-top: 37.8px;
  opacity: 0.5;
}
/* cloud drops starts */
.r-drop-1 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -433px;
  margin-left: 355px;
  border-left: none;
}
.r-drop-2 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -430px;
  margin-left: 362px;
  border-left: none;
}
.r-drop-3 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -433px;
  margin-left: 368px;
  border-left: none;
}
.r-drop-4 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -430px;
  margin-left: 373px;
  border-left: none;
}
.r-drop-5 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -433px;
  margin-left: 378px;
  border-left: none;
}
.r-drop-6 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -430px;
  margin-left: 383px;
  border-left: none;
}
.r-drop-7 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -433px;
  margin-left: 388px;
  border-left: none;
}
.r-drop-8 {
  background-image: repeating-linear-gradient(
      0deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      90deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      180deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    ),
    repeating-linear-gradient(
      270deg,
      #00aeef,
      #00aeef 5px,
      transparent 5px,
      transparent 15px,
      #00aeef 15px
    );
  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnimation 0.9s infinite steps(2, end);
  height: 110px;
  width: 2px;
  position: absolute;
  margin-top: -430px;
  margin-left: 393px;
  border-left: none;
}
@keyframes borderAnimation {
  from {
    background-position: 0 0, -15px 0, 100% -15px, 0 100%;
  }
  to {
    background-position: 0 -15px, 0 0, 100% 0, -15px 100%;
  }
}
/* cloud drops end */

.top-gw-logo {
  width: 55px;
  cursor: pointer !important;
}
.top-ct-logo {
  width: 195px;
  padding-left: 20px;
  cursor: pointer !important;
}
.dot-arrow {
  background-image: repeating-linear-gradient(
      0deg,
      white,
      white 5px,
      transparent 5px,
      transparent 15px,
      white 15px
    ),
    repeating-linear-gradient(
      90deg,
      white,
      white 5px,
      transparent 5px,
      transparent 15px,
      white 15px
    ),
    repeating-linear-gradient(
      180deg,
      white,
      white 5px,
      transparent 5px,
      transparent 15px,
      white 15px
    ),
    repeating-linear-gradient(
      270deg,
      white,
      white 5px,
      transparent 5px,
      transparent 15px,
      white 15px
    );

  background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px,
    5px calc(100% + 15px), calc(100% + 15px) 5px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: dotAnimation 0.9s infinite steps(2, end);
  height: 110px;
  height: 110px;
  width: 2px;
  position: absolute;
  margin-left: 3px;
  border-left: none;
  transform: rotate(90deg);
  margin-top: -44px;
}
@keyframes dotAnimation {
  from {
    background-position: 0 0, -15px 0, 100% -15px, 0 100%;
  }
  to {
    background-position: 0 -15px, 0 0, 100% 0, -15px 100%;
  }
}

/* Scaling starts ==================*/

.scale-container {
  width: 124px;
  height: 298px;
  height: 290px;
  border: 1px solid #ffffff;
  border-bottom: 3px dashed #000000;
  border-top: 3px dashed rgb(0, 0, 0);
  text-align: end;
  background-image: linear-gradient(1deg, #ffffff, #ffffff00);
  background-image: linear-gradient(1deg, #ffffff, #ffffff57, white);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: -2px;
  padding-right: 2px;
  padding-left: 2px;
}
.scale-lines {
  border-top: 1px dotted rgb(51, 51, 51);
  height: 1.4%;
}
.scalevalue-container {
  width: 118px;
  height: 284px;
  /* border: 1px solid #66c6ea; */
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.watervalue {
  position: absolute;
  width: 17%;
  bottom: 0px;

  background-color: #8fc5e5d6;
  background-image: url(images/water.gif);
  /* animation: watervalue-anim 3s forwards; */
  z-index: 2;
  /* opacity: 0.8; */
  filter: saturate(3.3);
  box-shadow: rgb(255 255 255 / 82%) 0px -2px 7px 2px;
}

@keyframes watervalue-anim {
  0% {
    height: 0;
  }
  100% {
    height: 50%; /*<<<<<<<<<<<<< water level 0 to 100 change here*/
  }
}

.value-content {
  margin-top: -18px;
  /* transform: rotate(270deg); */
  color: black;
  font-size: 12px;
  font-weight: 800;
  font-family: boldfont;
  width: 144px;
  margin-left: 1px;
  text-shadow: 0 0 9px #ffffffe3;
  border-bottom: 2px dashed rgb(0, 0, 0);
}
#hscmwater {
  border: none !important;
}
.dateday-container {
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: center;
  margin-top: -45px;
}
.dateday {
  /* transform: rotate(270deg); */
  color: rgb(255, 255, 255);
  text-shadow: 0 0 5px black;
  font-size: 1.4rem;
  font-weight: 800;
  font-family: boldfont;
}
.display-time {
  display: none;
}
#daynum {
  margin-right: -3px;
}
#year {
  margin-left: -3px;
}

.glevel-heading {
  width: 124px;
  position: absolute;
  text-align: center;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 5px black;
  font-size: 11px;
  font-family: boldfont;
  margin-top: -19px;
}
.glevel-heading2 {
  width: 124px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 0 5px black;
  font-size: 11px;
  font-family: boldfont;
  position: absolute;
  margin-top: 10px;
}
.popup-container {
  /* border:1px solid black; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0 0 0 / 65%);
  align-items: center !important;
  justify-content: center !important;
}

/* Modal Content */
.scale-modal-content {
  background-color: #ffffff3d;
  backdrop-filter: blur(3px);
  border: 2px solid white;
  margin: auto;
  padding: 5px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 20% !important;
  height: 61%;
  pointer-events: auto;
  background-clip: padding-box;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 1.3rem;
  margin-top: 12%;
}
/* popup Close Button */
.close {
  float: right;
  font-size: 3rem !important;
  font-weight: 700;
  color: #f74040 !important;
  margin-top: -5px;
  text-shadow: 1px -1px 0px #fff !important;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.9 !important;
  text-align: end;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  color: #f87272 !important;
}
/* Scaling end ==================*/
/* DOT ARROW STARTS ----> */

.dot-arw {
  /* border: 1px solid black; */
  /* background-color: #000000; */
  width: 50px;
  transform: rotate(180deg);
  height: 18px;
}
.d1 {
  fill: #ffffff;
  /* fill:#000000; */
  animation: blinker 1s linear infinite;
  animation-iteration-count: 1;
  animation-delay: 0.1s;
}
.d2 {
  fill: #ffffff;
  /* fill:#d8d7d7; */
  animation: blinker 1s linear infinite;
  animation-iteration-count: 1;
  animation-delay: 0.2s;
}
.d3 {
  fill: #ffffff;
  /* fill:#ff0000; */
  animation: blinker 1s linear infinite;
  animation-iteration-count: 1;
  animation-delay: 0.3s;
}
.d4 {
  fill: #ffffff;
  /* fill:#ffa600; */
  animation: blinker 1s linear infinite;
  animation-iteration-count: 1;
  animation-delay: 0.4s;
}
.d5 {
  fill: #ffffff;
  /* fill:#00ff00; */
  animation: blinker 1s linear infinite;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/* DOT ARROW END ----> */

.top-icon-1 {
  position: absolute;
  width: 15px;
  margin-top: 155px;
  margin-left: -132px;
  border-top: 1px solid #1a5d89;
  border-bottom: 1px solid #ec3f32;
  border-radius: 50%;
}
.top-icon-2 {
  position: absolute;
  width: 15px;
  margin-top: 155px;
  margin-left: -114px;
  border-top: 1px solid #1a5d89;
  border-bottom: 1px solid #ec3f32;
  border-radius: 50%;
}
.top-icon-3 {
  position: absolute;
  width: 15px;
  margin-top: 155px;
  margin-left: -95px;
  border-top: 1px solid #1a5d89;
  border-bottom: 1px solid #ec3f32;
  border-radius: 50%;
}
/*Section-2 all end=======================================================================================*/

/*Section-1 all starts=======================================================================================*/
/* video content grid starts */

#video-content-container {
  /* border: 2px solid white; */
  /* background: #00afef5d; */
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 90vh;
  width: 100%;
  z-index: 1 !important;
}
#mainheading-container {
  /* border: 1px dashed black; */
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  flex: auto;
}
#projectby-container {
  /* border: 1px dashed rgb(216, 24, 24); */
}
#skipintro-container {
  /* border: 1px dashed rgb(106, 226, 8); */
}
/* video content grid end */

.video-card {
  width: 100%;
  height: 90vh;
  /* border:1px dashed red; */
}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-heading:hover {
  filter: drop-shadow(3px 3px 7px #0b7cb4);
}
.main-heading:active {
  color: #fcdfa3 !important;
}
.vdo-h1 {
  font-family: mediumfont;
  color: white;
  font-size: 4.8rem;
  text-shadow: 0 0 5px black;
  padding: 50px;
}
.vdo-h2 {
  font-family: thinfont;
  color: white;
  font-size: 2rem;
  text-shadow: 0 0 5px black;
  cursor: default;
}
.vdo-h3 {
  font-family: thinfont;
  color: white;
  font-size: 2rem;
  text-shadow: 0 0 5px black;
  padding-left: 50px;
  cursor: default;
}

.ooze-logo-card {
  width: 200px;
}
.ooze-logo-img {
  width: 100%;
  cursor: pointer !important;
  z-index: 1;
  transition: all 0.2s;
}
.ooze-logo-img:hover {
  width: 100%;
  cursor: pointer !important;
  z-index: 1;
  filter: drop-shadow(3px 3px 7px #0b7cb4);
  transform: scale(1.1) !important;
}
.vdo-h4 {
  font-family: thinfont;
  color: white;
  font-size: 2rem;
  text-shadow: 0 0 5px black;
  cursor: default;
}
.skip-intro-container {
  /* border:1px solid yellow; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.skip-intro {
  font-family: thinfont;
  color: white !important;
  font-size: 1.8rem;
  cursor: pointer !important;
  padding-bottom: 5px;
}
.skip-intro:hover {
  font-family: thinfont;
  color: white !important;
  font-size: 1.8rem;
  cursor: pointer !important;
  /* transform: scale(0.8) !important; */
}
#more-arrows {
  width: 75px;
  height: 65px;
  filter: drop-shadow(2px 4px 6px black);
}
#more-arrows:hover {
  width: 75px;
  height: 65px;
  filter: drop-shadow(2px 3px 7px #118ecb);
}
a {
  text-decoration: none !important;
  color: white !important;
}
a:hover {
  text-decoration: none !important;
  color: white !important;
}
/* Arrow & Hover Animation */
#more-arrows {
  width: 75px;
  height: 65px;
}
#more-arrows:hover polygon {
  fill: #fff;
  transition: all 0.2s ease-out;
}
#more-arrows:hover polygon.arrow-bottom {
  transform: translateY(-18px);
}
#more-arrows:hover polygon.arrow-top {
  transform: translateY(18px);
}
polygon {
  fill: #fff;
  transition: all 0.2s ease-out;
}
.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 10vh;
}

.c-logo {
  width: 92% !important;
  transition: transform.2s;
}
.c-logo:hover {
  background-color: #ffffff;
  transform: scale(1.5);
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 5px;
}
.logos-hdg {
  position: absolute;
  color: rgb(0, 0, 0);
  font-family: thinfont;
  font-weight: 800;
  /* padding-top: 3px; */
  z-index: 1;
  width: 100%;
  margin-top: -7px;
}
.logos-hdg {
  position: absolute;
  color: rgb(0, 0, 0);
  font-family: thinfont;
  font-weight: 800;
  /* padding-top: 3px; */
  z-index: 1;
  width: 100%;
  margin-top: -7px;
}

/*Section-1 all end=======================================================================================*/

/* Mobile View All start =============================================================================================================*/
@media screen and (min-device-width: 310px) and (max-device-width: 800px) {
  html {
    /* visibility: hidden; */
    visibility: visible;
  }
  .stucture-back {
    width: none;
    height: 100vh;
    border: none !important;
    z-index: 1;
    background-image: linear-gradient(178deg, #b3dceb, transparent);
    background: white;
    /* border:1px solid; */
    /* position: absolute; */
    padding: 10px;
  }

  .vdo-h1 {
    font-family: mediumfont;
    color: white;
    font-size: 3.8rem !important;
    text-shadow: 0 0 5px black;
    padding: 50px;
  }
  .vdo-h2 {
    font-size: 1.3rem !important;
  }
  .vdo-h3 {
    font-size: 1.3rem !important;
  }
  .vdo-h4 {
    font-size: 1.3rem !important;
  }
  .skip-intro {
    font-size: 1.3rem !important;
  }
  .video-card {
    width: 100% !important;
    height: 70vh;
    /* border: 1px dashed red; */
  }

  /* Sec-3 starts --------------------*/
  .main-card {
    height: 100%;
    align-items: center;
    justify-content: center;

    flex-direction: column;
  }
  .card {
    width: 100%;
    height: 70%;
    border: 2.7px solid black;
    border-radius: 35px;
    margin: 0px;
    margin-top: 5px;
  }
  /* Sec-3 end --------------------*/

  /* popup */
  .scale-modal-content {
    background-color: #ffffff3d;
    backdrop-filter: blur(3px);
    border: 2px solid white;
    margin: auto;
    padding: 20px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 70% !important;
    height: 68%;
    pointer-events: auto;
    background-clip: padding-box;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 1.3rem;
    margin-top: 10%;
  }

  .stc-position {
    /* border: 2px dashed rgb(68, 0, 255); */
    width: 1635px;
    height: 700px;
    overflow: scroll;
  }
  #video-content-container {
    /* border: 2px solid white; */
    /* background: #00afef5d; */
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 70vh;
    width: 100%;
    z-index: 1 !important;
  }
  .c-logo {
    width: 100% !important;
    border: 1px dashed transparent;
  }
  .heading {
    font-size: 1.25rem;
  }

  .main-section-3-position {
    /* border: 2px dashed red; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* height: 632px; */
    overflow: scroll;
  }

  .sec-4-position {
    /* border: 2px dashed red; */
    width: 1635px;
    /* height: 100%; */
    height: 788px;
    margin-top: 5.5%;
  }
  .content-tl {
    font-size: 12px;
  }
  .stucture-back-btm {
    height: 100%;

    /* border: 1px solid red; */
  }
}

/* Mobile View Starts -------(section3)----------------------------------------------------------------*/
@media screen and (min-device-width: 310px) and (max-device-width: 768px) {
  .main-card {
    height: 100%;
    align-items: center;
    justify-content: center;

    flex-direction: column;
  }
  .card {
    width: 100%;
    height: 70%;
    border: 2.7px solid black;
    border-radius: 35px;
    margin: 0px;
    margin-top: 5px;
  }
} /* Mobile View end -------(section3)----------------------------------------------------------------*/

@media screen and (min-device-width: 815px) and (max-device-width: 825px) {
  .heading {
    color: black;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: boldfont;
  }
}
/* Mobile View All end =============================================================================================================*/