*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
}
:root {
  /* Primary Colors */
  --color-g-50: #E8EDE9;
  --color-g-100: #b9c8bc;
  --color-g-200: #97ad9c;
  --color-g-300: #68876e;
  --color-g-400: #4a7052;
  --color-g-500: #1d4c27;
  --color-g-600: #1a4523;
  --color-g-700: #15361c;
  --color-g-800: #102a15;
  --color-g-900: #0c2010;

  /* Secondary Colors */
  --color-y-50: #fffef0;
  --color-y-100: #fefbd2;
  --color-y-200: #fef9bc;
  --color-y-300: #fef79d;
  --color-y-400: #FDF36D;
  --color-y-500: #fdf36d;
  --color-y-600: #e6dd63;
  --color-y-700: #b4ad4d;
  --color-y-800: #8b863c;
  --color-y-900: #6a662e;

  /* Dark Neutrals */
  --color-black-50: #F5F5F5;
  --color-black-100: #E3E3E4;
  --color-black-200: #C5C5C8;
  --color-black-300: #A2A3A9;
  --color-black-400: #848590;
  --color-black-500: #646470;
  --color-black-600: #484852;
  --color-black-700: #31323A;
  --color-black-800: #1F1F26;
  --color-black-900: #1A1C1E;

  /* Type on Light BG */
  --color-type-light-700: #2C302D;
  --color-type-light-400: #6F7971;
  --color-type-light-300: #B6B9BC;

  /* Type on Dark BG */
  --color-type-dark-500: #F7F7F7;
  --color-type-dark-400: #EEEEEE;
  --color-type-dark-300: #8B8C8E;

  /* Light Background */
  --bg-gray-500: #F0F0F0;
  --bg-gray-400: #F7F7F7;
  --bg-gray-300: #FFFFFF;

  /* Dark Background */
  --bg-dark-green: #0A2F2E;
  --bg-black-900: #1A1E1B;
  --bg-black-800: #232527;
  --bg-black-700: #2C2E30;
}

/* Text color classes */
.text-g-50    { color: var(--color-g-50); }
.text-g-100   { color: var(--color-g-100); }
.text-g-200   { color: var(--color-g-200); }
.text-g-300   { color: var(--color-g-300); }
.text-g-400   { color: var(--color-g-400); }
.text-g-500   { color: var(--color-g-500); }
.text-g-600   { color: var(--color-g-600); }
.text-g-700   { color: var(--color-g-700); }
.text-g-800   { color: var(--color-g-800); }
.text-g-900   { color: var(--color-g-900); }

.text-y-50    { color: var(--color-y-50); }
.text-y-100   { color: var(--color-y-100); }
.text-y-200   { color: var(--color-y-200); }
.text-y-300   { color: var(--color-y-300); }
.text-y-400   { color: var(--color-y-400); }
.text-y-500   { color: var(--color-y-500); }
.text-y-600   { color: var(--color-y-600); }
.text-y-700   { color: var(--color-y-700); }
.text-y-800   { color: var(--color-y-800); }
.text-y-900   { color: var(--color-y-900); }

.text-black-900 { color: var(--color-black-900); }
.text-black-800 { color: var(--color-black-800); }
.text-black-700 { color: var(--color-black-700); }
.text-black-600 { color: var(--color-black-600); }
.text-black-500 { color: var(--color-black-500); }
.text-black-400 { color: var(--color-black-400); }
.text-black-300 { color: var(--color-black-300); }
.text-black-200 { color: var(--color-black-200); }
.text-black-100 { color: var(--color-black-100); }
.text-black-50  { color: var(--color-black-50); }

.text-type-light-700 { color: var(--color-type-light-700); }
.text-type-light-400 { color: var(--color-type-light-400); }
.text-type-light-300 { color: var(--color-type-light-300); }
.text-type-dark-500  { color: var(--color-type-dark-500); }
.text-type-dark-400  { color: var(--color-type-dark-400); }
.text-type-dark-300  { color: var(--color-type-dark-300); }

