/*------- Font Family Starts -------*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&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 Family Ends -------*/

:root {
  --vh100max: 100vh;
  --vh100: 100vh;
  --vh100min: 100vh;
  --jsvh100min: 100vh;
  --roughMin: calc(100vh - 30vw);
  --safe100min: max(var(--roughMin), var(--jsvh100min));
  --grid-columns: 48;
  --grid-side-margin: 8rem;
}

/* ---------- reset css starts ---------- */
* {
  text-decoration: none;
  list-style: none;
}
html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html::-webkit-scrollbar {
  width: 0.8vw;
}
html::-webkit-scrollbar-thumb {
  background-color: #00968f;
}
html::-webkit-scrollbar-track {
  background-color: rgb(231, 231, 231);
}
html::-webkit-scrollbar-thumb:hover {
  background-color: #00ebdf;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
address {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a,
a:hover,
a:focus {
  outline: 0;
  text-decoration: none;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -ms-transition: 0.5s linear;
  -o-transition: 0.5s linear;
  transition: 0.5s linear;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
#app,
body,
html {
  top: 0;
  left: 0;
  height: 100%;
  overflow-x: hidden;
}

/* ---------- reset css ends ---------- */

/* html {
  height: 1500vh;
} */

body {
  background: #fff;
  margin: 0;
  padding: 0;
  height: auto;
  overflow-y: hidden;
}

.container-fluid {
  padding: 100px;
}
.container-fluid-50 {
  padding: 50px;
}

.text-black {
  color: #2F2F2F !important;
}
.text-bold {
  font-weight: 700 !important;
}
.only-mobile {
  display: none;
}
.only-tablet {
  display: none;
}

/* loading css */
#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #fff url("../images/logo1.gif") no-repeat center;
  z-index: 99999;
  background-size: contain;
}

/* -------- menu css starts -------- */
.c-header {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  height: 80px;
  left: 0;
  top: 0;
  width: 100vw;
  transition: all 0.5s;
}

.hamburger-menu {
  font-size: 1.5rem;
  color: #00ebdf;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.c-navbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 25px 50px;
  align-items: center;
}
.header-logo {
  width: 150px;
  display: flex;
  align-items: center;
  z-index: 999;
}
.header-logo img {
  width: 100%;
  z-index: 999;
}

.button_container {
  position: fixed;
  /* top: 5%; */
  right: 50px;
  width: 35px;
  height: 27px;
  cursor: pointer;
  z-index: 200;
  transition: opacity 0.25s ease;
}
.button_container:hover {
  opacity: 0.7;
}

.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #fff;
  width: 100%;
}
.button_container.active .middle {
  opacity: 0;
  background: #fff;
  width: 100%;
}
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #fff;
  width: 100%;
}
.button_container span {
  background: #00968f;
  border: none;
  height: 4px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
  width: 80%;
}
.button_container span:nth-of-type(3) {
  top: 22px;
  width: 65%;
}

.overlay {
  position: fixed;
  background-image: linear-gradient(
    to right,
    #009790,
    #00b0a8,
    #00c9c0,
    #00e3d9,
    #00fef3
  );
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  /* transition: visibility 0.35s, height 0.8s; */
  overflow: hidden;
  transition: all 0.6s ease;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.55s;
  padding-bottom: 25px;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: 0.6s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: 0.65s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: 0.7s;
}

.overlay.open .menu-text-container {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.55s;
  padding-bottom: 25px;
}
.overlay.open .menu-text-container:nth-of-type(2) {
  animation-delay: 0.6s;
}
.overlay.open .menu-text-container:nth-of-type(3) {
  animation-delay: 0.65s;
}
.menu-text-container {
  position: relative;
  display: block;
  overflow: hidden;
  opacity: 0;
}

