@charset "UTF-8";
/* 25.0.3*/
/* Import Import Manrope font  */
@import url("../fonts/BeVietnam/fontface-BeVietnam.css");
@import url("../fonts/MartianGrotesk/fontface-MartianGrotesk.css");

/* DMSans_font_family => used in footer-section */
/* 25.0.3*/
body {
  box-sizing: border-box;
  --web-fresh-green-color: rgb(0, 255, 132);
  --web-alert-orange-color: rgb(255, 98, 27);
  --web-water-blue-color: rgb(1, 0, 255);
  --web-process-blue-color: rgb(85, 85, 163);
  --web-medium-blue-color: rgb(54, 53, 195);
  --web-dark-midnight-blue-color: rgb(0, 0, 37);
  --web-light-gray-color: rgb(241, 241, 243);
  --web-water-gray-color: rgb(116, 116, 131);
  --web-profile-gray-color: rgb(230, 230, 234);
  --web-black-color: rgb(0, 0, 37);
  --web-light-black-color: rgba(0, 0, 37, 0.7);
  --text-underline-offset-s1: 12px;
  --column-space-s1: 32px;
  --navbar-logo-width: 64px;
  --navbar-vt-padding: 20px;
  --navbar-logo-width-on-mobile: 48px;
  --navbar-vt-padding-on-mobile: 8px;
  --navbar-height: 85px;
  --navbar-height-on-mobile: 85px;
  --header-bg-color: white;
  --navbar-ul-menu-color: var(--web-dark-midnight-blue-color);
  --navbar-ul-menu-hover-color: var(--web-water-blue-color);
  --navbar-ul-menu-bg-color: white;
  --navbar-ul-menu-bg-color-on-mobile: var(--web-dark-midnight-blue-color);
  --navbar-ul-menu-text-underline-offset-color: var(--web-fresh-green-color);
  --navbar-ul-menu-text-underline-offset: var(--text-underline-offset-s1);
  --navbar-ul-menu-column-space: var(--column-space-s1);
  --contact-btn-color: var(--web-water-blue-color);
  --contact-btn-bg-color: transparent;
  --contact-btn-border-color: var(--web-water-blue-color);
  --contact-btn-color-on-hover: white;
  --contact-btn-bg-color-on-hover: var(--web-water-blue-color);
  --dark-contact-btn-color: white;
  --dark-contact-btn-bg-color: var(--web-water-blue-color);
  --dark-contact-btn-border-color: var(--web-water-blue-color);
  --dark-contact-btn-color-on-hover: var(--web-water-blue-color);
  --dark-contact-btn-bg-color-on-hover: transparent;
  --dark-contact-btn-border-color-on-hover: var(--web-water-blue-color);
  --on-dark-bg-dark-contact-btn-color-on-hover: white;
  --on-dark-bg-dark-contact-btn-bg-color-on-hover: transparent;
  --on-dark-bg-dark-contact-btn-border-color-on-hover: white;
  overflow-wrap: break-word;
  font-family: "Martian Grotesk", sans-serif;
}

body {
  --section_vt_padding_both_side_same-xl: 120px;
  --section-heading-box_row-gap-s1: 32px;
  --cliant-logo-row_row-gap: 24px;
  --cliant-section_row-gap: 90px;
  --last-section-bottom-margin: 120px;
  --disclaimer-vt-padding: 50px;
  --timeline-ul-li-vt-padding: 20px;
}

@media screen and (max-width: 1024px) {
  body {
    --section_vt_padding_both_side_same-xl: 80px;
    --cliant-section_row-gap: 72px;
    --last-section-bottom-margin: 80px;
    --section-heading-box_row-gap-s1: 32px;
    --timeline-ul-li-vt-padding: 32px;
  }
}

@media screen and (max-width: 768px) {
  body {
    --section_vt_padding_both_side_same-xl: 60px;
    --cliant-section_row-gap: 48px;
    --last-section-bottom-margin: 60px;
    --section-heading-box_row-gap-s1: 32px;
    --timeline-ul-li-vt-padding: 32px;
  }
}

@media screen and (max-width: 576px) {
  body {
    --cliant-section_row-gap: 36px;
    --last-section-bottom-margin: 60px;
    --section-heading-box_row-gap-s1: 24px;
    --cliant-logo-row_row-gap: 16px;
    --disclaimer-vt-padding: 32px;
    --timeline-ul-li-vt-padding: 32px;
  }
}

body {
  --section-heading-xl-font-size-t2: 52px;
  --section-heading-font-size-s1: 48px;
  --section-heading-font-size-s2: 36px;
  --section-heading_hero-img-ov-title-v2_font-size: 36px;
  --hazard-heading-font-size-s1: 32px;
  --section-xl-para-s1: 36px;
  --section-main-para-s1: 24px;
  --section-card-para-s1: 24px;
  --section-sub-para-s1: 20px;
  --section-sub-para-xs: 16px;
  --postcard-para-s1: 22px;
  --hazard-para-s1: 20px;
  --cir-annotation-font-size: 26px;
  --cir-svg-wrapper-height: 520px;
  --cir-connecting-lines-height: 520px;
  --ring-3-size: 520px;
  --li-hero-img-ov-title-v2_font-size: 26px;
  --li-hero-img-ov-title-v1_font-size: 26px;
  --li-hero-timeline_font-size: 22px;
  --row-gap-bw-two-lis: 32px;
}

@media screen and (max-width: 1320px) {
  body {
    --li-hero-img-ov-title-v2_font-size: 24px;
    --li-hero-img-ov-title-v1_font-size: 24px;
    --cir-annotation-font-size: 24px;
  }
}

@media screen and (max-width: 1200px) {
  body {
    --li-hero-img-ov-title-v2_font-size: 22px;
    --li-hero-img-ov-title-v1_font-size: 22px;
    --cir-annotation-font-size: 20px;
  }
}

@media screen and (max-width: 1024px) {
  body {
    --section-heading-font-size-s1: 40px;
    --section-heading-font-size-s2: 30px;
    --section-main-para-s1: 22px;
    --section-card-para-s1: 22px;
    --section-sub-para-s1: 18px;
    --section-sub-para-xs: 16px;
    --cir-annotation-font-size: 18px;
    --cir-svg-wrapper-height: 520px;
    --cir-connecting-lines-height: 520px;
    --cir-annotation-width: 40%;
    --ring-3-size: 520px;
  }
}

@media screen and (max-width: 768px) {
  body {
    --section-heading-font-size-s1: 32px;
    --section-xl-para-s1: 28px;
    --section-main-para-s1: 20px;
    --section-card-para-s1: 20px;
    --section-sub-para-s1: 16px;
    --section-sub-para-xs: 16px;
    --cir-annotation-font-size: 16px;
    --cir-svg-wrapper-height: 290px;
    --cir-connecting-lines-height: 290px;
    --ring-3-size: 290px;
  }
}

@media screen and (max-width: 576px) {
  body {
    --section-heading-xl-font-size-t2: 32px;
    --section-heading-font-size-s1: 32px;
    --section-heading-font-size-s2: 24px;
    --hazard-heading-font-size-s1: 24px;
    --section-heading_hero-img-ov-title-v2_font-size: 32px;
    --section-xl-para-s1: 24px;
    --section-main-para-s1: 16px;
    --section-card-para-s1: 18px;
    --section-sub-para-s1: 14px;
    --section-sub-para-xs: 15px;
    --postcard-para-s1: 16.5px;
    --hazard-para-s1: 15px;
    --li-hero-img-ov-title-v1_font-size: 19.5px;
    --li-hero-img-ov-title-v2_font-size: 19.5px;
    --li-hero-timeline_font-size: 16px;
    --cir-annotation-font-size: 14px;
    --row-gap-bw-two-lis: 24px;
    --cir-annotation-width: 40%;
  }
}

@media screen and (max-width: 476px) {
  body {
    --cir-annotation-font-size: 12px;
  }
}

@media screen and (max-width: 425px) {
  body {
    --cir-annotation-font-size: 12px;
  }
}

img,
video {
  user-select: none;
  -webkit-user-select: none;
  /* Chrome, Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Edge */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* mobile */
}

img:focus,
video:focus {
  outline: none;
}

/* ------------------------------------ */
.not-for-mobile {
  display: flex;
}

.not-for-desktop {
  display: flex;
}

@media screen and (max-width: 1024px) {
  .not-for-mobile {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .not-for-desktop {
    display: none !important;
  }
}

.relative {
  position: relative;
}

html {
  scroll-behavior: smooth;
}

/* ------------------------------------ */
/* Start :: layout 01 :: container */
.container {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0px;
}

.container-fluid {
  max-width: 100%;
  padding: 0px;
}

/* Till now :: It is used in "header" section  */
@media screen and (min-width: 1420px) {
  .container {
    width: 100%;
    max-width: 1320px;
  }
}

@media screen and (max-width: 1420px) {
  .container {
    max-width: calc(100% - 60px);
    padding: 0;
  }
}

@media screen and (max-width: 768px) {
  .container {
    max-width: calc(100% - 40px);
    padding: 0;
  }
}

@media screen and (max-width: 576px) {
  .container {
    max-width: calc(100% - 40px);
    padding: 0;
  }
}

/* End :: layout 01 :: container */
/* ------------------------------------ */
.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  display: flex;
  flex-direction: column;
}

ul.footer-cp-text-row,
ul.footer-links-col-content,
ul.navbar-ul-menu,
ul.footer-social-media-box {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.d-none {
  display: none;
}

.contact-btn-light {
  color: var(--contact-btn-color);
  background-color: var(--contact-btn-bg-color);
  border: 1px solid var(--contact-btn-border-color);
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 17.5px 20px;
  text-decoration: none;
  font-weight: 400;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.contact-btn-light:hover {
  background-color: var(--contact-btn-bg-color-on-hover);
  color: var(--contact-btn-color-on-hover);
  border: none;
}

@media screen and (max-width: 1024px) {
  .contact-btn-light {
    padding: 11.2px 15px;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
  }
}

.contact-btn-dark,
.git-contact-btn {
  color: var(--dark-contact-btn-color);
  background-color: var(--dark-contact-btn-bg-color);
  border: 1px solid var(--dark-contact-btn-border-color);
  text-decoration: none;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 17.5px 20px;
  font-weight: 400;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.contact-btn-dark:hover,
.git-contact-btn:hover {
  background-color: var(--dark-contact-btn-bg-color-on-hover);
  color: var(--dark-contact-btn-color-on-hover);
  border: 1px solid var(--dark-contact-btn-border-color-on-hover);
}

@media screen and (max-width: 1024px) {

  .contact-btn-dark,
  .git-contact-btn {
    padding: 11.2px 15px;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
  }
}

.contact-btn-dark-on-dark-bg,
.git-contact-btn.on-dark-bg,
.bnr-contact-btn {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 17.5px 20px;
  font-weight: 400;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: var(--dark-contact-btn-color);
  background-color: var(--dark-contact-btn-bg-color);
  border: 1px solid var(--dark-contact-btn-border-color);
}

.contact-btn-dark-on-dark-bg:hover,
.git-contact-btn.on-dark-bg:hover,
.bnr-contact-btn:hover {
  background-color: var(--on-dark-bg-dark-contact-btn-bg-color-on-hover);
  color: var(--on-dark-bg-dark-contact-btn-color-on-hover);
  border: 1px solid var(--on-dark-bg-dark-contact-btn-border-color-on-hover);
}

@media screen and (max-width: 1024px) {

  .contact-btn-dark-on-dark-bg,
  .git-contact-btn.on-dark-bg,
  .bnr-contact-btn {
    padding: 11.2px 15px;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
  }
}

.section-padding-s1,
.para-num-section,
.process-tab-section,
.diagram-section,
.impact-card-section {
  padding: 120px 0;
}

@media screen and (max-width: 1024px) {

  .section-padding-s1,
  .para-num-section,
  .process-tab-section,
  .diagram-section,
  .impact-card-section {
    padding: 80px 0;
  }
}

@media screen and (max-width: 768px) {

  .section-padding-s1,
  .para-num-section,
  .process-tab-section,
  .diagram-section,
  .impact-card-section {
    padding: 60px 0;
  }
}

.section-heading-s64,
.bnr-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
}

@media screen and (max-width: 1024px) {

  .section-heading-s64,
  .bnr-heading {
    font-size: 36px;
  }
}

.section-heading-s68,
.stat-num-value {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 60px;
  font-weight: 300;
  letter-spacing: 0;
  margin: 0;
}

@media screen and (max-width: 576px) {

  .section-heading-s68,
  .stat-num-value {
    font-size: 40px;
  }
}

.section-sub-heading-s24,
.stat-num-unit {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0;
}

@media screen and (max-width: 576px) {

  .section-sub-heading-s24,
  .stat-num-unit {
    font-size: 20px;
  }
}

.hz-color-bar,
.bnr-hz-color-bar,
.footer-hz-color-bar {
  width: 100%;
  height: 30px;
  display: flex;
}

@media screen and (max-width: 1024px) {

  .hz-color-bar,
  .bnr-hz-color-bar,
  .footer-hz-color-bar {
    height: 24px;
  }
}

@media screen and (max-width: 576px) {

  .hz-color-bar,
  .bnr-hz-color-bar,
  .footer-hz-color-bar {
    height: 16px;
  }
}

.hz-color-bar div,
.bnr-hz-color-bar div,
.footer-hz-color-bar div {
  width: 25%;
  height: 100%;
}

.hz-color-bar div:nth-child(1),
.bnr-hz-color-bar div:nth-child(1),
.footer-hz-color-bar div:nth-child(1) {
  background-color: #747483;
}

.hz-color-bar div:nth-child(2),
.bnr-hz-color-bar div:nth-child(2),
.footer-hz-color-bar div:nth-child(2) {
  background-color: #5353a0;
}

.hz-color-bar div:nth-child(3),
.bnr-hz-color-bar div:nth-child(3),
.footer-hz-color-bar div:nth-child(3) {
  background-color: #3635c3;
}

.hz-color-bar div:nth-child(4),
.bnr-hz-color-bar div:nth-child(4),
.footer-hz-color-bar div:nth-child(4) {
  background-color: #0100ff;
}

.underline-on-hover-s2,
.footer-cp-row .footer-link,
.footer-links-col-content li a,
.footer-cp-text-row li a,
.footer-copyright-link-box a {
  text-decoration-thickness: 1.5px;
  text-decoration-color: white;
  text-underline-offset: 8px;
  transition: 0.3s all linear;
}

.underline-on-hover-s2:hover,
.footer-cp-row .footer-link:hover,
.footer-links-col-content li a:hover,
.footer-cp-text-row li a:hover,
.footer-copyright-link-box a:hover {
  text-decoration-line: underline;
}

.disclaimer-para.light-mode {
  color: var(--web-black-color);
}

.disclaimer-para.dark-mode {
  color: white;
}

/* 25.0.3*/
.both-vt-side-space-xl {
  padding: var(--section_vt_padding_both_side_same-xl) 0;
}

.both-vt-side-margin-space-xl {
  margin: var(--section_vt_padding_both_side_same-xl) 0;
}

.upper-side-vt-space-xl {
  padding: var(--section_vt_padding_both_side_same-xl) 0 0;
}

.lower-side-vt-space-xl {
  padding: 0 0 var(--section_vt_padding_both_side_same-xl) 0;
}

.last-section {
  margin-bottom: var(--last-section-bottom-margin);
}

.hero-section {
  padding-bottom: 53px;
}

.hero-heading-box {
  padding: 70px 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .hero-heading-box {
    padding: 40px 0;
  }
}

@media screen and (max-width: 1024px) {
  .hero-heading-box {
    text-align: left;
  }
}

.hero-heading-box .hero-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-xl-font-size-t2);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--web-water-blue-color);
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .hero-heading-box .hero-heading {
    text-transform: capitalize;
  }
}

.hero-content-layout-box {
  position: relative;
  width: 100%;
  min-height: 489px;
  padding: 54.5px 0;
}

@media screen and (max-width: 1024px) {
  .hero-content-layout-box {
    padding: 0px 0;
  }
}

.hero-img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  max-width: 800px;
  height: 100%;
  z-index: 5;
  -o-object-fit: cover;
  object-fit: cover;
}

.hero-img-left-layout .hero-content-layout {
  justify-content: flex-end;
}

.hero-img-left-layout img.hero-img {
  left: unset;
  right: 50%;
}

@media screen and (max-width: 1024px) {

  .hero-img,
  .hero-img-left-layout .hero-img {
    left: 0%;
    width: 100%;
    max-width: unset;
  }

  .hero-timeline-section .container {
    max-width: 100%;
  }
}

