/* @font-face {
  font-family: "SuisseIntl";
  src: url("/fonts/SuisseIntl-Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "SuisseIntl";
  src: url("/fonts/SuisseIntl-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SuisseIntl";
  src: url("/fonts/SuisseIntl-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "SuisseIntl";
  src: url("/fonts/SuisseIntl-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "SuisseIntl";
  src: url("/fonts/SuisseIntl-Bold.ttf");
  font-weight: 700;
  font-style: normal;
} */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


/* @font-face {
  font-family: "Kanit";
  src: url("/fonts/rewamp-fonts/Kanit-ExtraLight.ttf") format("truetype");
  font-weight: 200;
}

@font-face {
  font-family: "Kanit";
  src: url("/fonts/rewamp-fonts/Kanit-SemiBold.ttf") format("truetype");
  font-weight: 600;
} */

@font-face {
  font-family: "Roboto";
  src: url("/fonts/rewamp-fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/rewamp-fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
}





.poppins-light {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: normal;
}

:root {
  --primary: #8cc540;
  --white: #ffffff;
  --black: #000000;
  --line: #d0cfcf;
  --footer-bg: #d1d3d4;
  --table: #eaeaea;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  /* font-family: "SuisseIntl"; */
  /* font-family: "Poppins", serif; */
  /* font-family: "Kanit", sans-serif; */
  font-family: "Roboto", sans-serif;
  position: relative;
}

a {
  text-decoration: none;
}

h2 {
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 1rem;
}

p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-bottom: 1rem;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
}

h1,
h2,
h3,
h4,
h4,
h5,
h6 {
  font-family: "Kanit", sans-serif !important;
}

.container {
  width: 90%;
  margin: auto;
}

.padding {
  padding: 4rem 0;
}

/* bg-right */
.fence-bg-rt {
  background: url(../images/pattern.svg);
  background-repeat: repeat-y;
  background-position: right;
  background-size: 52%;
}

/* bg-left */
.fence-bg-lt {
  background: url(../images/pattern.svg);
  background-repeat: repeat-y;
  background-position: left;
  background-size: 52%;
  overflow-x: hidden;
}

/* commonflex right*/
.flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-text {
  width: 50%;
}

.flex-img {
  width: 45%;
  text-align: center;
}

.flex-img img {
  max-width: 100%;
  display: block;
}

.flex-img-abt {
  width: 50%;
  text-align: center;
}

.flex-img-abt img {
  width: 100%;
}

.abt-sec .flex {
  gap: 3rem;
}

.flex-text h2 {
  font-size: 26px;
  font-weight: 300;
  margin-bottom: 0.5rem;
}

.flex-text p {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 1rem;
}

.flex-text h3 {
  font-size: 20px;
  margin-bottom: 1rem;
  font-weight: 400;
}

.process-pg {
  padding-right: 2rem;
}

.flex-list {
  margin-top: 1rem;
}

.flex-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  font-size: 16px;
  font-weight: 300;
}

.flex-list ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.3;
  font-weight: 400;
}

.flex-list ul li p {
  margin-bottom: unset;
}

.flex-list ul li p span {
  font-weight: 400;
}

.flex-list h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

/* header */

.header-search>button {
  background-color: unset;
  border: unset;
  outline: unset;
  cursor: pointer;
}

.header-search-menu {
  position: absolute;
  top: calc(100% + 0px);
  right: 0;
  padding: 2rem;
  background-color: #017097;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 320px;
  width: 100%;
  max-width: 480px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.01, 0.01, 0.31, 2.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* When active (visible) */
.header-search.active .header-search-menu {
  pointer-events: all;
  opacity: 1;
  top: calc(100% + 16px);
  /* adjust for spacing under button */
}

/* Input styling */
.header-search-menu input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: unset;
  border-radius: 0;
  background-color: transparent;
  color: #000;
  outline: none;
  border-bottom: 1px solid #fff;
}

.header-search-menu input::placeholder {
  color: #fff;
  opacity: 1;
}

/* Container around search icon and dropdown */
.search-icon.header-search {
  position: relative;
}

div#resultHolder a {
  color: #000;
}

div#resultHolder {
  display: flex;
  flex-direction: column;
}

/* form */
.careerform-inputs input,
textarea {
  position: relative;
}

.careerform-inputs {
  width: 100%;
}

.careerform-inputs p {
  font-size: 16px;
  margin: 0;
  position: absolute;
}

#response_message_foot {
  color: var(--primary);
}

#response_message1 {
  color: var(--primary);
}

#response_message2 {
  color: var(--primary);
}

#response_message_ppf {
  color: var(--primary);
}

#form-response-esg {
  color: var(--primary);
}

/* mms-and-bos */
.factory-highlights-list-u {
  display: flex;
  width: 100%;
  background: #132528;
  color: #ffffff;
  /* padding: 2rem 5% 2rem 5%; */
}

.manufacture-f .factory-highlights-list-u {
  align-items: stretch;
}

.manufacture-f .manufacture-img-f {
  width: 40%;
  height: auto;
}

.manufacture-f .manufacture-img-f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* career contact flex */
.contact-btm-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
}

.contact-btm-flex a {
  font-size: 25px;
  color: var(--white);
  font-weight: 300;
  font-family: "Roboto", sans-serif;
}

/* home */
.banner {
  position: relative;
  /*line-height: unset;*/
  line-height: 0;
}

.banner::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(0deg, #000000 0%, rgb(0 0 0 / 37%) 98.72%); */
  z-index: 2;
  top: 0;
  left: 0;
}

.banner video {
  width: 100%;
  filter: brightness(0.8);
}

.banner img {
  width: 100%;
  filter: brightness(0.7);
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  color: var(--white);
  padding-left: 2rem;
  /* border-left: 1px solid var(--white); */
  z-index: 3;
  /* width: 60%;
  margin: auto; */
}

.banner-text h1 {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.banner-text h2 {
  line-height: 1.3;
}

.banner-text p {
  font-size: 30px;
  font-weight: 700;
  /* color: #e1e1e1a6; */
  color: var(--white);
  text-align: left;
  margin-bottom: 0;
}

.sidebar1 {
  position: absolute;
  width: max-content;
  bottom: 18%;
  left: 5%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.sb-line {
  position: absolute;
  top: 7px;
  left: 6px;
  height: calc(100% - 14px);
  width: 1px;
  background-color: var(--white);
}

.side-con {
  position: relative;
  display: flex;
  gap: 1rem;
  color: var(--white);
  align-items: center;
}

.side-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background-color: var(--black);
}

.side-con p {
  font-size: 16px;
  margin-bottom: unset;
  font-weight: 600;
}

.side-con.active .side-circle {
  width: 18px;
  height: 18px;
  /*background-color: var(--primary);*/
  background-color: #017097;
  transform: translateX(-2px);
}

.side-con.active p {
  /*color: var(--primary);*/
  color: #017097;
}

.sidebar1.side-non .side-con.active p {
  /*color: var(--primary);*/

  color: #017097;
}

.side-non {
  position: relative;
}

.side-non .side-con p {
  color: var(--black);
}

.side-non .side-circle {
  background: #f2f0f0;
  border: 1px solid var(--black);
}

.side-non .sb-line {
  background-color: var(--black);
}

.side-grey .side-circle {
  background-color: #777e84;
}

.sb-holder-color {
  background-color: #00000033 !important;
}

.sbh {
  background-color: transparent !important;
}

/* sec2 */
.stats {
  /*background: linear-gradient(180deg, #f2f0f0 0%, #c9c9c9 100%);*/
  background: #034ea2;
  padding: 2.2rem 0;
  color: #fff;
}

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

.stats-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stats-sec p:nth-child(1) {
  font-size: 72px;
  line-height: 1;
  margin: unset;
  font-weight: 700;
}

.stats-sec p:nth-child(2) {
  font-size: 24px;
  margin: unset;
  font-weight: 300;
  color: #fff;
}

.stat-line {
  position: relative;
}

.stat-line::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100px;
  background-color: #2aab64;
  top: -48%;
  left: 0;
  transform: translate(0, -48%);
}

/* sec3 */
.about-flex {
  display: flex;
}

.abt-flex {
  display: flex;
}

.about-text {
  width: 80%;
  padding: 8rem 6rem 8rem 6rem;
}

.about-text h2 {
  font-weight: 700;
}

.about-text p {
  width: 80%;
}

.about-text a {
  /*color: #014dab;*/
  color: #000;
  font-size: 16px;
  position: relative;
}

.about-text a::after {
  content: "";
  position: absolute;
  /*background: #014dab;*/
  background: #000;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all 0.5s ease;
}

.about-text a:hover::after {
  width: 100%;
}