.overlay nav {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* top: 50%;
  transform: translateY(-50%); */
  font-size: 40px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  /* text-align: center; */
}
.menu-title h3 {
  font-size: 40px;
  position: relative;
  display: block;
  overflow: hidden;
  font-weight: 600;
}
.menu-pera {
  font-size: 1.2rem;
  max-width: 450px;
}
.menu-text-container {
  padding-bottom: 20px;
}
.overlay-menu-contact, .menu-follow-icon a {
  color: #fff;
}
.overlay-row {
  height: 100%;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  /* height: 100%; */
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  /* color: #fff; */
  text-decoration: none;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  /* background: #fff; */
  background: #00e3d9;
  transition: 0.35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

.overlay-menu-contact-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  align-items: center;
}
/* -------- menu css ends --------- */

/* main css starts */
#app {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  /* font-size: 1.8rem; */
  line-height: 2.6rem;
  letter-spacing: 0.03em;
  overflow: hidden;
  /* position: fixed; */
  width: 100vw;
}

.c-mw-title1 {
  max-width: 500px;
}
.c-mw-title {
  max-width: 550px;
}
/* .scrollOuter {
  pointer-events: none;
  display: block;
  height: 100%;
  width: calc(100% + 20px);
  top: 0;
  left: 0;
  position: absolute;
  overflow-y: scroll;
}
.scrollContent {
  display: block;
  width: calc(100% - 20px);
  pointer-events: auto;
} */
.BlokSection {
  position: relative;
  min-height: var(--vh100min);
}

.start {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
}

/* .start0 {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
} */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
  pointer-events: none;
}
/* main css ends */

.lineChild,
.lineChild {
  overflow: hidden;
}

.c-title-1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  font-size: 3rem;
}
.c-title-1-font-sm {
  font-size: 2rem !important;
}

.c-pera-product-mw {
  max-width: 400px !important;
}
.c-pera {
  max-width: 450px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  padding: 10px 0;
  overflow: hidden;
  position: relative;
  margin: 0;
  flex-wrap: nowrap;
}
.c-pera-1 {
  max-width: 450px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  padding: 10px 0;
  overflow: hidden;
}

.c-title-2 {
  color: #000;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  overflow: hidden;
}

.c-title-1 span {
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  overflow: hidden;
}

.c-title-1_skyblue {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #00fff4;
  overflow: hidden;
  font-size: 3rem;
}
#numbers {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  overflow: hidden;
  color: #2F2F2F !important;
  /* font-size: 3rem; */
}
.c-font-size-c1 {
  font-size: 1.5rem !important;
}
.c-pera-skyblue {
  color: #00fff4;
}
.c-pera-skyblue a {
  color: #00fff4;
}
.c-title-1_skyblue span {
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  overflow: hidden;
}

.split-parent {
  overflow: hidden;
}
.split-child {
  display: inline-block;
}

.c-pera-container {
  clip-path: inset(100% 100% 100% 100%);
}

.texts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  height: var(--vh100min);
  z-index: 999;
}
.text {
  color: #000;
  position: absolute;
  /* opacity: 0; */
}
.peratext {
  color: #000;
  position: absolute;
  /* opacity: 0; */
}

.grid {
  position: relative;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-column-gap: var(--grid-column-gap);
  width: 100%;
  width: var(--grid-width, 100%);
  max-width: 1760px;
}
.grid .inner {
  grid-column: 4/-1;
}
.grid .inner,
.grid {
  position: relative;
  height: 100%;
}

/* title */
.title1 {
  left: 0;
  top: 25%;
}
.text2-absolute {
  position: absolute;
  right: 8%;
  top: 20%;
}
/* .title2 {
  left: 0%;
  bottom: 50%;
} */
.text3-absolute {
  left: -5%;
  top: 20%;
}
.text4-absolute {
  right: 2%;
  top: 20%;
}
/* .title3 {
  left: 0;
  bottom: 30%;
} */
.title4 {
  left: 0;
  top: 20%;
}
.title5 {
  left: 0;
  top: 30%;
}
.title6 {
  left: 0;
  top: 30%;
}
.title7 {
  left: 0%;
  top: 30%;
}
.title8 {
  left: 0;
  top: 30%;
}
/* title */