.hero-content-layout {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-content-text-layout {
  width: 64%;
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1320px) {
  .hero-content-text-layout {
    width: 72%;
    margin: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .hero-content-text-layout {
    width: 80%;
    margin: 20px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-content-text-layout {
    width: 100%;
    margin: 20px;
  }
}

.postcard-container {
  /* The "border" is actually the background of this container */
  background: blue;
  padding: 2px;
  /* This defines the border thickness */
  width: 100%;
  /* The cut corner logic */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.postcard-container .postcard-content {
  background: white;
  min-height: 380px;
  padding: 30px 16px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Matching the same clip-path so the white background follows the shape */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 29px), calc(100% - 29px) 100%, 0 100%);
}

@media screen and (max-width: 1024px) {
  .postcard-container .postcard-content {
    min-height: unset;
  }
}

@media screen and (min-width: 576px) and (max-width: 1024px) {
  .postcard-container {
    max-width: 576px;
  }
}

.hero-postcard-text-layout {
  display: flex;
  gap: 65px;
  align-items: center;
  justify-content: space-between;
}

.hero-postcard-text-layout .hero-postcard-text-heading {
  width: 36%;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 38px;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--web-water-blue-color);
  margin: 0;
  height: -moz-max-content;
  height: max-content;
  padding: 0 10px 10px 0px;
  color: blue;
  border-bottom: 2px solid var(--web-water-blue-color);
  -o-border-image: linear-gradient(to left, transparent 60%, var(--web-water-blue-color) 50%) 20;
  border-image: linear-gradient(to left, transparent 60%, var(--web-water-blue-color) 50%) 20;
}

@media screen and (max-width: 768px) {
  .hero-postcard-text-layout .hero-postcard-text-heading {
    font-size: 24px;
  }
}

@media screen and (max-width: 576px) {
  .hero-postcard-text-layout .hero-postcard-text-heading {
    font-size: 24px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-postcard-text-layout .hero-postcard-text-heading {
    width: auto;
  }
}

@media screen and (max-width: 1024px) {
  .hero-postcard-text-layout {
    flex-direction: column;
    row-gap: 24px;
    align-items: flex-start;
  }
}

.hero-postcard-text-para-layout {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.hero-postcard-text-para-layout p {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--postcard-para-s1);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--web-light-black-color);
  max-width: 470px;
  padding-right: 2%;
  margin: 0;
}

.hero-postcard-text-para-layout p .highlight-text {
  font-weight: 500;
  color: var(--web-water-blue-color);
}

@media screen and (max-width: 576px) {
  .hero-postcard-text-para-layout p {
    padding-right: 20px;
  }
}

.efl-sol .hero-postcard-text-para-layout p {
  padding-right: 6%;
}

@media screen and (max-width: 576px) {
  .efl-sol .hero-postcard-text-para-layout p {
    padding-right: 10%;
  }
}

.hero-img-ov-section {
  position: relative;
  width: 100%;
  min-height: 600px;
  padding: 60px 0;
  background-color: var(--web-light-gray-color);
}

.hero-img-ov-img-box {
  width: 100%;
  height: 100%;
}

.hero-img-ov-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-img {
    aspect-ratio: 335/310;
  }
}

.hero-img-ov-img-layout {
  width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-img-layout {
    padding-top: 0px;
    width: 100%;
    height: auto;
  }
}

.hero-img-ov-heading {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-card-para-s1);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  font-weight: 400;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 0px;
  padding: 30px 0 10px 0;
  color: var(--web-light-black-color);
}

.hero-img-ov-outer-layout,
.hero-img-ov-outer-layout-v2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  -moz-column-gap: 20px;
  column-gap: 20px;
  row-gap: 60px;
}

@media screen and (max-width: 1024px) {

  .hero-img-ov-outer-layout,
  .hero-img-ov-outer-layout-v2 {
    flex-direction: column;
  }
}

.hero-img-ov-text-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 594px;
  row-gap: 24px;
  width: 50%;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-text-layout {
    width: 100%;
    height: auto;
  }
}

.hero-img-ov-text-title-layout,
.hero-img-ov-text-title-layout-v2 {
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  row-gap: 60px;
}

@media screen and (max-width: 1024px) {

  .hero-img-ov-text-title-layout,
  .hero-img-ov-text-title-layout-v2 {
    padding-top: 0px;
  }
}

.hero-img-ov-text-title {
  width: 90%;
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  line-height: 1;
  color: var(--web-water-blue-color);
  text-transform: capitalize;
  margin: 0;
  font-weight: 300;
  color: var(--web-black-color);
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-text-title {
    text-transform: capitalize;
  }
}

.hero-img-ov-text-title .highlight-text {
  color: var(--web-water-blue-color);
  font-weight: 400;
}

.hero-img-ov-text-title .highlight {
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-text-title {
    width: 92%;
  }
}

.hero-img-ov-ul-list,
.hero-img-ov-ul-list-v2 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-img-ov-ul-list li,
.hero-img-ov-ul-list-v2 li {
  position: relative;
  padding-left: 32px;
  margin-bottom: var(--row-gap-bw-two-lis);
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--li-hero-img-ov-title-v1_font-size);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--web-black-color);
}

.hero-img-ov-ul-list li:nth-last-child(1),
.hero-img-ov-ul-list-v2 li:nth-last-child(1) {
  margin-bottom: 0;
}

@media screen and (max-width: 576px) {

  .hero-img-ov-ul-list li,
  .hero-img-ov-ul-list-v2 li {
    line-height: 1.2;
    padding-left: 24px;
  }
}

/* Blue square bullet */
.hero-img-ov-ul-list li::before,
.hero-img-ov-ul-list-v2 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  background-color: #0000ff;
}

@media screen and (max-width: 576px) {

  .hero-img-ov-ul-list li::before,
  .hero-img-ov-ul-list-v2 li::before {
    width: 8px;
    height: 8px;
  }
}

/* Blue highlighted numbers */
.highlight {
  color: #0000ff;
  font-weight: 700;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .hero-img-ov-text-title .highlight {
    font-weight: 300;
  }
}

.hero-img-ov-text-para,
.hero-img-ov-bottom-para-v2,
.hero-img-ov-text-para-v2 {
  font-family: "Be Vietnam", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--web-light-black-color);
  letter-spacing: normal;
  width: 90%;
}

/* 4th Section :: results-cards-section*/
.results-cards-section {
  background-color: var(--web-dark-midnight-blue-color);
  padding: 120px 0;
}

@media screen and (max-width: 768px) {
  .results-cards-section {
    padding: 60px 0;
  }
}

.results-cards-section-outer-layout {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 90px;
}

@media screen and (max-width: 768px) {
  .results-cards-section-outer-layout {
    padding-top: 0;
    gap: 48px;
  }
}

.results-section-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  line-height: 1;
  color: var(--web-water-blue-color);
  text-transform: capitalize;
  margin: 0;
  font-weight: 300;
  line-height: 1.2;
  width: 80%;
  color: white;
}

@media screen and (max-width: 1024px) {
  .results-section-heading {
    text-transform: capitalize;
  }
}

.metric-cards-grid {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

@media screen and (max-width: 1024px) {
  .metric-cards-grid {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 576px) {
  .metric-cards-grid {
    justify-content: center;
    gap: 20px;
  }
}

.metric-card {
  background: transparent;
  padding: 4px;
  display: inline-block;
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.metric-card .metric-card-content {
  width: 412px;
  height: 534px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(calc(28px - 4px) 0, calc(100% - (28px - 4px)) 0, 100% calc(28px - 4px), 100% calc(100% - (28px - 4px)), calc(100% - (28px - 4px)) 100%, calc(28px - 4px) 100%, 0 calc(100% - (28px - 4px)), 0 calc(28px - 4px));
}

.metric-card:hover {
  background: var(--web-fresh-green-color);
  padding: 4px;
  display: inline-block;
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
}

.metric-card:hover .metric-card-content {
  width: 412px;
  height: 534px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(calc(28px - 4px) 0, calc(100% - (28px - 4px)) 0, 100% calc(28px - 4px), 100% calc(100% - (28px - 4px)), calc(100% - (28px - 4px)) 100%, calc(28px - 4px) 100%, 0 calc(100% - (28px - 4px)), 0 calc(28px - 4px));
}

@media screen and (max-width: 576px) {
  .metric-card .metric-card-content {
    width: 100%;
    min-height: 420px;
    height: 433px;
  }

  .metric-card:hover .metric-card-content {
    width: 100%;
    height: 433px;
  }
}

/* Image */
.metric-card-content img {
  width: 100%;
  height: 66.75%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Overlay */
.metric-card-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* IMPORTANT: limit gradient area */
  height: 92%;
  background: linear-gradient(180deg, rgba(1, 0, 153, 0) 0%, rgb(1, 0, 153) 67.11%);
  z-index: 1;
  pointer-events: none;
}

/* Text */
.metric-card-text {
  position: absolute;
  bottom: 24px;
  left: 20px;
  right: 20px;
  z-index: 2;
  width: 70%;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 32px;
  color: #fff;
  font-weight: 300;
  line-height: 1.2;
}

.metric-card-text .highlight-text {
  color: var(--web-fresh-green-color);
  font-size: 32px;
  font-weight: 400;
}

@media screen and (min-width: 1024px) {
  .hero-timeline-section .hero-content-layout-box {
    padding: 70px 0;
    height: 690px;
  }

  .hero-timeline-section .hero-content-layout,
  .hero-timeline-section .container {
    height: 100%;
  }

  .hero-timeline-section .hero-img-left-layout .hero-content-text-layout {
    width: 50%;
    height: 100%;
  }

  .hero-timeline-section .hero-img-left-layout.li-less-points .hero-content-text-layout {
    height: 80%;
  }

  .hero-timeline-section .hero-text-left-layout .hero-content-text-layout {
    width: 45%;
    height: 100%;
  }

  .hero-timeline-section .hero-text-left-layout.li-less-points .hero-content-text-layout {
    height: 80%;
  }
}

@media screen and (max-width: 1024px) {
  .hero-timeline-section .hero-content-layout-box {
    height: auto;
  }

  .hero-timeline-section .hero-img {
    position: relative;
    right: unset;
    left: unset;
  }

  .hero-timeline-section .hero-content-layout {
    flex-direction: column-reverse;
  }
}

@media screen and (max-width: 1024px) {
  .hero-timeline-section .hero-img {
    aspect-ratio: 375/250;
  }
}

.hero-timeline-section .hero-content-layout {
  row-gap: var(--timeline-ul-li-vt-padding);
}

.hero-timeline-section .hero-content-text-layout {
  margin: 0;
  padding-bottom: var(--timeline-ul-li-vt-padding);
  padding-left: 20px;
  padding-right: 0px;
}

@media screen and (max-width: 576px) {
  .hero-timeline-section .hero-content-text-layout {
    padding-left: 6%;
  }
}

.hero-timeline {
  position: relative;
  padding-left: 80px;
  max-width: 700px;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media screen and (min-width: 1024px) {
  .hero-timeline {
    padding-left: 80px;
  }

  .hero-text-left-layout .hero-timeline {
    padding-left: 52px;
  }
}

@media screen and (max-width: 576px) {
  .hero-timeline {
    padding-left: 24px;
  }
}

/* Timeline item */
.hero-timeline-item {
  position: relative;
  height: 100%;
  padding-bottom: var(--timeline-ul-li-vt-padding);
}

@media screen and (max-width: 576px) {
  .hero-timeline-item {
    width: 92%;
  }
}

.hero-timeline-item:nth-last-child(1) {
  height: auto;
  padding-bottom: 0;
}

.hero-timeline-item:nth-last-child(1)::before {
  height: 0;
}

/* Vertical line */
.hero-timeline-item::before {
  content: "";
  position: absolute;
  left: -41px;
  top: 6px;
  bottom: -6px;
  width: 2px;
  background: #0000ff;
}

@media screen and (max-width: 576px) {
  .hero-timeline-item::before {
    left: -25px;
  }
}

/* Square node */
.hero-timeline-dot {
  position: absolute;
  left: -47px;
  top: 6px;
  width: 14px;
  height: 14px;
  background: #0000ff;
}

@media screen and (max-width: 576px) {
  .hero-timeline-dot {
    width: 8px;
    height: 8px;
    left: -28px;
  }
}

/* Text content */
.hero-timeline-content {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 300;
  color: var(--web-black-color);
}

@media screen and (max-width: 576px) {
  .hero-timeline-content {
    font-size: 20px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-timeline-content {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .hero-timeline-content {
    font-size: 16px;
    text-transform: unset;
  }
}

/* Blue highlighted text */
.hero-timeline-title {
  color: var(--web-water-blue-color);
  font-weight: 500;
}

.timeline-section-layout {
  background-color: var(--web-water-blue-color);
  padding: 53px 0;
}

.timeline-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 42px;
  text-transform: capitalize;
  color: var(--web-water-blue-color);
  margin: 0;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 300;
  text-transform: capitalize;
  color: white;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .timeline-heading {
    font-size: 36px;
  }
}

@media screen and (max-width: 576px) {
  .timeline-heading {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  .hero-content-text-layout {
    display: flex;
    align-items: center;
  }

  .hero-timeline {
    height: auto;
  }

  .hero-timeline-content {
    min-height: 80px;
    padding-right: 0px;
    max-width: 520px;
  }

  .hero-text-left-layout .hero-timeline-content {
    padding-right: 20px;
  }

  .hero-timeline-item {
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-timeline-content {
    padding-right: 6%;
  }
}

.hero-img-ov-text-title-v2 {
  width: 90%;
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  line-height: 1;
  color: var(--web-water-blue-color);
  text-transform: capitalize;
  margin: 0;
  font-weight: 300;
  color: var(--web-black-color);
  font-size: var(--section-heading_hero-img-ov-title-v2_font-size);
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-text-title-v2 {
    text-transform: capitalize;
  }
}

.hero-img-ov-text-title-v2 .highlight-text {
  color: var(--web-water-blue-color);
  font-weight: 400;
}

.hero-img-ov-text-title-v2 .highlight {
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-text-title-v2 {
    width: 92%;
  }
}

.hero-img-ov-text-title-v2 .highlight {
  font-weight: 300;
}

@media screen and (max-width: 768px) {
  .hero-img-ov-text-title-v2 {
    width: 84%;
    word-break: break-all;
  }
}

.sew-sol .hero-img-ov-text-title-v2 {
  text-transform: capitalize;
}

@media screen and (max-width: 768px) {
  .sew-sol .hero-img-ov-text-title-v2 {
    width: 88%;
    word-break: unset;
  }
}

.hero-img-ov-text-layout-v2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 594px;
  row-gap: 24px;
  width: 50%;
  height: 610px;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-text-layout-v2 {
    width: 100%;
    height: auto;
  }
}

.hero-img-ov-img-layout-v2 {
  width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-img-layout-v2 {
    padding-top: 0px;
    width: 100%;
    height: auto;
  }
}

.hero-img-ov-section-v2 {
  position: relative;
  width: 100%;
  min-height: 600px;
  padding: 60px 0;
  background-color: var(--web-light-gray-color);
  padding: var(--section_vt_padding_both_side_same-xl) 0 0;
  background-color: white;
}

.hero-img-ov-outer-layout-v2 {
  -moz-column-gap: 32px;
  column-gap: 32px;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-outer-layout-v2 {
    flex-direction: column-reverse;
    row-gap: 0;
  }
}

.hero-img-ov-section-v2.hero-img-left-layout .hero-img-ov-outer-layout-v2 {
  flex-direction: row-reverse;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.hero-img-left-layout .hero-img-ov-outer-layout-v2 {
    flex-direction: column-reverse;
  }
}

.hero-img-ov-text-title-layout-v2 {
  padding-top: 40px;
  row-gap: 32px;
}

.hero-img-ov-text-para-v2 {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--li-hero-img-ov-title-v1_font-size);
  margin: 0;
}

@media screen and (max-width: 576px) {
  .hero-img-ov-text-para-v2 {
    width: 100%;
    font-size: 16px;
  }
}

.hero-img-ov-bottom-para-v2 {
  width: 100%;
  font-family: "Be Vietnam", sans-serif;
  font-size: 18px;
  margin: 0;
  padding: var(--disclaimer-vt-padding) 0;
}

@media screen and (max-width: 576px) {
  .hero-img-ov-bottom-para-v2 {
    font-size: 14px;
    width: 92%;
  }
}

.waste-water-section {
  width: 100%;
  margin-top: 120px;
}

.waste-water-section .container {
  height: 100%;
}

@media screen and (max-width: 768px) {
  .waste-water-section {
    margin-top: 60px;
  }
}

@media screen and (max-width: 576px) {
  .waste-water-section {
    margin-top: 0px;
  }
}

.waste-water-section-layout {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.waste-water-bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.waste-water-bg-img.mobile-img {
  display: none;
}

@media screen and (max-width: 1024px) {
  .waste-water-bg-img.mobile-img {
    display: block;
  }
}

.waste-water-heading-layout {
  color: white;
  z-index: 50;
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 300px;
  justify-content: space-between;
  padding: 108px 0;
}

@media screen and (max-width: 1024px) {
  .waste-water-heading-layout {
    row-gap: 310px;
    padding: 40px 0 0;
  }
}

.waste-water-upper-heading {
  display: flex;
  justify-content: flex-start;
}

.waste-water-lower-heading {
  display: flex;
  justify-content: flex-end;
}

.waste-water-heading-text {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.5;
  text-transform: capitalize;
  color: white;
  margin: 0;
  width: 52%;
}

@media screen and (max-width: 768px) {
  .waste-water-heading-text {
    font-size: 36px;
    text-transform: capitalize;
  }
}

@media screen and (max-width: 576px) {
  .waste-water-heading-text {
    font-size: 24px;
  }
}

.waste-water-heading-text .highlight-text {
  background-color: var(--web-water-blue-color);
  font-weight: 300;
  padding: 12px;
}

.waste-water-heading-text.left-align-text {
  text-align: left;
}

.waste-water-heading-text.right-align-text {
  text-align: right;
}

@media screen and (min-width: 1025px) {
  .waste-water-heading-text {
    width: 660px;
  }
}

@media screen and (max-width: 1024px) {
  .waste-water-heading-text {
    width: 80%;
  }
}

@media screen and (max-width: 576px) {
  .waste-water-heading-text {
    width: 90%;
  }
}

.section-bottom-colored-box {
  width: 100%;
  background-color: var(--web-water-blue-color);
}

.question-heading-layout {
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

@media screen and (max-width: 1024px) {
  .question-heading-layout {
    padding: 32px 0;
    row-gap: 40px;
  }
}

.question-heading {
  width: 92%;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 40px;
  line-height: 1.35;
  text-transform: capitalize;
  margin: 0;
  font-weight: 400;
  color: white;
}

@media screen and (max-width: 1024px) {
  .question-heading {
    font-size: 28px;
  }
}

.question-content-para {
  width: 92%;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 40px;
  line-height: 1.35;
  font-weight: 200;
  line-height: 1.25;
  color: white;
}

@media screen and (max-width: 1024px) {
  .question-content-para {
    font-size: 28px;
  }
}

.section-bottom-colored-box.message-box .question-heading-layout {
  flex-direction: column-reverse;
  width: 70%;
}

.section-bottom-colored-box.message-box .question-heading-layout .question-heading {
  line-height: 1.2;
}

@media screen and (max-width: 1024px) {
  .section-bottom-colored-box.message-box .question-heading-layout {
    margin: 0;
    width: 100%;
  }
}

.section-bottom-colored-box.message-box .question-content-para {
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .question-content-para {
    margin: 0;
  }

  .efl-sol .question-content-para {
    text-transform: capitalize;
  }
}

.get-in-touch-section.both-vt-side-space {
  padding: var(--section_vt_padding_both_side_same-xl) 0;
}

.hazard-section {
  margin: var(--section_vt_padding_both_side_same-xl) 0;
  background-color: var(--web-light-gray-color);
}

@media screen and (max-width: 1024px) {
  .hazard-section {
    margin: 0px 0 0px 0;
    background-color: white;
  }
}

.hazard-full-img-box {
  width: 100%;
  height: 535px;
  position: relative;
}

.hazard-full-img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .hazard-full-img-box {
    height: 405px;
  }
}

.hazard-card {
  width: 100%;
  background: var(--web-water-blue-color);
  padding: 4px;
  display: inline-block;
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hazard-card .hazard-card-content {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  clip-path: polygon(calc(28px - 4px) 0, calc(100% - (28px - 4px)) 0, 100% calc(28px - 4px), 100% calc(100% - (28px - 4px)), calc(100% - (28px - 4px)) 100%, calc(28px - 4px) 100%, 0 calc(100% - (28px - 4px)), 0 calc(28px - 4px));
}

.hazard-card-content {
  width: 100%;
  padding: 40px;
}

@media screen and (max-width: 1024px) {
  .hazard-card-content {
    padding: 25px;
  }
}

.prevailing-challenges-section-outer-layout {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
  margin-top: -104px;
  padding-bottom: 60px;
}

@media screen and (max-width: 1024px) {
  .prevailing-challenges-section-outer-layout {
    margin-top: -175px;
  }
}

@media screen and (max-width: 576px) {
  .prevailing-challenges-section-outer-layout {
    row-gap: 40px;
  }
}

.hazard-content-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
}

@media screen and (max-width: 1024px) {
  .hazard-content-wrapper {
    align-items: flex-start;
    gap: 23px;
  }
}

@media screen and (max-width: 576px) {
  .hazard-content-wrapper {
    gap: 23px;
  }
}

.hazard-heading-section {
  flex: 1 1 39%;
}

.hazard-heading-section .hazard-heading-text {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--hazard-heading-font-size-s1);
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
  margin: 0;
  /* White */
  color: white;
  width: 92%;
}

@media screen and (max-width: 1024px) {
  .hazard-heading-section .hazard-heading-text {
    text-transform: capitalize;
  }
}

@media screen and (max-width: 1024px) {
  .hazard-heading-section .hazard-heading-text {
    width: 100%;
  }
}

.hazard-text-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--hazard-para-s1);
  font-weight: 400;
  line-height: 1.2;
  /* White */
  color: rgba(255, 255, 255, 0.9);
  width: 100%;
  margin: 0;
  padding-right: 15px;
}

@media screen and (max-width: 1024px) {
  .hazard-text-para {
    text-transform: unset;
    padding-right: 8%;
  }
}

.hazard-divider {
  width: 1.5px;
  height: 200px;
  background-color: rgb(255, 255, 255);
  /* Semi-transparent white */
}

.hazard-text-section {
  flex: 2 1 50%;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 1024px) {
  .hazard-content-wrapper {
    flex-direction: column;
    text-align: left;
  }

  .hazard-divider {
    width: 100%;
    height: 1px;
  }
}

.hazard-output-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--hazard-heading-font-size-s1);
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
  margin: 0;
  /* White */
  color: var(--web-water-blue-color);
}

@media screen and (max-width: 1024px) {
  .hazard-output-heading {
    text-transform: capitalize;
  }
}

.hazard-output-para {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--hazard-heading-font-size-s1);
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
  margin: 0;
  /* White */
  color: var(--web-black-color);
  width: 92%;
}