/* Background color classes */
.bg-g-50    { background-color: var(--color-g-50); }
.bg-g-100   { background-color: var(--color-g-100); }
.bg-g-200   { background-color: var(--color-g-200); }
.bg-g-300   { background-color: var(--color-g-300); }
.bg-g-400   { background-color: var(--color-g-400); }
.bg-g-500   { background-color: var(--color-g-500); }
.bg-g-600   { background-color: var(--color-g-600); }
.bg-g-700   { background-color: var(--color-g-700); }
.bg-g-800   { background-color: var(--color-g-800); }
.bg-g-900   { background-color: var(--color-g-900); }

.bg-y-50    { background-color: var(--color-y-50); }
.bg-y-100   { background-color: var(--color-y-100); }
.bg-y-200   { background-color: var(--color-y-200); }
.bg-y-300   { background-color: var(--color-y-300); }
.bg-y-400   { background-color: var(--color-y-400); }
.bg-y-500   { background-color: var(--color-y-500); }
.bg-y-600   { background-color: var(--color-y-600); }
.bg-y-700   { background-color: var(--color-y-700); }
.bg-y-800   { background-color: var(--color-y-800); }
.bg-y-900   { background-color: var(--color-y-900); }

.bg-black-900 { background-color: var(--color-black-900); }
.bg-black-800 { background-color: var(--color-black-800); }
.bg-black-700 { background-color: var(--color-black-700); }
.bg-black-600 { background-color: var(--color-black-600); }
.bg-black-500 { background-color: var(--color-black-500); }
.bg-black-400 { background-color: var(--color-black-400); }
.bg-black-300 { background-color: var(--color-black-300); }
.bg-black-200 { background-color: var(--color-black-200); }
.bg-black-100 { background-color: var(--color-black-100); }
.bg-black-50  { background-color: var(--color-black-50); }

.bg-type-light-700 { background-color: var(--color-type-light-700); }
.bg-type-light-400 { background-color: var(--color-type-light-400); }
.bg-type-light-300 { background-color: var(--color-type-light-300); }
.bg-type-dark-500  { background-color: var(--color-type-dark-500); }
.bg-type-dark-400  { background-color: var(--color-type-dark-400); }
.bg-type-dark-300  { background-color: var(--color-type-dark-300); }

.bg-gray-500 { background-color: var(--bg-gray-500); }
.bg-gray-400 { background-color: var(--bg-gray-400); }
.bg-gray-300 { background-color: var(--bg-gray-300); }
.bg-dark-green { background-color: var(--bg-dark-green); }
.bg-black900-dbg { background-color: var(--bg-black-900); }
.bg-black800-dbg { background-color: var(--bg-black-800); }
.bg-black700-dbg { background-color: var(--bg-black-700); }


.heading-1 { 
  font-size: 80px; 
  line-height: 88px; 
  letter-spacing: -2.4px; 
  font-family: "Archivo", sans-serif;
}

.heading-2 { 
  font-size: 64px; 
  line-height: 72px; 
  letter-spacing: -1.9px; 
  font-family: "Archivo", sans-serif;
}

.heading-3 { 
  font-size: 56px; 
  line-height: 64px; 
  letter-spacing: -1.1px; 
  font-family: "Archivo", sans-serif;
}

.heading-4 { 
  font-size: 48px; 
  line-height: 56px; 
  letter-spacing: -1.0px; 
  font-family: "Archivo", sans-serif;
}

.heading-5 { 
  font-size: 40px; 
  line-height: 48px; 
  letter-spacing: normal; 
  font-family: "Archivo", sans-serif;
}

.heading-6 { 
  font-size: 32px; 
  line-height: 40px; 
  letter-spacing: normal; 
  font-family: "Archivo", sans-serif;
}

.heading-7 { 
  font-size: 24px; 
  line-height: 32px; 
  letter-spacing: 0px; 
  font-family: "Archivo", sans-serif;
}

/* Titles */
.title-1 { 
  font-size: 20px; 
  line-height: 32px; 
  letter-spacing: 0px; 
  font-family: "Archivo", sans-serif;
}

.title-2 { 
  font-size: 18px; 
  line-height: 27px; 
  letter-spacing: 0px;
  font-family: "Archivo", sans-serif; 
}

