@font-face {
  font-family: 'Open-Sans';
  src: url('../fonts/Open_Sans/OpenSans-Bold.ttf');
  font-weight: 700;
}

@font-face {
  font-family: 'Open-Sans';
  src: url('../fonts/Open_Sans/OpenSans-Medium.ttf');
  font-weight: 500;
}

@font-face {
  font-family: 'Open-Sans';
  src: url('../fonts/Open_Sans/OpenSans-Regular.ttf');
  font-weight: 400;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Open-Sans';
  background: linear-gradient(to right, #063046 19%, #217146);
  color: white;
  height: 100vh;
  /* display: flex;
  flex-direction: column; */
  overflow-x: hidden !important;
}

a {
  text-decoration: none;
  color: #fff;
}

ul li {
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: auto;
}

.intro-container,
.footer-container,
.facilities-container,
.platform-container,
.ecotech-container,
.gree-container,
.nav-container {
  margin: inherit !important;
}

.navbar {
  background: transparent;
  padding: 52px 83px;
  color: white;
  position: relative;
  z-index: 10;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
}

.nav-links {
  /* opacity: 0; */
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-links.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.logo img {
  /* height: clamp(97.53px, 10vw, 99px); */
  /* width: 100%; */
  object-fit: contain;
  position: relative;
}

.nav-links {
  display: flex;
  gap: clamp(20px, 5vw, 80px);
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-size: 1.5rem;
}

.greenshare {
  display: block;
}

.greenshare img {
  height: 25px;
}

.hamburger {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: black;
  user-select: none;
  transition: transform 0.3s ease;
}

.hero {
  flex: 1;
  width: 100%;
  min-height: calc(90vh - 80px);
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  position: relative;
}

.top img {
  width: 106%;
  object-fit: cover;
  top: -140px;
  position: relative;
}

.top-mob {
  display: none;
}

.bg-graph {
  /* position: relative; */
  /* top: 32%;
  left: -1%; */
  overflow: hidden;
}

.bg-graph img {
  /* width: 106%; */
  width: 100%;
  top: -28%;
  left: 0;
  position: absolute;
}

.globe-container {
  position: absolute;
  /* top: 78%;
  left: 32%; */
  transform: translate(-2%, 8%);
  z-index: 2;
}

.globe {
  /* width: 113%; */
  width: 78%;
  border-radius: 50%;
  animation: floatGlobe 5s cubic-bezier(0.82, 0.82, 1, 1) infinite;
}

@keyframes floatGlobe {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
    /* adjust for higher float */
  }
}

.text-content {
  position: absolute;
  right: 2.5%;
  top: 50%;
  z-index: 3;
  max-width: 350px;
}

.heading {
  font-size: 3.1rem;
  font-weight: 400;
  transform: skew(-3deg);
  display: inline-block;
  line-height: 1.19;
  margin-bottom: 10px;
  margin-top: 0;
}

.text-content p {
  font-size: 1.4rem;
  font-weight: 200;
  padding: 35px 0;
  font-family: 'Open-Sans';
  margin-top: -10px;
  opacity: 0.9;
}

.scroll-indicator.herosc {
    left: -90%;
    top: 10px;
}

/* INTRO SECTION  */
.intro {
  /* padding: 38% 5% 0 5%; */
  padding: 0% 5% 0 5%;
  /* min-height: calc(100vh - 80px); */
}

.intro p {
  font-size: 22.2px;
}

.features-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  flex: 1 1 60%;
}

.feature-box {
  text-align: center;
  padding: 20px;
}

.feature-box img {
  /* height: 115px; */
  height: 160px;
  object-fit: contain;
}

.feature-box p {
  font-size: 22.54px;
}