/* peratext */
/* .peratext1 {
  right: 18.5%;
  top: 50%;
} */
/* .peratext1 {
  left: 0%;
  top: 50%;
} */
/* .peratext2 {
  left: 0%;
  bottom: 50%;
} */
.peratext3 {
  right: 8%;
  top: 30%;
}
.peratext4 {
  right: 8%;
  top: 50%;
}
.peratext5 {
  left: 0%;
  top: 60%;
}
.peratext6 {
  left: 0%;
  top: 20%;
}
/* peratext */

/* text */
.text1 {
  margin-top: 60vh;
}
.text2 {
  margin-top: 180vh;
}
.text3 {
  margin-top: 280vh;
}
.text4 {
  margin-top: 390vh;
}
.text5 {
  margin-top: 500vh;
}
.text6 {
  margin-top: 600vh;
}
.text7 {
  margin-top: 700vh;
}
.text8 {
  margin-top: 800vh;
}
.text9 {
  margin-top: 920vh;
}
.text10 {
  margin-top: 1060vh;
}
.text11 {
  margin-top: 1160vh;
}
/* text */

.c-text-container-1 {
  position: relative;
  height: 100vh;
  /* border: 2px solid black; */
  /* opacity: 0; */
}
.c-text-1 {
  position: absolute;
  left: 5%;
  top: 30%;
}

.c-text-container-2 {
  position: relative;
  height: 100vh;
  margin-top: -50vh;
  opacity: 0;
}

.c-text-2 {
  position: absolute;
  right: 8%;
  top: 35%;
}

.c-text-container-3 {
  position: relative;
  height: 100vh;
  margin-top: -50vh;
  opacity: 0;
}

.c-text-3 {
  position: absolute;
  left: 5%;
  bottom: 15%;
}

.c-text-container-4 {
  position: relative;
  height: 100vh;
  margin-top: -50vh;
}
.c-text-4 {
  position: absolute;
  left: 5%;
  top: 30%;
}

.c-text-container-5 {
  position: relative;
  height: 100vh;
  margin-top: -50vh;
}
.c-text-5 {
  position: absolute;
  left: 5%;
  top: 30%;
}

.c-text-container-6 {
  position: relative;
  height: 100vh;
}
.c-text-6 {
  position: absolute;
  left: 5%;
  top: 30%;
}

.c-text-container-7 {
  position: relative;
  height: 100vh;
}
.c-text-7 {
  position: absolute;
  left: 5%;
  top: 30%;
  z-index: 5;
}

.c-text-container-8 {
  position: relative;
  height: 100vh;
}
.c-text-8 {
  position: absolute;
  right: 8%;
  top: 30%;
}

.c-text-container-9 {
  position: relative;
  height: 100vh;
}
.c-text-9 {
  position: absolute;
  left: 5%;
  top: 30%;
}

.c-text-container-10 {
  position: relative;
  height: 100vh;
}
.c-text-10 {
  position: absolute;
  right: 8%;
  bottom: 35%;
}
.c-text-container-11 {
  position: relative;
  height: 100vh;
}
.c-text-11 {
  position: absolute;
  left: 5%;
  top: 30%;
}

.c-text-title {
  font-size: 2.5rem;
  width: 650px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.c-text {
  font-size: 1.5rem;
  width: 350px;
}
.c-text-center {
  font-size: 2.5rem;
  width: 650px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.image2 {
  height: 100vh;
  margin-top: 500vh;
  width: 100%;
}
.image2 img {
  height: 100%;
  width: 100%;
}

/* video css start */
video {
  display: block;
  height: auto;
  margin: auto;
  position: relative;
  width: 100%;
}
.video-wrap {
  margin: 100vh auto auto auto;
  position: relative;
  width: 90%;
}
/* video css ends */

/* first page hero section starts */
.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: all 0.3s ease;
}
.sub-hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: all 0.3s ease;
}