@media screen and (max-width: 1024px) {
  .hazard-output-para {
    text-transform: capitalize;
  }
}

@media screen and (max-width: 1024px) {
  .hazard-output-para {
    padding-right: 4%;
    width: auto;
  }
}

.hazard-output-layout {
  display: flex;
  flex-direction: column;
}

.hz-color-bar-v2 {
  width: 100%;
  height: 20px;
  display: flex;
  height: 16px;
}

@media screen and (max-width: 1024px) {
  .hz-color-bar-v2 {
    height: 18px;
  }
}

@media screen and (max-width: 576px) {
  .hz-color-bar-v2 {
    height: 16px;
  }
}

.hz-color-bar-v2 div {
  width: 25%;
  height: 100%;
}

.hz-color-bar-v2 div:nth-child(1) {
  background-color: #747483;
}

.hz-color-bar-v2 div:nth-child(2) {
  background-color: #5353a0;
}

.hz-color-bar-v2 div:nth-child(3) {
  background-color: #3635c3;
}

.hz-color-bar-v2 div:nth-child(4) {
  background-color: #0100ff;
}

@media screen and (max-width: 1024px) {
  .hz-color-bar-v2 {
    height: 20px;
  }
}

/* General Reset */
.hero-img-ov-section-v2.text-img-start-from-same-height .hero-img-ov-text-layout-v2 {
  height: auto;
}

.hero-img-ov-section-v2.text-img-start-from-same-height .hero-img-ov-img-box {
  height: 466px;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.text-img-start-from-same-height .hero-img-ov-img-box {
    height: auto;
  }
}

.hero-img-ov-section-v2.text-img-start-from-same-height .hero-img-ov-text-title-layout-v2 {
  padding-top: 0;
}

@media screen and (max-width: 1024px) {
  .get-in-touch-section .hero-img-ov-bottom-para-v2 {
    display: none;
  }

  .get-in-touch-section.efl-sol {
    padding-top: 80px;
  }
}

@media screen and (max-width: 1024px) and (max-width: 768px) {
  .get-in-touch-section.efl-sol {
    padding-top: 60px;
  }
}

@media screen and (max-width: 1024px) {
  .disclaimer-para {
    font-family: "Be Vietnam", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: capitalize;
    position: relative;
    color: white;
    opacity: 0.7;
    margin-top: 24px;
    margin-bottom: 20px;
  }
}

.waste-water-section-layout {
  position: relative;
}

/* 25.0.3*/
body {
  margin: 0;
}

.header-section {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: var(--navbar-vt-padding) 0;
  background: var(--header-bg-color);
  transform: translateY(0px);
  position: fixed;
  width: 100%;
  z-index: 999;
  /* stay above everything else */
  transition: transform 0.8s ease, opacity 0.7s ease;
  will-change: transform, opacity;
  /* boosts performance */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Logo ::  */
/* ------------------------------------ */
.brand-logo,
.navbar-toggler-btn {
  position: relative;
  z-index: 100;
}

.brand-logo {
  width: var(--navbar-logo-width);
  height: 60px;
}

@media screen and (max-width: 1024px) {
  .brand-logo {
    width: var(--navbar-logo-width-on-mobile);
    height: 45px;
  }
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/* ------------------------------------ */
/* ------------------------------------ */
/* Start :: Menu-hz-group-box */
.navbar-ul-menu {
  /* to delete intial default dot of ul-li :: list-style-type: none; */
  list-style-type: none;
  display: flex;
  -moz-column-gap: var(--navbar-ul-menu-column-space);
  column-gap: var(--navbar-ul-menu-column-space);
  flex-wrap: wrap;
  text-decoration: none;
  padding-left: 0px;
  background: var(--navbar-ul-menu-bg-color);
}

/* menu names style  */
.navbar-li-item a {
  display: inline-flex;
  justify-content: center;
  color: var(--navbar-ul-menu-color);
  text-underline-offset: var(--navbar-ul-menu-text-underline-offset);
  text-transform: capitalize;
  /* below both will change on hover :: 
  :: font-weight::400 to 700 and text-decoration:: none to underline  */
  text-decoration: none;
}

.navbar-li-item a:hover {
  text-decoration-line: underline;
  color: var(--navbar-ul-menu-hover-color);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--navbar-ul-menu-text-underline-offset-color);
}

.navbar-li-item a:active {
  text-decoration-line: underline;
  color: var(--navbar-ul-menu-hover-color);
  text-decoration-color: var(--navbar-ul-menu-text-underline-offset-color);
}

.navbar-li-item.current-menu-item a {
  text-decoration-line: underline;
  color: var(--navbar-ul-menu-hover-color);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--navbar-ul-menu-text-underline-offset-color);
}

.navbar-li-item.current-menu-parent .sub-menu .navbar-li-item.current-menu-item a {
  text-decoration: none;
}

/*For Responsiveness */
@media screen and (max-width: 1024px) {
  .navbar-ul-menu {
    z-index: 90;
    position: absolute;
    /* This is navbar hight */
    top: 0;
    left: 0px;
    padding: 0px;
    /* When user click on "navbar-toggler-btn" ,
    javascript impose "active" class on "ul", 
    then  display: none => display: flex;  */
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 24px;
    background-color: var(--navbar-ul-menu-bg-color-on-mobile);
    width: 0%;
    height: 0px;
    transition: 0.5s all linear;
  }

  .navbar-li-item {
    width: 100%;
    text-align: center;
    margin: 1.5rem 0;
  }

  .navbar-li-item a {
    font-size: 18px;
  }
}

/* End :: Menu-HZ-group-box */
/* ------------------------------------ */
/* ------------------------------------ */
/* Start :: navbar-toggler-btn-mobile */
.navbar-toggler-btn {
  display: none;
  background-color: transparent;
  border: none;
}

.navbar-toggler-btn .navbar-toggler-icon-img.open-the-menu-icon {
  display: flex;
}

.navbar-toggler-btn .navbar-toggler-icon-img.close-the-menu-icon {
  display: none;
}

.navbar-toggler-btn.opened .navbar-toggler-icon-img.close-the-menu-icon {
  display: flex;
}

.navbar-toggler-btn.opened .navbar-toggler-icon-img.open-the-menu-icon {
  display: none;
}

.navbar-toggler-btn.opened .navbar-toggler-icon-img.open-the-menu-icon {
  width: 20px;
  height: 20px;
  /* make it white-stroke */
}

.navbar-toggler-btn.opened .navbar-toggler-icon-img.close-the-menu-icon {
  width: 0;
  height: 0;
  opacity: 0;
  /* make it white-stroke */
  transition: 2s all linear;
}

@media screen and (max-width: 1024px) {
  .navbar-toggler-btn {
    display: flex;
    order: 2;
  }
}

/* End :: navbar-toggler-btn-mobile */
/* ------------------------------------ */
/* When navbar-toggler-btn opened :: */
@media screen and (max-width: 1024px) {
  .navbar-ul-menu {
    background-color: white;
    visibility: hidden;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    min-height: calc(100vh - var(--navbar-height) + 1px);
    justify-content: center;
    text-align: left;
    -moz-column-gap: 0;
    column-gap: 0;
    margin-top: -1px;
    opacity: 0;
  }

  .header-section.nav-icon-opened .navbar-ul-menu.active {
    opacity: 1;
    visibility: visible;
  }

  .navbar-li-item {
    margin: 0px;
  }

  .navbar-li-item a {
    font-size: 24px;
    letter-spacing: 0.5px;
    font-weight: 300 !important;
    text-underline-offset: 12px;
  }

  button.navbar-toggler-btn.opened {
    margin-bottom: 4px;
  }

  .navbar-toggler-icon-img {
    transition: 0.6s all linear;
  }
}

/* When navbar-toggler-btn opened :: */
/* ------------------------------------ */
/* navbar-contact-btn */
.navbar-contact-btn {
  color: var(--contact-btn-color);
  background-color: var(--contact-btn-bg-color);
  border: 1px solid var(--contact-btn-border-color);
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 17.5px 20px;
  font-weight: 400;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .navbar-contact-btn {
    padding: 13px 15px;
    text-transform: capitalize;
    order: 1;
  }
}

.navbar-contact-btn:hover {
  background-color: var(--contact-btn-bg-color-on-hover);
  color: var(--contact-btn-color-on-hover);
  border-color: transparent;
}

/* ------------------------------------ */
@media screen and (max-width: 1024px) {
  .navbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
  }

  .navbar-contact-btn {
    order: 1;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    font-size: 12px;
  }

  .navbar-toggler-btn {
    order: 2;
    width: 36px;
    height: 36px;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navbar-toggler-btn.opened {
    background: transparent;
  }
}

.navbar-ul-menu .sub-menu {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
  row-gap: 10px;
  min-width: auto;
}

.navbar-li-item {
  position: relative;
}

.navbar-ul-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -15%;
  background: #fff;
  min-width: auto;
  box-shadow: none;
  z-index: 999;
}

.navbar-ul-menu li {
  cursor: pointer;
}

.navbar-ul-menu li>.sub-menu {
  display: none;
}

.navbar-ul-menu li.menu-opened>.sub-menu {
  display: flex;
}

.sub-menu li a {
  display: block;
  padding: 10px;
  white-space: nowrap;
}

ul.sub-menu .navbar-li-item a:hover {
  text-decoration-line: none;
  font-weight: 300;
}

.navbar-ul-menu li.menu-item-has-children a {
  align-items: flex-start;
  -moz-column-gap: 10px;
  column-gap: 10px;
}

.navbar-ul-menu li.menu-item-has-children>a::after {
  content: "";
  margin-top: 3px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.navbar-ul-menu li.menu-item-has-children:hover>a::after {
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  .navbar-ul-menu li.menu-item-has-children>a::after {
    margin-top: -3px;
  }

  .navbar-ul-menu li.menu-item-has-children a {
    align-items: center;
  }
}

/* 25.0.3*/
.footer-section {
  background-color: var(--web-dark-midnight-blue-color);
  color: #fff;
  padding: 60px 0;
}

@media screen and (max-width: 1024px) {
  .footer-section {
    padding: 40px 0;
  }
}

.footer-img-fit {
  width: 100%;
  height: 340px;
}

.footer-img-fit img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .footer-img-fit {
    height: 200px;
  }
}

h5.footer-links-col-heading {
  margin: 0;
}

footer .footer-links-col-content {
  margin: 0;
  list-style: none;
  padding-left: 0;
  gap: 20px 8px;
}

@media screen and (max-width: 576px) {
  footer .footer-links-col-content {
    gap: 16px 8px;
  }
}