.about-icon-flex {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.about-icon-flex div {
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.about-icon-flex div img {
  width: 64px;
}

.about-icon-flex div p {
  margin: unset;
  text-align: center;
  font-size: 16px;
  width: 100%;
}

.about-icon-flex video {
  width: 60px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.sidebar-holder {
  background-color: #f2f0f0;
  display: flex;
  width: 20%;
  align-items: flex-end;
  padding-left: 3%;
}

.sidebar-holder-investors {
  background-color: #00000099 !important;
  display: flex;
  height: 100%;
  width: 20%;
  align-items: flex-end;
  position: absolute;
  top: 0;
  left: 0;
}

.side-inv {
  left: 16%;
}

/* sec4 */
.solar {
  position: relative;
  line-height: 0;
}

.solarSlide .swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

.solarSlide .swiper-slide {
  position: relative;
}

.solarSlide .swiper-slide::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(270deg,
      rgb(13 13 13 / 38%) 0%,
      rgb(0 0 0 / 70%) 70%),
    url(../images/home/slide-overlay.svg);
  background-size: cover;
  background-blend-mode: overlay;
}

.solarSlide .swiper-slide img {
  width: 100%;
}

.solarSlide .swiper-button-next {
  right: 20%;
}

.solarSlide .swiper-button-prev {
  left: 20%;
}

.solarSlide .swiper-button-next:after {
  color: var(--white);
}

.solarSlide .swiper-button-prev:after {
  color: var(--white);
}

.solar-text {
  position: absolute;
  top: 34%;
  left: 0;
  z-index: 1;
}

.solar-con {
  width: 48%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.solar-con h2 {
  color: var(--white);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: unset;
  line-height: 1.3;
}

.solar-con p {
  color: var(--white);
  text-align: left;
  margin: unset;
}

.solar-con a {
  color: var(--white);
  font-size: 16px;
  position: relative;
  width: max-content;
}

.solar-con a::after {
  content: "";
  position: absolute;
  background: var(--white);
  bottom: -12px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all 0.5s ease;
}

.solar-con a:hover::after {
  width: 100%;
}

/* sec5 */
.products {
  overflow: hidden;
}

.products-accord {
  max-width: 850px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
}

.product--mobile {
  display: none;
}

.products-flex {
  display: flex;
  flex-direction: row;
}

.products-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  padding: 8rem 0 8rem 6rem;
  gap: 6rem;
}

.products-container h2 {
  font-size: 34px;
  font-weight: 700;
}

.products-container-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 6rem 0 0;
}

.products-container-head>div {
  display: flex;
  gap: 1rem;
  cursor: pointer;
}

.products-con {
  background-color: #dddddd;
  display: flex;
  padding: 3rem;
  border-radius: 10px;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 0;
  box-shadow: -5px 0px 5px 0px #0000000d;
  overflow: hidden;
  transition: all 1s ease;
}

.products-con>span {
  position: absolute;
  height: 100%;
  padding: 0.3rem 2rem;
  aspect-ratio: 1 / 1;
  font-size: 16px;
  font-weight: 400;
  transform: rotate(-90deg);
  top: 0;
  left: 0;
  transition: all 1s ease;
  opacity: 1;
  z-index: 0;
  cursor: pointer;
}

.products-con.active>span {
  transform: rotate(0deg);
  opacity: 0;
}

.products-accord .products-con:nth-child(1) {
  position: relative;
}

/*.products-con>img {*/
/*    width: calc(50% - 0.5rem);*/
/*}*/

.products-con>video {
  width: calc(50% - 0.5rem);
}

.products-one {
  width: calc(45% - 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

.products-one h3 {
  font-size: 28px;
  font-weight: 400;
  transform: translateX(-100%);
  transition: all 1s ease;
  opacity: 0;
}

.power-products-list {
  padding-left: 1.2rem;
}

.products-con.active .products-one h3 {
  transform: translateX(0);
  opacity: 1;
}

.products-one p {
  font-size: 16px;
  margin: 0;
  text-align: left;
}

.products-one a {
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

.products-one div h4 {
  margin-bottom: 0.5rem;
}

.products-two {
  width: 48%;
}

.products-two img {
  width: 100%;
}

/* sec6 */
.solutions {
  position: relative;
}

.Solutions .swiper-slide img {
  width: 100%;
}

.Solutions .swiper-slide::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(270deg,
      rgba(13, 13, 13, 0.2) 0%,
      rgba(0, 0, 0, 0.5) 100%),
    url(../images/home/slide-overlay.svg);
  background-size: cover;
  background-blend-mode: overlay;
}

.sol-con {
  width: 80%;
  height: 100vh;
  background: #0d0d0d80;
  margin: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  position: relative;
  z-index: 9;
}

.sol-con-text {
  /* width: 40%; */
  width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  min-height: 340px;
}

/* .sol-con-text div p:nth-child(1) {
  font-weight: 400;
  margin-bottom: unset;
} */

.sol-con-text div h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 1rem;
}

.sol-con-text div p {
  text-align: left;
}

.sol-con-text div a {
  color: var(--white);
  position: relative;
  /* text-decoration: underline;
  text-underline-offset: 5px; */
  font-size: 16px;
}

.sol-con-text div a::after {
  content: "";
  position: absolute;
  background: var(--white);
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all 0.5s ease;
}

.sol-con-text div a:hover::after {
  width: 100%;
}

.Solutions .swiper-button-next {
  right: 18%;
}

.Solutions .swiper-button-prev {
  left: 36%;
}

.Solutions .swiper-button-next:after {
  color: var(--white);
}

.Solutions .swiper-button-prev:after {
  color: var(--white);
}

/* sec7 */

.events-flex {
  display: flex;
}

.events-con-holder {
  background: #f6f6f6;
  padding: 6rem 6rem 6rem 8rem;
  width: 80%;
  /* background: url(../images/pattern.svg);
  background-repeat: repeat-y;
  background-position: right; */
  background-size: 52%;
}

.events-con-holder h2 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 2rem;
}

.events-con-flex {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10rem;
  margin-bottom: 3rem;
}

.events-content {
  width: 35%;
  background-color: var(--white);
  border-bottom-left-radius: 30px;
  position: relative;
  border-top-right-radius: 30px;
  overflow: hidden;
}

.events-content div {
  overflow: hidden;
}

.events-content--text {
  padding: 1rem;
}

.events-content img {
  width: 100%;
  transition: transform 0.5s ease;
  transform: scale(1);
}

.events-content:hover img {
  transform: scale(1.1);
  animation: flicker 0.5s ease;
}

.events-content:hover {
  box-shadow: 5px 5px 5px 0px #00000040;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 0.95;
  }

  20% {
    opacity: 0.9;
  }

  30% {
    opacity: 0.85;
  }

  40% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.75;
  }

  60% {
    opacity: 0.8;
  }

  70% {
    opacity: 0.85;
  }

  80% {
    opacity: 0.9;
  }

  90% {
    opacity: 0.95;
  }

  100% {
    opacity: 1;
  }
}

.events-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 1rem;
}

.events-content p {
  font-size: 16px;
}

.events-con-holder a {
  color: var(--black);
  font-size: 16px;
  position: relative;
}

.events-con-holder a::after {
  content: "";
  position: absolute;
  background: var(--black);
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all 0.5s ease;
}

.events-con-holder a:hover::after {
  width: 100%;
}

.event-date {
  background-color: #f4f4f4;
  position: absolute;
  top: 4%;
  left: 4%;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.event-date p {
  margin-bottom: 0;
  line-height: 0.8;
}

.event-date p:nth-child(1) {
  font-size: 34px;
}

.event-date p:nth-child(2) {
  text-align: center;
}

/* sec8 */
.investorHome {
  position: relative;
  background-color: #017097;
  /*background-color: #ebebeb;*/
}

.investorHome-flex {
  display: flex;
  line-height: 0;
  position: relative;
}

.investorHome-img {
  width: 50%;
  position: relative;
}

.investorHome-img img {
  width: 100%;
  height: 100%;
}

.investorHome-text {
  width: 50%;
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #034ea2;
}

.investorHome-text div {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #fff;
  /* padding: 1rem; */
}

.investorHome-text h2 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: unset;
  /*color: #434044;*/
}

.investorHome-text p {
  /*color: #434044;*/
  margin: unset;
}

.investorHome-text a {
  /*color: #434044;*/
  color: #fff;
  font-size: 16px;
  position: relative;
  width: max-content;
}

.investorHome-text a::after {
  content: "";
  position: absolute;
  /*background: #434044;*/
  background: #fff;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all 0.5s ease;
  color: #fff;
}

.investorHome-text a:hover::after {
  width: 100%;
}

.investorHome-text div:nth-of-type(2) a::after {
  bottom: -1px;
}

/* sec9 */
.esg {
  position: relative;
  background: url(../images/home/esg-bg.jpg);
  /* height: 100vh; */
  height: 100%;
  width: 100%;
  display: flex;
}

.esg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg,
      rgb(13 13 13 / 68%) 0%,
      rgb(0 0 0 / 58%) 100%);
  z-index: 0;
}

.esg-flex {
  display: flex;
}

.esg-sidebar {
  width: 20%;
}

.esg-slider {
  width: 80%;
  padding: 5rem 5rem 5rem 5rem;
  position: relative;
  z-index: 1;
}

.esg-s-flex {
  display: flex;
  align-items: stretch;
  margin: 3rem 0;
}

.esgSlide .swiper-wrapper {
  display: flex;
  justify-content: space-between;
  height: 55vh;
  /* Optional: if you want to space out the slides */
}

.esgSlide .swiper-slide {
  background: #fff;
  border-bottom-left-radius: 30px;
  /* width: 35% !important; */
  box-shadow: 5px 5px 5px 0px #00000040;
  border-top-right-radius: 30px;
  overflow: hidden;
}

.esgSlide .swiper-button-next:after,
.esgSlide .swiper-button-prev:after {
  color: #fff;
}