.hero-section-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 5;
}
.hero-section-title {
  position: relative;
}
.hero-section-title .hero-section-title-1 {
  /* font-family: 'Poppins', sans-serif;
  font-weight: 700; */
  text-transform: uppercase;
  color: #00968f;
  font-family: 'Bebas Neue', cursive;
  font-size: 14rem;
  line-height: 200px;
  background: -webkit-linear-gradient(45deg, #00a39b, #00c2ba, #00f7ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300%;
  background-position: -100%;
  animation: animatedHeroTitle 2s infinite alternate-reverse;
}

@keyframes animatedHeroTitle {
  from {
    background-position: 0%;
  }
  to {
    background-position: 100%;
  }
}

.contact--body__left {
  padding-bottom: 20px;
}

.hero-section-title .hero-section-title-2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: 2.5rem;
  color: rgb(0, 0, 0);
  opacity: 0.5;
}
.hero-section-pera {
  padding-top: 10px;
}
.syrup {
  position: absolute;
  width: 7%;
  top: 0%;
  left: 36%;
  transform: rotate(15deg);
}
.syrup1 {
  position: absolute;
  width: 10%;
  top: -10%;
  left: 32%;
  /* transform: rotate(15deg); */
}
.hero-section-title-img {
  position: absolute;
  width: 100%;
  height: 250px;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.c-leav-1 {
  position: absolute;
  width: 3%;
  left: 25%;
  top: -20%;
  z-index: 5;
}
.c-leav-about-1 {
  position: absolute;
  width: 12%;
  left: 25%;
  top: -50%;
  z-index: 5;
}
.c-leav-product-4 {
  position: absolute;
  width: 6%;
  right: 20%;
  top: -60%;
  z-index: 5;
}
.c-leav-contact-1 {
  position: absolute;
  width: 10%;
  left: 50%;
  top: -50%;
  z-index: 5;
  transform: rotate(-45deg);
}
.c-leav-product-1 {
  position: absolute;
  width: 12%;
  left: 17%;
  bottom: -25%;
  z-index: 5;
  transform: rotate(70deg);
}
.c-leav-procut-2 {
  position: absolute;
  width: 8%;
  left: 15%;
  top: -55%;
  z-index: 5;
  transform: rotate(60deg);
}
.c-leav-2 {
  position: absolute;
  width: 8%;
  right: 18%;
  top: -50%;
  z-index: 5;
  transform: rotate(160deg);
}
.c-leav-contact-2 {
  position: absolute;
  width: 8%;
  left: 30%;
  bottom: -40%;
  z-index: 5;
  transform: rotate(160deg);
}
.c-leav-3 {
  position: absolute;
  width: 8%;
  left: 3%;
  bottom: 30%;
  z-index: 5;
}
.c-leav-contact-3-right {
  position: absolute;
  width: 8%;
  right: 8%;
  bottom: 10%;
  z-index: 5;
}
.c-leav-3-right {
  position: absolute;
  width: 8%;
  right: 12%;
  bottom: 10%;
  z-index: 5;
}
.c-leav-product-3-right {
  position: absolute;
  width: 8%;
  right: 12%;
  bottom: -40%;
  z-index: 5;
}
.c-leav-product-2 {
  position: absolute;
  width: 8%;
  left: 10%;
  bottom: 0%;
  z-index: 5;
  transform: rotate(160deg);
}
.c-leav-about-2 {
  position: absolute;
  width: 10%;
  left: 10%;
  bottom: -15%;
  z-index: 5;
  /* transform: rotate(160deg); */
}
.c-leav-4 {
  position: absolute;
  width: 8%;
  right: 4%;
  bottom: 32%;
  z-index: 5;
}

/* scroll down starts */
.scrolldown-container {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #00a39b;
  z-index: 5;
}
.scrolldown {
  width: 3px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgb(0, 163, 155) 50%,
    rgba(0, 247, 237, 1) 50%
  );
  background-size: 100% 200%;
  animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes scrolldown {
  0% {
    background-position: 0 -40px;
  }
  75% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 40px;
  }
}