.footer-link {
  text-decoration: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-cp-row .footer-link {
  text-decoration-thickness: 1px;
}

.footer-links-col-content li a {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 300;
  font-weight: 400;
}

@media screen and (max-width: 1200px) {
  .footer-links-col-content li a {
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  .footer-links-col-content li a {
    font-size: 12px;
  }
}

.footer-main-row {
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 48px;
}

@media screen and (max-width: 1024px) {
  .footer-main-row {
    flex-direction: column;
  }
}

.footer-links-cols-row {
  -moz-column-gap: 100px;
  column-gap: 100px;
  row-gap: 60px;
}

@media screen and (max-width: 1200px) {
  .footer-links-cols-row {
    -moz-column-gap: 90px;
    column-gap: 90px;
  }
}

.footer-hr-line {
  width: 100%;
  height: 1px;
  background-color: white;
  border: none;
  margin: 32px 0;
}

@media screen and (max-width: 1024px) {
  .footer-hr-line {
    max-width: 427px;
    margin: 12px 0;
  }
}

.footer-cp-row {
  justify-content: space-between;
  align-items: center;
  row-gap: 24px;
}

.footer-cp-text-row {
  -moz-column-gap: 24px;
  column-gap: 24px;
  row-gap: 20px;
}

.footer-cp-text-row li {
  font-size: 12px;
  font-weight: 400;
  color: white;
  text-decoration: none;
}

.footer-cp-text-row li a {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: white;
  text-decoration: none;
}

.footer-social-media-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-logo-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-copyright-link-box a {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: white;
  text-decoration: none;
}

.footer-designed-text {
  font-size: 12px;
  font-weight: 400;
  color: white;
  text-decoration: none;
}

.footer-links-col-content.only-for-mobile,
.footer-copyright-link-box.only-for-mobile {
  display: none;
}

.footer-social-media-box.only-for-desktop,
.footer-copyright-link-box.only-for-desktop {
  display: flex;
}

@media screen and (max-width: 1024px) {
  .footer-links-cols-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: flex-start;
    -moz-column-gap: 15px;
    column-gap: 15px;
  }
}

@media screen and (max-width: 768px) {
  .footer-links-cols-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 576px) {
  .footer-links-cols-row {
    grid-template-columns: repeat(2, minmax(auto, 156px));
  }
}

@media screen and (max-width: 1024px) {

  .footer-links-col-content.only-for-mobile,
  .footer-copyright-link-box.only-for-mobile {
    display: flex;
  }

  .footer-social-media-box.only-for-desktop,
  .footer-copyright-link-box.only-for-desktop {
    display: none;
  }

  img.ft-sm-icon {
    width: 15px;
    height: 15px;
  }

  .footer-links-col-content {
    max-width: 156px;
    width: 100%;
  }

  .footer-links-col-content ul.row.footer-social-media-box {
    display: flex;
    -moz-column-gap: 8px;
    column-gap: 8px;
    flex-wrap: wrap;
  }

  .footer-links-col-content a[aria-label="Social media link"] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 1024px) {
  .footer-logo {
    width: 56px;
    height: auto;
  }

  .footer-main-row {
    padding-bottom: 40px;
  }

  .footer-main-row,
  .footer-links-cols-row {
    row-gap: 40px;
  }
}

@media screen and (max-width: 576px) {
  .footer-links-cols-row {
    justify-content: flex-start;
  }
}

/* 25.0.3*/
.bnr-section {
  width: 100%;
  height: 830px;
  position: relative;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 50;
  background: black;
}

@media screen and (max-width: 1024px) {
  .bnr-section {
    min-height: unset;
    max-height: unset;
    height: auto;
  }
}

.bnr-section img {
  position: absolute;
  z-index: -5;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome, Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Edge */
}

.bnr-section .container {
  height: 100%;
}

@media screen and (max-width: 1024px) {
  .bnr-section .container {
    height: auto;
  }
}

.bnr-layout {
  height: 100%;
  padding: 146px 0 116px 0;
  row-gap: 70px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.bnr-layout .bnr-heading-layout {
  width: 50%;
}

@media screen and (max-width: 1024px) {
  .bnr-layout .bnr-heading-layout {
    width: 100%;
  }
}

.bnr-layout .bnr-para-layout {
  width: 600px;
}

@media screen and (max-width: 768px) {
  .bnr-layout .bnr-para-layout {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .bnr-layout {
    height: auto;
    flex-direction: column;
    padding: 120px 0;
    row-gap: 32px;
  }
}

@media screen and (max-width: 576px) {
  .bnr-layout {
    height: auto;
    flex-direction: column;
    padding: 85px 0 85px;
    row-gap: 32px;
  }
}

.bnr-section .bnr-heading-layout {
  padding-top: 85px;
  transition: 0.3s all ease-in;
}

@media screen and (max-width: 1024px) {
  .bnr-section .bnr-heading-layout {
    padding-top: 40px;
  }
}

.bnr-heading {
  color: white;
  width: 544px;
  margin: 0;
  word-wrap: break-word;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  .bnr-heading {
    width: 100%;
    text-transform: capitalize;
  }
}

.bnr-para-layout {
  justify-content: flex-end;
  row-gap: 0px;
  align-items: flex-start;
}

@media screen and (max-width: 576px) {
  .bnr-para-layout {
    row-gap: 32px;
  }
}

.bnr-btns-layout {
  width: 100%;
  height: auto;
  display: flex;
}

@media screen and (max-width: 576px) {
  .bnr-btns-layout {
    width: unset;
    height: unset;
  }
}

.bnr-contact-btn {
  margin-top: 60px;
}

@media screen and (max-width: 1024px) {
  .bnr-contact-btn {
    margin-top: unset;
  }
}

.bnr-para {
  display: flex;
  justify-self: flex-end;
  width: 100%;
  line-height: 1.2;
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  color: white;
  opacity: 1;
}

@media screen and (max-width: 576px) {
  .bnr-para {
    min-width: unset;
    width: 100%;
    text-transform: capitalize;
  }
}

.bnr-hz-color-bar {
  height: 20px;
  margin-top: -20px;
  --rise-duration: 2000ms;
  --easing: cubic-bezier(.22, .61, .36, 1);
  /* nice ease-out */
}

.bnr-hz-color-bar div {
  z-index: -5;
  transition: all var(--rise-duration) var(--easing);
}

@media screen and (max-width: 576px) {
  .bnr-hz-color-bar {
    height: 15px;
  }
}

.bnr-section .dark-img {
  opacity: 1;
  transition: 0.3s all linear;
}

.bnr-section .light-img {
  opacity: 0;
  transition: 0.3s all linear;
}

.bnr-section.img-changed .light-img {
  opacity: 1;
}

.mobile-bg-banner-img {
  display: none;
}

section.bnr-section.on-scroll-bnr-img-not-change {
  /* ------------------- */
  /* --- Tech-page bnr-section on-scroll :: don't change img...  --- */
  /* --- So, dark-img opacity will not change to 0. It will be 1.  --- */
}

.bnr-layout,
.bnr-hz-color-bar {
  position: relative;
}

.bnr-hz-color-bar {
  z-index: 50;
}

.index-bnr-section .dark-img,
.index-bnr-section .light-img,
.index-bnr-section .mobile-bg-banner-img {
  margin-top: 96px;
  max-height: 734px;
  -o-object-fit: fill;
  object-fit: fill;
  width: 100%;
}

@media screen and (max-width: 1024px) {

  .index-bnr-section .dark-img,
  .index-bnr-section .light-img,
  .index-bnr-section .mobile-bg-banner-img {
    margin-top: 85px;
    max-height: 585px;
  }
}

@media screen and (max-width: 576px) {

  .index-bnr-section .dark-img,
  .index-bnr-section .light-img,
  .index-bnr-section .mobile-bg-banner-img {
    -o-object-fit: cover;
    object-fit: cover;
  }
}

.index-bnr-section .bnr-para {
  width: 498px;
}

.index-bnr-section .bnr-para p {
  margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
  .index-bnr-section .bnr-para p {
    margin: 0;
  }
}

@media screen and (max-width: 576px) {
  .index-bnr-section .bnr-para {
    min-width: unset;
    width: 100%;
    max-width: 435px;
  }
}

@media screen and (max-width: 1024px) {
  .index-bnr-section .dark-img {
    display: none;
  }

  .index-bnr-section .light-img {
    display: none;
  }

  .index-bnr-section .mobile-bg-banner-img {
    display: block;
    opacity: 1;
    filter: grayscale(1) brightness(0.25);
    transform: scaleX(-1) scaleY(0.95);
  }

  .index-bnr-section .dark-img,
  .index-bnr-section .light-img,
  .index-bnr-section .mobile-bg-banner-img {
    max-height: 600px;
  }
}

.index-bnr-section .bnr-layout .bnr-para-layout {
  width: 498px;
}

@media screen and (max-width: 768px) {
  .index-bnr-section .bnr-layout .bnr-para-layout {
    width: 98%;
  }
}

@media screen and (max-width: 1024px) {
  .index-bnr-section {
    width: 100%;
    height: 668px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .index-bnr-section .container {
    margin-top: 0;
    margin-bottom: auto;
  }
}

.about-bnr-section .bnr-para {
  width: 498px;
}

.about-bnr-section .bnr-para p {
  margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
  .about-bnr-section .bnr-para p {
    margin: 0;
  }
}

@media screen and (max-width: 576px) {
  .about-bnr-section .bnr-para {
    min-width: unset;
    width: 100%;
    text-transform: unset;
  }
}

.about-bnr-section .dark-img {
  opacity: 0.35;
}

.about-bnr-section .dark-img,
.about-bnr-section .light-img,
.about-bnr-section .mobile-bg-banner-img {
  filter: grayscale(0.5) brightness(0.5);
  -o-object-position: center -130px;
  object-position: center -130px;
}

.about-bnr-section .bnr-layout .bnr-para-layout {
  width: 498px;
}

@media screen and (max-width: 768px) {
  .about-bnr-section .bnr-layout .bnr-para-layout {
    width: 94%;
  }
}

@media screen and (min-width: 1025px) {
  .about-bnr-section .dark-img {
    filter: brightness(0.2);
    opacity: 1;
    -o-object-position: 18% -68px;
    object-position: 18% -68px;
  }
}

@media screen and (max-width: 1024px) {
  .about-bnr-section {
    width: 100%;
    padding-top: 100px;
    height: 668px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .about-bnr-section .container {
    width: 100%;
    margin-bottom: 0;
  }

  .about-bnr-section .bnr-layout {
    padding: 85px 0 75px 0;
  }

  .about-bnr-section .bnr-hz-color-bar {
    height: 20px;
  }

  .about-bnr-section .dark-img,
  .about-bnr-section .light-img {
    -o-object-position: 18% bottom;
    object-position: 18% bottom;
  }

  .about-bnr-section .mobile-bg-banner-img {
    display: block;
    filter: grayscale(1) brightness(0.2);
    -o-object-position: 18% 20px;
    object-position: 18% 20px;
  }
}

@media screen and (max-width: 768px) {
  .about-bnr-section .bnr-layout .bnr-para-layout {
    row-gap: 0;
  }

  .about-bnr-section .bnr-layout .bnr-para-layout .bnr-para {
    max-width: 410px;
  }
}

@media screen and (max-width: 576px) {
  .about-bnr-section .bnr-layout {
    padding: 85px 0 75px 0;
  }

  .about-bnr-section .bnr-layout .bnr-para-layout {
    width: 100%;
    row-gap: 0;
  }

  .about-bnr-section .bnr-layout .bnr-para-layout .bnr-para {
    max-width: 365px;
    letter-spacing: 0.5px;
  }
}

.tech-bnr-section .bnr-para-layout {
  row-gap: 0;
}

.tech-bnr-section .bnr-para {
  opacity: 1;
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .tech-bnr-section .bnr-para {
    text-transform: unset;
  }
}

.tech-bnr-section .bnr-para p {
  text-transform: capitalize;
}

@media screen and (max-width: 1024px) {
  .tech-bnr-section .bnr-para p {
    text-transform: unset;
  }
}

.tech-bnr-section .dark-img,
.tech-bnr-section .light-img,
.tech-bnr-section .mobile-bg-banner-img {
  margin-top: 96px;
  max-height: 734px;
  -o-object-fit: fill;
  object-fit: fill;
  width: 100%;
}

@media screen and (max-width: 1024px) {

  .tech-bnr-section .dark-img,
  .tech-bnr-section .light-img,
  .tech-bnr-section .mobile-bg-banner-img {
    margin-top: 85px;
    max-height: 585px;
  }
}

@media screen and (max-width: 576px) {

  .tech-bnr-section .dark-img,
  .tech-bnr-section .light-img,
  .tech-bnr-section .mobile-bg-banner-img {
    -o-object-fit: cover;
    object-fit: cover;
  }
}

@media screen and (max-width: 1024px) {
  .tech-bnr-section .mobile-bg-banner-img {
    display: block;
    opacity: 1;
    filter: grayscale(1) brightness(0.25);
  }
}

/* ------------------------------------------- */
/* -- 04-01-2026 :: tech-bnr-with-ul-li -- */
/* ------------------------------------------- */
section.bnr-section.tech-bnr-with-ul-li {
  /* -------Tech-page bnr-section ------------ */
  /* ------- For mobile screen :: bottom padding will be less ------------ */
  /* -------Tech-page bnr-section ------------ */
  /* ------- align items to flex-start ------------ */
}

section.bnr-section.tech-bnr-with-ul-li .container {
  width: 100%;
}

@media screen and (max-width: 576px) {
  section.bnr-section.tech-bnr-with-ul-li .bnr-layout {
    padding: 80px 0 60px;
  }
}

section.bnr-section.tech-bnr-with-ul-li .bnr-layout .bnr-para-layout {
  max-width: 645px;
  margin-left: auto;
  align-items: flex-end;
}

@media screen and (max-width: 1024px) {
  section.bnr-section.tech-bnr-with-ul-li .bnr-layout .bnr-para-layout {
    align-items: flex-start;
    padding: 0px 0 0;
    margin-left: unset;
  }
}

@media screen and (max-width: 768px) {
  section.bnr-section.tech-bnr-with-ul-li .bnr-layout .bnr-para-layout {
    padding: 0px 0 0;
  }
}

section.bnr-section.tech-bnr-with-ul-li div.bnr-para {
  flex-direction: column;
  width: 78%;
}

@media screen and (max-width: 1024px) {
  section.bnr-section.tech-bnr-with-ul-li div.bnr-para {
    width: 90%;
    max-width: 485px;
  }
}

@media screen and (max-width: 768px) {
  section.bnr-section.tech-bnr-with-ul-li div.bnr-para {
    width: 100%;
    max-width: 400px;
  }
}

@media screen and (max-width: 576px) {
  section.bnr-section.tech-bnr-with-ul-li div.bnr-para {
    width: 100%;
    max-width: 335px;
  }
}

section.bnr-section.tech-bnr-with-ul-li div.bnr-para ul {
  display: flex;
  flex-direction: column;
  row-gap: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
  section.bnr-section.tech-bnr-with-ul-li div.bnr-para ul {
    row-gap: 4px;
  }
}

section.bnr-section.tech-bnr-with-ul-li div.bnr-para p {
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .tech-bnr-with-ul-li .container {
    width: 100%;
    margin-bottom: 0;
  }

  .tech-bnr-section {
    width: 100%;
    height: 668px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .tech-bnr-section .mobile-bg-banner-img {
    -o-object-position: 18% bottom;
    object-position: 18% bottom;
  }
}

/* 25.0.3*/
.bnr-video-container,
.dark-img,
.bnr-layout {
  transition: 0.3s all linear;
}

.bnr-video-container {
  position: absolute;
  top: 100px;
  width: 100%;
  left: 0;
  height: 730px;
  max-height: 730px;
  z-index: -5;
  opacity: 0;
}

@media screen and (max-width: 1024px) {
  .bnr-video-container {
    top: 85px;
    height: 585px;
    max-height: unset;
    z-index: -5;
    opacity: 0;
  }
}

.bnr-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .bnr-video {
    -o-object-fit: cover;
    object-fit: cover;
  }
}

.video-play-box {
  width: 60px;
  height: 60px;
  cursor: pointer;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome, Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Edge */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--web-fresh-green-color);
}

.video-play-box img {
  width: 20px;
  height: 24px;
  z-index: 5;
  margin-top: 0;
  max-height: unset;
  -o-object-fit: unset;
  object-fit: unset;
  pointer-events: none;
}

@media screen and (min-width: 1025px) {
  .video-play-outer-box {
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    width: -moz-min-content;
    width: min-content;
    height: -moz-min-content;
    height: min-content;
  }
}

.video-play-outer-box {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 200;
}

.video-play-icon,
.video-play-box {
  pointer-events: none;
}

#playBtnContainer1 {
  pointer-events: auto;
  cursor: pointer;
}

@media screen and (min-width: 1025px) {

  .bnr-video-for-desktop,
  .video-play-outer-box.for-desktop {
    display: flex;
    opacity: 1;
  }

  .bnr-video-for-mobile,
  .video-play-outer-box.for-mobile {
    display: none;
    opacity: 0;
  }
}

@media screen and (max-width: 1024px) {
  .bnr-video-for-desktop {
    display: none;
    opacity: 0;
  }

  .video-play-outer-box.for-desktop {
    display: none !important;
    opacity: 0;
  }

  .bnr-video-for-mobile,
  .video-play-outer-box.for-mobile {
    display: flex;
    opacity: 1;
  }

  .bnr-btns-layout {
    display: flex;
    align-items: center;
    -moz-column-gap: 15px;
    column-gap: 15px;
  }

  .video-play-outer-box.for-mobile {
    display: flex;
    width: 36px;
    height: 36px;
  }

  .video-play-outer-box.for-mobile .video-play-box {
    width: 36px;
    height: 36px;
  }

  .video-play-outer-box.for-mobile .video-play-box img {
    width: 12px;
    height: 14.4px;
  }
}

.bnr-video-section .bnr-video-container,
.bnr-video-section .video-play-outer-box.for-desktop {
  display: flex;
}

.bnr-video-section .dark-img,
.bnr-video-section .light-img {
  display: flex;
}

.bnr-img-section .bnr-video-container,
.bnr-img-section .video-play-outer-box.for-desktop {
  display: none;
}

.bnr-img-section .dark-img,
.bnr-img-section .light-img {
  display: flex;
}

@media screen and (max-width: 1024px) {
  .index-bnr-section .mobile-bg-banner-img {
    z-index: 0;
  }

  .banner-section.index-bnr-section .dark-img,
  .banner-section.index-bnr-section .light-img {
    display: none;
    opacity: 0;
  }

  .banner-section.index-bnr-section .mobile-bg-banner-img {
    display: flex;
    z-index: 0;
  }

  .bnr-img-section .video-play-outer-box.for-mobile {
    display: none;
  }

  .bnr-img-section.tech-bnr-section .dark-img,
  .bnr-img-section.tech-bnr-section .light-img {
    opacity: 0;
  }

  .bnr-img-section.tech-bnr-section .mobile-bg-banner-img {
    display: flex;
    opacity: 0.35;
    filter: grayscale(0.5) brightness(0.5);
  }
}

.bnr-layout {
  z-index: 20;
  opacity: 1;
}

@media screen and (min-width: 1025px) {
  .bnr-video-section .dark-img {
    display: flex;
    z-index: 10;
  }

  .bnr-video-section .mobile-bg-banner-img {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .bnr-video-section .dark-img {
    display: none;
  }

  .bnr-video-section .mobile-bg-banner-img {
    display: flex;
    z-index: 10;
  }
}

.bnr-video-section.video-intial-state .bnr-video-container {
  z-index: -5;
  opacity: 0;
}

.bnr-video-section.video-intial-state .bnr-hz-color-bar {
  opacity: 1;
}

.bnr-video-section.video-intial-state .playBtnContainer1 {
  visibility: visible;
}

.bnr-video-section.video-playing .bnr-video-container {
  z-index: 30;
  opacity: 1;
}

.bnr-video-section.video-playing .bnr-hz-color-bar {
  opacity: 0;
}

.bnr-video-section.video-playing .playBtnContainer1 {
  visibility: hidden;
}

.bnr-video-section.video-paused .bnr-video-container {
  z-index: -5;
  opacity: 0;
}

.bnr-video-section.video-paused .bnr-hz-color-bar {
  opacity: 1;
}

.bnr-video-section.video-paused .playBtnContainer1 {
  visibility: visible;
}

.bnr-video-section.video-ended .bnr-video-container {
  z-index: -5;
  opacity: 0;
}

.bnr-video-section.video-ended .bnr-hz-color-bar {
  opacity: 1;
}

.bnr-video-section.video-ended .playBtnContainer1 {
  visibility: visible;
}

/* 25.0.3*/
.client-section-layout {
  row-gap: var(--cliant-section_row-gap);
}

.client-section-heading-box {
  row-gap: var(--section-heading-box_row-gap-s1);
}

.client-section-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  line-height: 1;
  color: var(--web-water-blue-color);
  text-transform: capitalize;
  margin: 0;
  line-height: 1;
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .client-section-heading {
    text-transform: capitalize;
  }
}

.client-section-sub-heading-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
}

@media screen and (min-width: 1320px) {
  .client-section-sub-heading-para {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  .client-section-sub-heading-para {
    text-transform: unset;
    width: 94%;
  }
}

.client-logo-row {
  justify-content: center;
  align-items: center;
  row-gap: var(--cliant-logo-row_row-gap);
  -moz-column-gap: 24px;
  column-gap: 24px;
}

@media screen and (min-width: 576px) {
  .client-logo-row img {
    width: 47%;
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  .client-logo-row img {
    width: 31%;
    height: auto;
  }
}

@media screen and (min-width: 1440px) {
  .client-logo-row img {
    width: 424px;
  }
}

@media screen and (max-width: 576px) {
  .client-logo-row img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

@media screen and (max-width: 425px) {
  .client-logo-row img {
    aspect-ratio: 335/117;
  }
}

/* 25.0.3*/
.git-section-layout {
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
  position: relative;
}

@media screen and (max-width: 1024px) {
  .git-section-layout {
    gap: 0;
  }
}

.git-text-box,
.git-img-box {
  width: 50%;
  height: 549px;
  background-color: var(--web-dark-midnight-blue-color);
  color: white;
}

@media screen and (max-width: 1024px) {
  .git-section-layout {
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .git-text-box,
  .git-img-box {
    width: 100%;
    height: auto;
  }
}

.git-text-box {
  justify-content: center;
  align-items: flex-start;
  padding: 75px 7%;
  row-gap: 60px;
  box-sizing: border-box;
}

.git-text-box .get-in-touch-heading {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  text-transform: capitalize;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.git-text-box .get-in-touch-heading div:nth-child(1) {
  text-align: left;
}

.git-text-box .get-in-touch-heading div:nth-child(2) {
  text-align: right;
}

@media screen and (max-width: 1024px) {
  .git-text-box .get-in-touch-heading {
    text-transform: unset;
  }
}

@media screen and (max-width: 576px) {
  .git-text-box .get-in-touch-heading {
    font-size: 28px;
    gap: 24px;
    max-width: 276px;
  }
}

.git-text-box .git-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin: 0;
  max-width: 400px;
}

@media screen and (max-width: 1024px) {
  .git-text-box .git-para {
    margin-bottom: 16px;
    width: 94%;
    text-transform: unset;
  }
}

@media screen and (max-width: 576px) {
  .git-text-box .git-para {
    margin-bottom: 16px;
    width: 98%;
    max-width: 288px;
  }
}

@media screen and (max-width: 768px) {
  .git-text-box {
    height: auto;
    row-gap: 32px;
    padding: 32px 24px;
  }
}

.git-img-box {
  position: relative;
}

.git-img-box::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  background: rgb(0, 0, 37);
  pointer-events: none;
}

.git-img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .git-img-box img {
    aspect-ratio: 650/549;
    height: auto;
    -o-object-fit: unset;
    object-fit: unset;
  }
}

.vt-color-bar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: -5;
}

.vt-color-bar div {
  width: 100%;
  height: 25%;
}

.vt-color-bar div:nth-child(1) {
  background-color: #747483;
}

.vt-color-bar div:nth-child(2) {
  background-color: #5353a0;
}

.vt-color-bar div:nth-child(3) {
  background-color: #3635c3;
}

.vt-color-bar div:nth-child(4) {
  background-color: #0100ff;
}

.git-contact-btn {
  display: inline;
}

@media screen and (max-width: 1024px) {
  .get-in-touch-section.index-page {
    padding-top: 60px;
  }
}

@media screen and (max-width: 1024px) {
  .get-in-touch-section .footer-hz-color-bar {
    height: 20px;
  }

  .get-in-touch-section .git-text-box .get-in-touch-heading {
    text-transform: capitalize;
  }

  .get-in-touch-section.index-page .git-contact-btn.on-dark-bg {
    text-transform: uppercase;
  }

  .get-in-touch-section.index-page .git-text-box .get-in-touch-heading {
    text-transform: unset;
  }
}

/* 25.0.3*/
.impact-card-section {
  background-color: var(--web-light-gray-color);
}

.impact-section-layout,
.impact-card {
  row-gap: 60px;
}

@media screen and (max-width: 576px) {

  .impact-section-layout,
  .impact-card {
    row-gap: 36px;
  }
}

.impact-card {
  align-items: flex-start;
}

.impact-card-img-box {
  width: 100%;
  height: 458px;
}

@media screen and (max-width: 1024px) {
  .impact-card-img-box {
    height: auto;
  }
}

.impact-section-heading-box {
  row-gap: var(--section-heading-box_row-gap-s1);
}

.impact-section-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  line-height: 1;
  color: var(--web-water-blue-color);
  text-transform: capitalize;
  margin: 0;
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .impact-section-heading {
    text-transform: capitalize;
  }
}

.impact-section-sub-heading-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
}

.impact-card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  -moz-column-gap: 24px;
  column-gap: 24px;
  row-gap: 36px;
}