.esgSlide .swiper-slide img {
  width: 100%;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

.esg-text {
  padding: 1rem;
}

.esg-text h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.esg-text p {
  font-size: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* change number of visible lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.esg-content img {
  width: 100%;
  transition: transform 0.5s ease;
  transform: scale(1);
}

.esg-content :hover img {
  transform: scale(1.1);
  animation: flicker 0.5s ease;
  border-top-right-radius: 30px;
}

.esg-slider h2 {
  font-size: 34px;
  font-weight: 700;
  color: var(--white);
}

.esg-slider a {
  color: var(--white);
  font-size: 16px;
  position: relative;
  width: max-content;
}

.esg-slider a::after {
  content: "";
  position: absolute;
  background: var(--white);
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all 0.5s ease;
}

.esg-slider a:hover::after {
  width: 100%;
}

.esg--img {
  overflow: hidden;
}

.achieve-goal h2 {
  padding-left: 5%;
}

.esg-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

.esg-form .careerform-inputs input,
.esg-form .careerform-inputs textarea {
  border: unset;
  outline: unset;
  background-color: unset;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 400;
}

.esg-form button {
  border: unset;
  outline: unset;
  background-color: unset;
  text-align: left;
  cursor: pointer;
}

.mySwiper9 .swiper {
  width: 100%;
  height: 100%;
}

.mySwiper9 .swiper-slide {
  background-position: center;
  background-size: cover;
}

.mySwiper9 .swiper-slide img {
  display: block;
  width: 100%;
}

/* manufacturing page */
.manufacture-m {
  background-color: var(--white);
  padding: 4rem 0;
}

.manufacture-grey-m {
  background-color: #f9f9f9;
}

.manufacture-flex-m {
  display: flex;
  /* gap: 5rem; */
  overflow: hidden;
  justify-content: space-between;
}

.manufacture-grey-m {
  padding: 4rem 0 4rem 5%;
}

.manufacture-text-m a {
  /*color: #8CC63F;*/
  color: #017097;
  font-size: 16px;
  /*border-bottom: 1px solid #8CC63F;*/
  border-bottom: 1px solid #017097;
  font-weight: 400;
}

.manufacture-text-m {
  width: calc(40% - 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  padding: 2rem 0;
}

.manufacture-text-m h2 {
  margin-bottom: 0;
}

.manufacture-img-m {
  width: calc(60% - 2.5rem);
}

.manufacture-img-m img {
  width: 100%;
}

/* Factory Highlights section */
.manufacture-f {
  background-color: #132528;
  padding: 5rem 0;
  color: var(--white);
}

.manufacture-flex-f {
  display: flex;
  gap: 5rem;
}

.manufacture-text-f {
  width: calc(70% - 2.5rem);
}

.manufacture-img-f {
  width: calc(30% - 2.5rem);
}

.manufacture-img-f img {
  width: 100%;
}

.manufacture-f-ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.5rem;
}

.manufacture-f-ul li {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
}

.manufacture-f-ul li img {
  width: 19px;
  height: 25px;
}

.manufacture-f-ul li p {
  font-weight: 200;
}

/* .manufacture-text-m div {
  margin-bottom: 3rem;
} */

/* product page */

.prod-intro {
  width: 100%;
  /*border-bottom: 1px solid #ccc;*/
}

.prod-intro h2 {
  margin-bottom: 0;
}

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

.detailed-features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.prod-intro p span {
  font-weight: 600;
}

.prod-flex {
  display: flex;
  gap: 5rem;
}

.prod-list {
  width: calc(55% - 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prod-panel-image {
  width: calc(45% - 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prod-panel-image img {
  width: 46.1%;
}

.prod-celestia-image {
  width: calc(45% - 2.5rem);
  display: flex;
  flex-direction: column;
}

.prod-celestia-image img {
  width: 100%;
}

.prod-list h3 {
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 0;
}

.prod-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
}

.prod-list ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
}

.prod-list ul li p {
  margin-bottom: unset;
}

.prod-table {
  padding: 2rem 0;
  overflow-x: auto;
}

.dt-table {
  border-collapse: collapse;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.dt-table {
  width: 90%;
}

.dt-table th,
.dt-table td {
  padding: 1rem 3rem 0.5rem 3rem;
  font-weight: 400;
}

.dt-table th {
  font-size: 16px;
  line-height: 1.3;
  background-color: #fff;
}

.dt-table th {
  font-weight: 500;
  /*background-color: rgba(246, 147, 32, 1);*/
  background-color: #017097;
  color: #fff;
}

.dt-table td {
  font-size: 16px;
  font-weight: 400;
}

.dt-table td img {
  width: 34px;
}

.dt-table td.td-flex {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-top: unset;
  border-right: unset;
  line-height: 0;
}

.td-border-r {
  border-right: 1px solid #ccc;
}

.header-row {
  background-color: #969696;
  color: var(--white);
  text-align: left;
}

.header-info {
  text-align: left;
}

.celestia {
  background: #f9f9f9;
}

.background-light {
  background-color: #f5f6f8;
}

.background-dark {
  background-color: #ededed;
}

.head-border-right {
  border-right: 1px solid #ccc;
  width: 22%;
}

.head-border-right0 {
  border-right: 1px solid #ccc;
  width: 26%;
}

.celestia .prod-table tr:nth-child(6) {
  border: unset;
}

.features-part2 {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-direction: column;
}

.features-part2-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.features-part3 {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.features-part3-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(25% - 1.5rem);
}

.features-part2-icon {
  /*background-color: #8CC63F;*/
  /*background-color: #017097;*/
  padding: 0.5rem;
}

/* .features-part2-icon img {
  width: 100%;
} */

.features-part2-icon video {
  width: 50px;
}

.features-part2 div p {
  font-size: 18px;
  margin: 0;
}

.features-part3-flex p {
  font-size: 16px;
  margin: 0;
}

.mono-image {
  background-color: rgba(246, 147, 32, 1);
  padding: 0.4rem;
}

.image-icon-flex p {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.image-icon-flex img {
  width: 20px !important;
}

.image-icon-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.mono-image1 {
  /*background-color: rgba(246, 147, 32, 1);*/
  background-color: #017097;
  padding: 0.4rem;
}

.image-icon-flex1 p {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.image-icon-flex1 img {
  width: 20px !important;
}

.image-icon-flex1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.table-one {
  border-bottom: unset;
}

.table-one td {
  border-left: 1px solid #ccc;
  width: 33.33%;
}

.table-one td:nth-child(1) {
  border: unset;
}

/* servo stabilizer page */

.servo-stab-intro {
  width: 100%;
  margin-bottom: 3rem;
}

.servo-stab-intro p {
  margin: unset;
  width: 100%;
  line-height: 1.5;
}

.servo-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.servo-list {
  width: 100%;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.servo-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  font-size: 16px;
  font-weight: 300;
}

.servo-list .servo-features ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.3;
}

.servo-list .servo-features ul li p {
  margin-bottom: unset;
}

.servo-list ul li div strong {
  font-weight: 400;
}

.servo-list .servo-app ul li div {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  list-style: none;
}

.servo-list .servo-technical ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.3;
}

.servo-list .servo-technical ul li p {
  margin-bottom: unset;
}

.servo-list .servo-features ul li span {
  font-weight: 400;
}

.servo-list .servo-technical ul li span {
  font-weight: 400;
}

ul.servo-inner-list {
  gap: 0.6rem;
  padding-left: 4rem;
  margin-top: 1rem;
}

.servo-con {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: calc(50% - 2rem);
}

.servo-con h2 {
  margin-bottom: 0;
}

.servo-con h3 {
  font-size: 32px;
  font-weight: 300;
  text-transform: uppercase;
}

.servo-con p {
  margin-bottom: 0;
}

.servo-img {
  width: 48%;
  text-align: center;
}

.servo-img img {
  width: 50%;
}

.om-services-img img {
  width: 100%;
}

.servo-technical p a {
  color: var(--primary);
}

.servo-technical p strong {
  font-weight: 400;
}

.servo-catalogue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-decoration: none;
  color: var(--black);
  margin-top: 2rem;
}

.servo-catalogue img {
  width: 40px;
}

.servo-catalogue p {
  font-size: 22px;
  margin: unset;
}

.process--img img {
  width: 85.4%;
  margin: auto;
}

.process--img video {
  width: 85.4%;
  margin: auto;
}

/* maintenance page */
.maint {
  margin: unset;
}

.maintenance-bg {
  background: #f9f9f9;
}

/* solar energy sales page */

.third-party-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.third-party-flex-text {
  width: 50%;
}

.third-party-slider {
  width: 45%;
  text-align: center;
}

.mySwiperTP img {
  width: 100%;
}

.mySwiperEP img {
  width: 100%;
}

.energy-sec3 {
  padding-bottom: 0;
}

.container1 {
  width: 100%;
  background-image: linear-gradient(90deg, #0000000a 50%, #ffffff 50%);
}

.container1 h2 {
  width: 100%;
  margin-bottom: 0.5rem;
}

.container1 .flex {
  width: 90%;
  margin: auto;
}

.third-party>p {
  width: 80%;
}

.third-party h2 {
  margin-bottom: 0;
}

/* esg page */
.swelect-esg-head {
  padding-left: 0 !important;
}

.esg--goals-m {
  margin-top: 0;
  padding-right: 1rem;
}

.esg--goals-m div p {
  margin-top: 2rem;
}

.join-m {
  /*color: var(--primary);*/
  color: #017097;
}

.p--flex {
  display: flex;
  align-items: center;
}

.p--flex a {
  text-decoration: underline;
  text-underline-offset: 5px;
  color: var(--black);
  text-decoration-color: var(--primary);
}

.p--flex img {
  width: 35px;
}

.flex-img hr {
  margin-bottom: 1rem;
}

/* downloads page */

.flex-img .solar-pv-module {
  width: 183px;
}

.flex-img .solar-water-pump {
  width: 350px;
}

img.solar-water-pump-d {
  width: 218px;
}

.downloads-flex-unset {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.certifications-flex {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.downloads-flex-m {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.downloads-sec-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(25% - 0.75rem);
  gap: 0.5rem;
}

.downloads-sec-c {
  width: 100% !important;
}

.downloads-sec-m img {
  /*width: 39%;*/
  width: max-content;
}

.downloads-sec-m p {
  color: var(--black);
  margin: unset;
  text-align: center;
}

.downloads-sec-c p {
  color: var(--black);
  margin: unset;
}

.solar--downloads {
  text-align: center;
}

.s-download-m {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.s-download-m img {
  width: 5.2%;
}

.s-download-m p {
  color: var(--black);
  margin: unset;
  font-size: 22px;
}

.container2 {
  width: 100%;
  /* background-image: linear-gradient(90deg, #f9f9f9 50%, #f9f9f985 50%); */
  border-top: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
}

.container2 .flex {
  width: 90%;
  margin: auto;
}

/* career page */
.position-m {
  padding: 0 0 4rem 0;
}

.position-m h2 {
  font-size: 35px;
  font-weight: 300;
  margin-bottom: 0rem;
}

.position-list {
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
}

.position-list li {
  cursor: pointer;
}

.accordion-title {
  padding: 1.5rem 0.5rem;
  border-bottom: 1px solid #7a7a7a;
  position: relative;
  color: var(--black);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-title::after {
  content: "\276F";
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0.5rem;
  font-size: 1rem;
  transform-origin: center;
  transform: rotateZ(90deg);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  top: 40%;
  bottom: 50%;
  color: var(--black);
}

.rotate>.accordion-title::after {
  transform: rotateZ(-90deg);
}

.accordion-title span {
  font-size: 20px;
  font-weight: 500;
}

.accordion-content {
  height: 0;
  min-height: 0px;
  opacity: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  overflow: hidden;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content img {
  width: auto;
}

.accordion-content p {
  flex: 0 0 50%;
}

.accordion-content.text p {
  flex: 0 0 100%;
}

.accordion-content.text {
  flex-direction: column;
}

.open>.accordion-content {
  /* min-height: 300px; */
  height: 100%;
  opacity: 1;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 1rem;
}

.accordion-content-parent {
  padding-left: 3rem;
}

.apply--btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #017097;
  font-size: 16px;
  margin: 1.5rem 0;
}

.apply--btn img {
  width: 32px;
}

/* .ac-sec-one {
  width: 45%;
}

.ac-sec-two {
  width: 45%;
} */

.ac-sec-two h3 {
  font-size: 22px;
  margin-bottom: 2rem;
}

ul.career--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 2rem;
}

ul.career--list li {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
}

.career-form-flex {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  justify-content: flex-end;
}

.careerform-inputs {
  width: 100%;
}

.car-one {
  flex: 1 1 40%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* font-family: "SuisseIntl";\ */
  font-family: "Poppins", serif;
}

input[type="file"] {
  padding: 0.5rem;
}

.cfs h2 {
  margin-bottom: 2rem;
}

.career-form-sec {
  background-color: #f4f4f4;
}

.apply-m input {
  border: unset;
  border-bottom: 1px solid #6d6d6d;
  background: unset;
  outline: unset;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
}

.apply-m select {
  border: unset;
  border-bottom: 1px solid #6d6d6d;
  background: unset;
  outline: unset;
  border-radius: 0;
  font-size: 16px;
  color: var(--black);
  font-weight: 400;
  padding: 0.5rem;
  width: 100%;
}

.apply-m textarea {
  border: unset;
  border-bottom: 1px solid #6d6d6d;
  background: unset;
  outline: unset;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  padding: 0.5rem;
  width: 100%;
}

input::-webkit-input-placeholder {
  font-size: 16px;
  color: var(--black);
}

textarea::-webkit-input-placeholder {
  font-size: 16px;
  color: var(--black);
}

.apply-m button {
  display: flex;
  align-items: center;
  border: unset;
  background: unset;
  font-size: 24px;
  font-weight: 300;
  /*color: var(--primary);*/
  color: #3db272;
  gap: 0.5rem;
  cursor: pointer;
}

.impression {
  text-align: left;
  margin-bottom: 4rem;
}

.impression h2 {
  font-size: 40px;
}

.impression p {
  font-size: 24px;
  text-align: left;
}

/* solar inverter page */

.solar-in {
  padding-left: 3%;
  background-image: linear-gradient(90deg, #0000000a 50%, transparent 50%);
}

.solar-inverter-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10rem;
}

.solar-inv-list ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
}

.solar-inv-list ul li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
}

.solar-inv-list ul li p {
  margin-bottom: unset;
}

.solar-inverter-img img {
  width: 100%;
}

.solar-inverter-text {
  width: 40%;
}

.solar-inverter-img {
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.solar-inverter-text h2 {
  font-size: 40px;
  font-weight: 300;
  margin-bottom: 2rem;
}

.solar-inv-list h3 {
  font-size: 35px;
  font-weight: 300;
  margin-bottom: 1rem;
}

.solar-inv-inner-list {
  margin-bottom: 2rem;
}

.solar-inv-inner-list h4 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 1rem;
}

.inverter-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 4rem;
}

.inverter-table th {
  background-color: #a4a1a1;
  color: white;
  padding: 2rem;
  text-align: left;
  border: 1px solid #e5e4e4;
  font-weight: 400;
  font-size: 22px;
}

.inverter-table td {
  background-color: #f2f2f2;
  padding: 2rem;
  border: 1px solid #e5e4e4;
  font-size: 16px;
}

.inverter-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.si-download {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.si-download img {
  width: 50px;
}

.si-download p {
  margin-bottom: 0;
  font-size: 30px;
  color: var(--black);
}

/* contact page */

.office-address-flex {
  display: flex;
  gap: 10rem;
}

.office-address-flex1 {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem 0;
}

.add-office {
  width: 33.333%;
  padding: 0 3rem;
}

.add-office:not(:first-child) {
  border-left: 1px solid #c7c7c7;
}


.add-office:nth-child(1) {
  width: 28%;
  padding: 0;
  border: unset;
}

.add-office:nth-child(2) {
  width: 40%;
}

.add-office:nth-child(3) {
  width: 32%;
}

.add-office:nth-child(4) {
  padding: 0;
  border: unset;
  width: 50%;
}

.add-office:nth-child(5) {
  border: unset;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.add-office-form {
  width: calc(50% - 5rem);
}

.add-off-flex {
  display: flex;
  gap: 5rem;
}

.add-office h2 {
  margin-bottom: 0.5rem;
  font-size: 28px;
  font-weight: 400;
}

.add-office h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0.6rem;
}

.add-office address {
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
}

.con-details {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  gap: 0.5rem;
  color: var(--black);
}

.con-details a {
  color: var(--black);
  font-size: 16px;
  font-weight: 300;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-form input,
textarea,
select {
  border: unset;
  outline: unset;
  background-color: unset;
  border-bottom: 2px solid #50505070;
  border-radius: 0;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 400;
  width: 85%;
  color: var(--black);
}

#locationSelect {
  color: var(--white);
}

.contact-form button {
  border: unset;
  outline: unset;
  background-color: #034ea2;
  color: #fff;
  width: max-content;
  padding: 1rem 3rem;
  cursor: pointer;
  font-size: 18px;
}

.map h2 {
  margin-bottom: 1rem;
}

.add-map-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.add-map-flex::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #c9c9c9;
}

.map-sec-one {
  width: 45%;
}

.map-sec-two {
  position: relative;
  width: 45%;
}

.map-sec-two>img {
  width: 100%;
}

#mapMask img {
  opacity: 0;
  pointer-events: none;
  /* 🚫 no hover by default */
  position: absolute;
}

#mapMask img.active {
  opacity: 1;
}

/* Enable hover ONLY for active map */
#mapMask[data-active-map="india"] img[data-map="india"],
#mapMask[data-active-map="usa"] img[data-map="usa"],
#mapMask[data-active-map="singapore"] img[data-map="singapore"] {
  pointer-events: auto;
  /* ✅ hover allowed */
}

#mapMask img:nth-child(1) {
  width: 28%;
  top: 57%;
  left: 33%;
}

#mapMask img:nth-child(2) {
  width: 16%;
  top: 56%;
  left: 25%;
}