.sub-scrolldown-container {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  z-index: 5;
}
.sub-scrolldown {
  width: 3px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgb(0, 163, 155) 50%,
    rgba(255, 255, 255, 1) 50%
  );
  background-size: 100% 200%;
  animation: sub-scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes sub-scrolldown {
  0% {
    background-position: 0 -40px;
  }
  75% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 40px;
  }
}



.home-first-section-2 {
  position: relative;
  height: 100%;
}
.airoplan-up {
  position: fixed;
  bottom: 0%;
  right: 5%;
  width: 50px;
  height: 50px;
  background-color: none;
  animation: animate1 2s linear infinite;
  cursor: pointer;
  z-index: 5;
  border-radius: 50%;
  display: none;
}
.airoplan-up i {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 1.5rem;
}
@keyframes animate1 {
  0% {
    bottom: 5%;
    opacity: 1;
  }

  100% {
    bottom: 8%;
    opacity: 1;
  }
}
.disclaimer {
  text-align: right;
}
.about-packaging {
  margin-top: 50px;
}
.contact-btn {
  background: black;
  cursor: pointer;
  outline: none;
  color: #000;
  border: #000;
}
/* .contact-btn i {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
} */
/* scroll down ends */

/* hero mouse parallex effect css starts */
.c-hero-mouse-ani {
  height: 100vh;
}
/* hero mouse parallex effect css ends */
/* first page hero section ends */

/* footer css starts */
.c-footer {
  /* margin: 620vh auto auto auto; */
  background-color: #00fff4;
  padding: 100px 100px 0 100px;
  /* bottom: 0px; */
  height: 100%;
  /* margin-top: 50vh; */
  position: relative;
  display: block;
}
footer a {
  text-decoration: none;
  color: #1b1b1b;
}

.footer-text-padding {
  padding-bottom: 15px;
}

.footer-logo {
  width: 200px;
}
.footer-logo img {
  width: 100%;
}

.footer-1-padding {
  padding-bottom: 50px;
}
/* .footer-2-padding {
  padding-bottom: 60px;
} */

.footer-title-1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}
.footer-title-2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  padding-top: 15px;
}


.footer-leav {
  /* position: absolute; */
  /* top: -20%; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  max-width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  position: relative;
}
.footer-leav img {
  width: 350px;
}

.footer-leav-illu {
  position: absolute;
  bottom: 0%;
  right: -2%;
  width: 350px;
}
.footer-leav-illu img {
  width: 100%;
}
/* footer css ends */

/* button css starts */
.c-btn {
  position: relative;
  background: none;
  text-decoration: none;
  border: 0.1rem solid #1d1d1d;
  padding: 0.5em 1em;
  cursor: pointer;
}
.c-btn::before {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #fff;
  height: 1em;
  left: -0.21em;
  bottom: -0.21em;
  -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}
.c-btn::after {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #fff;
  height: 1.5em;
  right: -0.25em;
  top: -0.25em;
  -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}
.c-btn:hover::before {
  left: 100%;
}
.c-btn:hover::after {
  right: 100%;
}
/* button css ends */


/* contact us page css starts */
.map iframe {
  width: 100%;
  height: 80vh;
}
.contact--section {
  padding: 50px 0 0 50px;
}
.contact--body__right {
  background-color: #F9F9F9;
  padding: 25px 50px;
}
.contact--body {
  padding-bottom: 20px;
}
.contact--input input,.contact--textarea textarea, .contact--select select {
  border: 2px solid #e0e0e0;
  background-color: #fff;
  padding: 10px 15px;
  width: 100%;
}
.contact--btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.contact--btn__body {
  border: 2px solid #000;
  background: none;
  color: #000;
  padding: 10px 25px;
  font-weight: 600;
  cursor: pointer;
  z-index: 5;
  position: relative;
}
.modal {
  z-index: 999999 !important;
}
a:hover {
  color: #000;
}
.c-footer-margin {
  margin-top: 150px;
}
/* cntact page css ends */

/* about page css starts */
.c--who__img img {
  width: 100%;
}
.about--cover__img img {
  width: 100%;
  position: relative;
  z-index: 5;
}
.footer-relative {
  position: relative;
  z-index: 5;
}
.team--person__img {
  position: relative;
  overflow: hidden;
  width: 80%;
}
.team--person__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: all 0.3s linear;
}