@media screen and (max-width: 768px) {
  .impact-card-row {
    display: flex;
  }
}

.impact-card-row .impact-card img.impact-card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 1;
}

.impact-card-row .impact-card img.impact-card-img-on-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.impact-card-row .impact-card .impact-card-img-box {
  position: relative;
}

.impact-card-row .impact-card .impact-card-img-box:hover .impact-card-img-on-hover {
  opacity: 1;
}

.impact-card-text-layout {
  row-gap: 48px;
}

@media screen and (max-width: 576px) {
  .impact-card-text-layout {
    row-gap: 24px;
  }
}

.impact-card-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s2);
  font-weight: 500;
  text-transform: capitalize;
  color: var(--web-water-blue-color);
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .impact-card-heading {
    text-transform: uppercase;
    font-size: 30px;
  }
}

@media screen and (max-width: 768px) {
  .impact-card-heading {
    font-size: 30px;
  }
}

@media screen and (max-width: 576px) {
  .impact-card-heading {
    font-size: 24px;
  }
}

.impact-card-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-card-para-s1);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  width: 90%;
}

.impact-btn {
  line-height: 1;
}

/* 25.0.3*/
.diagram-section {
  background-color: white;
}

@media screen and (min-width: 1024px) {
  .diagram-section {
    padding: 120px 0 120px;
  }
}

.diagram-section-layout {
  row-gap: 60px;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .diagram-section-layout {
    row-gap: 30px;
  }
}

.diagram-img-layout {
  justify-content: center;
}

.diagram-img-box {
  position: relative;
}

.diagram-img {
  filter: grayscale(1);
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.diagram-part-img {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}

.diagram-part-visibility,
.diagram-part-03,
.diagram-part-01,
.diagram-part-02,
.diagram-part-img-02 {
  cursor: pointer;
  transition: 0.3s all linear;
  opacity: 1;
}

.diagram-part-visibility:hover,
.diagram-part-03:hover,
.diagram-part-01:hover,
.diagram-part-02:hover,
.diagram-part-img-02:hover {
  opacity: 1;
  transition: 0.3s all linear;
}

.diagram-part-visibility.active,
.active.diagram-part-03,
.active.diagram-part-01,
.active.diagram-part-02,
.active.diagram-part-img-02 {
  opacity: 1;
  transition: 0.3s all linear;
}

.diagram-part-position,
.diagram-part-03,
.diagram-part-01,
.diagram-part-02,
.diagram-part-img-02 {
  position: absolute;
  top: 0;
  left: 0;
}

.diagram-part-02-left-position,
.diagram-part-02,
.diagram-part-img-02.left {
  top: 29%;
  left: 79%;
}

.diagram-part-02-right-position,
.diagram-part-img-02.right {
  top: 31%;
  left: 88%;
}

.diagram-part-img-02-left-size,
.diagram-part-img-02.left {
  width: 9%;
  height: 38%;
}

.diagram-part-img-02-right-size,
.diagram-part-img-02.right {
  width: 7%;
  height: 36%;
}

.line-box {
  position: absolute;
  top: 60%;
  left: 100%;
  transform: rotate(30deg);
}

.line-box .line {
  /* Basic style for the line */
  background-color: var(--web-water-blue-color);
  width: 130px;
  height: 3px;
  position: absolute;
  transform-origin: 0 0;
  z-index: 100;
}

.line2-box {
  top: 60%;
  left: 100%;
  transform: rotate(30deg);
}

.line2-box .line2 {
  width: 130px;
}

.diagram-part-num-position,
.diagram-part-num {
  transform: translate(16px, 16px);
}

.diagram-part-num-design,
.diagram-part-info-mobile-name,
.diagram-part-num-mobile-design,
.diagram-part-num {
  position: relative;
  z-index: 20;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 300;
  width: 40px;
  height: 40px;
  background-color: var(--web-water-blue-color);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 576px) {

  .diagram-part-num-design,
  .diagram-part-info-mobile-name,
  .diagram-part-num-mobile-design,
  .diagram-part-num {
    font-size: 16px;
    width: 32px;
    height: 32px;
  }
}

.diagram-part-info {
  z-index: 20;
}

.diagram-part-info .diagram-part-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.diagram-part-info-name {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 24px;
  font-weight: 400;
  background-color: var(--web-water-blue-color);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10.5px 10px;
  position: relative;
  z-index: 20;
  margin: 0;
}

.diagram-part-info-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-card-para-s1);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  font-size: var(--section-sub-para-s1);
  width: 232px;
}

@media screen and (max-width: 1200px) {
  .diagram-part-info-para {
    width: auto;
  }
}

.diagram-part-info-mobile-para {
  font-family: "Be Vietnam", sans-serif;
  font-weight: 400;
  font-size: var(--section-sub-para-s1);
  line-height: 1.2;
  color: var(--web-black-color);
}

@media screen and (max-width: 1024px) {
  .diagram-part-info-mobile-para {
    text-transform: capitalize;
  }
}

.diagram-part-info-02-position,
.diagram-part-info.diagram-part-02 {
  transform: translate(160px, 80px);
}

@media screen and (max-width: 1024px) {

  .diagram-part-info,
  .line-box {
    display: none;
  }
}

.diagram-part-01-position,
.diagram-part-01 {
  top: 65%;
  left: 72%;
}

.diagram-part-info-01-position,
.diagram-part-info.diagram-part-01 {
  transform: translate(70px, 150px);
}

.line1-box {
  top: 60%;
}

.line1-box {
  left: 100%;
  transform: rotate(60deg);
}

.line1-box .line {
  width: 130px;
}

.diagram-part-info.diagram-part-01 .diagram-part-layout {
  gap: 16px;
}

.line3-box {
  top: 60%;
  left: 1px;
  transform: rotate(158deg);
}

.line3-box .line3 {
  width: 172px;
}

.diagram-part-03-position,
.diagram-part-03 {
  top: 44%;
  left: -40px;
}

@media screen and (max-width: 576px) {

  .diagram-part-03-position,
  .diagram-part-03 {
    left: -10px;
  }
}

.diagram-part-info-03-position,
.diagram-part-info.diagram-part-03 {
  transform: translate(-200px, 80px);
}

.diagram-part-info.diagram-part-03 .diagram-part-info-para {
  width: 232px;
}

@media screen and (max-width: 1200px) {
  .diagram-part-info.diagram-part-03 .diagram-part-info-para {
    width: 232px;
  }
}

.diagram-part-info-heading-box {
  gap: 24px;
}

@media screen and (max-width: 1024px) {
  .diagram-part-info-heading-box {
    gap: 0;
  }
}

.diagram-part-info-mobile-card {
  display: none;
}

.diagram-part-info-mobile-card.active {
  display: flex;
}

@media screen and (min-width: 1025px) {
  .diagram-part-info {
    display: none;
  }

  .line-box {
    display: none;
  }

  .dpc.active .diagram-part-info {
    display: flex;
  }

  .dpc.active .line-box {
    display: flex;
  }
}

.diagram-part-info-mobile-cards {
  gap: 24px;
  flex-wrap: wrap;
}

@media screen and (min-width: 1024px) {
  .diagram-part-info-mobile-cards {
    display: none;
  }
}

.diagram-part-info-mobile-card {
  gap: 16px;
  border: 1px solid var(--web-fresh-green-color);
  padding: 20px 24px;
}

@media screen and (max-width: 1024px) {
  .diagram-part-info-mobile-card {
    padding: 0;
    border: 0px;
    gap: 12px;
  }
}

.diagram-part-num-mobile-design {
  padding: 8px;
}

.diagram-part-info-mobile-name {
  width: auto;
  padding: 0 20px;
}

@media screen and (max-width: 1024px) {
  .diagram-part-info-mobile-name {
    padding: 8px 8px 8px 0;
  }
}

/* 25.0.3*/
.process-tab-section {
  background-color: var(--web-dark-midnight-blue-color);
  width: 100%;
  overflow: hidden;
}

.process-tab-section .container {
  width: 100%;
}

.process-tab-section-layout {
  row-gap: 60px;
}

@media screen and (max-width: 1024px) {
  .process-tab-section-layout {
    row-gap: 48px;
  }
}

.process-tab-section-heading-box {
  row-gap: var(--section-heading-box_row-gap-s1);
}

.process-tab-section-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  line-height: 1;
  color: var(--web-water-blue-color);
  text-transform: capitalize;
  margin: 0;
  color: white;
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .process-tab-section-heading {
    text-transform: capitalize;
  }
}

@media screen and (max-width: 576px) {
  .process-tab-section-heading {
    width: 94%;
  }
}

.process-tab-section-sub-heading-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  color: white;
  width: 594px;
  opacity: 0.7;
  line-height: 1.2;
}

.pc-tab-acc-layout {
  width: 100%;
  min-height: 450px;
}

.process-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  border: 1px solid #2e2e5a;
}

.process {
  flex: 1 1 7.87%;
  max-width: 104px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.8s ease-out;
  position: relative;
  background-color: #666;
  color: #fff;
}

@media screen and (max-width: 1024px) {
  .process {
    max-width: unset;
  }
}

.process.active {
  flex: 4 0 76.39%;
  max-width: calc(100% - 312px);
}

@media screen and (max-width: 1024px) {
  .process.active {
    max-width: unset;
  }
}

.item:nth-child(1) {
  background-color: var(--web-water-gray-color);
}

.item:nth-child(2) {
  background-color: var(--web-process-blue-color);
}

.item:nth-child(3) {
  background-color: var(--web-medium-blue-color);
}

.item:nth-child(4) {
  background-color: var(--web-water-blue-color);
}

.process-tab-heading {
  width: 104px;
  height: 100%;
  padding: 40px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  .process-tab-heading {
    flex-basis: 80px;
  }
}

.process .label {
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  letter-spacing: 1px;
  flex-shrink: 0;
  color: #fff;
}

.index {
  font-family: "Be Vietnam", sans-serif;
  font-weight: 300;
  font-size: 20px;
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  color: #ccc;
}

@media screen and (max-width: 1024px) {
  .index {
    justify-content: flex-start;
  }
}

.process .content {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.tab-content-title {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  text-transform: capitalize;
}

.process-tab-section .tab-content-para-box p {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-sub-para-xs);
  line-height: 1.25;
  opacity: 0.7;
  font-weight: 400;
  text-transform: none;
}

@media screen and (max-width: 1024px) {
  .process-tab-section .tab-content-para-box p {
    text-transform: unset;
    padding-right: 0px;
  }
}

.process-tab-section ul {
  padding-left: 20px;
  margin-bottom: 0;
  max-width: 555px;
}

.process-tab-section ul li {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-sub-para-xs);
  line-height: 1.25;
  opacity: 0.7;
  font-weight: 400;
  text-transform: none;
}

@media screen and (max-width: 1024px) {
  .process-tab-section ul li {
    text-transform: capitalize;
    padding-right: 14px;
  }
}

.tab-process-img {
  margin: 0;
  max-width: 510px;
}

