* {
  /* font-family: "Oswald", sans-serif; */
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}

body {
  background-color: white;
  color: #000;
}
.container {
  max-width: 1440px;
  width: 100%;
  margin: auto;
}

/* header-sec */
.headerSticky {
  position: sticky !important;
  top: 12px;
  z-index: 9999999;
}
header {
  margin: 12px 20px;
}
.header-main {
  display: flex;
  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
  border-radius: 60px;
  background: #fff;
  box-shadow: 0px 4px 38px 0px rgba(191, 188, 188, 0.25);
}
.header-logo {
  color: var(--Primary-Orange, #ff532a);
  text-align: center;
  font-family: "Oswald";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px;
}
.nav-items {
  display: flex;
  gap: 40px;
}
.nav-items a {
  color: var(--Shade-04, #878080);
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.contact-btn {
  color: var(--Primary-White, #fff);
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  padding: 16px;
  border-radius: 50px;
  background: var(--Primary-Orange, #ff532a);
}
.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* about-section */
.about-title {
  color: var(--Primary-Black, #0a0404);
  font-family: "Lexend", sans-serif;
  font-size: 46px;
  font-style: normal;
  font-weight: 600;
  line-height: 58px; /* 126.087% */
}
.read-btn {
  border-radius: 50px;
  background: var(--Primary-Orange, #ff532a);
  color: var(--Primary-White, #fff);
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  /* width: 144px; */
  padding: 0px 20px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.about-sec {
  padding: 80px 0px;
}
.about-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-head {
  color: var(--Primary-White, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}
.about-text {
  color: var(--Shade-05, #302a2a);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}
.about-main {
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.about-sec {
  position: relative;
}
.about-sec::after {
  position: absolute;
  content: "";
  width: 666px;
  height: 100%;
  background-image: url("/assets/images/about_us_bg.png");
  top: 0;
  right: 0;
}

/* who-sec */
.who-sec {
  padding: 80px 0px;
  position: relative;
}
.who-sec::after {
  position: absolute;
  content: "";
  width: 579px;
  height: 390px;
  background-image: url("/assets/images/about_us_bg.png");
  transform: rotate(-40deg);
  top: -12%;
  left: -5%;
  z-index: -1;
}
.who-sec-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  place-items: center;
}
.who-img {
  width: 100%;
  height: 456px;
}
.who-text {
  color: var(--Shade-05, #605a59);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  letter-spacing: -0.32px;
}
.who-sec-content {
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.who-card-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.who-card {
  padding: 24px;
  border-radius: 16px;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.global-title {
  color: var(--Primary-White, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
}
.global-text {
  color: var(--Shade-05, #878080);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  letter-spacing: -0.32px;
}

/* what-sec */
.what-sec {
  position: relative;
}
.what-sec::after {
  position: absolute;
  content: "";
  width: 665px;
  height: 448px;
  background-image: url("/assets/images/about_us_bg.png");
  top: 0;
  right: 0;
}
.what-sec {
  margin: 60px 20px;
  border-radius: 20px;
  background: #f3f3f3;
  padding: 80px 0px;
}
.what-title-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.what-text {
  color: var(--Shade-05, #605a59);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}
.what-img {
  width: 100%;
  height: 480px;
}
.what-sec-main {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.what-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 117, 98, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.what-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  background: var(--Primary-White, #fff);
}
.what-global-title {
  color: var(--Primary-White, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
}
.what-global-text {
  color: var(--Shade-06, #878080);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  letter-spacing: -0.32px;
}
.what-card-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

/* greenway-sec */
.greenway-sec {
  padding: 80px 0px;
}
.greenWay-white-text {
  color: var(--Primary-Black, #0a0404);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px; /* 175% */
  padding: 10px 4px;
}
.greenWay-gray-text {
  color: var(--Shade-08, #4e4747);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px;
  padding: 10px 4px;
}
.greenway_recycling_icon {
  width: 36px;
  height: 36px;
}
.greenway_recycling_img {
  width: 90px;
  height: 60px;
  border-radius: 50px;
  background: rgba(255, 83, 42, 0.2);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0px 16px;
}
img.greenway-img {
  /* margin-bottom: -20px; */
  /* margin-top: 5px; */
  margin-left: 10px;
  margin-right: 10px;
  width: 95px;
}
.greenway-img2 {
  /* margin-bottom: -32px; */
  /* margin-top: 5px; */
  margin-left: 10px;
  margin-right: 10px;
  width: 95px;
}

/* our-product-sec */
.our-product-sec {
  margin: 60px 20px;
  border-radius: 20px;
  background: #f3f3f3;
  padding: 80px 0px;
}
.our-product-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.product-name {
  color: var(--Primary-White, #FFF);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
  position: relative;
  z-index: 999999;
}
.owl-carousel .item {
  /* height: 10rem; */
  /* background: #f04124; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.owl-carousel .owl-nav button.owl-prev {
  margin-left: -24px;
}
.owl-carousel .owl-nav button.owl-next {
  margin-right: -24px;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
  font-size: 32px !important;
  font-weight: 200 !important;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #948580 !important;
  color: #0a0605 !important;
}
.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
  background: var(--Primary-Orange, #ff532a) !important;
  color: white !important;
}
.owl-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 40%;
}
.our-product-sec {
  position: relative;
  overflow: hidden;
}
.our-product-sec::after {
  position: absolute;
  content: "";
  width: 579px;
  height: 390px;
  background-image: url("/assets/images/about_us_bg.png");
  top: 0;
  right: 0;
}
.our-product-sec::before {
  position: absolute;
  content: "";
  width: 579px;
  height: 390px;
  background-image: url("/assets/images/about_us_bg.png");
  left: -50px;
  bottom: -142.722px;
  transform: rotate(-171.803deg);
}
.our-team .owl-nav {
  top: -21%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.our-team {
  margin-top: 48px;
}
.our-team .owl-nav button.owl-next,
.our-team .owl-nav button.owl-prev {
  background-color: transparent !important;
  color: #0a0404 !important;
  border: 1px solid #0a0404 !important;
}
.our-team .owl-nav button.owl-next:hover,
.our-team .owl-nav button.owl-prev:hover {
  border: none !important;
}

/* why-choose-sec */
.why-choose-sec {
  padding: 80px 0px;
}
.why-choose-sec-title {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.why-choose-main {
  display: flex;
  gap: 38px;
  align-items: center;
  margin-top: 48px;
}
.why-choose-right-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  place-items: center;
}
.why-choose-row {
  margin-right: auto;
}
.number-box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #161312;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--Primary-White, #fff);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
}
.number-text {
  color: var(--Primary-Black, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
}
.number-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.why-horizontal-line {
  height: 1px;
  align-self: stretch;
  background: #1b1715;
  margin: 36px 0px;
}
.number-detail {
  color: var(--Shade-07, #605a59);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  letter-spacing: -0.32px;
}

/* our-journey sec */
.our-journery-sec {
  margin: 60px 20px;
  padding: 80px 0px;
  border-radius: 20px;
  background: #efefef;
  background-image: url("../images/our_journey_bg.png");
}
.timeline-wrapper {
  position: relative;
  height: 600px;
  overflow: hidden;
}
.timeline-track {
  position: relative;
  height: 100%;
  transition: transform 0.6s ease;
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100vw;
  height: 2px;
  background: var(--Shade-04, #cfc7c7);
  transform: translateY(-50%);
}

.timeline-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 245px;
}

.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ebeced;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  outline: #605a59 solid 4px;
  transition: all 0.3s ease;
  z-index: 2;
}

/* .timeline-dot.active {
    background-color: #ff6b35;
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.3);
} */

.timeline-card {
  border-radius: 8px;
  background: #bdbcbc;
  padding: 12px;
  /* margin-bottom: 40px; */
  /* position: relative; */
  transition: all 0.3s ease;
}
.timeline-card:hover {
  transform: translateY(-5px);
}
.timeline-description {
  font-size: 0.85rem;
  color: #bbb;
  line-height: 1.5;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  margin-top: 0;
}
.timeline-card:hover .timeline-description {
  opacity: 1;
  min-height: fit-content;
  margin-top: 12px;
}

/* .timeline-card.active {
    border-left-color: #ff6b35;
    background-color: #2d2d2d;
} */
.timeline-card {
  width: 221px;
}

.timeline-card.above {
  /* margin-bottom: 60px; */
  position: absolute;
  bottom: 37px;
}
.timeline-svg3-right {
  position: absolute;
  bottom: 2px;
  right: -57%;
}

.timeline-card.below {
  /* margin-top: 60px; */
  margin-bottom: 0;
  position: absolute;
  top: 67px;
}
.timeline-svg4 {
  position: absolute;
  right: -78%;
}

.timeline-year {
  color: var(--Primary-Black, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.timeline-title {
  color: var(--Shade-09, #302a2a);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.timeline-description {
  color: var(--Shade-09, #302a2a);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.navigation {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #605a59 !important;
  border: none;
  color: #605a59;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 18px;
}

.nav-button:hover {
  background-color: #ff6b35;
  color: white;
  transform: scale(1.1);
  border: transparent !important;
}

.nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.nav-button:disabled:hover {
  background-color: #333;
  transform: none;
}

.nav-prev {
  position: absolute;
  left: -80px;
}

.nav-next {
  position: absolute;
  right: -80px;
}

.timeline-indicators {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 8px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #444;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background-color: #ff6b35;
  transform: scale(1.2);
}
svg.timeline-svg2 {
  position: absolute;
  left: -59%;
  top: 7px;
}
svg.timeline-svg3 {
  position: absolute;
  bottom: 7px;
  left: -73%;
}
/* core sec */
.core-sec {
  padding: 80px 0px;
}
.core-sec-title-row {
  /* display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 674px;
margin: auto;
text-align: center; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.core-vertical-line {
  background: #e5e5e5;
  width: 1px;
  align-self: stretch;
  margin: 0px 36px;
}
.core-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
}
.core-part {
  width: 50%;
}
.core-icon {
  min-width: 64px;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: rgba(255, 83, 42, 0.2);
}
.core-item {
  display: flex;
  gap: 24px;
}
.core-value {
  color: var(--Primary-Black, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
}
.core-text {
  color: var(--Shade-07, #605a59);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  letter-spacing: -0.32px;
}
.core-item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.core-horizontal-line {
  width: 100%;
  height: 1px;
  background: #e5e5e5;
  margin: 36px 0px;
}

/* our-team-sec */
.our-team-sec {
  margin: 60px 20px;
  padding: 80px 0px;
  border-radius: 20px;
  background: #f3f3f3;
}
.our-team-name {
  color: var(--Primary-Black, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
}
.our-team-text {
  color: var(--Shade-07, #605a59);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}
.our-team-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.our-team-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* contact-us sec */
.contact-sec {
  padding: 80px 0px;
}
.contact-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-form {
  border-radius: 20px;
  background: #f8f8f8;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.contact-img {
  width: 100%;
  height: 672px;
  object-fit: contain;
}
.contact-text {
  color: var(--Shade-05, #a9a2a1);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.contact-main-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input-class {
  padding: 14px 12px;
  border-radius: 8px;
  border: 1px solid var(--Shade-02, #f1e9e9);
  background: #fff;
  color: var(--Shade-06, #878080);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}
.input-class2 {
  /* padding: 14px 12px; */
  border-radius: 8px;
  /* border: 1px solid var(--Shade-02, #F1E9E9);
    background: #FFF; */
  color: var(--Shade-06, #878080);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}
.contact-select {
  padding: 14px 12px;
  border-radius: 8px;
  border: 1px solid var(--Shade-02, #f1e9e9);
  background: #fff;
}
.form-first-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-main-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.textarea-class {
  padding: 14px 12px;
  border-radius: 8px;
  border: 1px solid var(--Shade-02, #f1e9e9);
  background: #fff;
  color: var(--Shade-06, #878080);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}
.submit-btn {
  border-radius: 50px;
  background: var(--Primary-Orange, #ff532a);
  display: flex;
  width: 137px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  color: var(--Primary-White, #fff);
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  cursor: pointer;
}

/* footer-sec */
.footer-sec {
  margin: 50px 20px;
  border-radius: 20px;
  background: #000;
  margin-bottom: 20px !important;
}
.footer-main {
  padding: 72px 0px;
  display: flex;
  gap: 150px;
}
.social-icon {
  display: flex;
  gap: 12px;
}
.footer-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  max-width: 300px;
}
.footer-right {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-links-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-subtitle {
  color: var(--Shade-01, #fcf4f4);
  font-family: "Inter";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px; /* 144.444% */
  margin-bottom: 16px;
}
.footer-link-text {
  color: var(--Shade-06, #878080);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.footer-horizontal {
  width: 100%;
  height: 1px;
  background-color: #302a2a;
}
.copy-right {
  padding: 24px 0px;
  color: var(--Shade-06, #878080);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-align: center;
}
/* .our_team_img{
    width: 293px;
    height: 390px;
    border-radius: 20px;
    object-fit: cover;
} */
a#myBtn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #ff532a;
  color: white;
  cursor: pointer;
  padding: 20px;
}
#myBtn {
  /* opacity: 0; */
  transition: opacity 0.3s ease;
  /* other positioning styles… */
}
#myBtn.visible {
  opacity: 1;
}

/* .hero-sec{
    height: 100vh;
    background-color: #0A0605;
    position: relative;
}
.hero-main-sec{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.hero-text{
color: var(--Primary-White, #FFF);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
font-family: 'Lexend';
font-size: 148px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -1.48px;
} */

/* loader sec */
.loader-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 2rem 0;
  position: absolute;
  width: 100%;
  background: white;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loader-sec.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loader-main-sec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 70px;
  width: 100%;
}

.main-text {
  font-size: 70px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 1rem;
  opacity: 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(100px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    left 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    top 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.main-text.visible {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.main-text.move-top-left {
  left: -5%;
  top: 24px;
  transform: scale(0.5);
  opacity: 1;
}

.main-sec {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-sec.fade-in {
  opacity: 1;
  pointer-events: auto;
}

.loader-text-container {
  position: relative;
  height: 190px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}
.logo-text {
  font-family: "Oswald" !important;
}
/* p.loader-text.logo-text.active{ */
p.loader-text.logo-text.active.move-cross {
  position: fixed !important;
}

.loader-text {
  position: absolute;
  color: var(--Primary-White, #0a0404);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Lexend";
  font-size: 100px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.48px;
  transform: translate3d(0, 100px, 0);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */
  width: fit-content;
}

.loader-text.active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.loader-text.exit {
  /* transform: translate3d(0, -100px, 0); */
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53),
    opacity 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.loader-greenway-text {
  color: var(--Shade-02, #0a0404);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  transform: translate3d(0, 0, 0);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Cross movement animation for GreenWay text */
.loader-text.move-cross {
  transform: translate3d(-40vw, -38vh, 0) scale(0.3);
  opacity: 0.8;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 9999;
}
p.loader-greenway-text.show.hide {
  transform: translate3d(0, 100px, 0);
  opacity: 0;
}
/* Show animation for initial appearance */
.loader-greenway-text.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.loader-welcome-text.hide {
  transform: translate3d(0, 100px, 0);
  opacity: 0;
}

.welcome-text {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  text-align: center;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* position: relative; */
  z-index: 1;
  width: fit-content;
  margin: 0 auto;
}

.welcome-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* hero-sec */
.hero-sec-video {
  border-radius: 20px;
  width: 100%;
  height: 900px;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
  object-fit: cover;
}
.hero-sec {
  margin: 0px 20px;
  position: relative;
}
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hero-text {
  border-radius: 96px;
  border: 1px solid #8f8c8c;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  padding: 8px 16px;
  color: var(--Shade-01, #fcf4f4);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.hero-title {
  color: var(--Primary-White, #fff);
  text-align: center;
  font-family: "Oswald";
  font-size: 148px;
  font-style: normal;
  font-weight: 400;
  line-height: 150px; /* 101.351% */
}
.hero-subtitle {
  color: var(--Shade-02, #fff);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.hero-subtitle {
  visibility: hidden;
}
.hero-subtitle.typewriter {
  visibility: visible;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid orange;
  animation: blink-caret 0.75s step-end infinite;
}
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}
.hero-main-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.our-mission-main-sec {
  display: flex;
  gap: 38px;
}
.our-mission-title {
  color: var(--Primary-Black, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Lexend";
  font-size: 46px;
  font-style: normal;
  font-weight: 600;
  line-height: 58px; /* 126.087% */
}
.our-mission-sec {
  padding: 80px 0px;
}
.our-mission-text {
  color: var(--Shade-06, #878080);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  letter-spacing: -0.32px;
}
.our-mission-text-main {
  display: flex;
  flex-direction: column;
  gap: 38px !important;
}
select#language {
  padding: 13px;
}

/* Language Selector Styles */
.language-selector {
  position: relative;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  /* background: white; */
  /* border: 2px solid #e2e8f0; */
  border-radius: 7px;
  /* padding: 6px 16px; */
  /* min-width: 160px; */
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 500;
  color: #4a5568;
}

.dropdown-btn:hover {
  border-color: #3182ce;
  /* box-shadow: 0 4px 12px rgba(49, 130, 206, 0.15); */
}

.dropdown-btn:focus {
  outline: none;
  border-color: #3182ce;
  /* box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1); */
}

.flag {
  font-size: 24px;
  line-height: 1;
}

.language-name {
  flex: 1;
  text-align: left;
}

.arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
  color: #a0aec0;
}

.dropdown.open .arrow {
  transform: rotate(180deg);
}

.dropdown-content {
  position: absolute;
  top: 100%;
  /* left: 0; */
  right: 0;
  background: white;
  /* border: 1px solid #e2e8f0; */
  border-radius: 12px;
  /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
  z-index: 1000;
  margin-top: 8px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.dropdown.open .dropdown-content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  min-width: 160px !important;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-weight: 500;
  color: #4a5568;
}

.dropdown-item:hover {
  background-color: #ebf8ff;
}

.dropdown-item.selected {
  background-color: #ebf8ff;
}

.checkmark {
  margin-left: auto;
  color: #3182ce;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dropdown-item.selected .checkmark {
  opacity: 1;
}
/* Click outside overlay */
.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
}

.dropdown-overlay.active {
  display: block;
}

/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 5px;
  z-index: 1002;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 3px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background-color: white;
  transition: left 0.3s ease;
  z-index: 99999999;
  overflow-y: auto;
}

.mobile-menu.active {
  left: 0;
}

.mobile-menu-header {
  padding: 20px;
  /* border-bottom: 1px solid #eee; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-header img {
  width: 100px;
  height: 32px;
  object-fit: contain;
}

.mobile-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: black;
}

.mobile-nav-items {
  padding: 20px;
}

.mobile-nav-items a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: black;
  font-weight: 500;
  font-size: 16px;
  /* border-bottom: 1px solid #f0f0f0; */
  transition: all 0.3s ease;
}
a.contact-btn {
  color: white;
}
.mobile-nav-items a:hover {
  background-color: #f8f9fa;
  color: #007bff;
  padding-left: 30px;
}

.mobile-menu-footer {
  padding: 20px;
  /* border-top: 1px solid #eee; */
}

.mobile-contact-btn {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #007bff;
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.mobile-contact-btn:hover {
  background-color: #0056b3;
}

.mobile-language-selector {
  margin-top: 10px;
}

.mobile-language-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.mobile-language-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-language-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.mobile-language-item:hover {
  color: #007bff;
}

.mobile-language-item .flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* greenway-sec Image containers */
.greenway-main-sec {
  cursor: pointer;
}
.greenway_recycling_img,
.greenway-main-img,
.greenway-third-img {
  display: none;
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  transition: all 0.5s ease-in-out;
  margin: 0 15px;
  vertical-align: middle;
}

.greenway_recycling_icon,
.greenway-img,
.greenway-img2 {
  max-width: 80px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.greenway-img,
.greenway-img2 {
  max-width: 120px;
}

/* Hover effects */
.greenway-main-sec:hover .greenway_recycling_img,
.greenway-main-sec:hover .greenway-main-img,
.greenway-main-sec:hover .greenway-third-img {
  display: inline-flex !important;
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: imageAppear 0.5s ease-out forwards;
}

@keyframes imageAppear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Staggered animation delays */
.greenway-main-sec:hover .greenway_recycling_img {
  animation-delay: 0.1s;
}

.greenway-main-sec:hover .greenway-main-img {
  animation-delay: 0.2s;
}

.greenway-main-sec:hover .greenway-third-img {
  animation-delay: 0.3s;
}

.product-img-card {
  height: 360px;
  border-radius: 16px;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}
.read-more-btn {
  color: var(--Primary-Black, #0a0404);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  background-color: transparent;
  border: none;
  margin-top: 20px;
  cursor: pointer;
}
svg.timeline2018 {
  position: absolute;
  transform: scaleX(-1);
  top: -66px;
  left: -175px;
}

/* Basic Popup Styling */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-box {
  background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  max-width: 400px;
  width: 100%;
  position: relative;
}

.popup-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.popup-box input {
  width: 95%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.popup-box select {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.popup-box button {
  padding: 10px 15px;
  background: var(--Primary-Orange, #ff532a);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.popup-box .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #aaa;
}

.popup-message {
  margin-top: 10px;
  font-size: 14px;
  color: green;
}

.hero-content {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%; /* Take full height to center content */
  width: 100%;
}

.hero-main-content {
  position: relative;
  height: 7rem; /* Fixed height to contain one text at a time */
  overflow: hidden;
  display: flex; /* Use flex to center text within its container */
  align-items: center;
  justify-content: center;
  width: 500px;
}

/* --- HERO LOADER TEXT ANIMATION --- */
.hero-loader-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  font-weight: 600;
  color: white;
  text-align: center;
  white-space: nowrap;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 0;
  font-family: "Lexend";
}
.hero-loader-text.active {
  transform: translateY(0%);
  opacity: 1;
  z-index: 2;
}
.hero-loader-text.exiting {
  transform: translateY(-100%);
  opacity: 0;
  z-index: 1;
}

/* --- HERO DESCRIPTION TYPING ANIMATION --- */
.hero-description-text {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 1.5rem;
  min-height: 2.5rem;
  letter-spacing: 0.02em;
  font-family: "Inter", sans-serif;
  white-space: pre;
  overflow: hidden;
  border-right: 2px solid #fff;
  width: fit-content;
  animation: none;
}
.hero-description-text.typing {
  animation: blink-caret 0.8s step-end infinite;
}
@keyframes blink-caret {
  0%,
  100% {
    border-color: #fff;
  }
  50% {
    border-color: transparent;
  }
}

/* .product-card{
    position: relative;
    cursor: pointer;
}
.product-card::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    box-shadow: inset 0 -150px 150px -50px rgba(0, 0, 0, 0.9);
    bottom: 0;
    border-radius: 16px;
}
.product-card-detail{
    position: absolute;
    bottom: 0;
    padding: 16px;
}
   .product-description {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            line-height: 1.5;
            max-height: 0;
            overflow: hidden;
            transform: translateY(-10px);
            position: relative;
            z-index: 9999;
            transition: max-height 0.4s ease, transform 0.3s ease;
        }
        .product-card:hover .product-description {
            max-height: 100px;
            transform: translateY(0);
        } */


        .product-container {
            width: 100%;
            height: 360px;
            perspective: 1000px; 
        }

        .product-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.7s; 
            transform-style: preserve-3d; 
        }

        .product-container:hover .product-card-inner {
            transform: rotateY(180deg); 
        }

        .product-card-front,
        .product-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden; /* For Safari */
            backface-visibility: hidden; /* Equivalent to backface-hidden */
            border-radius: 16px; /* Equivalent to rounded-md */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Simple shadow */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Ensures image corners are rounded */
        }

        .product-card-front {
            background-color: #fff;
        }

        .product-card-front img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Equivalent to object-cover */
            border-radius: 0.5rem; /* Match parent border-radius */
        }

        .product-card-back {
            background-color: #f9fafb; /* Equivalent to bg-gray-50 */
            transform: rotateY(180deg); /* Equivalent to rotate-y-180 */
            flex-direction: column;
            color: #374151; /* Text color */
        }

        .product-name {
color: var(--Primary-Black, #0A0404);
font-feature-settings: 'liga' off, 'clig' off;
font-family: 'Inter';
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 36px; 
        }

        .product-description {
color: var(--Shade-07, #605A59);
font-feature-settings: 'liga' off, 'clig' off;
font-family: 'Inter';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
margin: 0px 20px;
        }


/* Animation keyframes */
/* @keyframes slideInFromBottom {
            0% {
                transform: translateY(100%);
                opacity: 0;
            }
            100% {
                transform: translateY(0%);
                opacity: 1;
            }
        }

        @keyframes slideOutToTop {
            0% {
                transform: translateY(0%);
                opacity: 1;
            }
            100% {
                transform: translateY(-100%);
                opacity: 0;
            }
        } */

/* Classes for animation control */
/* .hero-loader-text.active {
            animation: slideInFromBottom 3s forwards; 
            pointer-events: auto;
        }

        .hero-loader-text.exiting {
            animation: slideOutToTop 3s forwards; 
            pointer-events: none;
        } */


  /* Main Phone Input Container */
        /* .phone-input-container {
            display: flex;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background-color: #fff;
            width: 100%; 
        } */

        /* Custom Select Wrapper */
        .custom-select-wrapper {
            position: relative;
            width: 80px; 
            border-right: 1px solid #eee;
            display: inline-block; 
        }

        /* Custom Select Trigger (the visible part of the dropdown) */
        .custom-select-trigger {
            display: flex;
            align-items: center;
            padding: 10px 10px;
            cursor: pointer;
            background-color: #f9f9f9;
            border-radius: 8px 0 0 8px; 
            position: relative;
            z-index: 2; 
            outline: none;
            height: fit-content;
            box-sizing: border-box;
        }

        .custom-select-trigger:focus {
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); 
        }

        .flag-icon {
            width: 24px;
            height: 18px;
            margin-right: 8px;
            border: 1px solid #eee; 
            box-shadow: 0 0 2px rgba(0,0,0,0.1);
            object-fit: cover; 
        }

        .selected-prefix {
            font-weight: bold;
            margin-right: 5px;
            color: #333;
        }

        .selected-name {
            color: #666;
            font-size: 0.9em;
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            max-width: 80px; 
        }

        /* Custom Options Dropdown */
        .custom-options {
            position: absolute;
            top: 100%; /* Position below the trigger */
            left: 0; /* Simplified positioning */
            width: 100%; /* Simplified positioning */
            background-color: #fff;
            border: 1px solid #ccc;
            border-top: none;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            z-index: 99; /* Increased z-index to ensure it's on top */
            max-height: 300px;
            flex-direction: column; /* Keep flex-direction for content layout */

            /* Key change: Use display: none/flex for visibility */
            display: none; /* Hidden by default */
            opacity: 0; /* For transition effect */
            visibility: hidden; /* For transition effect */
            transform: translateY(-10px); /* For transition effect */
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        }

        .custom-options.open { /* Class added by JS when dropdown is open */
            display: flex; /* Show as flex when open */
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Search Box */
        .search-box {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .search-input {
            width: calc(100% - 20px); /* Account for padding */
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 0.9em;
            outline: none;
        }

        .search-input:focus {
            border-color: #007bff;
        }

        /* Options List */
        .options-list {
            max-height: 240px; /* Adjust based on search box height */
            overflow-y: auto;
            padding: 5px 0;
        }

        .options-list::-webkit-scrollbar {
            width: 8px;
        }

        .options-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .options-list::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .options-list::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .option {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .option:hover {
            background-color: #f0f0f0;
        }

        .option.hidden { /* Class added by JS for filtering */
            display: none;
        }

        .option .flag-icon {
            width: 24px;
            height: 18px;
            margin-right: 8px;
            border: 1px solid #eee;
            box-shadow: 0 0 2px rgba(0,0,0,0.1);
        }

        .option .prefix {
            font-weight: bold;
            margin-right: 5px;
            color: #333;
        }

        .option .name {
            color: #666;
            font-size: 0.9em;
        }

        .no-results {
            padding: 10px 15px;
            color: #666;
            text-align: center;
            display: none; /* Hidden by default, shown by JS */
        }

        .no-results.show {
            display: block;
        }

        /* Phone Number Input */
        .phone-number-input {
            flex: 1;
            padding: 10px 15px;
            border: none; /* Remove individual border */
            outline: none;
            font-size: 1em;
            color: #333;
            border-radius: 0 8px 8px 0; /* Apply border-radius only to the right side */
            background-color: #fff;
        }

        .phone-number-input::placeholder {
            color: #aaa;
        }