.team--person__caption {
  position: absolute;
  padding: 50px 25px;
  top: 0%;
  color: #fff;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s linear;
}
.team--person__img:hover .team--person__caption {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6);
}
.team--person__img:hover img {
  transform: scale(1.2);
}
.about-title-padding {
  padding-bottom: 50px;
}
.about-title-padding1 {
  padding: 50px 0;
}
.about-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.about-text-container1 {
  width: 90%;
}
main {
  /* padding-bottom: 150px; */
}
.footer {
  padding-top: 20px;
}
#demo {
  height: 100vh;
  width: 100%;
}
#demo {
  position: absolute;
  /* left: 50%;
  top: 50%;
  transform: translate(-50%,-50%); */
  /* font-family: "Roboto", sans-serif; */
  text-transform: uppercase;
  font-weight: 700;
}
#action {
  padding: 10px;
  font-size: 0.875em;
  margin: 10px;
  cursor: pointer;
  font-family: 'Bebas Neue', cursive;
  z-index: 10;
  position: absolute;
}


.about-our-team,
.about-who-we-are {
  position: relative;
}

.about-licence {
  max-width: 450px;
}
.about-licence img {
  width: 100%;
}
.c-box-shadow {
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2); 
}

.about-tree {
  position: absolute;
  left: -7%;
  top: 0%;
  width: 300px;
}
.about-tree img {
  width: 100%;
  transform: rotate(30deg);
}
.about-leav {
  position: absolute;
  bottom: 2%;
  left: 30%;
  width: 80px;
}
.about-leav img {
  width: 100%;
}

.about-tree-right {
  position: absolute;
  right: -5%;
  top: 0%;
  width: 300px;
}
.about-tree-right img {
  width: 100%;
  transform: rotate(-30deg);
}
/* about page css ends */