#mapMask img:nth-child(3) {
  width: 25%;
  top: 49%;
  left: 21%;
}

#mapMask img:nth-child(4) {
  width: 3%;
  top: 31%;
  left: 33%;
  transform: rotate(20deg);
}

#mapMask img:nth-child(5) {
  width: 12%;
  top: 77%;
  left: 33%;
  transform: rotate(-3deg);
}

#mapMask img:nth-child(6) {
  width: 16.4%;
  top: 57.7%;
  left: 30.6%;
}

#mapMask img:nth-child(7) {
  width: 3%;
  top: 33.3%;
  left: 35%;
}

#mapMask img:nth-child(8) {
  width: 16.4%;
  top: 47%;
  left: 72%;
}

#mapMask img:nth-child(9) {
  width: 4%;
  top: 45%;
  left: 57%;
}

#mapMask img:nth-child(10) {
  width: 4%;
  top: 30%;
  left: 57%;
}

#mapMask img.active {
  opacity: 1;
}

.address-map {
  padding: 5rem 0;
}

.address-map h3 {
  font-size: 28px;
  font-weight: 400;
}

.address-map address {
  font-size: 16px;
  font-style: normal;
  line-height: 1.5;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.tn-flex {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.add-call {
  color: #fff;
  font-size: 16px;
}

/* Hide all addresses by default */
.address-map .address {
  display: none;
}

/* Show only the selected address with the active class */
.address-map .address.active {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.address img {
  margin-top: 0.5rem;
  width: 12px;
}

.contact-number-flex {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Contact new style - Umar */

.contact-new-address-sec {
  background-color: #dbe1d2;
  background-image: unset;
}

.contact-new-form-sec {
  background-image: unset;
}

/* Umar css styles */
/* Aboutus css Starts */

.cpny-num-u {
  background: linear-gradient(180deg, #f2f0f0 0%, #e4e4e4 100%);
}

.cpny-num-container-u {
  display: flex;
  justify-content: space-between;
  padding: 2rem 0;
}

.cpny-num-card-u {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cpny-num-card-u:nth-child(4) {
  border: unset;
}

.cpny-num-card-u h2 {
  font-size: 60px;
  font-weight: 300;
  text-align: center;
  margin: unset;
}

.cpny-num-card-u p {
  font-size: 16px;
  color: rgba(85, 85, 85, 1);
  margin-bottom: unset;
}

.abt--msec {
  padding-top: 0;
}

.our-visionaries-u {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.our-visionaries-section1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.our-visionaries-section1 h2 {
  margin-bottom: 0;
}

.our-visionaries-u span {
  color: rgba(94, 94, 94, 1);
  font-size: 17px;
  font-weight: 300;
}

.our-visionaries-u h3 {
  font-size: 26px;
  font-weight: 400;
}

.leadership-team-u .team-card-u span {
  font-size: 16px;
}

.team-card-u {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  flex-direction: column;
}

.team-card-one-u h4 {
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: unset;
  text-align: right;
  background: #00000099;
  position: absolute;
  bottom: 53px;
  width: 75%;
  padding: 1rem 0.5rem;
  color: #ffffff;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.team-card-one-u h5 {
  font-size: 16px;
  font-weight: 400;
  text-align: right;
  line-height: 1;
  color: #000000;
  padding: 0rem 0.5rem;
  width: 75%;
}

.leadership-team-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.team-card-flex-u {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 3rem calc(25% - 313px);
}

.team-card-one-u {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}

.team-card-one-u img {
  width: 75%;
}

.vision-mission-container-u {
  display: flex;
  justify-content: space-between;
}

.vision-left-u {
  width: 50%;
  /* background-color: #DBE1D2; */
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.vision-and-image-u {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.vision-and-image-u2 {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-direction: column;
}

.vision-and-image-u p {
  margin-bottom: 0;
}

.vision-and-image-u video {
  width: 105px;
}

.vision-and-image-u img {
  width: 70px;
}

.mission-u .vision-and-image-u2 img {
  filter: invert(1);
  width: 70px;
}

.vision-u h3 {
  font-size: 38px;
  font-weight: 600;
}

.mission-card-u {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  flex-direction: column;
}

.mission-card-u p {
  margin-bottom: unset;
}

.vision-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 10% 4rem 10%;
  color: #000000;
}

.mission-u {
  width: 50%;
  background: #132528;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 5% 4rem 5%;
  color: #ffffff;
}

.mission-card-one-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vision-and-image-u2 h3 {
  font-size: 38px;
  font-weight: 600;
}

.core-value-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 0;
  background: #efefef;
}

.core-value-flex {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.cv-con {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.vision-triangle-u {
  width: 50%;
  text-align: center;
  line-height: 0;
}

.vision-triangle-u img {
  width: 72.2%;
}

.cpny-details-section-u {
  background: linear-gradient(180deg, #f2f0f0 0%, #e4e4e4 100%);
}

.cpny-dtails-container-u {
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  padding: 4rem;
  gap: 5rem;
  justify-content: space-around;
}

.cpny-details-card-u {
  width: calc(33.33% - 4rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  /* border-right: 1px solid rgba(0, 0, 0, 0.2); */
}

.cpny-details-card-u img {
  min-height: 87px;
  object-fit: contain;
  object-position: center bottom;
}

.cpny-details-card-u:nth-child(3) {
  border: unset;
}

.cpny-details-card-u:nth-child(6) {
  border: unset;
}

.cpny-details-card-u:nth-child(1) img {
  width: 20%;
}

.cpny-details-card-u:nth-child(2) img {
  width: 15%;
}

.cpny-details-card-u:nth-child(3) img {
  width: 41%;
}

.cpny-details-card-u:nth-child(4) img {
  width: 38%;
}

.cpny-details-card-u:nth-child(5) img {
  width: 14%;
}

.cpny-details-card-u:nth-child(6) img {
  width: 35%;
}

.cpny-details-card-u h3 {
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  color: #000000;
}

.cpny-details-card-u p {
  width: 100%;
  text-align: center;
  color: #000000;
  margin: unset;
  font-size: 16px;
  font-weight: 300;
}

/*.year-tab-sec-u {*/
/*  padding: 4rem 0;*/
/*}*/

.year-tab-holder-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.arrow-container {
  display: flex;
  align-items: center;
  position: relative;
}

.arrow {
  background: unset;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 1;
}

.arrow img {
  width: 50px;
}

.left-arrow {
  margin-right: 0.5rem;
}

.right-arrow {
  margin-left: 0.5rem;
}

.tab-container-u {
  display: flex;
  gap: 1rem;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-bottom: 1px solid #d1d1d1;
  padding-bottom: 0.6rem;
  user-select: none;
  flex: 1;
}

.tab-container-u::-webkit-scrollbar {
  display: none;
}

.b-tab {
  padding: 3rem 0;
  display: none;
  overflow-x: hidden;
}

.b-tab.active {
  display: block;
  height: auto;
}

.b-nav-tab {
  padding: 0.5rem 1.5rem;
  font-size: 20px;
  color: #000;
  user-select: none;
}

.b-nav-tab.active {
  color: #fff;
  background: rgba(0, 0, 0);
  border-radius: 30px;
}

.swiper-containerabt-container .swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-containerabt-container .swiper-slide {
  text-align: center;
  font-size: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.swiper-containerabt-container .swiper-slide p {
  width: 70%;
  text-align: center;
}

.swiper-containerabt-container .swiper-slide img {
  width: 60%;
  margin: auto;
}

/* About us css ends */

/* SHPV manufacturing unit CSS starts */

.shpv-flex-img-u {
  width: calc(40% - 1.5rem);
}

.shpv-flex-img-u img {
  width: 100%;
  height: 70vh;
}

.manu-shpv .swiper {
  text-align: center;
}

.shpv-flex-text-u {
  width: calc(60% - 1.5rem);
  /*padding: 4rem 0 0;*/
}

.shpv-flex-text-u h2 {
  margin-bottom: 0;
}

.shpv-flex-u {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  padding-bottom: 4rem;
}

.product-range-u {
  padding: 4rem 0;
  background-color: rgba(249, 249, 249, 1);
}

.product-range-container-u img {
  width: 100%;
}

.quality-certificates-holder-u {
  display: flex;
}

.quality-certificates-list-u {
  width: 100%;
  background: #132528;
  color: #ffffff;
  padding: 2rem 5% 2rem 5%;
}

.quality-certificates-list-u li {
  break-inside: avoid;
  font-size: 16px;
}

.quality-certificates-image-u {
  width: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbe1d2;
  flex-direction: column;
}

/*.quality-certificates-list-u {*/
/*    width: calc(50% - 1.5rem);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1.2rem;*/
/*}*/

.quality-certificates-container-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quality-certificates-list-u li {
  padding-bottom: 1.5rem;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}

.quality-certificates-list-u p {
  margin-bottom: 1rem;
}

/*.quality-certificates-image-u {*/
/*    width: calc(50% - 1.5rem);*/
/*}*/

.quality-certificates-image-u img {
  width: max-content;
  mix-blend-mode: darken;
}

/* SHPV manufacturing unit CSS ends */

/* Solar Pumping CSS starts */

.residential-div {
  margin-bottom: 1.5rem;
}

.solar-pump-container-u {
  display: flex;
  gap: 1rem;
  padding: 3rem 0;
  align-items: flex-start;
}

.solar-pump-left-u {
  width: 48%;
  /*padding: 0 0 5rem 5%;*/
  padding: 0 0 0 5%;
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.solar-pump-left-u h2 {
  margin: unset;
}

.solar-pump-right-u {
  width: 52%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.solar-right-images-u {
  width: 100%;
}

.solar-pump-list-u li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.solar-pump-list-u li p {
  margin: unset;
}

.solar-pump-list-u li p b {
  font-weight: 400;
}

.solar-pump-list-u {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.solar-pump-list-u h3 {
  font-size: 30px;
  font-weight: 400;
}

.solar-pump-list-u h4 {
  font-size: 30px;
  font-weight: 300;
}

.solar-pump-list-u a {
  /*color: rgba(140, 197, 64, 1);*/
  color: #017097;
}

.solar-pump-imageone-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.solar-pump-imageone-u img {
  width: 74%;
}

.solar-pump-imageone-u:nth-child(2) img {
  width: 60%;
}

.solar-pump-imageone-u a {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #000;
  font-size: 22px;
  font-weight: 300;
}

.download-catalogue-u img {
  width: 40px;
}

/* Solar Pumping CSS ends */

/* EPC Contracts CSS starts */

.epc-advantages {
  padding: 0 5% 1rem 5%;
}

li.epc-adv-item p {
  margin-bottom: 0;
  margin-right: 1rem;
}

.epc-advantages .epc-advantages-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  list-style: none;
  padding-left: 2rem;
}

.epc-advantages .epc-adv-item {
  flex: 1 1 calc(50% - 10px);
}

.overview-u {
  /*width: 80%;*/
  padding: 2rem 5% 2rem 5%;
}

.overview-u h2 {
  margin-bottom: 0.5rem;
}

.epc-advantages h2 {
  margin-bottom: 0.5rem;
}

.epc-applications h2 {
  margin-bottom: 0.5rem;
}

.overview-u p {
  width: 100%;
  margin-bottom: 0;
}

.overview-extra {
  padding-bottom: 2rem;
  padding-top: 0;
}

.advantages-of-epc-u {
  background-color: #f9f9f9;
  display: flex;
  align-items: stretch !important;
}

.advantages-of-epc-left-u h3 {
  font-weight: 600;
  font-size: 25px;
  line-height: 1;
  padding-bottom: 1.5rem;
}

.advantages-of-epc-left-u {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2rem 5% 2rem 5%;
  color: #ffffff;
  background: #132528;
}

.advantages-of-epc-right-u {
  width: 50%;
  height: auto;
}

.advantages-of-epc-right-u img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #132528;
}

.advantages-of-epc-left-u ul li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  line-height: 1.3;
}

.advantages-of-epc-left-u ul li p {
  margin: unset;
}

.advantages-of-epc-left-u ul li b {
  font-weight: 400;
}

.advantages-of-epc-left-u ul li p b {
  font-weight: 700;
}

.advantages-of-epc-left-u ul {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.epc-applications {
  padding: 0 5% 2rem 5%;
}

.epc-applications .epc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  list-style: none;
  padding-left: 2rem;
}

li.epc-item p {
  margin-bottom: 0;
  margin-right: 1rem;
}

.epc-applications .epc-item {
  flex: 1 1 calc(50% - 10px);
  padding: 0;
}

.epc-application-u {
  padding: 2rem 5%;
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.epc-application-u ul {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.epc-application-u ul li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  line-height: 1.3;
}

.epc-application-u ul li p {
  margin: unset;
}

.epc-application-u ul li p b {
  font-weight: 400;
}

.epc-value-chain-u {
  padding: 3rem 5%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  background: rgb(236, 236, 236);
}

.timeline-top-flex-u {
  width: 100%;
  margin: auto;
}

.timeline-u {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.timeline-line-u {
  width: 82%;
  margin: auto;
  background-color: #c7c7c7;
  height: 1px;
}

.timeline-con-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 18%;
  position: relative;
}

.timeline-circle-u {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.timeline-text-u {
  width: 100%;
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  min-height: 168px;
  justify-content: center;
}

.t-one {
  position: relative;
}

.t-one::after {
  content: "";
  position: absolute;
  bottom: -6%;
  left: 50%;
  width: 0px;
  height: 0px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #fff;
  transform: translateX(-50%);
}

.t-two {
  position: relative;
}

.t-two::after {
  content: "";
  position: absolute;
  top: -7%;
  left: 50%;
  width: 0px;
  height: 0px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #fff;
  transform: translateX(-50%);
}

.timeline-con-flex:last-child .t-two::after {
  top: -5%;
}

.timeline-text-u h3 {
  font-size: 16px;
  font-weight: 500;
}

.timeline-text-u p {
  font-size: 16px;
  text-align: left;
}

.timeline-main-1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

/* .timeline-main-1 .timeline-con-flex .timeline-text-u {
  clip-path: polygon(0 0, 100% 0, 100% 93%, 55% 93%, 50% 100%, 45% 93%, 0 93%);
} */

.timeline-main-1 .timeline-circle-u {
  position: absolute;
  top: calc(100% + 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  background: #017097;
  /*background: rgba(140, 198, 63, 1);*/
}

.timeline-main-2 .timeline-circle-u {
  position: absolute;
  bottom: calc(100% + 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  background: #017097;
  /*background: rgba(246, 147, 32, 1);*/
}

.timeline-main-2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.timeline-text-u li {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 300;
  list-style: disc;
}

.timeline-text-u ul {
  padding-left: 1rem;
}

.epc-mb-flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.epc-mobile {
  display: none;
}

.epc-mb-sec h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.epc-mb-sec p {
  font-size: 16px;
  margin-bottom: unset;
}

.epc-mb-sec ul {
  padding-left: 1rem;
}

.epc-mb-sec li {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 300;
  list-style: disc;
  line-height: 1.3;
}

/* Blog Css starts */

.blog-section-u {
  padding: 10rem 0;
}

.blog-container-u {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.blog-card-one-u {
  display: flex;
  align-items: center;
  padding: 0 5rem;
  background: rgba(255, 252, 248, 1);
  position: relative;
  gap: 2rem;
  /* height: 70vh; */
  height: 100%;
}

.blog-card-one-u:nth-child(2) {
  justify-content: flex-end;
}

.blog-card-one-u:nth-child(2) .blog-contents-u {
  text-align: right;
}

.blog-image-u {
  line-height: 0;
}

.blog-image-u img {
  width: 100%;
}

.blog-contents-u {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog-contents-u h2 {
  font-size: 32px;
  font-weight: 400;
  margin: unset;
}

.blog-contents-u p {
  font-size: 16px;
  font-weight: 300;
}

.blog-contents-u a {
  color: #000;
  text-decoration: underline;
  font-size: 16px;
}

.blog-date-u {
  position: absolute;
  /*background: rgba(241, 91, 42, 1);*/
  background: #017097;
  padding: 1rem 2.4rem;
  right: 5%;
  top: 73%;
  text-align: center;
  line-height: 1;
}

.blog-date-two-u {
  position: absolute;
  /*background: rgba(241, 91, 42, 1);*/
  background: #017097;
  padding: 1rem 2.4rem;
  left: 5%;
  top: 73%;
  text-align: center;
  line-height: 1;
}

.blog-date-u h2 {
  color: #fff;
  margin: unset;
  font-size: 30px;
}

.blog-date-two-u h2 {
  color: #fff;
  margin: unset;
  font-size: 30px;
}

.blog-date-u h2:nth-child(1) {
  font-size: 80px;
  margin: unset;
}

.blog-date-two-u h2:nth-child(1) {
  font-size: 80px;
  margin: unset;
}

/* blog details css starts */

.blog-electric-bill-u {
  padding: 5rem 0;
}

.blog-electric-bill-container-u {
  width: 72%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog-electric-bill-one-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog-electric-bill-one-u h2 {
  margin-bottom: 0;
}

/* 
.blog-electric-bill-one-u h2 {
  margin-bottom: unset;
} */

.blog-electric-bill-one-u p {
  margin-bottom: unset;
}

.blog-electric-bill-list-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog-electric-bill-list-u {
  padding-left: 1rem;
}

.blog-electric-bill-list-u li {
  list-style-type: disc;
  font-size: 16px;
  line-height: 32px;
  font-weight: 300;
}

.blog-electric-bill-list-u li b {
  font-weight: 400;
}

.blog-inner-video-container-u {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.blog-inner-video-container-u h2 {
  text-align: center;
}

.blog-innervideo-section-u {
  padding: 5rem 0 0;
}

.blog-inner-videos-u {
  display: flex;
  gap: 5rem;
  justify-content: space-between;
}

.inner-video {
  width: calc(33.33% - 3.33rem);
  position: relative;
}

.inner-video video {
  position: relative;
  width: 100%;
  border-radius: 0 40px 0 40px;
  height: max-content;
}

.play-icon,
.pause-icon {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  z-index: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
  width: 50px;
}

.pause-icon {
  opacity: 0;
}

.inner-video.playing .pause-icon {
  opacity: 0;
}

.inner-video.playing:hover .pause-icon {
  opacity: 1;
}

.inner-video.playing .play-icon {
  opacity: 0;
}

.inner-video p {
  font-weight: 400;
  padding: 1rem;
}

.related-articles-section-u {
  background: rgba(255, 252, 248, 1);
  padding: 5rem 0;
}

.related-articled-heading h2 {
  text-align: center;
  margin: 0;
}

.related-articled-heading {
  position: relative;
}

.related-articled-heading a {
  position: absolute;
  right: 0;
  top: 50%;
  color: #000;
  text-decoration: underline;
  font-size: 16px;
}

.related-articles-container-u {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.relates-articles-card-holder-u {
  display: flex;
  gap: 5rem;
  justify-content: space-between;
}

.related-articles-card-u {
  width: calc(33.33% - 3.33rem);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  border-radius: 0 0 0 30px;
  color: var(--black);
}

.related-articles-contents-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.related-articles-contents-u h3 {
  font-size: 16px;
  font-weight: 400;
}

.related-articles-contents-u p {
  font-size: 16px;
}

.related-articles-image-u {
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
}

.related-articles-image-u img {
  width: 100%;
  transition: all 0.2s ease;
}

.blog-inner-date-u {
  position: absolute;
  top: 3%;
  left: 3%;
  background-color: #fff;
  padding: 0.5rem 1.5rem;
}

.blog-inner-date-u h4 {
  font-size: 34px;
  font-weight: 400;
  text-align: center;
}

.blog-inner-date-u h4:nth-child(2) {
  font-size: 16px;
}

.related-articles-card-u:hover img {
  transform: scale(1.1);
}

.related-articles-card-u:hover {
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
}

.blog-inner-banner-date {
  position: absolute;
  top: 83.9%;
  right: 5%;
  /*background-color: rgba(241, 91, 42, 1);*/
  background: #8cc63f;
  padding: 0.5rem 2.7rem;
  z-index: 3;
  text-align: center;
  line-height: 1.2;
}

.blog-inner-banner-date h2 {
  color: #fff;
  font-size: 80px;
  margin: unset;
}

.blog-inner-banner-date span {
  color: #fff;
  margin: unset;
  font-size: 30px;
}

/* Blog inner css ends */

/* News css starts */

.news-section-u {
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  background-color: #132528 !important;
}

.news-container-card-flex {
  display: flex;
  gap: 5rem;
  flex-wrap: wrap;
}

.news-container-card {
  width: calc(50% - 2.5rem);
}

/* .news-container-right-u {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.news-container-left-u {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.news-image-u {
  width: 60%;
  line-height: 0;
}

.news-content-u {
  width: 60%;
} */

.news-image-u img {
  width: 100%;
  aspect-ratio: 1 / 0.7;
}

.news-content-div {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.news-container-left-u .news-content-u {
  padding-right: 5%;
}

.news-container-right-u .news-content-u {
  padding-left: 5%;
}

.news-content-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 525px;
}

.news-content-u h3 {
  font-size: 16px;
  color: var(--white);
}

.news-content-u h2 {
  font-size: 30px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.news--list ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 1rem;
}

.news--list ul li a {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: var(--black);
}

.news--list p {
  font-size: 18px;
  margin-bottom: 0.5rem;
  position: relative;
  font-weight: 300;
}

.news--list p:hover {
  text-decoration: underline;
}

.news-content-u a h3:hover {
  text-decoration: underline;
}

/* .news--list p::after {
  content: "";
  position: absolute;
  background: var(--black);
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all .5s ease;
}

.news--list p:hover::after {
  width: 100%;
} */

.news--list small {
  font-size: 16px;
  margin: unset;
}

.news-load-btn-wrap {
  display: flex;
  justify-content: center;
}

.news-load-btn-wrap button {
  padding: 1rem 1.5rem;
  background-color: unset;
  color: var(--white);
  font-size: 20px;
  border: 1px solid #fff;
  width: max-content;
  cursor: pointer;
}

/* News css ends */

/* Hydropanels css starts */

.src-hydropanels-container-u {
  padding-left: 3%;
  background-image: linear-gradient(90deg, #0000000a 50%, transparent 50%);
  display: flex;
  gap: 5rem;
}

.src-hydropanels-one-left-u {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.src-hydropanels-one-right-u {
  line-height: 0;
}

.source-work-container-u h2 {
  text-align: center;
}

.water-quality-section-u {
  background-image: url(../images/about/about-banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}

.water-quality-container-u h2 {
  color: #fff;
}

.water-quality-container-u p {
  color: #fff;
}

.water-quality-container-u {
  width: 60%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  gap: 5rem;
}

.water-quality-one-div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.water-quality-card-container-u {
  display: flex;
  gap: 3rem;
  justify-content: center;
}

.water-quality-card-u {
  border-right: 1px solid #fff;
  padding-right: 2rem;
  width: calc(33.33% - 2rem);
}

.water-quality-card-u:nth-child(3) {
  border: unset;
}

.water-quality-card-u p {
  font-size: 30px;
}

.mySwiperh .swiper {
  width: 100%;
  position: relative;
}

.mySwiperh .swiper-slide {
  background-position: center;
  background-size: cover;
}

.mySwiperh .swiper-slide img {
  display: block;
  width: 100%;
  filter: brightness(0.5);
}

.hydro-swiper-contents-u {
  position: absolute;
  top: 70%;
  left: 35%;
  width: 30%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.hydro-swiper-contents-u h2 {
  color: #fff;
}

.hydro-swiper-contents-u p {
  color: #fff;
}

/* Solar with Bess css starts */

.solar-bess-section-u {
  padding: 4rem 0;
}

.solar-bess-container-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bess-first-con {
  width: 100%;
}

.bess-first-con h2 {
  margin-bottom: 0;
}

.bess-first-con p {
  width: 100%;
  font-size: 18px;
}

.fonty p {
  font-size: 22px;
}

.bess-first-con-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 70%;
}

.solar-bess-flex-u {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

.solar-bess-flex-con-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: calc(50% - 1rem);
}

.solar-bess-flex-con-u h2 {
  margin-bottom: 0;
}

.solar-bess-flex-con-u p {
  margin-bottom: 0;
}

.solar-bess-flex-image-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: calc(50% - 1rem);
  align-items: center;
  justify-content: center;
}

.solar-bess-flex-image-u img {
  width: 60%;
}

.solar-bess-flex-image-u video {
  width: 60%;
  filter: contrast(200%);
}

/* Solar with Bess css ends */

/* Solar hybrid solutions css starts */

.solar-hybrid-solutions-section-u {
  padding: 4rem 0;
}

.solar-hybrid-container-u {
  display: flex;
  gap: 2rem;
}

.hybrid-first-con-u {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  width: 60%;
}

.hybrid-first-con-u h2 {
  margin: unset;
}

.hybrid-first-con-u p {
  width: 100%;
}

.solar-hybrid-flex-u {
  display: flex;
  gap: 4rem;
  justify-content: space-between;
}

.solar-hybrid-flex-con-u {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: calc(50% - 2rem);
  justify-content: flex-start;
}

.solar-hybrid-flex-image-u {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: calc(50% - 2rem);
  align-items: center;
}

.solar-hybrid-flex-image-u img {
  width: 100%;
}

.hybrid-power-generate-u {
  padding: 0 0 4rem 0;
}

.hybrid-power-container-u {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hybrid-power-container-u h2 {
  margin: unset;
}

.hybrid-bullet-image-u {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  flex-direction: column;
}

.hybrid-bullet-image-u p {
  margin: unset;
}

.hybrid-power-generate-flex-u {
  display: flex;
  gap: 4rem;
}

.hybrid-power-con-u {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: calc(50% - 2rem);
}

.hybrid-power-image-u {
  width: calc(50% - 2rem);
}

.hybrid-power-image-u img {
  width: 100%;
}

.hybrid-power-image-u video {
  width: 100%;
}

/* Solar hybrid solutions css ends */

/* floater */

.floaters {
  position: fixed;
  top: 30%;
  right: 0.8rem;
  z-index: 9;
}

.floaters-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.8rem;
}

.floaters-flex a img {
  /* width: 24px;
  height: 24px;
  background: #8CC63F;
  padding: 1rem;
  border-radius: 30px; */
  width: 50px;
}

/* readmore css */
.more-text {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

.more-text.open {
  max-height: 500px;
  opacity: 1;
}

.readmore {
  /*color: #014dab;*/
  color: #017097;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1rem;
}

/* footer */
a.youtube {
  width: 26px !important;
}

footer {
  background-color: #eee8e2;
}

.footer {
  width: 90%;
  margin: auto;
  padding: 4rem 0 2rem 0;
}

.footer-flex,
.footer-even {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Set equal widths for the first four columns */
/* Common styles for all footer columns */
.footer-one,
.footer-two,
.footer-three,
.footer-four,
.footer-col3,
.footer-col4,
.footer-col5 {
  box-sizing: border-box;
  /* padding: 0 0 3rem 0; */
}

/* Normal columns */
.footer-one,
.footer-two,
.footer-four,
.footer-col4,
.footer-col5 {
  flex-basis: calc(21% - 2rem);
  /* slightly wider */
}

/* Third column only */
.footer-three,
.footer-col3 {
  flex-basis: calc(16% - 2rem);
  /* narrower */
}

.footer-even .footer-one {
  padding: 0;
}

.footer-even .footer-col3 {
  padding: 0;
}

.footer-even .footer-col4 {
  padding: 0;
}

.footer-even .footer-col5 {
  padding: 0;
}

.footer-one img {
  width: 200px;
}

.office--add p {
  font-size: 16px;
  font-weight: 500;
}

.footer-flex address {
  font-family: "Roboto", sans-serif;
  font-style: unset;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}

.footer-flex a {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--black);
}

.footer-col3 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.footer-nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav-list a {
  color: var(--black);
  font-size: 15px;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
}

.footer-enquire {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.footer-enquire input {
  width: 100%;
  border: unset;
  background-color: unset;
  outline: unset;
  border-bottom: 1px solid #5a5a5a;
  padding-bottom: 5px;
  border-radius: 0;
}

.footer-enquire button {
  width: 100%;
  border: unset;
  background-color: unset;
  outline: unset;
  text-align: left;
  cursor: pointer;
}

.footer-enquire button img {
  width: 42px;
}

.footer-enquire ::placeholder {
  color: var(--black);
  font-size: 16px;
  font-weight: 300;
}

.line-footer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 280px;
}

.line-footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.78px;
  background: #00000033;
  height: 100%;
  transform: translateX(-50%);
}

.ft-call {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ft-ct-flex {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /*margin-top: 1rem;*/
}

.footer-sm a {
  display: flex;
  width: 20px;
  aspect-ratio: 1/1;
}

.ft-ct-flex a {
  font-size: 20px;
  font-weight: 500;
}

.footer-sm {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
}

.footer-sm a img {
  width: 100%;
}

.copyrights {
  background-color: #f4f3f3;
}

.copyrights-flex {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

.copyrights-flex p {
  font-size: 14px;
  margin: unset;
  color: #333;
}

.copyrights-flex img {
  width: 104px;
}

.footer-con-img {
  display: flex;
  gap: 0.5rem;
}

.footer-con-img img {
  width: 20px;
}

/* history of swelet section */

.hos {
  background: rgb(236, 236, 236);
  padding: 4rem 5%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hos-year {
  font-size: 22px;
  font-weight: 500;
  margin: unset;
}

.hos-arrow-container {
  display: flex;
  align-items: center;
}

.hos-arrow {
  background: unset;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.hos-left-arrow {
  margin-right: 10px;
}

.hos-left-arrow img {
  width: 60px;
}

.hos-right-arrow img {
  width: 60px;
}

.hos-right-arrow {
  margin-left: 10px;
}

.scroll-timeline-container {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

.scroll-timeline-container::-webkit-scrollbar {
  display: none;
}

.scroll-timeline-container {
  scrollbar-width: none;
  /* Hide scrollbar */
}

.scroll-timeline-container ::-webkit-scrollbar-track {
  display: none;
}

.scroll-timeline-container ::-webkit-scrollbar {
  display: none;
}

.scroll-timeline-container ::-webkit-scrollbar-thumb {
  display: none;
}

.scroll-timeline-container.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.scroll-timeline-container {
  cursor: grab;
  cursor: -webkit-grab;
}

.scroll-timeline {
  position: relative;
  flex-direction: column;
  display: flex;
  gap: 3rem;
  overflow: scroll;
  width: max-content;
}

.scroll-timeline-main-1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 270px;
}

.scroll-timeline-main-2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 270px;
}

.scroll-timeline-line {
  width: 100%;
  margin: auto;
  background-color: #c7c7c7;
  height: 1px;
}

.scroll-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.scroll-timeline-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.scroll-timeline-text {
  width: 400px;
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
  min-height: 180px;
  justify-content: center;
}

.item-one {
  position: relative;
  transition: all 0.5s ease;
}

.item-one:hover {
  box-shadow: 5px 5px 5px 0px #00000026;
}

.item-one::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0px;
  height: 0px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #fff;
  transform: translateX(-50%);
}

.item-two {
  position: relative;
  transition: all 0.5s ease;
}

.item-two:hover {
  box-shadow: -5px -5px 5px 0px #00000026;
}

.item-two::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0px;
  height: 0px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #fff;
  transform: translateX(-50%);
}

.scroll-timeline-item:last-child .item-two::after {
  top: -5%;
}

.scroll-timeline-text p {
  font-size: 16px;
  text-align: left;
}

.scroll-timeline-main-1 .scroll-timeline-circle {
  position: absolute;
  top: calc(100% + 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  /*background: rgba(140, 198, 63, 1);*/
  background: #017097;
}

.scroll-timeline-main-2 .scroll-timeline-circle {
  position: absolute;
  bottom: calc(100% + 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  /*background: rgba(246, 147, 32, 1);*/
  background: #017097;
}

.scroll-timeline-text ul {
  padding-left: 1rem;
}

.scroll-timeline-text li {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 300;
  list-style: disc;
}

/* Common styling for custom lists throughout the site */

li.new-list-style {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.custom-list {
  list-style: none;
  padding-left: 1.5rem;
}

.custom-list li {
  position: relative;
}

/* Custom marker for odd items */
.custom-list li::before {
  content: "";
  position: absolute;
  left: -25px;
  width: 19px;
  height: 25px;
  background-image: url("/images/about/thunder-li.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Custom marker for even items */
/* .custom-list li:nth-child(even)::before {
  content: "•";
  color: #017097;
  position: absolute;
  left: -20px;
  top: 0;
  font-size: 18px;
} */

/* contact strip  */
.strip-flex {
  display: flex;
  background-color: #969696;
}

.strip-head {
  width: 20%;
  background-color: #737373;
  color: var(--white);
  padding: 1rem 5%;
  clip-path: polygon(0 0, 100% 0, 87% 100%, 0% 100%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.strip-phn {
  width: 80%;
  background-color: #969696;
  color: var(--white);
  padding: 2rem 5%;
  margin-left: -3%;
  clip-path: polygon(3% 0, 100% 0, 100% 100%, 0% 100%);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
}

.strip-head p {
  margin-bottom: 0;
  font-size: 40px;
  font-weight: 400;
}

.strip-phn p {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 0;
  line-height: 1;
}

.strip-phn-flex a {
  font-family: "Roboto", sans-serif;
  font-size: 25px;
  color: var(--white);
  font-weight: 300;
}

.strip-phn-flex {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-direction: column;
}

/* loader */
#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #000;
  z-index: 99;
  transition: all 0.5s ease-in-out;
}

#loading-image {
  z-index: 100;
}

.mms-section {
  background-color: #eee8e2;
}

.mms-section h2 {
  margin-bottom: 2rem;
}

.mms1-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem 4rem;
}

/* .mms-section .padding {
  padding: 2rem 0;
} */

.mms1-flex {
  display: flex;
  width: calc(33.33% - 3.33rem);
  gap: 1rem;
  align-items: center;
  flex-direction: column;
  background: #f8f8f8;
  padding: 1.6rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.5s ease;
  min-height: 360px;
  height: 100%;
}

/* .mms1-flex:nth-child(odd) {
  background-color: #dbe1d2;
} */

.mms1-flex video {
  mix-blend-mode: darken;
}

/* .mms1-flex:hover {
  background: #ebebeb;
} */

.mms1-flex:hover video {
  mix-blend-mode: darken;
}

.mms1-flex>img {
  width: 80px;
}

.mms1-flex>div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.mms1-flex>div h3 {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
}

.mms1-flex>div p {
  width: 85%;
  text-align: center;
}

.power-products-list li {
  font-size: 16px;
  list-style-type: disc;
}

/* csr page css */

.csr-section-u {
  padding: 5rem 0;
}

.csr-main-p {
  padding: 0 5rem;
  width: 100%;
  margin-bottom: 3rem;
}

.csr-container-u {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.csr-card-one-u {
  display: flex;
  align-items: center;
  padding: 0 5rem;
  background: rgba(255, 252, 248, 1);
  position: relative;
  gap: 2rem;
  height: 100%;
}

.odd-csr.csr-card-one-u {
  justify-content: flex-end;
  text-align: right;
}

.csr-card-one-u:nth-child(2) .csr-contents-u p {
  text-align: right;
}

.csr-card-one-u:nth-child(4) .csr-contents-u p {
  text-align: right;
}

.csr-image-u {
  line-height: 0;
}

.csr-image-u img {
  width: 100%;
}

.csr-contents-u {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.csr-contents-u h2 {
  font-size: 32px;
  font-weight: 400;
  margin: unset;
}

.csr-contents-u p {
  font-size: 18px;
  font-weight: 300;
}

.csr-contents-u a {
  color: #000;
  text-decoration: underline;
  font-size: 16px;
}

.features--flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.features-icon--sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  width: 25%;
}

.features--icon--flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 0.8rem;
  width: 100%;
}

.features--icon--flex img {
  width: 53px;
}

.features--icon--flex video {
  width: 53px;
}

.features--icon--flex p {
  text-align: center;
}

.features-video--sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  position: relative;
}

#feature-video {
  /*width: 100%;*/
}

.video-controls {
  margin-top: 10px;
}

.video-controls button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
}

.tabs {
  position: relative;
  display: flex;
  flex-direction: column;
}

.tabs ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  gap: 2rem;
  justify-content: space-between;
  border-bottom: 1px solid #00000033;
}

.tab {
  padding: 10px 0;
  cursor: pointer;
  transition: color 0.3s ease;
  font-size: 24px;
  font-weight: bold;
}

.tab:hover {
  /*color: var(--primary);*/
  color: #017097;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  /*background-color: var(--primary);*/
  background-color: #017097;
  transition: left 0.3s ease, width 0.3s ease;
}

.tab-content {
  padding-top: 3rem;
}

.content {
  display: none;
}

.content.active {
  display: block;
}

.tab.active {
  /*color: var(--primary);*/
  color: #017097;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.threeD .swiper-slide img {
  display: block;
  /*width: 100%;*/
}

.threeD .swiper-button-next::after,
.threeD .swiper-button-prev::after {
  color: black;
}

/* Nested Tabs */
.nested-tabs,
.nested-nested-tabs,
.nested-company-tabs,
.nested-3-tabs,
.nested-4-tabs {
  margin-top: 20px;
}

.nested-tabs ul,
.nested-nested-tabs ul,
.nested-company-tabs ul,
.nested-3-tabs ul,
.nested-4-tabs ul {
  display: flex;
  gap: 4rem;
  list-style: none;
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
}

.nested-tab,
.nested-nested-tab,
.nested-company-tab,
.nested-3-tab,
.nested-4-tab {
  cursor: pointer;
  padding: 5px 10px;
  transition: color 0.3s ease;
  font-weight: bold;
}

.nested-tab {
  font-size: 20px;
}

.nested-nested-tab {
  font-size: 20px;
}

.nested-company-tab {
  font-size: 20px;
}

.nested-3-tab {
  font-size: 18px;
}

.nested-4-tab {
  font-size: 20px;
}

.nested-tab:hover,
.nested-nested-tab:hover,
.nested-company-tab:hover,
.nested-3-tab:hover,
.nested-4-tab:hover {
  color: #017097;
}

.nested-tab.active,
.nested-nested-tab.active,
.nested-company-tab.active,
.nested-3-tab.active,
.nested-4-tab.active {
  color: #017097;
  border-bottom: 2px solid #017097;
}

/* Nested Content */
.nested-content,
.nested-nested-content,
.nested-company-content,
.nested-3-content,
.nested-4-content {
  display: none;
}

.nested-content.active,
.nested-nested-content.active,
.nested-company-content.active,
.nested-3-content.active,
.nested-4-content.active {
  display: block;
}

/* Scroll Timeline */
.scroll-timeline-text p {
  margin-bottom: 0px;
}

.stock-floating {
  position: fixed;
  top: 11%;
  right: 5%;
  z-index: 999;
}

.price-flex {
  display: flex;
  width: max-content;
}

div#price {
  font-size: 18px;
  font-weight: 600;
  display: block;
  color: green;
}

#price-container {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.arrow-up svg {
  fill: green;
  width: 16px;
  height: 16px;
}

.arrow-down svg {
  fill: red;
  width: 16px;
  height: 16px;
}

.arrow-stable svg {
  fill: gray;
  width: 16px;
  height: 16px;
}

.price-flex {
  background: #fff;
  /* border-radius: 0 0px 10px 10px; */
  border-radius: 10px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
  min-width: 250px;
  /* font-style: italic; */
}

.stock-sec {
  background: transparent;
}

stock-sec .stock-div-flex {
  display: flex !important;
  align-items: center;
  gap: 2rem;
}

.price-flex p {
  margin-bottom: 0;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

#price {
  font-size: 32px;
  font-weight: bold;
  color: #000;
}

/* #price::after {
  content: " INR";
  font-size: 16px;
  font-weight: 600;
  margin-left: 5px;
  color: #000;
} */

#arrow-icon {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  background-color: #27ae60;
  /* use JS to toggle this to red if needed */
}

#arrow-icon svg {
  margin-right: 5px;
  stroke: white;
  width: 12px;
  height: 12px;
}

.award-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.award-list li {
  margin-bottom: 0.5rem;
}

.grey--new {
  background: rgb(236, 236, 236);
}

/* preloader */
.formPreloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(47, 48, 49, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  z-index: 9999;
}

.spinner {
  width: 100px;
  height: 100px;
  border: 4px solid #fff0;
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  border-radius: 50%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.response_message_div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: none;
  z-index: 2;
}

.response_message_div p {
  top: 50%;
  left: 50%;
  position: fixed;
  color: #000000;
  text-align: center;
  transform: translate(-50%, -50%);
  color: #008900;
  font-weight: 500;
  font-size: 1.4rem;
}

.response_message_div img {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -20%);
}

.error_message {
  color: red;
}


p.count::after {
  content: "+";
}