.process-tab-heading {
  cursor: pointer;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.process.active .content {
  display: flex;
}

.tab-content-text-box {
  row-gap: 32px;
}

@media screen and (max-width: 1024px) {
  .tab-content-text-box {
    row-gap: 24px;
  }
}

@media screen and (max-width: 1024px) {
  .process-container {
    flex-direction: column;
    height: auto;
    overflow: unset;
  }

  .process {
    flex-direction: column;
  }

  .process .label {
    writing-mode: horizontal-tb;
    transform: rotate(0);
    order: 1;
    padding: 0;
  }

  .process-tab-heading {
    width: 100%;
    flex-basis: unset;
    padding: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }

  .index {
    padding-left: 20px;
    bottom: unset;
    position: relative;
    padding: 0 0 0 20px;
    order: 0;
    width: auto;
  }
}

.process-tab-section-sub-heading-para {
  width: 69%;
}

@media screen and (max-width: 1024px) {
  .process-tab-section-sub-heading-para {
    width: 95%;
    line-height: 1.25;
  }
}

.process .content {
  padding: 40px 20px;
}

.tab-process-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 576px) {
  .process .label {
    font-size: 20px;
  }

  .index {
    font-size: 20px;
  }

  .tab-content-text-box {
    row-gap: 24px;
  }

  .tab-content-title {
    font-size: 18px;
  }

  .process .content {
    padding: 16px 20px 20px;
  }
}

@media screen and (max-width: 425px) {
  .process .label {
    font-size: 18px;
  }

  .index {
    font-size: 18px;
  }

  .tab-content-title {
    font-size: 16px;
  }

  .process.active .content {
    padding-top: 10px;
  }
}

/* =======================
   Masked Horizontal Accordion – Full CSS
   - Desktop: horizontal rails + expanding panel
   - Mobile (<900px): stacked bars; tap to open content
   ======================= */
:root {
  /* rail width shrinks on small screens, caps on big */
  --rail: clamp(72px, 12vw, 104px);
  --gap: 0px;
  --text: #fff;
  /* paragraph fade point (lower = longer fade) */
  --mask-hard: 76%;
  --gap-between-panel-items: 32px;
  /* panel padding scales with screen */
  --panel-pad-inline: clamp(16px, 3vw, 40px);
  --panel-pad-block: clamp(16px, 3vw, 40px);
}

* {
  box-sizing: border-box;
}

/* (optional) page scaffolding */
/* ===== ACCORDION (desktop / tablet) ===== */
.accordion {
  /* JS should set --count dynamically to items.length */
  --count: 4;
  --expanded: calc(100% - (var(--rail) * (var(--count) - 1)) - var(--gap));
  display: flex;
  width: 100%;
  border: 1px solid #2e2e5a;
  overflow: hidden;
}

.item {
  display: flex;
  align-items: stretch;
  color: var(--text);
  flex: 0 0 var(--rail);
  /* collapsed */
  max-width: var(--rail);
  transition: flex-basis 0.6s ease, max-width 0.6s ease, background-color 0.25s ease;
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

.item.active {
  flex: 0 0 var(--expanded);
  /* expanded */
  max-width: var(--expanded);
}

/* ------------added--------------------- */
/* vertical rail (the clickable header) */
.acc-btn-heading {
  width: var(--rail);
  min-width: var(--rail);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  background: transparent;
  border: none;
  outline: none;
}

.acc-btn-heading:focus-visible {
  box-shadow: inset 0 0 0 2px #fff;
}

.item .acc-btn-heading .label {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 300;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  color: white;
  text-transform: capitalize;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: 0.3s all linear;
}

.acc-btn-heading .idx {
  font-family: "Be Vietnam", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: white;
  text-align: center;
  opacity: 0.7;
}

/* expanding content panel */
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--panel-pad-block) var(--panel-pad-inline);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.item .panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tab-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* responsive image inside panel */
.panel img {
  width: min(46vw, 520px);
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  aspect-ratio: 23/13;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0px;
}

/* ===== MASKED PARAGRAPH ===== */
.viewport {
  /* fixed/clamped reading width: never scales beyond bounds */
  width: clamp(32ch, 50vw, 60ch);
  max-width: 100%;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  /* right-edge fade (modern + webkit) */
}

.viewport p {
  margin: 0;
  width: auto !important;
  /* never percentage */
  max-width: 550px;
  /* match clamp upper bound */
  font-size: clamp(15px, 1.2vw + 12px, 20px);
  line-height: 1.2;
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .item,
  .panel {
    transition: none;
  }
}