.commitment-box {
  flex: 1 1 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.commitment-box img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.commitment-img-mob {
  display: none;
}

.scroll-indicator.intro {
  top: 0;
  left: -80px;
}


/* SECOND SECTION */

.meet-gree {
  padding: 0 5% 0 5%;
  color: white;
  min-height: calc(100vh - 240px);
}

.gree-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5%;
  max-width: 1440px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.gree-text {
  flex: 1;
  max-width: 545px;
  ;
}

.gree-text img {
  height: 72px;
  object-fit: contain;
}

.gree-heading {
  font-size: 3.1rem;
  font-weight: 400;
  margin-bottom: 0;
}

.gree-subheading {
  font-size: 1.2rem;
  margin-bottom: 1em;
  opacity: 0.85;
  margin-top: 5px;
  font-weight: 200;
}

.gree-desc {
  font-size: 1.4rem;
  font-weight: 200;
  line-height: 1.3;
  padding: 20px 0 30px 0;
}

.gree-scroll-icon {
  margin-top: 1.5rem;
}

.gree-scroll-icon img {
  width: 30px;
  height: auto;
}

.gree-image {
  flex: 1;
  /* min-width: 280px; */
  max-width: 675px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gree-image img {
  width: 100%;
  height: auto;
  max-height: 512px;
  object-fit: contain;
  animation: floatGlobe 5s cubic-bezier(0.78, 0.13, 0.15, 1.03) infinite;
}

.scroll-indicator.meetGree {
  left: 0px;
  top: 60px;
}

/* THIRD SECTION */

.ecotech-model {
  padding: 0% 5%;
  color: white;
  min-height: calc(100vh - 80px);
}

.ecotech-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5%;
  max-width: 1440px;
  /* margin: 0 auto; */
  flex-wrap: wrap;
}

.ecotech-left {
  flex: 1;
  max-width: 440px;
}

.ecotech-left h2 {
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 0.9;
}

.ecotech-left h2 span {
  font-size: 35.78px;
}

.ecotech-left p {
  font-size: 1.4rem;
  font-weight: 200;
  padding: 0;
  font-family: 'Open-Sans';
  opacity: 0.9;
}

.scroll-icon {
  margin-top: 2rem;
}

.ecotech-right {
  flex: 1;
  position: relative;
}

.ecotech-right .greenshare-ecotech {
  width: 100%;
  height: auto;
  max-height: 750px;
  object-fit: contain;
}

.scroll-indicator.ecotech-model {
  left: -5%;
  top: 85px;
}

/* a.scroll-indicator.ecotech-model.aos-init.aos-animate {
  left: -3%;
  top: 5%;
} */

/* FOURTH SECTION */

.ecotech-platform {
  padding: 5% 5%;
  color: white;
}

.platform-container {
  max-width: 1440px;
  margin: 0 auto;

}

.platform-content h2 {
  font-size: 3.1rem;
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.2;
  width: 20%;
}

.platform-content p {
  font-size: 1.4rem;
  font-weight: 200;
  padding: 0;
  margin-top: 0px;
  margin-bottom: 4rem;
  font-family: 'Open-Sans';
  width: 100%;
  opacity: 0.9;
}

.platform-phone img {
  width: 100%;
  max-width: 230px;
  height: auto;
  object-fit: contain;
}

.ecotech-platforms {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  /* margin-top: 6rem; */
  margin-top: 0;
}

.platform-right {
  margin: 0 60px;
}

.platform-right.mobile-mode {
  display: none;
}

.platform-right.pc-mode {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  margin-top: 6rem;
}

.platform-right .flow-box {
  margin-left: 2rem;
  position: relative;
}

.icon-title {
  display: flex;
  align-items: center;
  gap: 28px;
}

.icon-title h3 {
  font-family: 'Open-Sans';
  font-weight: 500;
  font-size: 1rem;
}

.icon-title img {
  width: 57px;
  height: 57px;
  object-fit: contain;
}

img.right-arrows {
  height: 14px;
  /* margin-top: -218px; */
  position: relative;
  top: -23px;
}

.circularity-box-graph p {
  font-size: 0.84rem;
  font-weight: 100;
  opacity: 0.8;
}

.circularity-box-graph {
  position: absolute;
}

.circularity-box-graph img {
  height: 110px;
  left: 0%;
  position: relative;
}

.resource-box {
  margin-bottom: 2rem;
  position: absolute;
}

.resource-box p {
  font-size: 0.84rem;
  font-weight: 100;
  opacity: 0.8;
  margin-top: -10rem;
}

.resource-box img {
  height: 110px;
  top: 0;
  left: 0;
  position: relative;
}

.metrics-box-graph {
  display: flex;
  justify-content: center;
  /* flex-direction: row; */
  flex-direction: column;
  /* flex-wrap: wrap; */
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: center;
}

img.double-arrows {
  height: 96px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
  left: 55%;
}

img.reward-tier {
  /* max-width: 100%; */
  margin-top: 1rem;
  position: absolute;
  /* bottom: -65px; */
  /* width: 100%; */
  /* right: 15%; */
  left: 0;
  height: 33px;
}

.gri-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gri-box img {
  height: 90px;
  object-fit: contain;
  margin-top: 1rem;
  margin-left: -1rem;
}

.gri-box p {
  font-size: clamp(0.8rem, 2.5vw, 0.75rem);
  font-weight: 100;
  opacity: 0.8;
}

.gri-box-dis {
  font-size: 0.75rem;
  font-weight: 200;
  opacity: 0.9;
}

.scroll-indicator.left-icon {
  left: 0;
  top: 175px;
}

/* FIFTH SECTION */

.circular-facilities {
  padding: 0% 5% 7% 5%;
  color: white;
  /* min-height: calc(90vh - 80px); */
}

.facilities-container {
  max-width: 1440px;
  margin: 0 auto;
}

.facilities-platforms {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  flex-direction: row;
  margin-top: 6rem;
  align-content: center;
  align-items: center;
  gap: 0rem;
}

.facilities-left {
  /* flex: 1;
  min-width: 300px; */
  position: relative;
}

.facilities-content h2 {
  font-size: 3.1rem;
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.facilities-content p {
  font-size: 1.4rem;
  font-weight: 200;
  padding: 0;
  margin-top: 0px;
  margin-bottom: 4rem;
  font-family: 'Open-Sans';
  width: 93%;
  opacity: 0.9;
}

.waste-streams {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  /* flex-wrap: wrap; */
}

.stream {
  /* display: flex;
  align-items: center; */
  /* padding: 1.7rem 0; */
  padding: 1.7rem 0 0 0;
  max-width: 169.35px;
  position: relative;
}

.stream img {
  width: 100%;
}

.stream.non-hazardous img {
  max-width: 195px;
}

.stream.non-hazardous.mobile-mode {
  display: none;
}

.stream.hazardous {
  max-width: 456.22px;
}

.stream span {
  font-size: 0.65rem;
  line-height: 1.1;
  text-align: center;
  opacity: 0.8;
  position: absolute;
  width: 55%;
}

.stream .none-haz {
      left: 10%;
    top: 41%;
}

.stream .indust {
    left: 9%;
    top: 79%;
}

.waste-details-list.pc-mode {
  display: block;
}

.waste-details-list.mobile-mode {
  display: none;
}

.waste-details-list {
  position: absolute;
  top: 63%;
  left: 20%;
}

.waste-details-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin-bottom: 3px;
}

.waste-details-list li img {
  height: 13.74px;
}

.waste-details-list li span {
  font-size: clamp(0.7rem, 2.5vw, 0.54rem);
  font-weight: 200;
  opacity: 0.7;
}

.facilities-right {
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

.facilities-right.mobile-mode {
  display: none;
}

.facility-map img,
.facility-flow img {
  width: 100%;
  /* max-width: 375px; */
  height: auto;
  object-fit: contain;
}

.facility-map span {
  position: absolute;
  font-size: clamp(0.8rem, 2.5vw, 0.87rem);
  line-height: 1.3;
  text-align: center;
}

.facility-map .mat-sort {
  top: 18%;
  right: 31%;
}

.facility-map .enrg-rec {
  top: 50%;
  right: 29%;
}

.facility-map .sec-mat {
  bottom: 7%;
  right: 29%;
}

.facility-map .prim-ind {
  top: 34%;
  right: 20px;
  opacity: 0.8;
}

.facility-map .sec-ind {
  bottom: 16%;
  right: 1%;
  opacity: 0.8;
}

.facility-cross img {
  height: 50.77px;
}

.facility-zero-wate {
  text-align: center;
}

.facility-zero-wate img {
  height: 35px;
}

.facility-zero-wate p {
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.2;
}

.facility-zero-wate span {
  font-size: 1.79rem;
}

.facility-zero-wate.mob,
.facility-cross.mob {
  display: none;
}

.none-haz.mobile-mode {
  display: none;
}

/* FOOTER SECTION */

.footer {
  color: white;
  padding: 7% 5% 5% 5%;
}

.footer-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* flex-wrap: wrap; */
  gap: 6rem;
  max-width: 1440px;
  margin: 0 auto;
}

.footer-logo img {
  max-width: 296px;
  margin-top: 3rem;
}

/* .footer-contact {
  flex: 1;
  min-width: 250px;
} */

.footer-contact h3,
.footer-social h3 {
  font-size: 1.69rem;
  ;
  margin-bottom: 1rem;
  font-family: 'Open-Sans';
  font-weight: 200;
}

.footer-contact ul {
  list-style: none;
  padding: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

.footer-contact img {
  width: 40px;
  height: 40px;
  margin-top: 4px;
}

.footer-mob {
  display: flex;
  justify-content: space-between;
  gap: 5rem;
}

.footer-contact span {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: 1.4;
}

.footer-map {
  position: absolute;
}

.footer-map img {
  width: 227.67px;
  height: auto;
  object-fit: contain;
  margin-left: 3.5rem;
  margin-bottom: 4rem;
}

.footer-map iframe {
  width: 270px;
  height: auto;
  margin-left: 4.5rem;
  /* margin-top: 10px; */
  margin-bottom: 4rem;
}

.footer-right {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  justify-content: space-between;
}

.footer-social {
  flex: 1;
  min-width: 187px;
}

.footer-brands {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1rem;
}

.footer-brands img {
  height: 38px;
  object-fit: contain;
}

img.greenshare_img {
  height: 27px;
  margin-top: 5.4rem;
}

.footer-icons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 2rem;
}

.footer-icons img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.footer-icons a:hover img {
  transform: scale(1.1);
}


/* Animations */
.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.animate.active {
  opacity: 1;
  transform: translateY(0);
}

/* Custom AOS animations */
[data-aos="pop-up"] {
  transform: scale(0.8);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="pop-up"].aos-animate {
  transform: scale(1);
  opacity: 1;
  animation: pulse 1s ease-in-out 1;
}

@keyframes pulse {

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

  50% {
    transform: scale(1.05);
  }
}

/* Ensure all animated elements start hidden */
[data-aos] {
  opacity: 0;
  transition-property: opacity;
}

[data-aos].aos-animate {
  opacity: 1;
}

/* Custom animation for social icons */
[data-aos="social-pop"] {
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s ease-out;
}

[data-aos="social-pop"].aos-animate {
  transform: scale(1);
  opacity: 1;
}

/* Ensure footer elements animate smoothly */
.footer [data-aos] {
  transition-property: transform, opacity;
}

/* Staggered animation for social icons */
.footer-icons a {
  display: inline-block;
}

/* Ensure AOS animations are properly initialized */
[data-aos] {
  opacity: 0;
  transition-property: opacity;
}

[data-aos].aos-animate {
  opacity: 1;
}

/* Custom animation keyframes */
@keyframes slideRight {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }

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

@keyframes wiggle {
  0% {
    transform: rotate(0deg) scale(0.8);
    opacity: 0;
  }

  50% {
    transform: rotate(5deg) scale(1.1);
  }

  70% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes textPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  70% {
    transform: scale(1.1);
  }

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

@keyframes arrowMoveRight {
  0% {
    transform: translateX(-30px) scale(0.8);
    opacity: 0;
  }

  60% {
    transform: translateX(15px) scale(1.1);
  }

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

/* Custom AOS animations */
[data-aos="custom-slide-right"] {
  transition-property: transform, opacity;

  &.aos-animate {
    animation: slideRight 0.8s ease-out forwards;
  }
}

[data-aos="wiggle"] {
  transform-origin: center;

  &.aos-animate {
    animation: wiggle 0.8s ease-out forwards;
  }
}

[data-aos="text-pop"] {
  transform-origin: left center;

  &.aos-animate {
    animation: textPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }
}

[data-aos="arrow-move-right"] {
  transform-origin: center;

  &.aos-animate {
    animation: arrowMoveRight 0.8s ease-out forwards;
  }
}

/* Initial state for elements */
.wiggle-icon,
[data-aos="wiggle"],
[data-aos="text-pop"],
[data-aos="arrow-move-right"],
[data-aos="custom-slide-right"] {
  opacity: 0;
}

/* SCROLL ICON */
.scroll-indicator {
  position: relative;
  left: 65%;
  top: 340px;
  animation: bounce 2s infinite;
}

.scroll-indicator img {
  height: 46.4px;
  cursor: pointer;
}

@keyframes bounce {

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

  50% {
    transform: translate(-50%, -10px);
  }
}