.window-loader-icon { left: 50%; position: absolute; top: 30%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.window-loader-icon > img { width: 40vw; }
#overlay1 { background-color: #ffffff; bottom: 0; left: 0; position: fixed; right: 0; top: 0; -webkit-transition: 1s 0.4s; -moz-transition: 1s 0.4s; -ms-transition: 1s 0.4s; -o-transition: 1s 0.4s; transition: 1s 0.4s; z-index: 99999; }
#progress { background-color: rgb(0, 0, 0); height: 1px; position: absolute; top: 60%; width: 0; }
#progstat { color: #000000; font: 2vw/1.2 'Poppins', sans-serif; left: 50%; letter-spacing: 7px; position: absolute; text-align: center; top: 75%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; }


/* product page css starts */
.product-wrap {
  /* color: #000; */
  width: 100vw;
  min-height: 100vh;
  position: relative;
}
.product-wrap-img-container {
  /* width: 50%; */
  /* border: 2px solid black; */
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
 
}
.product-wrap-img-body {
  position: sticky;
  /* top: 180px; */
  display: flex;
  justify-content: center;
  padding: 16px 14px;
  z-index: 5;
}
.product-wrap-img {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  overflow: hidden;
  width: 60%;
}
.product-wrap-img img {
  width: 100%;
}

.product-wrap-text-container {
  width: 100vw;
  padding: 0 50px;
  height: 100vh;
  position: relative;
}
.product-wrap-text-body {
  position: relative;
  width: 100%;
  height: 100%;
  /* border: 2px solid black; */
}

.product-cover-img {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0%;
  left: 0%;
}
.product-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-text-body-absolute {
  position: absolute;
  top: 0%;
  left: 0%;
  /* border: 2px solid black; */
}
.product-text-body-absolute1 {
  position: absolute;
  top: 15%;
  left: 5%;
  /* border: 2px solid black; */
}
.product-text-body-2 {
  position: absolute;
  top: 15%;
  right: 5%;
  /* border: 2px solid black; */
}
.product-text-body-4 {
  position: absolute;
  top: 25%;
  right: 2%;
}
.product-text-body-5 {
  position: absolute;
  top: 25%;
  left: 5%;
}
/* .product-text-body-6-sm {
  display: none;
} */
.product-text-body-6 {
  position: absolute;
  top: 10%;
  right: 10%;
}
.tr-border-bottom {
  border-bottom: 1px solid black;
}
.product-table-th {
  padding-right: 2rem;
}
.product-text-body-7 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
}
.product-text-body-8 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
}
.about-licence-1 {
  height: 80vh;
}
.about-licence-1 img {
  height: 100%;
}
.product-text-body-9 {
  position: absolute;
  bottom: 15%;
  left: 5%;
} 
.product-text-body-10 {
  top: 0%;
}
.bg-primary {
  background-color: #00E4DA !important;
}
.product-leav-right {
  width: 150px;
  position: absolute;
  top: 50%;
  right: -25%;
  transform: translateY(-40%);
  z-index: 0;
}
.product-leav-right-img, .product-leavs-img {
  opacity: 0;
}
.product-leav-right img {
  width: 100%;
}
.product-leavs-1 {
  position: absolute;
  width: 20%;
  top: 40%;
  left: 8%;
}
.product-leavs-2 {
  position: absolute;
  width: 20%;
  top: 50%;
  right: 8%;
}
.product-leavs-3 {
  position: absolute;
  width: 18%;
  bottom: 18%;
  left: 9%;
}
.product-leavs-4 {
  position: absolute;
  width: 20%;
  bottom: 10%;
  right: 8%;
}

/* faq section starts */
.faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.faq {
  width: 950px;
  margin-top: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid black;
  cursor: pointer;
}
.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.question h3 {
  font-size: 1.5rem;
}
.answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.4s ease;
}
.answer p {
  padding-top: 1rem;
  line-height: 1.6;
  font-size: 1rem;
  color: #7c7878;
}
.faq.active .answer {
  max-height: 300px;
  animation: faqfade 1s ease-in-out
}
.faq.active i {
  transform: rotate(180deg);
}
.faq i {
  transition: transform 0.5s ease-in;
}

@keyframes faqfade {
  from {
    opacity: 0;
    transform: translateY(-10px)
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
/* faq section ends */
/* product page css ends */


.loadbar {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(
  45deg, 
    #008737, 
    #008737 10px, 
    #69AF23 10px,
    #69AF23 20px
  ); /* Stripes Background Gradient */
  box-shadow: 0px 0px 14px 1px #008737; 
  position: absolute;
  top: 0;
  left: 0;
  animation: flicker 5s infinite;
  overflow: hidden;
}

.glow {
  width: 0%;
  height: 0%;
  border-radius: 20px;
  box-shadow: 0px 0px 60px 10px #008737;
  position: absolute;
  bottom: -5px;
  animation: animation 5s infinite;
}


#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #fff url('../images/Loading.gif') no-repeat center;
  z-index: 99999;
  background-size: contain;
}

#loadingdemo {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: -1;
}