/* Body */
.body-lg { font-size: 20px; line-height: 32px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
.body-md { font-size: 18px; line-height: 28px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
.body-sm { font-size: 16px; line-height: 24px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
.body-xs { font-size: 14px; line-height: 21px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}

/* Caption */
.caption-lg { font-size: 14px; line-height: 20px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
.caption-md { font-size: 13px; line-height: 19.5px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
.caption-sm { font-size: 12px; line-height: 18px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}


/* Menu text */
.menu-caps { 
  font-size: 13px; 
  line-height: 16px;
  letter-spacing: 1.36px; 
  text-transform: uppercase; 
  font-family: "Archivo", sans-serif;
}
.menu-lg { 
  font-size: 15px; 
  line-height: 20px; 
  letter-spacing: 0px; 
  font-family: "Archivo", sans-serif;
}

.py-128{
  padding-top: 128px;
  padding-bottom: 128px;
}
.py-108{
  padding-top: 108px;
  padding-bottom: 108px;
}
.py-80{
  padding-top: 80px;
  padding-bottom: 80px;
}
.mb-128{
  margin-bottom: 128px;
}
.mb-80{
  margin-bottom: 80px;
}
.mb-64{
  margin-bottom: 64px;
}
.mb-56{
  margin-bottom: 56px;
}
.mb-40{
  margin-bottom: 40px;
}
.mb-32{
  margin-bottom: 32px;
}
.mb-16{
  margin-bottom: 16px;
}
.mb-12{
  margin-bottom: 12px;
}
.pt-80{
  padding-top: 80px;
}
.gap-72{
  gap: 72px;
}
.gap-40{
  gap: 40px;
}
.gap-32{
  gap: 32px;
}
.gap-12{
  gap: 12px;
}
.btn-header{
  font-family: "Archivo", sans-serif;
  background-color: transparent!important;
  color: var(--color-g-500)!important;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.5px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-gray-400{
  font-family: "Archivo", sans-serif;
  background-color: var(--bg-gray-400)!important;
  color: var(--color-g-500)!important;
  padding: 16px 24px;
  border-radius: 55px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1.36px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 72px;
}
.btn-green-500{
  font-family: "Archivo", sans-serif;
  background-color: var(--color-g-500)!important;
  color: var(--color-type-dark-500)!important;
  padding: 16px 24px;
  border-radius: 55px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1.36px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 40px;
}
.btn-trans-dark{
  font-family: "Archivo", sans-serif;
  background-color: transparent!important;
  color: var(--color-type-light-700)!important;
  padding: 0px 0px 6px 0px;
  border: none;
  border-bottom: 1px solid var(--color-type-light-700)!important;
  border-radius: 0px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1.36px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 40px;
}
.btn-yellow-500{
  font-family: "Archivo", sans-serif;
  background-color: var(--color-y-500)!important;
  color: var(--color-type-light-700)!important;
  padding: 16px 24px;
  border-radius: 55px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1.36px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 40px;
}
.btn-trans-light{
  font-family: "Archivo", sans-serif;
  background-color: transparent!important;
  color: var(--color-type-dark-500)!important;
  padding: 0px 0px 6px 0px;
  border: none;
  border-bottom: 1px solid var(--color-type-dark-500)!important;
  border-radius: 0px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1.36px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 40px;
}
.btn-trans-green{
  font-family: "Archivo", sans-serif;
  background-color: transparent!important;
  color: var(--color-g-500)!important;
  padding: 0px 0px 6px 0px;
  border: none;
  border-bottom: 1px solid var(--color-g-500)!important;
  border-radius: 0px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1.36px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 40px;
}
sup{
  vertical-align: super;
}
a{
  text-decoration: none;
}
/****************** header styles *****************/
/* @media (min-width: 1440px) {
  .container-custom {
    max-width: 1224px !important;
  }
}
  .container-custom {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  } */
.navbar-fixed-custom {
  position: fixed;
  top: 24px;
  left: 0;
  width: 100%;
  z-index: 1030;
  pointer-events: all;
  background: transparent;
}
header .navbar{
  padding: 12px 12px 12px 24px;
  background-color: var(--bg-gray-400);
  pointer-events: all;
}

.nav-icon-close{
  display: none;
}
.navbar-toggler[aria-expanded="true"] .nav-icon-close{
  display: block;
}
.navbar-toggler[aria-expanded="true"] .nav-icon-toggler{
  display: none;
}
.header-toggle-style{
  height: 100vh;
  background: #FFFFFFA3;
  backdrop-filter: blur(24px);
  box-shadow: none;
  border: none;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/****************** home page styles *****************/
.hero-section{
  background: url('../images/hero-bg-banner.png') no-repeat center center;
  background-size: cover;
  height: 900px;
  width: 100%;
  padding-bottom: 108px;
  position: relative;
}
.hero-section::after {
  content: '';
  position: absolute;
  width: 100%; 
  height: 116px;
  z-index: 2;
  pointer-events: none;
  bottom: 0px;
  /* background: linear-gradient(to top, #F7F7F7, rgba(255, 255, 255, 0)); */
  background: linear-gradient(180deg, rgba(30, 30, 30, 0) 0%, #0A2F2E 100%);
}

.home-features-card1{
  background: url('../images/home-feature-card1-bg-img.png') no-repeat center center;
}
.home-features-card2{
  background-color: var(--bg-gray-400);
}
.home-features-card3{
  background-color: var(--color-g-100);
}
.home-features-points{
  background-color: var(--color-g-50);
  border-radius: 100px;
  max-width: 270px;
}
.home-product-section{
  padding: 67px 83px;
}
.home-scrolling-container {
  overflow: hidden;
  height: 680px; 
  position: relative;
  display: flex;
  justify-content: center;
}

.home-scrolling-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: absolute;
  /* left: 50%;
  transform: translateX(-50%); */
  animation: none; /* JS will handle movement */
}
.home-scrolling-list-item{
  background-color: var(--color-g-50);
  border-radius: 100px;
  padding: 12px 24px;

}
.home-why-us-gradient {   
    position: relative;
}
.home-why-us-gradient::before,
.home-why-us-gradient::after {
    content: '';
    position: absolute;
    width: 100%; 
    height: 116px;
    z-index: 2;
    pointer-events: none;
}
.home-why-us-gradient::before {
  top: 0px;
  background: linear-gradient(to bottom, #F7F7F7, rgba(255, 255, 255, 0));    
}

.home-why-us-gradient::after {
  bottom: 0px;
  background: linear-gradient(to top, #F7F7F7, rgba(255, 255, 255, 0));
}

/* .home-why-us-gradient-top{
  background: linear-gradient(0deg, rgba(247, 247, 247, 0) 0%, #E8EDE9 100%);
  height: 116px;
  position: absolute;
  top: 0px;
  z-index: 99999;
}
.home-why-us-gradient-bottom{
  background: linear-gradient(0deg, #E8EDE9 52.5%, rgba(255, 255, 255, 0) 100%);
  height: 116px;
  position: absolute;
  bottom: 0px;
  z-index: 99999;
} */
.eco-friendly-img{
  width: 243px;
  height: 152px;
}
.eco-friendly-hr{
  border: 1px solid #FFFEF0;
  height: 0px;
  opacity: 20%;
  margin: 40px 0px;
  width: 100%;
}

/* marquee effect */
.marquee-wrapper {
  display:  flex;
  white-space: nowrap;
  overflow-x: hidden;
  position: relative;
}
  
.marquee{
  display: flex;
  white-space: nowrap;
  position: relative;
  transform: translate3d(0%, 0, 0);
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 50s;
}

@keyframes marquee {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
} 

.marquee img{
  width: 392px;
  height: 260px;
  object-fit: cover;
}
.certification-img-container{
  gap: 72px;
}
.certification-img{
  height: 172px;
}
.testimonial-card{
  padding: 32px 24px;
}
.testimonial-dot{
  height: 3px;
  width: 3px;
  border-radius: 100px;
  background-color: var(--color-g-200);
  color: var(--color-g-200);
  opacity: 1;
}
.cta-content{
  padding: 80px 40px 80px 0px;
}
footer{
  background-color: var(--color-g-50);
  padding: 80px 0px 32px 0px;
}
footer .nav-link:hover{
  color: var(--color-g-500);
}
.footer-social-btn{
  padding: 10px 12px;
  border-radius: 4px;
  background-color: var(--color-g-100)!important;
  color: var(--color-g-500)!important;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.4px;
  font-weight: 700;
  text-transform: uppercase;
  max-width: 288px;
}
.footer-divider{
  border: 1px solid var(--color-g-500);
  opacity: 20%;
  margin: 32px 0px;
}

/******************* about page styles *******************/
.about-hero-section{
  padding: 200px 0px 40px 0px;
}
.about-parallax-img-container{
  /* The image used */
  background-image: url("../images/about-parallax-img.jpg");

  /* Set a specific height */
  min-height: 440px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.about-us-hr{
  border: 1px solid #E3E3E4;
  height: 0px;
  opacity: 1;
  margin: 40px 0px;
}
.speciality-row{
  padding-top: 40px;
  margin-bottom: 96px;
  border-top: 1px solid #E8EDE9;
  opacity: 1;
}
.leadership-team-img{
  width: 260px;
  height: 164px;
}
.team-member-card{
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
}

.team-gallery-slides {
    margin-top: 64px;
    padding-left: 108px;
    padding-right: 108px;
    gap: 32px;
    cursor: none;
    overflow-x: auto;
    user-select: none;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
.team-gallery-slides::-webkit-scrollbar {
  display: none;
}


.team-gallery-slide img {
  pointer-events: none; /* Prevent images from being dragged */
  /* max-width: none; */
  /* width: auto;
  height: auto; */
}
/* Custom Cursor */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background: var(--bg-dark-green);
  color: white;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  pointer-events: none; 
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  z-index: 9999;
  opacity: 0; 
}
#custom-cursor.active-cursor {
  width: 95px;
  height: 92px;
  background: var(--bg-dark-green);
}
.team-gallery-slide-img-odd{
    height: 495px;
    width: 495px;
}
.team-gallery-slide-img-even{
    height: 347px;
    width: 560px;
}

/******************* Product page Styles *******************/
.product-hero-section{
  background: url('../images/export-hero-banner-img.jpg') no-repeat center center;
  background-size: cover;
  height: 900px;
  width: 100%;
  padding-bottom: 108px;
  position: relative;
}
/* .product-hero-section::after {
  content: '';
  position: absolute;
  width: 100%; 
  height: 80%;
  z-index: 2;
  pointer-events: none;
  bottom: 0px;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0) 0%, #0A2F2E 100%);
}
.product-hero-section .container{
  z-index: 3;
} */
.products-hero-points{
  background-color: var(--color-y-50);
  border-radius: 100px;
  max-width: 270px;
}
.products-about-hr{
  border: 1px solid #E8EDE9;
  opacity: 1;
  margin: 32px 0px;
}
.products-feature-hr{
  border: 1px solid #6E7870;
  height: 0px;
  opacity: 20%;
  margin: 40px 0px;
  width: 100%;
}
.table>:not(caption)>*>* {
  border: none;
}
.product-table-head1{
  background-color: var(--color-g-500)!important;
  color: var(--color-type-dark-400)!important;
  font-family: "Archivo", sans-serif;
}
.product-table-head2{
  background-color: var(--color-g-100)!important;
  color: var(--color-type-light-700)!important;
  font-family: "Archivo", sans-serif;
}
/* .table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rebeccapurple;
  color: var(--color-type-light-700)!important;
  font-family: "Manrope", sans-serif;
} */
.product-card-vr{
  /* border-left: 1px solid #B6B9BC;
  opacity: 1; */
  width: 1px;
  background-color: #B6B9BC;
  opacity: 50%;
}
/******************* export page styles *******************/
.export-hero-section{
  background: url('../images/export-hero-banner-img.jpg') no-repeat center center;
  background-size: cover;
  height: 900px;
  width: 100%;
  padding-bottom: 108px;
  position: relative;
}
/* .export-hero-section::after {
  content: '';
  position: absolute;
  width: 100%; 
  height: 80%;
  z-index: 2;
  pointer-events: none;
  bottom: 0px;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0) 0%, #0A2F2E 100%);
}
.export-hero-section .container{
  z-index: 3;
} */
/******************* contact page styles *******************/
.contact-hero-section{
  padding: 200px 0px 80px 0px;
}
.contact-form-container{
  background-color: white;
  padding: 40px;
}
.contact-details-container{
  background: url('../images/contact-info-img.png') no-repeat center center;
  background-size: cover;
  padding: 40px;
}
.contact-form-container .form-control{
  background-color: var(--color-g-50)!important;
  color: var(--color-type-light-400);
  padding: 16px 20px;
  border: 0px;
  border-radius: 0px;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0px;
  vertical-align: middle;
  box-shadow: 0px;
}
.contact-form-container .form-control:focus{
  box-shadow: none;
}   
/******************* containers *******************/
.container{
  max-width: 1224px;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .container{
    max-width: calc(100% - 216px);
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container{
    max-width: calc(100% - 80px);
    padding-left: 0;
    padding-right: 0;
  }
}
/******************* Tablet Responsive Till(1024px) *******************/
/* @media (min-width: 576px) and (max-width: 1199.98px) */
@media (min-width: 576px) and (max-width: 1024px) {
    .heading-6-tab { font-size: 20px; line-height: 28px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
    .body-sm-tab { font-size: 16px; line-height: 24px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
  .py-96-tab{
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .mb-96-tab{
    margin-bottom: 96px;
  }
  .home-product-section{
    padding: 67px 38px;
  }
  .eco-friendly-hr{
    border: 1px solid #FFFEF0;
    height: 0px;
    opacity: 20%;
    margin: 24px 0px;
    width: 100%;
  }
  .products-feature-hr{
    border: 1px solid #6E7870;
    height: 0px;
    opacity: 20%;
    margin: 40px 0px;
    width: 100%;
  }
  .cta-content{
    padding: 80px 40px 80px 0px;
  }
  .footer-social-btn{
    padding: 10px 12px;
    border-radius: 4px;
    background-color: var(--color-g-100)!important;
    color: var(--color-g-500)!important;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1.4px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
  }
}
/******************* Tablet Responsive *******************/
@media (min-width: 576px) and (max-width: 991.98px) {
  .heading-1-tab { font-size: 72px; line-height: 80px; letter-spacing: -2.2px; font-family: "Archivo", sans-serif;}
  .heading-2-tab { font-size: 56px; line-height: 64px; letter-spacing: -2.2px; font-family: "Archivo", sans-serif;}
  .heading-3-tab { font-size: 48px; line-height: 56px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-4-tab { font-size: 32px; line-height: 40px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-5-tab { font-size: 24px; line-height: 32px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-6-tab { font-size: 20px; line-height: 28px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-7-tab { font-size: 16px; line-height: 24px; letter-spacing: 0px; font-family: "Archivo", sans-serif;}

  .title-1-tab { font-size: 18px; line-height: 24px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .title-2-tab { font-size: 16px; line-height: 20px; letter-spacing: normal; font-family: "Archivo", sans-serif;}

  .body-sm-tab { font-size: 16px; line-height: 24px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}

  .mb-64-tab{
    margin-bottom: 64px;
  }
  .mb-40-tab{
    margin-bottom: 40px;
  }
  .mb-32-tab{
    margin-bottom: 32px;
  }
  .mb-16-tab{
    margin-bottom: 16px;
  }
  .mt-80-tab{
    margin-top: 80px;
  }
  .py-96-tab{
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .py-40-tab{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gap-32-tab{
    gap: 32px;
  }
  .navbar-fixed-custom {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 1030;
    /* pointer-events: none; */
    background: transparent;
  }
  header .navbar{
    padding: 20px 24px 20px 24px;
    background-color: var(--bg-gray-400);
    pointer-events: all;
  }
  .hero-section{
    background: url('../images/hero-bg-banner.png') no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding-top: 180px;
    padding-bottom: 40px;
    position: relative;
  }
  .home-scrolling-container {
    overflow: hidden;
    height: 512px; 
    position: relative;
    display: flex;
    justify-content: center;
  }
  .home-why-us-gradient::before {
    top: calc(100% - 512px);
    background: linear-gradient(to bottom, #F7F7F7, rgba(255, 255, 255, 0));    
  }

  .home-why-us-gradient::after {
    bottom: 0px;
    background: linear-gradient(to top, #F7F7F7, rgba(255, 255, 255, 0));
  }
  .certification-img-container{
    gap: 20px;
  }
  .certification-img{
    height: 140px;
  }
  .cta-content{
    padding: 40px 16px 40px 16px;
  }
  .footer-social-btn{
    padding: 10px 12px;
    border-radius: 4px;
    background-color: var(--color-g-100)!important;
    color: var(--color-g-500)!important;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1.4px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
  }
  .about-hero-section{
  padding: 200px 0px 40px 0px;
  }
  #custom-cursor.active-cursor {
        width: 51px;
        height: 52px;
        background: var(--bg-dark-green);
    }
  .product-hero-section{
    background: url('../images/export-hero-banner-img.jpg') no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding-top: 180px;
    padding-bottom: 40px;
    position: relative;
    background-position: right!important;
  }
  .export-hero-section{
    background: url('../images/export-hero-banner-img.jpg') no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding-top: 180px;
    padding-bottom: 40px;
    position: relative;
    background-position: right!important;
  }
  /******************* contact page styles *******************/
.contact-hero-section{
  padding: 200px 0px 80px 0px;
}
  .container{
    max-width: calc(100% - 80px);
    padding-left: 0;
    padding-right: 0;
  }
}
/**************** Mobile Responsive ***************/
@media (max-width: 575.98px) {
  .heading-1-mob { font-size: 64px; line-height: 72px; letter-spacing: -1.9px; font-family: "Archivo", sans-serif;}
  .heading-2-mob { font-size: 40px; line-height: 48px; letter-spacing: -0.8px; font-family: "Archivo", sans-serif;}
  .heading-3-mob { font-size: 32px; line-height: 40px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-4-mob { font-size: 24px; line-height: 32px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-5-mob { font-size: 20px; line-height: 28px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-6-mob { font-size: 18px; line-height: 24px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .heading-7-mob { font-size: 16px; line-height: 20px; letter-spacing: 0px; font-family: "Archivo", sans-serif;}

  .title-1-mob { font-size: 16px; line-height: 20px; letter-spacing: normal; font-family: "Archivo", sans-serif;}
  .title-2-mob { font-size: 16px; line-height: 20px; letter-spacing: normal; font-family: "Archivo", sans-serif;}

  .body-md-mob { font-size: 18px; line-height: 28px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
  .body-sm-mob { font-size: 16px; line-height: 24px; letter-spacing: 0px; font-family: "Manrope", sans-serif;}
  .mb-64-mob{
    margin-bottom: 64px;
  }
  .mb-56-mob{
    margin-bottom: 56px;
  }
  .mb-40-mob{
    margin-bottom: 40px;
  }
  .mb-32-mob{
    margin-bottom: 32px;
  }
  .mb-16-mob{
    margin-bottom: 16px;
  }
  .mt-80-mob{
    margin-top: 80px;
  }
  .py-64-mob{
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .py-40-mob{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gap-32-mob{
    gap: 32px;
  }
  .navbar-fixed-custom {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 1030;
    /* pointer-events: none; */
    background: transparent;
  }
  header .navbar{
    padding: 20px 24px 20px 24px;
    background-color: var(--bg-gray-400);
    pointer-events: all;
  }
  .home-product-section{
    padding: 40px 16px;
  }
  /* .home-why-us-gradient::before,
  .home-why-us-gradient::after {
    content: none;
    position: unset;
    visibility: hidden;
  } */
  
  /* .home-why-us-gradient-mob {   
    position: relative;
  } */
  /* .home-why-us-gradient-mob::before,
  .home-why-us-gradient-mob::after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%; 
    height: 116px;
    z-index: 2;
    pointer-events: none;
  }
  .home-why-us-gradient-mob::before {
    top: 0;
    background: linear-gradient(to bottom, #E8EDE9, rgba(255, 255, 255, 0));    
  }

  .home-why-us-gradient-mob::after {
    bottom: 0px;
    background: linear-gradient(to top, #E8EDE9, rgba(255, 255, 255, 0));
  } */
   /* .home-why-us-gradient::before {
    top: calc(991px - 700px);
    background: linear-gradient(to bottom, #E8EDE9, rgba(255, 255, 255, 0));    
  } */
  .hero-section{
    background: url('../images/hero-bg-banner.png') no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding-top: 180px;
    padding-bottom: 40px;
    position: relative;
  }
  .home-scrolling-container {
    overflow: hidden;
    height: 512px; 
    position: relative;
    display: flex;
    justify-content: center;
  }
  .home-why-us-gradient::before {
    top: calc(100% - 512px);
    background: linear-gradient(to bottom, #F7F7F7, rgba(255, 255, 255, 0));    
  }

  .home-why-us-gradient::after {
    bottom: 0px;
    background: linear-gradient(to top, #F7F7F7, rgba(255, 255, 255, 0));
  }
  .eco-friendly-hr{
    border: 1px solid #FFFEF0;
    height: 0px;
    opacity: 20%;
    margin: 24px 0px;
    width: 100%;
  }
  .marquee img{
    width: 327px;
    height: 217px;
    object-fit: cover;
  }
  .certification-img-container{
    gap: 43px;
  }
  .certification-img{
    height: 80px;
  }
  .testimonial-card{
    padding: 32px 20px;
  }
  .cta-content{
    padding: 40px 16px 40px 16px;
  }
  footer{
    background-color: var(--color-g-50);
    padding: 24px 0px 32px 0px;
  }
  .footer-social-btn{
    padding: 10px 12px;
    border-radius: 4px;
    background-color: var(--color-g-100)!important;
    color: var(--color-g-500)!important;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1.4px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
  }
  /******************* about page styles *******************/
  .about-hero-section{
  padding: 180px 0px 40px 0px;
  }
  .about-us-hr{
  border: 1px solid #E3E3E4;
  height: 0px;
  opacity: 1;
  margin: 24px 0px;
  }
  .speciality-row{
    padding-top: 32px;
    margin-bottom: 32px;
    border-top: 1px solid #E8EDE9;
    opacity: 1;
  }
  .leadership-team-img{
  width: 160px;
  height: 100px;
  }

  .team-gallery-slides {
        margin-top: 64px;
        padding-left: 24px;
        padding-right: 24px;
        gap: 16px;
        cursor: grab;
        overflow-x: auto;
        user-select: none;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    }
    #custom-cursor.active-cursor {
        width: 51px;
        height: 52px;
        background: var(--bg-dark-green);
    }
    .team-gallery-slide-img-odd{
        height: 164px;
        width: 164px;
    }
    .team-gallery-slide-img-even{
        height: 114px;
        width: 183px;
    }
  /******************* Product page Styles *******************/
  .product-hero-section{
    background: url('../images/export-hero-banner-img.jpg') no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding-top: 180px;
    padding-bottom: 40px;
    position: relative;
    background-position: right!important;
  }
  .products-about-hr{
    border: 1px solid #E8EDE9;
    opacity: 1;
    margin: 24px 0px;
  }
  .products-feature-hr{
    border: 1px solid #6E7870;
    height: 0px;
    opacity: 20%;
    margin: 16px 0px;
    width: 100%;
  }
  .export-hero-section{
    background: url('../images/export-hero-banner-img.jpg') no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding-top: 180px;
    padding-bottom: 40px;
    position: relative;
    background-position: right!important;
  }
  /******************* contact page styles *******************/
.contact-hero-section{
  padding: 112px 0px 40px 0px;
}
  .container{
    max-width: calc(100% - 48px);
    padding-left: 0;
    padding-right: 0;
  }
}