/* ===== MOBILE STACKED STYLE (<900px) ===== */
@media screen and (max-width: 1024px) {
  .accordion {
    /* stacked items */
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .item {
    display: block;
    /* side gutters + gap */
    border-radius: 0;
    overflow: hidden;
    min-height: auto;
    max-width: none;
    flex: none;
  }

  .item {
    flex: 0 0 var(--expanded);
    /* expanded */
    max-width: unset;
  }

  .item.active {
    flex: 0 0 var(--expanded);
    /* expanded */
    max-width: unset;
  }

  /* header bar becomes horizontal row */
  .acc-btn-heading {
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: none;
  }

  /* index chip at left */
  .acc-btn-heading .idx {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 2px;
    margin: 0 4px 0 0;
  }

  .item .acc-btn-heading .label {
    writing-mode: horizontal-tb;
    transform: none;
    text-transform: uppercase;
    margin-top: 0px;
  }

  /* highlight active header */
  .item.active .acc-btn-heading {
    border-color: rgba(255, 255, 255, 0.35);
  }

  /* panel shows under header; collapsed panels hidden */
  .panel {
    padding: 20px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none;
  }

  .item:not(.active) .panel {
    display: none;
  }

  /* full-width image on mobile */
  .panel img {
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
  }

  /* paragraph viewport fits screen, keeps fade */
  .viewport,
  .viewport p {
    width: min(60ch, 100%);
    max-width: 100%;
  }

  .tab-content {
    gap: 32px;
  }
}

@media screen and (max-width: 768px) {
  .acc-btn-heading {
    justify-content: space-between;
  }

  .acc-btn-heading .idx {
    font-size: 16px;
    font-weight: 300;
  }

  .item .acc-btn-heading .label {
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 500;
  }

  .tab-content-title {
    text-transform: capitalize;
  }
}

@media screen and (max-width: 576px) {
  .panel img {
    aspect-ratio: 295/187;
  }

  .item .acc-btn-heading .label {
    font-size: 18px;
    letter-spacing: 0;
  }
}

/* 25.0.3*/
.para-num-section {
  word-break: break-word;
  z-index: 100;
  position: relative;
  background: white;
}

@media screen and (max-width: 1024px) {
  .para-num-section {
    padding-bottom: 80px;
  }
}

@media screen and (max-width: 768px) {
  .para-num-section {
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 576px) {
  .para-num-section {
    padding-bottom: 60px;
  }
}

.para-num-section-layout {
  row-gap: 60px;
}

@media screen and (max-width: 768px) {
  .para-num-section-layout {
    row-gap: 40px;
  }
}

.para-layout {
  row-gap: 60px;
  width: 62%;
}

@media screen and (max-width: 1024px) {
  .para-layout {
    width: 64%;
    word-wrap: break-word;
  }
}

@media screen and (max-width: 768px) {
  .para-layout {
    min-width: 336px;
    width: 64%;
    row-gap: 40px;
  }
}

@media screen and (max-width: 376px) {
  .para-layout {
    min-width: auto;
    width: 92%;
  }
}

.para-text-layout {
  row-gap: 36px;
}

@media screen and (max-width: 768px) {
  .para-text-layout {
    row-gap: 32px;
  }
}

.para-text-layout p {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-xl-para-s1);
  font-weight: 200;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .para-text-layout p {
    text-transform: capitalize;
  }
}

.read-more-link {
  text-decoration: none;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 20px;
  color: var(--web-water-blue-color);
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  .read-more-link {
    font-size: 16px;
  }
}

.stat-num-outer-boxes-layout {
  justify-content: stretch;
  flex-wrap: wrap;
  gap: 24px;
  color: var(--web-water-blue-color);
}

@media screen and (max-width: 1200px) {
  .stat-num-outer-boxes-layout {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 768px) {
  .stat-num-outer-boxes-layout {
    flex-wrap: wrap;
    gap: 16px;
  }
}

.stat-num-outer-box {
  width: calc(33% - 24px);
  min-width: 360px;
  justify-self: stretch;
  background-color: var(--web-light-gray-color);
}

@media screen and (max-width: 1024px) {
  .stat-num-outer-box {
    width: 48%;
  }
}

@media screen and (max-width: 768px) {
  .stat-num-outer-box {
    width: 100%;
    min-width: unset;
  }
}

.stat-num-info-layout {
  row-gap: 40px;
  padding: 32px 40px;
}

@media screen and (max-width: 768px) {
  .stat-num-info-layout {
    row-gap: 28px;
    padding: 24px;
  }
}

.stat-num-value {
  line-height: 1.5;
}

@media screen and (max-width: 576px) {
  .stat-num-unit {
    font-size: 16px;
  }
}

.stat-num-heading {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--web-dark-midnight-blue-color);
}

.vt-single-color-bar {
  position: absolute;
  top: 0;
  width: 12px;
  height: 100%;
  background: var(--web-fresh-green-color);
}

.stat-num-outer-box {
  position: relative;
}

.disclaimer-para.index-page {
  font-family: "Be Vietnam", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--web-black-color);
  letter-spacing: 0;
  opacity: 0.7;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .disclaimer-para.index-page {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .disclaimer-para.index-page {
    font-size: 12px;
  }
}

/* 25.0.3*/
.first-section {
  padding-top: 98px;
}

@media screen and (max-width: 576px) {
  .first-section {
    padding-top: 85px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section.efl-sol .hero-img-ov-img-layout {
    padding-top: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .hero-timeline-section.efl-sol .hero-text-left-layout .hero-timeline-content {
    padding-right: 0px;
  }
}

/* 25.0.3*/
/* Diagram Layout */
.diagram-wrapper {
  position: relative;
  width: 100%;
  height: 520px;
  /* Fixed height for the diagram visualization */
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  gap: 24px;
  align-items: center;
}

@media screen and (max-width: 1024px) {
  .diagram-wrapper {
    grid-template-columns: 1fr;
    max-width: 710px;
  }
}

@media screen and (max-width: 768px) {
  .diagram-wrapper {
    max-width: 512px;
  }
}

.svg-wrapper {
  width: auto;
  width: 600px;
  height: var(--cir-svg-wrapper-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Central Image and Rings */
.center-visual {
  position: absolute;
  width: 250px;
  height: 250px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Glowing Rings */
.glow-ring {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(100, 100, 255, 0.08);
  pointer-events: none;
}

.plant-image {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ring-1 {
  width: 387px;
  height: 387px;
  background: rgba(1, 0, 255, 0.16);
  z-index: 2;
}

.ring-2 {
  width: 453px;
  height: 453px;
  background: rgba(1, 0, 255, 0.12);
  z-index: 1;
}

.ring-3 {
  width: var(--ring-3-size);
  height: var(--ring-3-size);
  background: rgba(1, 0, 255, 0.03);
  z-index: 1;
}

.annotations-left-box,
.annotations-right-box {
  height: 100%;
  position: relative;
}

/* Annotations Positioning */
.annotation {
  position: absolute;
  z-index: 5;
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--cir-annotation-font-size);
  font-weight: 300;
  line-height: 1.2;
  color: var(--web-black-color);
}

.top-left {
  top: 25%;
  right: -20px;
  text-align: right;
}

.bottom-left {
  top: 72%;
  right: -20px;
  text-align: right;
  padding-left: 10%;
}

.top-right {
  top: 18%;
  left: -25px;
  text-align: left;
}

@media screen and (max-width: 1200px) {
  .top-right {
    top: 15%;
    left: -35px;
  }
}

.bottom-right {
  top: 70%;
  left: 0px;
  text-align: left;
}

/* SVG Lines */
.connecting-lines {
  position: absolute;
  width: 660px;
  height: var(--cir-connecting-lines-height);
  z-index: 999;
  pointer-events: none;
}

.connecting-lines line {
  stroke: #ff6600;
  /* Orange color */
  stroke-width: 3;
}

.connecting-lines circle {
  fill: rgb(255, 98, 27);
}

/* Mobile Responsiveness */
@media screen and (max-width: 1024px) {
  .diagram-wrapper {
    height: auto;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }

  .svg-wrapper {
    margin-bottom: 40px;
  }

  .center-visual {
    order: 1;
    /* Put image first */
  }

  .annotation {
    padding-top: 10px;
    padding-bottom: 10px;
    position: static;
    width: 100%;
    text-align: left;
    padding-left: 20px;
    border-left: 3px solid #ff6600;
    /* Use border instead of lines on mobile */
    order: 2;
    width: 80%;
    margin-bottom: 40px;
  }
}

/* End of Diagram Styles */
.connecting-lines-mobile-version {
  display: none;
}

.connecting-lines.for-desktop {
  display: flex;
}

.annotation-for-mobile {
  display: none;
}

.annotation-for-desktop {
  display: flex;
}

@media screen and (max-width: 1024px) {
  .connecting-lines-mobile-version {
    display: flex;
  }

  .connecting-lines.for-desktop {
    display: none;
  }

  .annotation-for-desktop {
    display: none;
  }

  .annotation-for-mobile {
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  img.plant-image {
    width: 180px;
    height: 180px;
  }

  .glow-ring.ring-1 {
    width: 216px;
    height: 216px;
  }

  .glow-ring.ring-2 {
    width: 253px;
    height: 253px;
  }

  .glow-ring.ring-3 {
    width: 290px;
    height: 290px;
  }

  .svg-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0;
  }

  svg.connecting-lines {
    position: relative;
    width: 350px;
    top: 0;
    left: 0px;
    z-index: 10;
  }

  .center-visual {
    width: 330px;
    height: 330px;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 1024px) {
  .circular-section {
    margin-bottom: 40px;
  }

  .cir-section-outer-layout {
    row-gap: 120px;
  }

  .svg-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0;
    /* top: 0; */
  }

  .annotation {
    position: absolute;
    padding-left: 0;
    border-left: none;
    width: var(--cir-annotation-width);
    text-transform: capitalize;
    margin-bottom: 0;
  }

  .diagram-wrapper {
    row-gap: 0;
    height: 100%;
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .annotation.bottom-left {
    position: absolute;
    left: 0;
    top: 100%;
    right: unset;
    bottom: unset;
  }

  .annotations-left-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .annotation.top-left {
    padding-bottom: 10px;
    left: 0;
    top: unset;
    bottom: 100%;
  }

  .annotations-right-box {
    position: absolute;
    top: unset;
    bottom: 0;
    width: 100%;
  }

  .annotation.top-right {
    position: absolute;
    bottom: 100%;
    left: unset;
    right: 0;
    top: unset;
    text-align: right;
  }

  .annotation.bottom-right {
    left: unset;
    right: 0;
    top: 100%;
    bottom: unset;
    text-align: left;
  }
}

@media screen and (max-width: 1024px) {
  .circular-section {
    margin-bottom: 0px;
  }

  .diagram-wrapper {
    margin-bottom: 0;
  }

  .cir-section-outer-layout {
    row-gap: 40px;
  }

  .annotation,
  .annotation.top-right,
  .annotation.top-left,
  .annotation.bottom-left,
  .annotation.bottom-right {
    position: unset;
  }

  .annotations-left-box,
  .annotations-right-box {
    position: unset;
    display: flex;
    justify-content: space-between;
  }

  .annotations-left-box {
    align-items: flex-end;
  }

  .annotations-right-box {
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .circular-section {
    max-width: 100%;
    overflow: hidden;
  }

  .glow-ring,
  svg.connecting-lines {
    max-width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .diagram-wrapper {
    margin-top: 0;
    margin-bottom: 0;
  }

  .annotation.top-right {
    width: 50%;
  }
}

/* 25.0.3*/
.postcard-container .postcard-content {
  padding: 30px 16px 30px 30px;
}

.hero-postcard-text-para-layout p {
  font-weight: 300;
}

.circular-section,
.team-profile-slider-section {
  padding: var(--section_vt_padding_both_side_same-xl) 0;
  position: relative;
}

.motive-text-logo-section {
  margin: 120px 0 60px 0;
}

@media screen and (max-width: 768px) {
  .motive-text-logo-section {
    margin: 60px 0 60px 0;
  }
}

.cir-section-outer-layout,
.tp-section-outer-layout,
.motive-text-logo-section-outer-layout,
.our-misson-outer-box-layout {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
}

@media screen and (max-width: 768px) {

  .cir-section-outer-layout,
  .tp-section-outer-layout,
  .motive-text-logo-section-outer-layout,
  .our-misson-outer-box-layout {
    row-gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  .motive-text-logo-section-outer-layout {
    row-gap: 48px;
  }
}

.cir-heading-box-layout,
.tp-heading-box-layout,
.motive-text-box-layout {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}

@media screen and (max-width: 768px) {

  .cir-heading-box-layout,
  .tp-heading-box-layout,
  .motive-text-box-layout {
    row-gap: 24px;
  }
}

.cir-heading,
.tp-heading,
.motive-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  font-weight: 300;
  color: var(--web-water-blue-color);
  margin: 0;
  width: 75%;
  text-transform: capitalize;
}

@media screen and (max-width: 1024px) {

  .cir-heading,
  .tp-heading,
  .motive-heading {
    width: 85%;
  }
}

.cir-para,
.tp-para,
.motive-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  width: 78%;
  color: var(--web-light-black-color);
  letter-spacing: 0;
  margin: 0;
}

@media screen and (max-width: 1024px) {

  .cir-para,
  .tp-para,
  .motive-para {
    width: 84%;
  }
}

@media screen and (max-width: 576px) {

  .cir-para,
  .tp-para,
  .motive-para {
    text-transform: unset;
    width: 92%;
  }
}

@media screen and (max-width: 576px) {

  .cir-para,
  .tp-para,
  .motive-para {
    width: 88%;
  }
}

.tp-para {
  font-size: var(--section-card-para-s1);
}

@media screen and (min-width: 1025px) {
  .cir-heading {
    width: 60%;
  }

  .cir-para {
    width: 70%;
  }

  .tp-heading {
    width: 48%;
  }

  .tp-para {
    width: 64%;
  }
}

@media screen and (max-width: 1024px) {

  .hero-img,
  .hero-img-left-layout .hero-img {
    width: 100%;
  }

  .hero-section {
    padding-bottom: 32px;
  }

  .hero-section .hero-heading-box {
    padding: 24px 0;
  }

  .hero-section .hero-content-layout-box {
    height: 100%;
    min-height: 320px;
  }

  .hero-section .hero-content-layout-box .container {
    max-width: 100%;
  }

  .hero-section .hero-img,
  .hero-section .hero-img-left-layout .hero-img {
    width: 100%;
    height: 320px;
    left: 0;
  }

  .hero-section .hero-content-text-layout {
    margin: 192px 15px 0 15px;
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .hero-section .postcard-container .postcard-content {
    padding: 20px;
  }

  .hero-section .hero-postcard-text-layout .hero-postcard-text-heading {
    max-width: 64%;
    width: 100%;
    font-size: 28.5px;
  }

  .hero-section .hero-postcard-text-para-layout {
    text-transform: unset;
  }
}

@media screen and (max-width: 768px) {
  .hero-postcard-text-layout .hero-postcard-text-heading {
    font-size: 28.5px;
  }
}

@media screen and (max-width: 1024px) {
  .motive-logo-box img {
    width: 48%;
    height: auto;
  }

  .motive-logo-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10.5px;
    justify-content: space-between;
  }
}

.waste-water-section.sew-sol .disclaimer-para {
  display: none;
}

@media screen and (max-width: 1024px) {
  .waste-water-section.sew-sol .disclaimer-para {
    display: flex;
  }

  .waste-water-heading-text.right-align-text {
    align-items: flex-end;
  }

  span.highlight-text {
    display: inline-flex;
  }

  .waste-water-heading-text.left-align-text {
    align-items: flex-start;
  }

  .waste-water-heading-text {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }
}

@media screen and (min-width: 1025px) {
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-text-layout-v2 {
    padding-right: 32px;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 {
    -moz-column-gap: 0;
    column-gap: 0;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-img-box {
    height: 610px;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 {
    align-items: center;
  }
}

@media screen and (max-width: 576px) {
  .hero-postcard-text-layout .hero-postcard-text-heading {
    font-size: 28.5px;
  }

  .hero-img-ov-text-layout,
  .hero-img-ov-text-title-layout {
    row-gap: 36px;
  }

  .hero-img-ov-text-title-layout-v2 {
    row-gap: 24px;
  }

  .hero-img-ov-section-v2.text-img-start-from-same-height .hero-img-ov-text-title-layout-v2 {
    row-gap: 32px;
  }

  .hero-img-ov-section-v2.text-img-start-from-same-height .sew-sol.hero-img-ov-text-title-layout-v2 {
    row-gap: 24px;
  }

  .hero-img-ov-section-v2.text-img-start-from-same-height .hero-img-ov-ul-list-v2 li {
    font-size: 16px;
    padding-left: 22px;
    text-transform: unset;
    word-break: break-word;
  }

  .hero-img-ov-ul-list-box-v2 {
    padding-top: 12px;
  }

  .hero-img-ov-ul-list-v2 li {
    margin-bottom: 36px;
  }

  .hero-img-ov-outer-layout,
  .hero-img-ov-outer-layout-v2 {
    row-gap: 32px;
  }

  .hero-img-ov-heading {
    padding: 20px 0 20px 0;
    line-height: 1.2;
  }

  .hero-img-ov-section {
    padding: 60px 0 0;
  }

  .results-section-heading {
    width: 92%;
  }

  .metric-card-text {
    width: 72%;
    font-size: 24px;
    line-height: 1.25;
    text-transform: capitalize;
  }

  .metric-card-text .highlight-text {
    font-size: 24px;
    line-height: 1;
  }

  .motive-para {
    width: 98%;
  }

  .efl-sol .motive-para {
    width: 100%;
  }

  .timeline-section-layout {
    padding: 24px 0;
  }

  .hero-img-ov-section.sew-sol .hero-img-ov-text-para {
    font-size: 16px;
    text-transform: capitalize;
    width: 96%;
  }

  .hero-img-ov-section.efl-sol .hero-img-ov-text-para {
    font-size: 13.5px;
    text-transform: unset;
    width: 96%;
  }
}

.hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 .hero-img-ov-text-layout-v2,
.hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 .hero-img-ov-img-layout-v2 {
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 .hero-img-ov-img {
    max-height: 600px;
  }
}

@media screen and (max-width: 768px) {
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 .hero-img-ov-img {
    max-height: 446px;
  }
}

@media screen and (max-width: 576px) {
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 .hero-img-ov-img {
    max-height: 446px;
  }
}

@media screen and (min-width: 1024px) {
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 {
    row-gap: 0;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 .hero-img-ov-bottom-para-v2 {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.sew-sol {
    padding: 60px 0 0px 0;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-bottom-para-v2 {
    padding-bottom: 2px;
    padding-top: 4px;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-outer-layout-v2 {
    grid-template-columns: 1fr;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-text-layout-v2 {
    order: 1;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-bottom-para-v2 {
    order: 2;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-img-layout-v2 {
    order: 3;
  }
}

@media screen and (max-width: 576px) {
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-text-title-layout-v2 {
    row-gap: 24px;
  }

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-ul-list-v2 li {
    font-size: 19.5px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.sew-sol .container {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .hero-img-ov-section-v2.sew-sol .container {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .hero-img-ov-section-v2.sew-sol .container {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 1024px) {

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-text-layout-v2,
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-bottom-para-v2 {
    max-width: calc(100% - 60px);
    margin: auto;
    padding: 0 0 4px 0;
  }
}

@media screen and (max-width: 768px) {

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-text-layout-v2,
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-bottom-para-v2 {
    max-width: calc(100% - 40px);
    margin: auto;
    padding: 0;
  }
}

@media screen and (max-width: 576px) {

  .hero-img-ov-section-v2.sew-sol .hero-img-ov-text-layout-v2,
  .hero-img-ov-section-v2.sew-sol .hero-img-ov-bottom-para-v2 {
    max-width: calc(100% - 40px);
    margin: auto;
    padding: 0;
  }
}

@media screen and (max-width: 1024px) {
  .get-in-touch-section.sew-sol {
    padding-top: 60px;
  }
}

@media screen and (min-width: 1024px) {
  .hero-img-ov-outer-layout-v2 .disclaimer-para {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

.hero-img-ov-section-v2.sew-sol .disclaimer-para {
  width: 100%;
  font-family: "Be Vietnam", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--web-black-color);
  letter-spacing: 0;
  opacity: 0.7;
  margin: 0;
  padding: var(--disclaimer-vt-padding) 0;
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.sew-sol .disclaimer-para {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .hero-img-ov-section-v2.sew-sol .disclaimer-para {
    font-size: 12px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.sew-sol .disclaimer-para {
    order: 2;
    width: 92%;
    max-width: calc(100% - 40px);
    margin: auto;
    padding: 0;
    padding-right: 10%;
    padding-top: 4px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-timeline-section {
    padding-bottom: 28px;
  }
}

@media screen and (min-width: 1025px) {
  section.hero-timeline-section.sew-sol.nth-type-01 .hero-img-left-layout .hero-img {
    -o-object-position: 69%;
    object-position: 69%;
  }
}

/* 25.0.3*/
@media screen and (max-width: 576px) {
  .tp-section-outer-layout {
    row-gap: 36px;
  }
}

@media screen and (max-width: 1024px) {
  .str-card .vt-color-bar-as-border {
    width: 100%;
    height: 12px;
    bottom: 0;
    top: unset;
    flex-direction: row-reverse;
  }

  .str-card .vt-color-bar-as-border div {
    height: 100%;
  }
}

.leader-card-layout {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
  padding-bottom: 20px;
}

@media screen and (max-width: 576px) {
  .leader-card-layout {
    row-gap: 12px;
  }
}

.leader-card-text-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 16px;
}

@media screen and (max-width: 576px) {
  .leader-card-text-box {
    row-gap: 12px;
  }
}

.leader-card-img-box {
  width: 100%;
  height: 296px;
  overflow: hidden;
  background-color: var(--web-profile-gray-color);
}

@media screen and (max-width: 576px) {
  .leader-card-img-box {
    height: auto;
  }
}

.leader-card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  max-width: 280px;
}

.leader-card-name {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--web-water-blue-color);
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .leader-card-name {
    font-size: 18px;
  }
}

@media screen and (max-width: 576px) {
  .leader-card-name {
    font-size: 14px;
  }
}

.leader-card-designation {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  color: var(--web-light-black-color);
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .leader-card-designation {
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  .leader-card-designation {
    font-size: 12px;
  }
}

.our-misson-hero-section {
  margin-top: 60px;
}

.our-misson-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  font-weight: 300;
  color: var(--web-water-blue-color);
  margin: 0;
  width: 75%;
  text-transform: capitalize;
  font-weight: 500;
  color: var(--web-black-color);
  width: 90%;
}

@media screen and (max-width: 1024px) {
  .our-misson-heading {
    width: 85%;
  }
}

.our-misson-heading .highlight-text {
  color: var(--web-water-blue-color);
}

@media screen and (min-width: 1025px) {
  .our-misson-heading {
    width: 64%;
  }
}

@media screen and (max-width: 768px) {
  .our-misson-heading {
    font-weight: 400;
  }
}

.our-mission-img-ov-heading-box-layout {
  display: flex;
  flex-direction: column;
  padding: 60px 0;
  background-color: var(--web-water-blue-color);
}

@media screen and (max-width: 1024px) {
  .our-mission-img-ov-heading-box-layout {
    padding: 40px 0;
  }
}

@media screen and (max-width: 768px) {
  .our-mission-img-ov-heading-box-layout {
    padding: 24px 0;
  }
}

.our-mission-img-ov-heading-box {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 48px;
  column-gap: 48px;
  row-gap: 24px;
}

@media screen and (max-width: 1024px) {
  .our-mission-img-ov-heading-box {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}

.our-mission-img-ov-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  color: white;
  margin: 0;
  text-transform: capitalize;
  width: 80%;
}

@media screen and (max-width: 1024px) {
  .our-mission-img-ov-heading {
    font-size: 28px;
    font-weight: 500;
    width: 90%;
    text-transform: capitalize;
  }
}

@media screen and (max-width: 576px) {
  .our-mission-img-ov-heading {
    font-size: 20px;
    width: 85%;
  }
}

.our-mission-img-ov-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  color: white;
  margin: 0;
  width: 95%;
}

@media screen and (max-width: 1024px) {
  .our-mission-img-ov-para {
    font-size: 22px;
    text-transform: unset;
  }
}

@media screen and (max-width: 576px) {
  .our-mission-img-ov-para {
    font-size: 18px;
    width: 87%;
  }
}

.our-mission-full-size-img-box {
  width: 100%;
  height: 535px;
  position: relative;
  height: 609px;
}

.our-mission-full-size-img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .our-mission-full-size-img-box {
    height: auto;
  }
}

@media screen and (max-width: 576px) {
  .our-mission-full-size-img-box {
    height: 410px;
  }
}

.our-mission-img-ov-article {
  display: flex;
  flex-direction: column;
}

.our-mission-img-ov-article .our-mission-img-ov-box:nth-child(even) .our-mission-img-ov-heading-box-layout {
  background-color: white;
}

.our-mission-img-ov-article .our-mission-img-ov-box:nth-child(even) .our-mission-img-ov-heading,
.our-mission-img-ov-article .our-mission-img-ov-box:nth-child(even) .our-mission-img-ov-para {
  color: var(--web-water-blue-color);
}

.team-profile-slider-section {
  position: relative;
}

.team-profile-slider-section .hz-color-bar-v2 {
  position: absolute;
  bottom: 0;
  top: unset;
}

@media screen and (max-width: 1024px) {
  .our-mission-img-ov-box:nth-child(2) .our-mission-full-size-img-box img {
    -o-object-position: 60%;
    object-position: 60%;
  }

  .our-mission-img-ov-box:nth-child(4) .our-mission-full-size-img-box img {
    -o-object-position: 90%;
    object-position: 90%;
  }
}

/* 25.0.3*/
.ct-hero-section {
  background-color: white;
}

.ct-hero-section-outer-layout {
  padding: 50px 0 20px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  row-gap: 40px;
  -moz-column-gap: 24px;
  column-gap: 24px;
}

@media screen and (max-width: 1024px) {
  .ct-hero-section-outer-layout {
    padding-top: 0;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

.ct-hero-text-outer-layout {
  padding: 64px 0;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

@media screen and (max-width: 1024px) {
  .ct-hero-text-outer-layout {
    padding: 40px 0 0;
  }
}

@media screen and (max-width: 768px) {
  .ct-hero-text-outer-layout {
    padding: 28px 0 0;
    row-gap: 28px;
  }
}

.ct-hero-contact-detail-layout {
  min-width: 320px;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

@media screen and (max-width: 576px) {
  .ct-hero-contact-detail-layout img {
    width: 15px;
    height: 15px;
  }
}

@media screen and (max-width: 576px) {
  .ct-hero-contact-detail-layout {
    min-width: 218px;
    row-gap: 14px;
    padding-top: 12px;
  }
}

.ct-hero-contact-detail {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: flex-start;
  font-family: "Be Vietnam", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: rgb(0, 0, 37);
  letter-spacing: 0.5px;
  letter-spacing: 0.3px;
  font-size: 17px;
  text-decoration: none;
}

@media screen and (max-width: 1024px) {
  .ct-hero-contact-detail {
    letter-spacing: 0;
  }
}

.ct-hero-contact-detail a {
  font-family: "Be Vietnam", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: rgb(0, 0, 37);
  letter-spacing: 0.5px;
  font-size: 17px;
  text-decoration: none;
}

@media screen and (max-width: 1024px) {
  .ct-hero-contact-detail a {
    letter-spacing: 0;
  }
}

@media screen and (max-width: 576px) {
  .ct-hero-contact-detail a {
    font-size: 12px;
  }
}

@media screen and (max-width: 1024px) {
  .ct-hero-contact-detail {
    letter-spacing: 0;
  }
}

@media screen and (max-width: 576px) {
  .ct-hero-contact-detail {
    font-size: 12px;
    gap: 15px;
    width: 94%;
  }
}

.ct-hero-heading-box-layout {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  padding-right: 24px;
}

@media screen and (max-width: 768px) {
  .ct-hero-heading-box-layout {
    row-gap: 24px;
  }
}

@media screen and (max-width: 576px) {
  .ct-hero-heading-box-layout {
    padding-right: 0;
  }
}

.ct-hero-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  font-weight: 300;
  color: var(--web-water-blue-color);
  margin: 0;
  width: 75%;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 1024px) {
  .ct-hero-heading {
    width: 85%;
  }
}

@media screen and (max-width: 1024px) {
  .ct-hero-heading {
    letter-spacing: 0;
  }
}

.ct-hero-para {
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  width: 78%;
  color: var(--web-light-black-color);
  letter-spacing: 0;
  margin: 0;
  letter-spacing: 0px;
  color: var(--web-black-color);
}

@media screen and (max-width: 1024px) {
  .ct-hero-para {
    width: 84%;
  }
}

@media screen and (max-width: 576px) {
  .ct-hero-para {
    text-transform: unset;
    width: 92%;
  }
}

@media screen and (max-width: 576px) {
  .ct-hero-para {
    text-transform: capitalize;
    width: 94%;
  }
}

@media screen and (min-width: 1025px) {
  .ct-hero-heading {
    width: 78%;
  }

  .ct-hero-para {
    width: 80%;
  }
}

.ct-hero-form-outer-layout {
  padding: 24px;
}

@media screen and (max-width: 1024px) {
  .ct-hero-form-outer-layout {
    padding: 24px 0;
  }
}

@media screen and (max-width: 576px) {
  .ct-hero-form-outer-layout {
    padding: 18px 0;
  }
}

.form-group-col {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

/* 7. Flexbox for First/Last Name row */
.form-group-row {
  display: flex;
  gap: 30px;
  /* Space between the two columns */
}

.form-group-row .form-group {
  flex: 1;
  /* Ensures both inputs take up equal width */
}

/* 2. Spacing between fields */
.form-group {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

@media screen and (max-width: 576px) {
  .form-group {
    row-gap: 6px;
  }
}

/* 3. Label Styling */
.form-label {
  display: block;
  margin-bottom: 8px;
  font-family: "Be Vietnam", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  width: 78%;
  margin: 0;
  color: var(--web-black-color);
  /* Dark grey text */
}

@media screen and (max-width: 1024px) {
  .form-label {
    width: 95%;
    font-size: 20px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 576px) {
  .form-label {
    font-size: 14px;
  }
}

.form-group.message-textarea .form-label {
  text-transform: none;
}

.form-input {
  font-family: "Be Vietnam", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin: 0;
  color: var(--web-black-color);
  font-size: 16px;
  color: rgb(0, 0, 0);
}

@media screen and (max-width: 1024px) {
  .form-input {
    width: 95%;
    font-size: 16px;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 576px) {
  .form-input {
    font-size: 14px;
  }
}

.form-select {
  font-family: "Be Vietnam", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin: 0;
  color: var(--web-black-color);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 1024px) {
  .form-select {
    width: 95%;
    font-size: 16px;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 576px) {
  .form-select {
    font-size: 14px;
  }
}

@media screen and (max-width: 1024px) {
  .form-select {
    letter-spacing: 0;
  }
}

/* 4. Text Input & Select Styling (The Underline Look) */
.form-input,
.form-select {
  width: 100%;
  padding: 12px 24px;
  /* The dark underline */
  background: transparent;
  outline: none;
  transition: border-color 0.3s ease;
  border-radius: 0;
  /* Vertical padding, no horizontal padding needed for underline style */
  border: none;
  border-bottom: 2px solid rgba(0, 0, 37, 0.3);
  border-bottom-color: var(--web-black-color);
  /* Removes default radius on some browsers */
}

.form-input:invalid,
.form-select:invalid {
  color: rgba(0, 0, 37, 0.7);
  border-bottom-color: rgba(0, 0, 37, 0.3);
}

/* 5. Custom Select Dropdown Arrow */
.form-select {
  appearance: none;
  /* Hides default system arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Adds a custom blue arrow icon */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230000FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 24px;
  cursor: pointer;
}

/* 6. Textarea Styling (The Box Look) */
.form-textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid rgba(0, 0, 37, 0.3);
  /* Full grey border */
  border-radius: 0;
  font-size: 16px;
  outline: none;
  resize: vertical;
  /* Allows user to resize height only */
}

/* Focus effect for inputs */
.form-input:focus,
.form-select:focus {
  border-bottom-color: var(--web-black-color);
  /* Blue highlight on focus */
}

.form-textarea:focus {
  border-color: var(--web-black-color);
  /* Blue highlight on focus */
}

.wpforms-container,
div.wpforms-container-full:not(:empty) {
  margin: 0 0 0 0;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 0px;
  column-gap: 0px;
  row-gap: 30px;
  max-width: 100%;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container {
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}

@media screen and (max-width: 768px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container {
    -moz-column-gap: 0px;
    column-gap: 0px;
  }
}

@media screen and (max-width: 576px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container {
    row-gap: 22.5px;
  }
}

#wpforms-413 {
  --wpforms-button-size-margin-top: 30px !important;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field {
  width: 100%;
  padding: 0;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.last-name {
  margin-left: 16px;
}

@media screen and (max-width: 768px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.last-name {
    margin-left: 12px;
  }
}

div.wpforms-container form#wpforms-form-413 em.wpforms-error {
  margin-top: 0 !important;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.email {
  grid-column-start: 1;
  grid-column-end: 4;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.company {
  grid-column-start: 1;
  grid-column-end: 4;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.wpforms-field-select {
  grid-column-start: 1;
  grid-column-end: 4;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.wpforms-field-textarea {
  grid-column-start: 1;
  grid-column-end: 4;
}

/* 3. Label Styling */
.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field label.wpforms-field-label {
  display: block;
  margin-bottom: 8px;
  font-family: "Be Vietnam", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  width: 78%;
  margin: 0;
  color: var(--web-black-color);
  /* Dark grey text */
}

@media screen and (max-width: 1024px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field label.wpforms-field-label {
    width: 95%;
    font-size: 20px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 576px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field label.wpforms-field-label {
    font-size: 14px;
  }
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.message-textarea label.wpforms-field-label {
  text-transform: none;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input {
  font-family: "Be Vietnam", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin: 0;
  color: var(--web-black-color);
  font-size: 16px;
  color: rgb(0, 0, 0);
}

@media screen and (max-width: 1024px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input {
    width: 95%;
    font-size: 16px;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 576px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input {
    font-size: 14px;
  }
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field .wpforms-field-select select {
  font-family: "Be Vietnam", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin: 0;
  color: var(--web-black-color);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 1024px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field .wpforms-field-select select {
    width: 95%;
    font-size: 16px;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 576px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field .wpforms-field-select select {
    font-size: 14px;
  }
}

@media screen and (max-width: 1024px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field .wpforms-field-select select {
    letter-spacing: 0;
  }
}

/* 4. Text Input & Select Styling (The Underline Look) */
.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input,
.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field select {
  width: 100%;
  max-width: 100%;
  padding: 12px 24px;
  /* The dark underline */
  background: transparent;
  outline: none;
  transition: border-color 0.3s ease;
  border-radius: 0;
  /* Vertical padding, no horizontal padding needed for underline style */
  border: none;
  border-bottom: 2px solid rgba(0, 0, 37, 0.3);
  /* Removes default radius on some browsers */
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input:invalid,
.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field select:invalid {
  color: rgba(0, 0, 37, 0.7);
  border-bottom-color: rgba(0, 0, 37, 0.3);
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input:focus,
.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field select:focus {
  box-shadow: none;
  border-bottom-color: rgb(0, 0, 37);
}

@media screen and (max-width: 576px) {

  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input,
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field select {
    font-size: 12px;
    padding: 8px 16px;
    letter-spacing: 0px;
    height: 36px;
    text-transform: capitalize;
  }
}

/* 5. Custom Select Dropdown Arrow */
.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field select {
  appearance: none;
  /* Hides default system arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Adds a custom blue arrow icon */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230000FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 24px;
  cursor: pointer;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field select {
  color: rgba(0, 0, 37, 0.5);
  font-weight: 300;
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field select.option-selected {
  font-weight: 300;
  color: rgb(0, 0, 37);
  border-bottom-color: rgb(0, 0, 37);
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field input.has-value {
  border-bottom-color: rgb(0, 0, 37);
}

/* 6. Textarea Styling (The Box Look) */
.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.wpforms-field-textarea textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid rgba(0, 0, 37, 0.3);
  /* Full grey border */
  border-radius: 0;
  font-size: 16px;
  outline: none;
  resize: vertical;
  height: 80px;
  /* Allows user to resize height only */
}

.wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.wpforms-field-textarea textarea:focus {
  box-shadow: none;
  border-color: var(--web-black-color);
  /* Blue highlight on focus */
}

@media screen and (max-width: 576px) {
  .wpforms-container form#wpforms-form-413 div.wpforms-field-container div.wpforms-field.form-group.wpforms-field-textarea textarea {
    height: 60px;
  }
}

@media screen and (max-width: 576px) {
  div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    margin-top: 24px;
  }
}

.wpforms-container form#wpforms-form-413 .wpforms-submit-container .wpforms-submit {
  display: block;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #0000FF;
  /* Bright Blue */
  color: white;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpforms-container form#wpforms-form-413 .wpforms-submit-container .wpforms-submit:hover {
  background-color: #0000cc;
  /* Slightly darker blue on hover */
}

@media screen and (max-width: 576px) {
  .wpforms-container form#wpforms-form-413 .wpforms-submit-container .wpforms-submit {
    font-size: 12px;
    padding: 13px;
  }
}

/* 8. Submit Button Styling */
.ct-hero-form-submit-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background-color: #0000FF;
  /* Bright Blue */
  color: white;
  font-family: "Martian Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ct-hero-form-submit-btn:hover {
  background-color: #0000cc;
  /* Slightly darker blue on hover */
}

/* 9. Mobile Responsiveness */
@media (max-width: 600px) {
  .form-group-row {
    flex-direction: column;
    /* Stacks First/Last name on mobile */
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}

.map-img-box {
  width: 100%;
  min-height: 158px;
}

.map-img-box .map-img,
.map-img-box iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.ct-collab-heading-box-layout {
  display: flex;
  flex-direction: column;
  row-gap: 90px;
}

@media screen and (max-width: 768px) {
  .ct-collab-heading-box-layout {
    gap: 30px;
  }
}

.ct-collab-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  font-weight: 300;
  color: var(--web-water-blue-color);
  margin: 0;
  width: 75%;
  text-transform: capitalize;
  width: 95%;
}

@media screen and (max-width: 1024px) {
  .ct-collab-heading {
    width: 85%;
  }
}

.collab-card-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0px;
}

.collab-card {
  width: 330px;
  min-height: 296px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

.collab-card:nth-child(1n) {
  background-color: var(--web-water-gray-color);
}

.collab-card:nth-child(2n) {
  background-color: var(--web-process-blue-color);
}

.collab-card:nth-child(3n) {
  background-color: var(--web-medium-blue-color);
}

.collab-card:nth-child(4n) {
  background-color: var(--web-water-blue-color);
}

@media screen and (max-width: 576px) {
  .collab-card {
    padding: 24px;
    min-height: unset;
    row-gap: 20px;
  }
}

.collab-card-text-box-layout {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

@media screen and (max-width: 1024px) {
  .collab-card-text-box-layout {
    row-gap: 16px;
  }
}

.collab-card-heading {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: capitalize;
  color: rgb(255, 255, 255);
  margin: 0;
}

@media screen and (max-width: 576px) {
  .collab-card-heading {
    font-size: 14px;
  }
}

.collab-card-para {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.25;
  text-transform: unset;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  width: 93%;
}

@media screen and (max-width: 1024px) {
  .collab-card-para {
    font-size: 12px;
    width: unset;
    text-transform: unset;
  }
}

@media screen and (max-width: 576px) {
  .collab-card-img-box {
    width: 48px;
    height: 48px;
  }

  .collab-card-img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
}

/* 25.0.3*/
.str-section-heading-box-layout {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
}

@media screen and (max-width: 768px) {
  .str-section-heading-box-layout {
    gap: 30px;
  }
}

.str-card-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

@media screen and (max-width: 768px) {
  .str-card-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

.str-card {
  min-width: 0;
  background-color: var(--web-light-gray-color);
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

@media screen and (max-width: 768px) {
  .str-card {
    padding: 30px 30px;
    row-gap: 24px;
  }
}

@media screen and (max-width: 576px) {
  .str-card {
    padding: 20px 20px 36px 20px;
  }
}

.str-card {
  position: relative;
}

.vt-color-bar-as-border {
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.vt-color-bar-as-border div {
  width: 100%;
  height: 25%;
}

.vt-color-bar-as-border div:nth-child(1) {
  background-color: #747483;
}

.vt-color-bar-as-border div:nth-child(2) {
  background-color: #5353a0;
}

.vt-color-bar-as-border div:nth-child(3) {
  background-color: #3635c3;
}

.vt-color-bar-as-border div:nth-child(4) {
  background-color: #0100ff;
}

.str-section-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  font-weight: 300;
  color: var(--web-water-blue-color);
  margin: 0;
  width: 75%;
  text-transform: capitalize;
}

@media screen and (max-width: 1024px) {
  .str-section-heading {
    width: 85%;
  }
}

.str-card-heading {
  font-family: "Martian Grotesk", sans-serif;
  font-size: var(--section-heading-font-size-s1);
  font-weight: 300;
  color: var(--web-water-blue-color);
  margin: 0;
  width: 75%;
  text-transform: capitalize;
  font-size: 40px;
  color: var(--web-black-color);
  text-transform: capitalize;
  max-width: 64%;
}

@media screen and (max-width: 1024px) {
  .str-card-heading {
    width: 85%;
  }
}

@media screen and (max-width: 576px) {
  .str-card-heading {
    font-size: 24px;
  }
}

.str-card-text-box-layout {
  display: flex;
  flex-direction: column;
  row-gap: 50px;
}

@media screen and (max-width: 1024px) {
  .str-card-text-box-layout {
    row-gap: 24px;
  }
}

.str-card-para {
  margin: 0;
  font-family: "Be Vietnam", sans-serif;
  font-size: var(--section-main-para-s1);
  font-weight: 400;
  line-height: 1.2;
  width: 78%;
  color: var(--web-light-black-color);
  letter-spacing: 0;
  margin: 0;
  width: 92%;
  max-width: 95%;
}

@media screen and (max-width: 1024px) {
  .str-card-para {
    width: 84%;
  }
}

@media screen and (max-width: 576px) {
  .str-card-para {
    text-transform: unset;
    width: 92%;
  }
}

@media screen and (max-width: 576px) {
  .str-card:nth-child(1) .str-card-para {
    width: 90%;
  }
}

.str-card:nth-child(2) .str-card-para {
  width: 94%;
}

@media screen and (max-width: 576px) {
  .str-card:nth-child(2) .str-card-para {
    width: 94%;
  }
}

.str-card-img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1024px) {
  .str-card-img {
    aspect-ratio: 295/190;
  }
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-outer-layout-v2 {
    flex-direction: column;
    row-gap: 32px;
  }

  .tech-page.hero-img-ov-section-v2 .hero-img-ov-text-para-v2 {
    color: var(--web-black-color);
    width: 94%;
  }

  .tech-page.hero-img-ov-section-v2 .hero-img-ov-img {
    aspect-ratio: 337/230;
  }
}

.hero-img-ov-section-v2.text-ends-to-img-bottom .hero-img-ov-outer-layout-v2 {
  align-items: unset;
}

.hero-img-ov-section-v2.tech-page .hero-img-ov-ul-list-box-v2 {
  justify-self: flex-end;
  margin-top: auto;
  margin-bottom: 0;
}

.hero-img-ov-section-v2.tech-page .hero-img-ov-text-title-layout-v2 {
  height: 100%;
}

.hero-img-ov-section-v2.tech-page .hero-img-ov-ul-list-v2 li {
  margin-bottom: 40px;
}

.hero-img-ov-section-v2.tech-page .hero-img-ov-ul-list-v2 li:nth-last-child(1) {
  margin-bottom: 0;
}

@media screen and (min-width: 1024px) {
  .hero-img-ov-section-v2.tech-page.text-ends-to-img-bottom .hero-img-ov-ul-list-v2 li {
    width: 92%;
  }
}

@media screen and (max-width: 1024px) and (max-width: 768px) {
  .hero-img-ov-section-v2.tech-page .hero-img-ov-text-title-v2 {
    width: 98%;
    word-break: unset;
  }
}

@media screen and (max-width: 1024px) {
  .hero-img-ov-section-v2.tech-page.hero-img-left-layout .hero-img-ov-outer-layout-v2 {
    flex-direction: column;
    row-gap: 48px;
  }

  .hero-img-ov-section-v2.tech-page .hero-img-ov-ul-list-v2 li {
    line-height: 1.2;
    margin-bottom: 24px;
  }

  .hero-img-ov-section-v2.tech-page .hero-img-ov-ul-list-box-v2 {
    padding-top: 0;
  }
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  height: auto;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-controls {
  width: 100%;
  height: 48px;
  background: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
  position: relative;
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  margin-top: unset;
  margin-bottom: unset;
  width: auto;
}

.swiper-button-prev svg,
.swiper-button-next svg,
.swiper-pagination svg {
  display: none;
}

.slider-controls {
  margin: 12px 0;
}

.swiper-button-prev,
.swiper-button-next {
  width: 48px;
  height: 48px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: var(--web-fresh-green-color);
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  background: rgba(0, 0, 37, 0.1);
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 9px;
  height: 18px;
  fill: #7373f5;
}

.diagram-section.index-page.hide-section {
  display: none;
}

.team-profile-slider-section.hide-section {
  display: none;
}

@media screen and (max-width: 1024px) {
  .panel img.tab-process-img {
    max-width: 431px;
    max-height: 287px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: unset;
    margin: unset;
  }
}

@media screen and (max-width: 576px) {
  .tab-content-img-outer-box {
    width: 100%;
    height: 187px;
    overflow: hidden;
  }

  .tab-content-img-inr-box {
    width: 431px;
    height: 287px;
  }

  .panel img.tab-process-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: -68px -49px;
    object-position: -68px -49px;
    aspect-ratio: unset;
    max-width: unset;
    max-height: unset;
    margin: unset;
  }
}

.hero-img-ov-img-layout-v2 video {
  display: none;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
  object-fit: fill;
}

.tech-page .hero-img-ov-img-layout-v2 .hero-img-ov-img-box .hero-img-ov-img {
  display: none;
}

.tech-page .hero-img-ov-img-layout-v2 video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
  object-fit: fill;
  cursor: pointer;
}

.hero-bnr-video {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  max-width: 800px;
  height: 100%;
  z-index: 5;
  -o-object-fit: fill;
  object-fit: fill;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .hero-bnr-video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    -o-object-fit: fill;
    object-fit: fill;
    max-height: 420px;
  }
}

@media screen and (max-width: 576px) {
  .hero-bnr-video {
    max-height: 320px;
  }
}

li.our-sol-menu>a {
  pointer-events: none;
}

.navbar-ul-menu {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.navbar-ul-menu .sub-menu {
  row-gap: 0px;
}

.navbar-ul-menu li>.sub-menu {
  padding-top: 15px;
  padding-bottom: 10px;
}

@media screen and (max-width: 1024px) {
  .navbar-ul-menu li>.sub-menu {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding-left: 16%;
    position: relative;
    top: unset;
    left: unset;
    padding-bottom: 0;
  }
}

/* -------------------- */
/* chnages added on 13-02 */
@media screen and (min-width: 1024px) {
  .para-num-section .read-more-link {
    text-transform: unset;
  }

  .para-num-section .highlight-text {
    color: var(--web-water-blue-color);
    font-weight: 400;
  }

  .impact-card {
    justify-content: space-between;
  }

  .impact-card-para {
    min-height: 84px;
    width: 88%;
  }

  .process-tab-section-sub-heading-para {
    width: 66%;
  }

  .question-content-para {
    width: 93.2%;
  }

  .circular-section .bottom-left {
    padding-left: 12%;
  }

  .sew-sol.hero-img-ov-section .hero-img-ov-heading {
    text-align: right;
  }

  .sew-sol.results-cards-section .metric-card-text {
    width: 81%;
  }

  .hero-section.efl-sol .hero-postcard-text-para-layout p {
    padding-right: 5%;
    color: var(--web-black-color);
  }

  .efl-sol.results-cards-section .metric-card-text {
    width: 81%;
  }

  .efl-sol.hero-img-ov-section .hero-img-ov-text-layout {
    width: 51%;
  }



}




/*# sourceMappingURL=index-25.0.3.css.map */